5.5 HTML标签样式默认性
这个特性没有在属性的基本特征说明。w3规范给出每种标签的默认样式，由浏览器负责实现，浏览器自动为标签添加与语义一致的样式，这就是标签样式默认性。
w3c链接 https://html.spec.whatwg.org/multipage/rendering.html
部分内容如下
address, blockquote, center, dialog, div, figure, figcaption, footer, form,
header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
display: block;
}
h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
blockquote, figure, listing, p, plaintext, pre, xmp {
margin-block: 1em;
}
这份规范仅是建议而不是正式规范。不同浏览器实现时，核心属性会遵守规范，以具体浏览器为准。
5.5.1 查看标签的默认样式
错误理解ConceptError002：不知道如何查看标签的默认样式。
示例代码1
<body>
小步教程 xiaobuteach.com
</body>
运行效果。文本内容距页面的左边与右边有一定的间距，标记如下。
选中元素—“样式”面板—“用户代理样式表（User Agent Stylesheet）”。
“用户代理样式表”表示浏览器为标签设置的默认样式，body设置内容包括：display:block表示块元素，会自动换行，margin: 8px对应空白间距。
示例代码2
<body>
<h1>小步教程 xiaobuteach.com</h1>
<div>这是div1</div>
<div>这是div2</div>
<p>这是p1</p>
<p>这是p2</p>
<div>这是div3</div>
</body>
运行效果如下。h1加粗大字号且垂直间距较大，div元素间距正常，p元素间距较大。
查看h1标签的默认样式。font-size表示字体大小，font-weight: bold表示字体加粗，margin-block表示垂直上下间距。
（1）font-size的em单位表示相对于父元素字体大小font-size的比例值；margin系列的em单位表示相对当前元素font-size的比例值。实际项目较少使用em，通常用px。
（2）margin-block对应margin垂直方向，margin-block-start与margin-block-end通常等价margin-top与margin-bottom；margin-inline对应margin水平方向，margin-inline-start与margin-inline-end通常等价margin-left与margin-right。margin-block与margin-inline系列属性较少直接使用。
5.5.2 违反语义的修改标签样式
DevError007：违反语义的修改标签的样式，违反语义的使用标签。
页面开发会根据需求修改标签的部分CSS属性，但不建议修改标签核心CSS属性。
从实现角度，可以将div的display设置成inline，将span的display设置成block，将head元素设置成显示，但这不符合它的语义，此类样式设置只会降低HTML代码的可读性。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
span{
display: block;
}
div{
display: inline;
}
head{
display: block;
border: 1px solid #0aaa76;
height: 10px;
}
</style>
</head>
<body>
<span>小步教程</span>
<span>xiaobuteach.com</span>
<span>
<div>HTML</div>
<div>CSS</div>
<div>JS</div>
</span>
</body>
</html>
实际项目不会这么做。通过这段完全错误的代码能够理解：什么叫标签的语义，什么叫标签的样式与语义相符，为什么CSS提供这么多标签，如何选择它们。
5.5.3 标签的本质与选择
标签的本质是语义。开发时选择使用哪个标签，重点不是看它的样式而是语义，语义通常无法修改，样式可以根据需要修改；标签语义需与内容语义一致。项目通常会对标签样式重新设置，特别是各项尺寸值，例如font-size、margin。良好的页面代码需要合理使用标签，基于合理的标签代码才能编写合理的CSS代码。
语义。语义是一个简单且日常运用很多的概念，但又从未使用过此术语。这里不给语义下一个严格定义，仅举例说明。例如，黑色是黑色的语义，白色是白色的语义。当回答“它是什么”的问题时，“什么”的答案就是“它”的语义。如果通俗化表达，语义即意思。
要求标签语义与内容语义相符，示例代码如下。
<body>
<h1>《CSS入门项目小步教程》简介</h1>
<p>这是一部适合零基础同学并想扎实掌握CSS的教程。省略一百字...</p>
<p>这是一部真正CSS体系化的教程。省略两百字...</p>
<p>这是一部通过模型讲解CSS属性的教程。省略三百字...</p>
</body>
标签语义与内容语义不符，即使实现目标效果也属于错误代码。示例代码如下。
<body>
<p>《CSS入门项目小步教程》简介</p>
<h1>这是一部适合零基础同学并想扎实掌握CSS的教程。省略一百字...</h1>
<h1>这是一部真正CSS体系化的教程。省略两百字...</h1>
<h1>这是一部通过模型讲解CSS属性的教程。省略三百字...</h1>
</body>
5.5.4 常用标签的语义与默认样式
语义非常重要，再次小结最常用标签的语义与默认样式。
（1）body。语义：网页主体内容区。默认样式：四个方向外边距8px。
body {
display: block;
margin: 8px;
}
（2）div。语义：块容器、块级元素。支持嵌套其它标签或继续嵌套div。默认样式：换行。
div {
display: block;
}
（3）ul与li。ul语义：无序列表。ul默认样式：换行、上下方向外边距、左内边距。
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li语义：列表项。li默认样式：换行、前面显示黑色实心圈。
li {
display: list-item;
}
（4）span。语义：文本容器、行内元素。一行内可有多个span元素。默认样式：无。
（5）a。语义：链接。默认样式：文本颜色蓝色、光标手形、下划线，重要的是display与span一样采用inline。
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
（6）h1~h6。语义：1~6级标题。默认样式：换行、大号字体、上下外边距。
h1 {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
（7）p。语义：段落。默认样式：换行，上下外边距。
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
（8）head等。head、style、title等标签默认样式display: none，不显示。
