H5新增了以下的几大类元素:
- 内容元素:
header ,nav,footer,section - 表单控件:
calender,date,time,email,url,search - 媒介播放:
video,audio - 绘画使用:
canvas - 本地存储:
localStorage长期存储数据,浏览器关闭后数据不会丢失,SessionStorage数据在浏览器关闭之后自动删除
语义化标签
语义化的理解
HTML语义化让页面的内容结构化,结构更清晰,便于对浏览器,搜索引擎解析;- 在没有
css样式的情况下也能以一种文档显示,并且是容易阅读的 - 利于
SEO,语义化和搜索引擎建立良好的关系,有利于爬虫抓取更多有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重 - 便于团队开发和维护,语义化更具可读性,便于阅读,维护和理解
标签
当然不是所有的浏览器都支持,IE8一下不支持语义化标签，需要处理兼容
<body>
<header></header>
<!-- 导航标签 -->
<nav></nav>
<!-- 文章标签 -->
<article></article>
<!-- 侧标栏 -->
<aside></aside>
<!-- 块级 和div没有什么区别 -->
<section></section>
<!-- 底部 -->
<footer></footer>
<!-- 处理语义化标签不兼容的问题 -->
<script>
// 通过js创建标签
document.createElement('header');
document.createElement('nav');
</script>
</body>音频和视频
1.视频
<video></video>
属性值：
-
src视频路径 -
controls播放控制面板 必填 -
autoplay自动播放（谷歌和Edge和火狐不支持） -
loop循环播放（支持） -
poster首次进入视频的封面图
<video src="./movie.mp4" controls autoplay loop poster="./img.jpg"></video>2.音频
<audio></audio>
属性值：
src音频路径controls播放控制面板 必填loop循环播放muted静音proload页面预加载
<audio src="./music.mp3" controls muted loop proload></audio>新增选择器
伪类选择器
改变父元素的第一个子元素 :first-child
改变父元素的最后一个子元素 :last-child
改变父元素的第n个子节点-的元素 :nth-child(n)
改变父元素的倒数第n个子节点的元素 :nth-last-child(n)
改变父元素的为偶数的子节点的元素
:nth-child(2n)这里的n就是n,为固定值:nth-child(even)
改变父元素的为奇数的子节点的元素
:nth-child(2n+1):nth-child(odd)
改变兄弟元素 - 同级元素的第一个元素 :first-of-type
改变兄弟元素 - 同级元素的最后一个元素 :last-of-type
改变兄弟元素 - 同级元素的第n个元素 :nth-of-type(n)
改变兄弟元素 - 同级元素的倒数第n个元素 :nth-last-of-type(n)
:nth-child()和:nth-of-type()有什么区别？
:nth-child() 先看第几个元素，再看显示器
:nth-of-type() 先看选择器，再看（）里面写的第几个
input伪元素的选择器
很少有，了解即可
<style>
input[type="text"]{
background-color: greenyellow;
}
input[type="text"]:disabled{
background-color: red;
}
input[type="tel"]:required{
background-color: skyblue;
}
</style><form action="">
<!-- 只读 -->
姓名： <input type="text" readonly>
<!-- 必填 -->
电话1： <input type="tel" required>
<!-- 只读 -->
电话2： <input type="tel" readonly>
<!-- 禁用 -->
备注： <input type="text" disabled>
</form>before和after
如果填内容必须和content""连用
.box:hover::before {
/* 配合hover使用 */
}属性选择器
p[title]{
background-color: red;
}
[title]{
border: 1px solid #000;
}
/* ^以什么开头 */
a[href^="https"]{
background-color: turquoise;
}
/* $以什么结尾 */
a[href$="html"]{
background-color: blue;
}<body>
<div class="one">第一个子元素</div>
<p class="one">第一个p元素</p>
<a href="https://www.mi.com/shop">小米官网</a>
<a href="./06-属性选择器.html">本地路径</a>
<p title="点我"> p标签 </p>
<div title="点我">div标签</div>
</body>a标签的伪类
link visited hover active
<style>
/* 定义没有被访问过的元素 适用于a标签 */
a:link {
color: gold;
}
/* 定义已经被访问过的元素 适用于a标签*/
a:visited {
color: red;
}
/* 找到鼠标触摸上去的元素 任意标签都可以使用 */
a:hover {
color: pink;
}
/* 找到鼠标点击上去但是不松开的元素 任意标签都可以使用 */
a:active {
color: skyblue;
}
</style>表单的拓展
<form action="">
<!-- 1.email 提交表单时验证是否满足email格式-->
<input type="email">
<hr>
<!-- 2.tel 提交表单时验证是否满足tel格式 -->
<input type="tel">
<hr>
<!-- 3.路径格式 -->
<input type="url">
<hr>
<!-- 4.number 数字
min 最小值
max 最大值
value 默认值
step 步数 step="3" 点击一下 新增3个 n+3
-->
<input type="number" min="4" max="30" value="10" step="3">
<hr>
<!-- 5.颜色 -->
<input type="color">
<!-- 6.时间 时分 -->
<input type="time">
<!-- 7.时间 年月日 -->
<input type="date">
<!-- 8.时间 年周 -->
<input type="week">
<!-- 9.时间 年月 -->
<input type="month">
<!-- 10.时间 年月日时分 -->
<input type="datetime-local">
</form>
下拉菜单
<!-- html5 下拉框 -->
<!-- input中的list 和datalist里面的id属性值 必须保持一致 -->
<!-- label描述 可以不写 -->
<input type="text" list="city">
<datalist id="city">
<option value="sh" label="小杨生煎">上海</option>
<option value="bj" label="北京烤鸭">北京</option>
<option value="nj" label="南京板鸭">南京</option>
</datalist>对表单新增元素
<form action="">
<!-- pattern 新增的验证规则 pattern="正则表达式" 校验 -->
<!-- ^ 以什么开头
$ 以什么结尾
{9} 表示有9位
[] 取任意值 -->
电话： <input type="tel" pattern="^1[35789][0-9]{9}$">
<!-- 要求输入框里面必须填写信息 required -必填 readonly-只读 -->
姓名: <input type="text" required>
爱好: <input type="text" readonly>
备注1: <input type="text" placeholder="请填写备注">
<!-- 自动聚焦 -->
备注2: <input type="text" autofocus>
<br>
<input type="submit">
</form>进度条
<!-- 进度条 -->
<progress max="100" min="30" value="40"></progress>
<!--容量： 电量 存储 -->
<!-- meter -->
<!-- 属性
max 最大值
min 最小值
high 规定当前最大值
low 规定当前最小值
value 当前的默认值
-->
电量：<meter max="100" min="0" low="16" high="75" value="40"></meter>电量：
