![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：写得非常不错
Collection
Collection
HTML文档的结构，我们可以将它理解为网页的语法结构，一种编码的格式。
下面就是一个完整的HTML文档。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
接下来我们就以上HTML文档来逐个解释。
首先，利用< !DOCTYPE>对文档类型进行说明，告诉浏览器这是一个html5的文档 。
<!DOCTYPE html>
HTML文档是以< html>标签开始并以< /html>结束的。 也就是说，网页的内容全部全部包含在< html>与< /html>之间。
lang=”en”是属性，表示当前页面的主演语言。
<html lang="en">......</html>
所有的HTML文件都有两个主要结构：头部head和主体body。 通常将文档的描述信息放在头部，而将文档的主题信息（浏览器上房显示的信息）放在主体部分
<html><head>......</head><body>......</body></html>
UTF-８为当前文档字符编码集，viewport是视口，为当前文档在浏览器中可以被用户看到的部分。
文档标题放在文档头部的< title>与< /title>之间。
其结构如下：
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
HTML文档的主体部分包含了在网页中显示的文本、图像、超链接等 在文档的主体部分为用户正在看到和感兴趣。主体部分以< body>标签开始，并以< /body>结束。其结构如下：
<body><!-- 文档主要内容：文本、图像、音频、视频、超链接等。 --><h2 style="color: red;">欢迎大家选择Rinki.me来学习Web开发技术</h2></body>
最后，再把HTML文档的完整结构以及注释献上：
<!-- html文档结构 --><!-- 告诉浏览器这是一个html5的文档 --><!DOCTYPE html><!-- <html>....</html>：根标签，根元素，代表整个htnl文档 --><!-- lang:en：属性，表示当前页面的主演语言 --><html lang="en"><!-- 头元素：它的内容不在页面中显示，这是给浏览器和搜索引擎使用 --><head><!-- 当前文档字符编码集 --><meta charset="UTF-8"><!-- viewport: 视口，当前文档在浏览器中可以被用户看到的部分（可视区域） --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><!-- 主体元素：这才是用户正在看到和感兴趣 --><body><h2 style="color: red;">欢迎大家选择Rinki.me来学习Web开发技术</h2></body></html><!-- 文档主要内容：文本、图像、音频、视频、超链接等。 -->
我们来了解一下标签、元素、属性、样式的关系与区别
比如，<p>这就是一个标签； <p>这里是内容</p>这就是一个元素。另外还有下列例子也都是元素：
<span>这里是内容</span><div>这里是内容</div>。
也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；
而单标签是个例外。例如<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。
html网页就是由各种个样不同的元素构成的文件，可以说html元素就是构成html文件的基本对象，标签就是用来标记HTML元素的。
属性就是为html元素提供各种附加信息的。它总以“属性名=属性值”这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
例如：
<p style="color: green;">Hello,Rinki.me</p>
这里的style就是属性。三大通用属性有style,id,class。一个元素里可以有多个属性，各属性之间以空格相分离。如，<p 属性1 属性2 ...></p>
样式是一种改变 HTML 元素样式的方式。能够通过使用 style 属性直接将样式添加到 HTML 元素，也可以加在style标签中放在head里。或者在独立的样式表中（CSS 文件）进行定义，样式有值，一般都会带单位,以“样式：样式值”这样的格式出现。例如：
<p style="color: green;">Hello,Rinki.me</p>
这里的color就是样式，green就是该样式的值。直接将添加到 HTML 元素。
加在style标签中放在head里时如下：
<style>p {color: green;}</style>
样式也可以有多个，各个样式之间用；隔开。如，某选择器{样式1：样式1值；样式2：样式1值；…}
注意各个样式之间的标点符号有所不同。
首先我们说说元素的层级关系
一般的网站层级在<bady>…</bady>中通常为如下：
<body><!-- 页面 --><div id="header"><!-- 导航 --><ul><li><a href="">index</a></li><li><a href="">about</a></li><li><a href="">news</a></li><li><a href="">concant</a></li></ul></div><!-- 主体 --><div id="main"><div class="left">广告</div><div class="content">内容区</div><div class="right">推荐</div></div><!-- 页脚 --><div id="footer"><ul><li><a href="">baidu.com</a></li><li><a href="">taobao.com</a></li></ul></div></body>
分为页眉，主体，和页脚。页眉放导航，搜索栏等。主体放网站主要内容，页脚放上网页简介，联系方式，友情链接，页脚导航等。
让 HTML文本 语义化，就是让 HTML元素 能够表明其内部内容的意义。
到了HTML5，为了能浏览代码时，能更清楚更快的知道各个元素的意义。就不都用<div></div>和class配合使用了。而是使用语义化的元素来表示。
如下：
<body><!-- 页面 --><div id="header"><!-- 导航 --><nav><a href="">index</a><a href="">about</a><a href="">news</a><a herf="">concant</a></nav></div><!-- 主体 --><main><section class="ads">广告</section><article class="content">内容区</article><section class="recomand">推荐</section></main><!-- 页脚 --><footer><!-- 导航 --><nav><a href="">baidu.com</a><a href="">taobao.com</a></nav></footer></body>
用<nav>…</nav>来代替<ul>…</ul>,来表示导航；
用<main>…</main>来代替<div class="...">…</div>，表示主体；
<footer>…</footer>来代替<div class="...">…</div>表示页脚。
这样就是一目了然的知道整个网页的结构。
接下来举几个例子来说明一下HTML语义化的文本元素。
1.表示时间
相比于<span>…<span>,用<time>…</time>会来的更加清楚
<span>2020 / 07 / 26</span><time>2020 / 07 / 26</time>
2.表示电话
相比于<p>…<p>,用<tel>…</tel>会来的更加清楚
<p>Rinki.me:1881888188</p><tel>Rinki.me:1881888188</tel>
3.表示地址
相比于<p>…<p>,用<address>…</address>会来的更加清楚
<p>Rinki.me:1881888188</p><address>Rinki.me:1881888188</address>
另外还有以下：
等等还有好多，大家如果有兴趣，可以去HTML文档查看。
总结来说，HTML语义化有以下3个好处
HTML链接是一个Web资源和另一个资源的连接。
基本结构如下：
<a href="..." >...</a>
href是当前a标签的链接指向，target可以指定当前链接的打开方式。_self:当前页面打开，_blank:新页面打开
<a href="htpps://blog.rinki.me" target="_self">Rinki.me</a><a href="htpps://blog.rinki.me" target="_blank">Rinki.me</a>
在href=””中添加标识，还可用作电话拨打，邮件发送软件的联动。
例如：
<!-- 打电话 --><a href="tel:18888888888">热线电话</a><!-- 发邮件 --><a href="mailto:info@rinki.me">邮件</a>
以上为链接元素的经典用法，在不同页面中跳转，跨域。
通过链接元素与id配合可以在当前页面中跳转。
如下所示：
<a href="#i">抓到我啦</a><a href="#pig">抓到猪猪啦</a><a href="#dog">抓到狗狗啦</a><a href="#cat">抓到猫咪啦</a><h2 style="margin-top: 1000px;" id="i">我在这</h2><h2 style="margin-top: 1300px;" id="pig">猪猪在这</h2><h2 style="margin-top: 1600px;" id="dog">狗狗在这</h2><h2 style="margin-top: 1900px;" id="cat">猫咪在这<a href="#">回到顶部</a></h2>
在网页中，点击“抓到我啦”文字可立刻跳转到“我在这”的部分，其他同理。
在实际使用中，id的场景会非常的少因为，浏览器不检查id的唯一性，而js又依赖它的唯一性来获取元素，所以以后能不用就不用。但有两种场景中非常常用，也只能用id。那就是
1.锚点
2.表单元素中的控件
第一点的锚点示例已经在上文说明，第二点的表单元素中的控件使用会在《表单元素》章节中说明，可跳转查看。
列表元素分为无序列表,有序列表以及自定义列表。无序列表常用于导航，有序列表用于工作计划，购物车等。
<ul><li>html</li><li>css</li><li>javascript</li></ul>
<ol start ="2"><!-- <li>起床</li> --><li>吃早饭</li><li>上班</li><li>回家</li></ol>
start 属性规定有序列表中第一个列表项目的开始值。
<dl><!-- 列表项标题 --><dt>php</dt><!-- 列表项内容 --><dd>通用的服务区端编程语言</dd><dd>非常适合快速的Web开发</dd><dt>mysql</dt><dd>免费开源的数据库软件</dd><dd>社区活跃，大厂支持</dd><!-- 通常用来写页脚 --></dl>
