网站开发：初始化 CSS 样式

不同浏览器（如 Chrome、Firefox、Safari、IE 等）对 HTML 元素有各自的默认样式。例如，不同浏览器对标题元素的字体大小、边距，和列表元素的缩进和列表样式，段落元素的行高和边距等的设置可能不同。这种差异会导致网页在不同浏览器中显示不一致，影响用户体验。所以需要初始化 CSS 样式，这是前端开发中一个重要的实践。

◆ <q>取消默认引号

在 HTML 标准中，<q> 元素用于表示短的行内引用，浏览器通常会默认在 <q> 元素包裹的文本前后添加引号。

q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

open - quote 和 close - quote 是 content 属性的特殊值，它们会根据文档的语言和上下文显示合适的引号。

所以如果取消默认引号，只要重写content:属性即可，如下：

q:before,
q:after {
    content: '';
}

在 CSS2.1 规范中引入了 content: none; 这个值，其目的就是为了明确地移除伪元素，更符合某些严格的设计要求，但为了兼容旧版浏览器， content: ”还得保留，如下：

q:before,
q:after {
    content: '';
    content: none;
}

◆ 表格进行样式初始化

table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption,
th,
td {
    font-weight: 300;
    text-align: left;
}

边框合并、消除单元格间距，并统一设置表格标题、表头和单元格的字体粗细和文本对齐方式，使表格在不同浏览器中呈现出一致且整洁的外观。

◆ 标题元素clear: both;

标题元素强制显示在之前所有浮动元素的下方，避免与浮动元素重叠，保证标题元素能在一个新的行开始显示，从而使页面布局更加清晰和规整。

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

◆ HTML 根元素

html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

overflow-y: scroll：不同浏览器，滚动条的显示行为有所不同。所以统一设置确保页面始终有垂直滚动条。

font-size: 100%;以 <html> 元素的字体大小为基础，以便后续子元素可以使用相对单位

-webkit-text-size-adjust: 100%和-ms-text-size-adjust: 100%：确保页面文本布局按照开发者的预期显示，避免因浏览器自动调整字体大小而导致的布局问题。

◆ <a>链接元素

a:focus {
    outline: none;
}

移除获得焦点的超链接的默认轮廓线，因为默认的轮廓线会影响页面的整体美观度。

◆ <article>等语义化元素

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

在一些较旧的浏览器中，可能不认识这些新的语义化标签，也就不会将它们按照块级元素的规则进行渲染。通过设置 display: block;，可以强制这些元素以块级元素的形式显示，确保页面在旧浏览器中也能保持正确的布局。

◆ `audio`、`canvas` 和 `video` 元素

audio,
canvas,
video {
    display: inline-block;
}

在不同浏览器中，audio、canvas 和 video 元素的默认显示方式可能存在差异。通过设置确保以统一 inline-block 方式显示，避免布局问题。设置为 inline-block也可以更灵活地控制它们的宽度、高度和边距，方便进行页面布局。

audio:not([controls]) {
    display: none;
}

对于那些没有设置 controls 属性的 <audio> 元素，将其隐藏，不显示在页面上。避免给用户带来不必要的困扰。也能保持页面的整洁。