二、HTML文档布局详解

目次

• 2.1 html根本入门
  
  
  
  • 2.1.1 标签、元素与属性
    
  • 2.1.2 根本语法
    
  • 2.1.3 文档模式
    
  
  
• 2.2 文档核心骨架
  
  
  
  • 2.2.1 DOCTYPE声明与作用
    
  • 2.2.2 根元素与lang属性
    
  • 2.2.3 头部
    
  • 2.2.4 主体
    
  • 2.2.5 解释与代码可读性
    
  
  
• 2.2 头部head元素详解
  
  
  
  • 2.2.1 元素与SEO根本
    
  • 2.2.2 元数据详解
    
  • 2.2.3 引入外部资源
    
  • 2.2.4 元素基准链接
    
  
  
• 2.4 HTML元素与全局属性简介
  
  
  
  • 2.4.1 主体布局元素
    
  • 2.4.2 非主体布局元素
    
  • 2.4.3 全局属性
    
  
  

CSDN: https://blog.csdn.net/South_Rosefinch/article/details/158811336
2.1 html根本入门

2.1.1 标签、元素与属性

• 标签：标签是HTML中最根本的标记符号，用于告知欣赏器内容的范例。它们由尖括号 包裹。标签告急分为两种情势：
  
  
  
  • 成对标签：由开始标签和竣事标签构成，用于包裹内容。比方 是开始标签，
    是竣事标签。
    
  1. <元素名称>要控制的元素</元素名称>

  复制代码
  
  
  • 单独标签（或自闭合标签）：这类标签无需包裹内容，也没有竣事标签。比方用于插入图像的 <img>标签，用于换行的
    标签。在当代HTML5中，通常直接写作 <img>、
    ，其末端的斜杠 /可以省略。
    
  
  
• 属性：属性为标签提供额外的信息或设置，总是被放置在开始标签或单独标签内部。
  
  
  
  • 其根本语法为 名称=“值”。比方，在链接标签 中，href就是属性名，其值指明白链接的目标地点。
    

  href是 “hypertext reference”（超文本引用）的缩写，其唯一且确定的作用就是为 （锚点/链接）标签指定目标 URL 地点。欣赏器在剖析到 href属性时，会严酷按照标准处置惩罚其值，用于导航。
  

  
  
• 元素：一个完备的HTML元素通常由 开始标签 + 内容 + 竣事标签 共同构成。元素是网页内容和布局的现实承载单元。
  
  
  
  • 对于成对标签，元素即从开始标签到竣事标签的全部部分。比方 这是一段文本。
    就是一个完备的段落元素。
    
  • 对于单独标签，元素就是标签自己及其属性。比方
    就是一个图像元素。
    
  
  

简单说，标签是语法符号，而元素是由标签（及内容）界说的一个完备布局。

2.1.2 根本语法

誊写HTML时必要依照以下几个根本的语法规则，以确保代码被欣赏器正确剖析和出现。
（1）正确嵌套
当使用多个成对标签时，它们必须像“套娃”一样被正确地嵌套。核心原则是：后开始的标签必须先闭合。

• 正确示例：这是加粗的笔墨。
  

<strong>：表现内容自己很告急，欣赏器默认将其体现为加粗。
<b>：仅表现视觉上加粗，没有语义上的告急性。

（2）自合标签的写法
对于没有竣事标签的元素（如图像<img>、换行
），在当代HTML5标准中，直接使用单个标签即可，无需斜杠。早期

<img />

或
的写法源于XHTML，在HTML5中已被简化。

• HTML5标准写法：
  ，
  

（3）小写约定
固然HTML自己不区分标签和属性名的巨细写，但行业通行的最佳实践是全部使用小写字母。这能极大提拔代码的规范性和可读性，是专业开辟的必备风俗。

• 保举：，
  
• 不保举：，
  

2.1.3 文档模式

为了正确处置惩罚差别期间的网页代码，欣赏器内置了差别的文档渲染模式。模式决定了欣赏器怎样剖析HTML和CSS，尤其是怎样处置惩罚与标准不符的旧代码。相识这些模式，能资助我们明白为何一个简单的声明云云告急。
告急渲染模式简介:
欣赏器告急存在三种渲染模式：

• 怪异模式
  
  
  
  • 活动：欣赏器会模仿1990年代旧欣赏器（如Internet Explorer 5）的非标准活动举行渲染。
    
  • 标题：此模式下，CSS的盒模子、样式盘算等与当代标准存在显着差别，导致页面布局在当代欣赏器中体现不可猜测、难以控制。
    
  
  
• 准标准模式
  
  
  
  • 活动：险些依照标准模式，但保存了少量旧式欣赏器的处置惩罚方式（告急涉及表格和图像的垂直间距）。
    
  • 定位：它是向完全标准过渡的中心模式，现已很少必要专门关注。
    
  
  
• 标准模式
  
  
  
  • 活动：欣赏器将严酷按照HTML与CSS的现行规范来渲染页面。
    
  • 目标：此模式能最大水平确保页面在差别欣赏器中拥有划一的布局和样式体现，是当代网页开辟的唯一目标模式。
    
  
  

声明位于HTML文档的最开头，它不是一个HTML标签，而是一个给欣赏器的指令，专门用于触发所需的文档渲染模式。指示欣赏器使用标准模式（或称“无怪异模式”）来渲染页面。
2.2 文档核心骨架

2.2.1 DOCTYPE声明与作用

（1）DOCTYPE声明
代码：
作用：这是文档的第一行，不是一个HTML标签，而是一个给欣赏器的指令。它明白告知欣赏器此文档依照 HTML5 标准。欣赏器据此决定使用标准模式来剖析和体现页面。省略或错误誊写它，大概导致欣赏器进入“怪异模式”，引发不可预知的布局和样式错误。
深入明白“html”：声明中的 html 是一个文档范例界说（DTD）标识，其核心作用是指定文档的标记语言范例为HTML。HTML5将此声明极致简化为，寓意“使用标准的HTML”，这与早期版本复杂冗长的声明形成光显对比。此声明与文件扩展名无关，是全部HTML文档的必备开头。
（2）关于文件扩展名 .html与 .htm：
网页文件通常以 .html或 .htm作为扩展名，两者在功能上没有任何区别，任何当代欣赏器和Web服务器都能正确辨认和处置惩罚。

• 劈头差别：
  
  
  
  • .html：是“HyperText Markup Language”的完备缩写，是标准且被广泛保举的扩展名。
    
  • .htm：源于早期DOS和Windows 3.x等操纵体系对文件扩展名只能使用3个字符的限定。为了兼容这些体系，便产生了 .htm这个简称。
    
  
  
• 近况与发起：
  
  
  
  • 现在，操纵体系早已支持长文件名，但 .htm仍被相沿，告急是出于汗青风俗和部分用户的偏好。
    
  • 在现实使用中，两者完全等价。选择一个并保持划一即可。
    
  • 通用发起是优先使用 .html，由于它更完备、更清晰地表达了文件性子，也是绝大多数项目和教程的默认选择。
    
  
  

2.2.2 根元素与lang属性

元素是整个HTML文档的“总容器”或“根元素”，文档中全部其他元素（包罗 和 ）都必须嵌套在它的内部。它是文档树的出发点。
其 lang属性用于声明文档内容的告急使用语言，是提拔网页可访问性和国际化支持的关键。
lang属性的核心代价与用法：

• 语法：lang=”语言代码“。语言代码通常依照 ISO 语言代码-国家/地域代码 的格式。
  
  
  
  • zh-CN：简体中文（中国）
    
  • zh-TW：繁体中文（台湾地域）
    
  • en-US：英语（美国）
    
  • en-GB：英语（英国）
    
  • ja：日语（可省略地域代码）
    
  
  
• 告急作用：
  
  
  
  • 辅助技能：屏幕阅读器等工具根据 lang属性切换发音规则和语音库，确保能正确“读出”内容（比方，对中文和英文使用差别的发音引擎）。
    
  • 搜刮引擎优化：资助搜刮引擎辨认页面语言，以便在相应的语言搜刮效果中正确索引和出现。
    
  • 欣赏器功能：欣赏器可根据此属性提供翻译发起、应用正确的引号样式，或保举符合语言的字体。
    
  • 样式控制：CSS可以通过 :lang()伪类为差别语言的文本应用特定的样式。
    
  
  

最佳实践：始终为 元素添加正确、具体的 lang属性。对于多语言网站，以致可以在页面内差别段落使用 lang属性（如 Hello）举行更细粒度的标注。
2.2.3 头部

元素是HTML文档的设置与信息中心，专门用于承载不直接体现在页面上的全部元信息。它不包罗任何用户可见的内容（如笔墨、图片），而是界说了页面的各类“幕后”属性、关联资源及活动指令。
简单来说，决定了欣赏器和搜刮引擎“怎样对待”这个页面，并为页面的出现和实验提供须要的设置。
其内部告急构造和包罗以下几类关键信息：
<ul>元数据：通过 标签订义页面的根本信息，如字符编码、视口设置、页面形貌等。
文档标题：通过 标签订义，体现在欣赏器标签页和搜刮效果中。
外部资源链接：通过 标签关联外部文件，如控制样式的CSS、网站图标等。
脚本：通过 [/code]传统/保举位置：将 <script>标签放在 竣事标签（）之前。由于脚本的下载和实验会壅闭HTML的剖析和页面的渲染，放在末了可确保用户先看到已渲染的页面内容。
放置于 的优化：若必须将脚本放在 中，应使用以部属性控制其活动，制止壅闭：

• async：脚本异步下载，下载完成后立即实验，实验时会壅闭渲染。实用于独立、不依赖DOM或其他脚本的库（如统计分析代码）。
  
• defer：脚本异步下载，但会延长到文档剖析完成后、DOMContentLoaded变乱前按次序实验。实用于必要操纵DOM或依赖其他脚本的情况。
  

asynchronous a. 异步的。defer v. 延期。

2.2.4 元素基准链接

代码：

1. [/code][b]作用[/b]：
2. [list]
3. [*]href属性：为页面上全部的[b]相对URL[/b]（如图片的 src、链接的 href）设置一个同一的[b]根当地点[/b]。比方，设置根当地点后，一个链接写为 ，着实际指向将是 https://www.example.com/path/contact.html。
4. [*]target属性：为页面上全部未明白指定 target的链接设置[b]默认的打开目标[/b]（如 _blank在新标签页打开）。
5. [b]告急告诫[/b]：此元素[b]影响力是全局的[/b]，一旦使用，会改变页面内险些全部链接和资源引用的活动，且通常难以覆盖。因此，在大多数项目中[b]并不保举使用[/b]，仅在特定场景（如静态页面打包）下由构建工具审慎处置惩罚。
6. [/list][indent]target n. 目标。
7. [/indent][size=4]2.4 HTML元素与全局属性简介[/size]
9. 这里枚举一些常用的标签和扼要形貌，具相识在后续先容，大概参考网址：
10. HTML 参考 - HTML（超文本标记语言） | MDN
11. https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference
12. [size=3]2.4.1 主体布局元素[/size]
14. 主体布局元素用于构建HTML文档的团体框架和告急内容地域，它们具有明白的语义寄义，能清晰地表达文档的布局。
15. <ol>[b]文档根容器[/b]
16. [list]
17. [*]：整个HTML文档的根元素，全部其他元素都包罗在此中。
18. [/list][b]文档头部[/b]
19. [list]
20. [*]：包罗文档的元信息（metadata），如标题、字符编码、样式表链接等，不直接体现在页面中。
21. [/list][b]文档主体[/b]
22. [list]
23. [*]：包罗全部在欣赏器中可见的内容，如文本、图片、链接、表单等。
24. [/list][b]告急内容区块元素[/b]
25. [list]
26. [*]：表现页面或某个区块的页眉，通常包罗logo、导航、标题等。
27. [*]：用于将一组一连的标题元素（如 [size=6]到 [size=1]）及其子标题（如副标题、标语）[b]包裹成一个逻辑上的团体标题块[/b]。
28. [*]：界说导航链接的区块，将页面重定向到其他页面或该页其他部分，如主导航菜单、面包屑导航等。
29. [*]：表现文档的[b]告急[/b]内容，每个页面应该只有一个元素。
30. [*]：表现一个独立、完备、可独立分配或可重复使用的内容块，如博客文章、消息报道、论坛帖子等。
31. [*]：表现文档中的一个通用独立区块，通常包罗一个标题，用于对相干内容举行分组。
32. [*]：表现与页面主内容间接相干的部分，通常体现为侧边栏、标注框、广告等。
33. [*]：表现页面或某个区块的页脚，通常包罗版权信息、接洽方式、相干链接等。
34. [/list][b]分组与内容元素[/b]<ul>
35. ：通用的内容容器，没有特定语义，用于样式化或脚本操纵。
36. [b][size=6]-[size=1][/b]：六级标题，[size=6]级别最高，通常一个页面只有一个[size=6]。
37. [b]
38. [/b]：表现一个段落。
39. [b]
40. [list]/[list=1]/
41. [*][/b]：无序列表/有序列表/列表项。
42. [*][b]//[/b]：界说列表/界说术语/界说形貌。
43. [/list]
44. [/list][size=3]2.4.2 非主体布局元素[/size]
46. 非主体布局元素用于处置惩罚文本格式化、嵌入内容、表单交互等细节部分，它们丰富了文档的内容和交互性。
47. [list=1]
48. [*][b]文本级语义元素[/b]
49. [list]
50. [*]：超链接，用于创建到其他页面、位置或资源的链接。
51. [*]：表现内容的告急性，通常体现为粗体。
52. [*][b]<em>[/b]：表现夸大的文本，通常体现为斜体。
53. [*][b][/b]：通用的行内容器，没有特定语义，用于对行内元素举行样式化或脚本操纵。
54. [*]：换行符，在文本中逼迫换行。
55. [*][b]<hr>[/b]：水中分割线，表现主题或段落的分隔。
56. [*]：用于界说[b]日期、时间或一连时间[/b]。它使呆板（搜刮引擎、欣赏器、辅助工具等）可以或许明白辨认和剖析时间信息，而不但仅是人类可读的文本。
57. [/list]
58. [*][b]嵌入内容元素[/b]
59. [list]
60. [*][b]<img>[/b]：嵌入图像，通过src属性指定图像源。
61. [*]/：嵌入视频/音频内容。
62. [*]：内联框架，用于在当前文档中嵌入另一个HTML文档。
63. [*]：通过JavaScript绘制图形、动画等。
64. [*]：使用SVG（可缩放矢量图形）语法绘制图形。
65. [/list]
66. [*][b]表格元素[/b]
67. [list]
68. [*][b][table][/b]：界说表格。
69. [*][b][tr][/b]：表格行。
70. [*]/[b][td][/b]：表头单元格/表格数据单元格。
71. [*]//：表格头部/主体/脚部。
72. [/list]
73. [*][b]表单元素[/b]
74. [list]
75. [*]：界说用户输入表单，用于网络和提交用户数据。
76. [*]：多种范例的输入控件，如文本框、复选框、单选按钮等。
77. [*]：多行文本输入框。
78. [*]/：下拉选择框/选项。
79. [*]：可点击的按钮。
80. [*]：为表单控件界说标签，提拔可访问性。
81. [/list]
82. [/list][size=3]2.4.3 全局属性[/size]
84. 全局属性是可用于[b]全部HTML元素[/b]的属性，无论它们属于哪种种别，它们提供了通用的功能和控制。
85. [list=1]
86. [*][b]核心标识属性[/b]
87. [list]
88. [*][b]id[/b]：为元素指定在文档中[b]唯一[/b]的标识符。常用于CSS样式定位、JavaScript操纵或锚点链接。
89. [*][b]class[/b]：为元素指定一个或多个类名，用于CSS样式化或JavaScript选择。多个类名用空格分隔。
90. [/list]
91. [*][b]内容与语言属性[/b]
92. [list]
93. [*][b]style[/b]：直接在元素上界说内联CSS样式（[b]不保举大量使用[/b]，应优先使用外部样式表）。
94. [*][b]title[/b]：提供元素的额外提示信息，通常鼠标悬停时以工具提示情势体现。
95. [*][b]lang[/b]：界说元素内容的语言代码（如zh-CN表现简体中文）。
96. [*][b]dir[/b]：设置文本方向，ltr（从左到右）或rtl（从右到左）。
97. [/list]
98. [*][b]交互与可访问性属性[/b]
99. [list]
100. [*][b]tabindex[/b]：控制元素通过Tab键获取核心的次序。值为数字，表现次序；-1表现可通过脚本聚焦，但不在Tab次序中；0表现按文档次序。
101. [*][b]accesskey[/b]：为元素指定一个快捷键（键盘快捷键），用于快速聚焦或激活元素。
102. [*][b]contenteditable[/b]：布尔属性，设置元素内容是否可被用户编辑。
103. [*][b]draggable[/b]：布尔属性，设置元素是否可被拖动（用于拖放API）。
104. [*][b]hidden[/b]：布尔属性，表现元素尚未或不再相干，欣赏器应隐蔽该元素。
105. [/list]
106. [*][b]数据与变乱属性[/b]
107. [list]
108. [*][b]data-\*[/b]：自界说数据属性，允许开辟者存储与元素相干的额外信息。*可更换为任何名称（如data-user-id、data-price）。这些数据可通过JavaScript轻松访问。
109. [*][b]变乱处置惩罚属性[/b]：如onclick、onmouseover、onkeydown等，用于直接在HTML中界说JavaScript代码以相应特定变乱（[b]当代开辟中更保举通过JavaScript添加变乱监听器[/b]）。
110. [/list]
111. [*][b]布尔属性[/b]
112. 布尔属性表现"有/无"的状态，有该属性即为真，无需赋值。常见的布尔属性包罗：
113. [list]
114. [*][b]disabled[/b]：禁用表单控件或按钮。
115. [*][b]readonly[/b]：设置输入字段为只读。
116. [*][b]required[/b]：设置表单字段为必填项。
117. [*][b]checked[/b]：预选中复选框或单选按钮。
118. [*][b]selected[/b]：预选中下拉列表中的选项。
119. [*]：欣赏器是否举行拼写查抄。
120. [/list]
121. [/list][b]全局属性使用示例[/b]：
122. [code]  <p lang="en" dir="ltr">This is an example.</p>
123.   <input type="text" required disabled>
124.   <button onclick="alert('Clicked!')">点击我</button>

复制代码

总结：

• 主体布局元素构建文档骨架，赋予内容语义和条理。
  
• 非主体布局元素添补内容细节，实现丰富的内容出现和用户交互。
  
• 全局属性为全部元素提供通用的控制和信息存储本领。
  

三者协同工作，共同构建出布局清晰、内容丰富、交互性强的当代网页。把握这些根本是深入HTML学习的关键第一步。

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.