常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:
【定义和用法】
h1 到 h6 标签用于定义 HTML 标题。
h1 定义最重要的标题。h6 定义最不重要的标题。
[注意]
每个页面只使用一个 h1 - 这应该代表整个页面的主要标题/主题。此外,请不要跳过标题级别 - 从 h1 开始,然后使用 h2,以此类推。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。
【实例】
例子 1
六个不同的 HTML 标题:
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
例子 2
设置标题的背景颜色和文本颜色(使用 CSS):
<h1 style="background-color:DodgerBlue;">龙腾飞网络科技</h1> <h2 style="color:Tomato;">龙腾飞网络科技</h2>
例子 3
设置标题的对齐方式(使用 CSS):
<h1 style="text-align:center">这是标题 1</h1> <h2 style="text-align:left">这是标题 2</h2> <h3 style="text-align:right">这是标题 3</h3> <h4 style="text-align:justify">这是标题 4</h4>
【默认的 CSS 设置】
例子 1
大多数浏览器将使用以下默认值显示 h1 元素:
h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold;}
例子 2
大多数浏览器将使用以下默认值显示 h2 元素:
h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold;}
例子 3
大多数浏览器将使用以下默认值显示 h3 元素:
h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold;}
例子 4
大多数浏览器将使用以下默认值显示 h4 元素:
h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold;}
例子 5
大多数浏览器将使用以下默认值显示 h5 元素:
h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold;}
例子 6
大多数浏览器将使用以下默认值显示 h6 元素:
h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold;}