详解HTML文档结构、元素与属性的关系、语义化的结构元素与文本元素，链接元素和列表元素的使用
什么是HTML文档？
HTML是超文本标记语言，浏览器可以直接解析的文本文档。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等！目前HTML5是主流版本，HTML主要可以分为两大部分：文档结构、HTML标签
什么是HTML文档结构？
HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。
代码展示一下标准的HTML文档：
<!-- <!DOCTYPE html>它是指示 web 浏览器这个页面使用哪个 HTML 版本进行编写的指令 --> <!DOCTYPE html> <!-- 标记< html></html>：说明该文件是用超文本标记语言来描述的，它是文件的开头， 而</html>则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。 lang="语言简写" 这是表示当前页面的主要语言 --> <html lang="en"> <!-- 头部<head></head>：表示头部信息的开始和结尾，这是给浏览器和搜索引擎使用。 头部中包含的标记是页面的标题、关键字、描述等内容，它本身不作为内容来显示，但影响网页显示的效果。 --> <head> <meta charset="utf-8"> <title>网页的标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <!-- 主体<body></body>：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。 用户真正浏览的区域，普通用户感兴趣的都是展示在这里 --> <body> <h1>PHP中文网，万岁！</h1> </body> </html>
运行结果图：
什么是元素和属性
HTML元素是组成HTML文档最基本的部件，它是用标签来表现的，例如<p>元素也叫<p>标签。这里提示一下HTML标签不区分大小写，但最好规范统一使用小写！
HTML元素可以按另一种方式分为“块元素”和“行元素”，常见的块元素有：有div，和h1～h6，hr，ol，table等，常见的行元素或者叫行内元素：span，strong，input，a等等，<div>是通用块元素：通用容器，该元素本身无任何意义，<span>是通用行内元素，行内元素通常不会直接暴露出来，应该放在一个块元素中。下面是块元素和行元素的特点：
块级元素
总是从新的一行开始
高度、宽度都是可控的
宽度没有设置时，默认为100%
块级元素中可以包含块级元素和行内元素
行内元素
和其他元素都在一行
高度、宽度以及内边距都是不可控的
宽高就是内容的高度，不可以改变
行内元素只能行内元素，不能包含块级元素
元素的属性提供了对HTML元素的描述和控制信息，借助于元素属性，HTML网页才会展现丰富多彩且格式美观的内容。例如要设置<p>元素中文字内容的颜色为绿色，这时就需要用到HTML元素属性了。在<p>元素名称的尖括号内添加了“style="color: green"”内容，浏览器就会按照设定的效果来显示内容。
三大通用属性: style, id, class，每一个元素必定有这三个属性，不同的标签会有自己专有的属性，例如<a>标签里面有href属性等。 元素标准格式 <element name1=”value”name2=”value”> 其中element为元素的名称，属性可选且允许有多个属性，name是属性的名称，value是属性的值。
元素和属性的演示代码：
<!-- 元素: 用`<p></p>`描述 --> <p>我是P元素也是P标签</p> <!-- 块元素 h1,p,div等等--> <h1>我是独占一行的</h1> <p>我也是独占一行的</p> <div>我们还可以设置宽高</div> <!-- 行元素 a,strong,span,em等 --> <a href=""> 我们 </a> <strong> 和平 </strong> <span> 相处。</span> <em> 一行不够就换一行 </em> <!-- 三大通用属性: style, id, class 每一个元素都有三个属性 --> <p style="color: green;">Hello php.cn</p> <p id="hello">Hello php.cn</p> <p class="hello">Hello php.cn</p> <p style="color: green;" id="hello">我有多个属性</p> <!-- 不同的元素有自己的属性 --> <a href="URL地址">我有专有的属性href</a> <br /> <img src="timg.jpg" alt="当图像不存在的时候就会显示这段文字" width="100"/>
运行结果图：
语义化的结构元素
结构元素可以分为两种，一种是传统元素的结构，一种是语义化的结构元素，传统元素的结构很简单，就是我们使用<div>标签 给每个div标签独特的ID或class属性划分定义出不同的区块结构。
传统元素结构代码展示：
<!-- 页眉 --> <div id="header"> <!-- 导航 --> <ul> <li><a href="">index</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>
HTML5的语义化元素清楚地向浏览器和开发者描述其意义，元素名就能看出这个元素内的内容是什么作用，例如：页面头部<header>，页面主题<main>，页面底部<footer>，导航<nav>。
下面展示HTML5语义化结构元素代码：
<!-- header 元素表示页面中的一个内容区块或者整个页面的标题，通常放在页面的头部 通常用来显示页面中的logo图片、搜索文本框或者导航 --> <header> <!-- 导航标签 --> <nav></nav> </header> <!-- 主体 main 元素包含当前页面的主体内容，网站各个页面可以共享header和footer这些通用元素， 但main元素应该是彼此不同的 --> <main> <!-- <aside>用来表示当前页面或者文章的附属信息部分，与内容无关的引用、侧边栏、广告、导航元素组等 --> <aside>广告或侧边栏</aside> <!-- section 元素用于将页面上的内容划分为独立的区域，如果想将一块内容划分为几段，就使用section --> <section>内容区</section> <!-- article 元素中的内容独立于文档的其余部分，如果一块内容相对来说比较独立，完整时，使用article； --> <article>用户评论区</article> </main> <!-- 页脚 footer元素用来定义底部信息，友情链接以及版权信息。 --> <footer></footer>
语义化的文本元素
语义化的文本元素，都有自身的意义，从元素的字面上就可以得知元素里面放的是什么内容。如<address>元素用了输出地址信息，<code>元素用来输出计算机代码等
代码展示：
<!-- time 时间标签 --> <time>2020 / 07 / 25</time> <br /> <!-- sup:上标 --> 2<sup>4</sup> = 16 <!-- address 地址信息标签 --> <address>: 中国合肥政务新区</address> <!-- del 表示删除相关文字，意图更加明确些 --> 西瓜: 原价 <del>5.98</del>, <!-- strong 强调一段文本中的重要性 --> 现价: <strong>1.98</strong> <br /> <!-- code 表示计算机代码片段 --> <code> const username = 'tlilam';</code> <br /> <!-- mark 突出显示文本，自动将文本设置成为黄底黑字，用于标记 --> <mark> //突出显示文本，自动将文本设置成为黄底黑字，用于标记。</mark> <br /> <!-- progress 进度条显示 --> <progress value="80" max="100"></progress>
运行效果：
链接元素
链接元素可以通过使用 href 属性 - 创建指向另一个文档的链接,还可以实现打电话，下载文件，发送邮件，和站内外跳转等功能，使用 Target 属性，可以定义被链接的文档在何处显示
<!-- 经典用法: 在不同的页面中跳转，跨域 --> <a href="https://www.php.cn" target="_blank"></a> <!-- 下载文件 --> <a href="0725.md" download="html.md">教学大纲</a> <!-- 打电话 --> <a href="tel:13894****90">服务热线</a> <!-- 发邮件 --> <a href="mailto:498668472@qq.com">发电邮</a> <!-- 锚点: 在当前页面中跳转--> <a href="#author">找到作者</a> <h2 id="author">作者：tlilam</h2> <a href="#">回到顶部</a>
列表元素
列表分为三种：无序列表（写导航）、有序列表、自定义列表（通常用来写页脚）。
<!-- 1.无序列表 --> <ul> <li>html</li> <li>css</li> <li>javascript</li> </ul> <!-- 2.有序列表 --> <ol start="4"> <li>起床</li> <li>刷牙</li> <li>上班 <ul> <li>吃早餐</li> <li>坐公交</li> <li>打卡</li> </ul> </li> <li>工作</li> </ol> <!-- 3.自定义列表 --> <dl> <dt>网站前端</dt> <dd>HTML</dd> <dd>CSS</dd> <dd>JavaScript</dd> <dt>网站后端</dt> <dd>PHP</dd> </dl>