HTML5标签+基础特性
一、HTML5特性之：空白折叠现象；
1、文字和文字之间的多个空格、换行会被折叠成一个空格；
2、标签 内壁 和 文字之间的空格会被忽略
1/1
2/2
黑线所演示的空格单位并未出现在浏览器中
此为空白折叠现象
二、HTML之转义符
<p>空格: </p>
<p>小于号:<</p>
<p>大于号：></p>
<p>&符号：&</p>
<p>双引号："</p>
<p>版权符号：©</p>
<p>注册商标：®</p>
<h2>使用场景：如何在网页中显示源代码，验证</h2>
显示p标签：<p> </p>
div— >> 分隔内容，将模块隔离开，会结合css使用，实现网页的布局，像一个容器，什么都能容纳
无序列表
<!-- 无序列表使用场景，
<!-- 1、导航栏，大大小小能看到的导航栏里基本上 都会使用ul---li--->标签布局 -->
<!-- 2、各种页面list列表 3、基本常见网站导航，列表页都会使用ul li无序列表标签 --> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>无序列表ul标签</title>
</head>
<body>
<h1>无序列表--ul li</h1>
<p>
无序列表是一个父子组合标签，上阵父子兵，不能单独出现,可以嵌套，
但是ul的子标签只能是li，而li标签中是可以放任何标签,li标签不能单独使用
</p>
<p><ul> <li> </li> </ul></p>
<ul>
-->父标签
<li>--子标签</li>
</ul>
<ul>
<li>HTML/html5</li>
<li>css/css3</li>
<li>javascript/es6~es13</li>
<li>web app</li>
</ul>
</body>
</html>
无序列表中的type属性已经废除，可以使用css样式代替
有序列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>有序列表ol标签</title>
</head>
<body>
<h1>有序列表ol标签</h1>
<p>ol的特性与ul li 同理</p>
<ol type="A">
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ol>
</body>
</html>
有序列表中的type属性可以是A a 1
<p>有序列表ol标签的 start属性</p>
<p>start属性值必须是一个整数，制定了列表编号的起始值</p>
<ol type="a" start="4">
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ol>
<h2>有序列表ol标签的reversed属性</h2>
<p>
reversed属性指定列表中的条目是否是倒序排列，reversed没有属性值，只需要写上单词即可
</p>
HTML5新增属性reversed
<ol type="1" start="4" reversed>
<li>html/html5</li>
<li>css/css3</li>
<li>javascript</li>
<li>python</li>
<li>c</li>
<li>c++</li>
</ol>
有序列表使用场景需要排序或者序号等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>定义列表 dl dt dd</h1>
<p>需要逐条给出定义描述的列表，就是定义列表</p>
<!-- dt和dd是并排关系，兄弟关系，同级关系 并排出现在dl中-->
dd标签是对dt标签的解释说明
<dl>
<dt>选购指南</dt>
<dd>手机</dd>
<dd>电脑</dd>
<dd>笔记本</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>关于我们</dd>
</dl>
</body>
</html>
定义列表：使用场景如下图所示
特殊链接：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>特殊链接</title>
</head>
<body>
邮件链接，下载连接，电话链接 3小时14分钟
<!-- mailto:前缀链接 即邮箱连接 -->
<!-- tel:前缀链接，即电话链接 -->
<a href="mailto:229999999999@qq.com">2</a>
</body>
</html>
锚点链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>锚点链接</title>
</head>
<body>
<!-- html5默认内置了 #top 无需定义id。点击即可回到顶部 -->
<h1>页面锚点链接</h1>
<p>
<a href="#sj">小米手机</a>
<a href="#cd">智能穿戴</a>
<a href="#jd">家电</a>
<a href="#cx">出行搭配</a>
<a href="">日用百货</a>
<a href="">出行搭配</a>
<a href="">电脑配件</a>
<a href="">零食百货</a>
</p>
<h2 id="sj">小米手机</h2>
<img src="/2000352.jpg" alt="" />
<h2 id="cd">智能穿戴</h2>
<img src="/2022854.jpg" alt="" />
<h2 id="jd">家电</h2>
<img src="/2038307.jpg" alt="" />
<h2 id="cx">出行搭配</h2>
<img src="./2045308.jpg" alt="" />
<h2 id="dp">电脑配件</h2>
<img src="/2046180.jpg" alt="" />
<h2 id="lb">零食百货</h2>
<img src="/310751.jpg" alt="" />
<a href="#top">回到顶部</a>
</body>
</html>
音视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>音频文件此类标签很重要</title>
</head>
<body>
<audio src="" autoplay loop></audio>
<!-- audio属性值：
autoplay自动播放
loop循环播放
src 音频文件的路径
直接加上默认值表示true自动播放，不加就表示不自动播放 -->
<!-- controls audio属性值之一，意思是显示播放空间 -->
<h1>音视频标签</h1>
<h2>音频标签</h2>
<audio controls src="./audio/孙灵乔 - 樱花树下的约定.mp3" autoplay loop>
孩子，您的浏览器不支持audio标签，请升级您的浏览器
</audio>
<h2>audio 子标签 source：来源</h2>
<audio controls>
<source src="./audio/孙灵乔 - 樱花树下的约定.mp3" type="audio/mpeg" />
<!-- 默认执行第一条，第一条不识别找第二条，依次类推，都不识别就会提示标语 -->
<source src="./audio/孙灵乔 - 樱花树下的约定.ogg" type="audio/ogg" />
<source src="./audio/孙灵乔 - 樱花树下的约定.wav" type="audio/wav" />
请升级浏览器
</audio>
<h2>视频标签 video 子标签 source</h2>
<video controls width="300">
支持的四种编码格式，以及兼容性的代码写法
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.mp4"
type="video/mp4"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.webm"
type="video/webm"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.ogv"
type="video/ogv"
/>
<source
src="./audio/share_4ed534fc40b62935a8f256e91bd5121f.avi"
type="video/avi"
/>
</video>
</body>
</html>
语义化标签：
个人理解：HTML语义化是指我们在写HTML结构时用有英文语义的标签，使HTML更易于开发人员和搜索引擎，爬虫等机器的阅读和理解，以便更容易收录，提高网站排名
非语义标签：div span