三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

HTML第二章 文本标签

HTML第二章 文本标签

2.文本标签

2.1 标题和段落标签

  • 标题标签(块级标签)
    • 格式:h1~h6

  • 段落标签(块级标签)
    • 格式:p

块级标签,在之前和之后都换行

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>标题和段落标签</title></head><body><!-- 标题标签 h1~h6 表示不同级别的的标题 --><h1>h1 这是一个标题</h1><h2>h2 这是一个二级标题</h2><h3>h3 这是一个三级标题</h3><h4>h4 这是一个四级标题</h4><h5>h5 这是一个五级标题</h5><h6>h6 这是一个六级标题</h6><h7>h7 这是一个七级标题</h7><h8>h8 这是一个八级标题</h8><!-- 段落标签 p 表示段落 -->测试内容 这是一个段落 今天没安排繁重的计划,泡一杯温水,翻几页闲书,看着窗外云絮慢慢飘移。偶尔放空发呆,不用强迫自己时刻上进,允许自己短暂虚度光阴。人间本就庸常,那些微小的欢喜,才是支撑生活的温柔底气。<p>p 这是一个段落</p><p>p 今天没安排繁重的计划,泡一杯温水,翻几页闲书,看着窗外云絮慢慢飘移。偶尔放空发呆,不用强迫自己时刻上进,允许自己短暂虚度光阴。人间本就庸常,那些微小的欢喜,才是支撑生活的温柔底气。</p></body></html>

2.2 换行和水平线标签

  • 换行标签(行内标签)
    • 格式:<br>
  • 水平线标签(块级标签)
    • 格式:<hr>

换行标签<br>与 段落标签p的区别

  1. 段落标签
--》本行内容 空行 --》下一段内容 空行
  1. 换行标签
--》本行内容 --》下一段内容
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>换行和水平线</title></head><body><!-- 换行标签 br 表示换行 -->用户名:张三 密码:123456<br>用户名:李五 密码:654321<p>这是一个段落</p>用户名:李四 密码:65456<!-- 水平线标签 hr 表示水平线 --><hr>这是第二个段落</body></html>

2.3 * 字体标签

仅作了解——后续字体样式使用 CSS实现

标签说明
font修饰字体,已弃用
b/strong加粗,b 渲染加粗,修饰文字样式,strong 强调文字内容(声明语义重要性)
i/em斜体,i 渲染斜体,修饰文字样式,em 强调文字内容
s/del加删除线,s 使用删除线渲染文本;当表示文本编辑时,del 表示一些从文档中删除的文字内容
q段文本标签,加双引号
u/ins渲染为实线下划线,可用 CSS 替换。ins 表示文档编辑时提倡使用,使用 a 标签时尽量不使用下划线
sup上标字体
sub下标字体
big/small大小号字体
pre保留文本中的空白字符(包括空格和换行符),保持原始格式,适用于展示代码或与格式文本

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>字体标签</title></head><body>测试内容样例<hr><p><!-- font 表示字体 --><fontface="演示流云楷"size="3">这是一个段落</font></p><p><!-- b/strong 表示加粗字体 --><b>这是一个段落</b><strong>这是一个段落</strong></p><p><!-- i/em 表示斜体字体 --><i>这是一个段落</i><em>这是一个段落</em></p><p><!-- del/s 表示删除线字体 --><del>这是一个段落</del><s>这是一个段落</s></p><p><!-- q 表示引用字体 --><q>这是一个段落</q></p><p><!-- u/ins 表示下划线字体 --><u>这是一个段落</u><ins>这是一个段落</ins></p><p><!-- sub/sup 表示下标线字体 -->1<sub>这是一个段落</sub>2<sup>这是一个段落</sup></p><p><!-- big/small 表示大号字体和小号字体 --><big>这是一个段落</big><small>这是一个段落</small></p><p><!-- pre 表示预格式化字体 --><pre>静夜思 李白(唐) 床前明月光 疑是地上霜 举头望明月 低头思故乡</pre></p></body></html>

  • 特殊字符
    • 格式:&
    • 常见总结如下:
标签符号说明
&nbsp;空格符
&copy;©©版权
&lt;<<小于号
&gt;>>大于号
&yen;¥¥人民币
&quot;""引号
&reg;®®商标
&plusmn;±±加减
&permil;‰千分号
&divide;÷÷除号
← 返回列表