html5 新特性
- 列表项
1、html5新标签
article : 定义文章
aside : 定义和页面关联度较低的内容
-
datalist : 定义列表项
<input list="browser"> <datalist id="browser"> <option value="IE">IE</option> <option value="Chrome">Chrome</option> <option value="Safari">Safari</option> <option value="Opera">Opera</option> <option value="FirFox">FirFox</option> </datalist> -
details : 定义一小块区域，可以收起，可以展开 open属性代表默认展开
-- 如果想要修改名称，使用summary标签<details open> <summary>点击展开</summary> <p>我是隐藏的详细内容</p> </details> figure : 包裹一块图片等信息
figcaption : 设置该区域的名称
<figure>
<figcaption>图片区域标题</figcaption>
<p>定义一块图片区域</p>
</figure>
section : 定义文档中的某个区域 类似于 div
header : 代表一块区域的头部
footer : 代表一块区域的尾部
main : 代表主要区域
nav : 定义导航部分
mark : 标记文本
time : 定义时间
progress : 进度条
output : 输出内容的标签
- 分类 （行属性标签、快属性标签、内联块标签）
- 行属性标签(span)：mark / time / output /
- 块属性标签(div): nav / main / header / footer / section / figure / details / aside / article
- 内联块标签(img): progress
2、HTML5新表单元素
<!-- HTML5新增了一些表单元素，让用户输入内容更加方便快速 -->
<span>年月日</span>
<input type="date" name="name" value="">
<span>时分</span>
<input type="time" name="name" value="">
<span>周</span>
<input type="week" name="name" value="">
<span>月</span>
<input type="month" name="name" value="">
<form action="">
<label for="">邮箱:</label>
<input type="email" name="name" value="">
<label for="">网址:</label>
<input type="url">
<label for="">手机号：</label>
<input type="number" name="name" value="" required>
<label for="">范围:</label>
<input type="range" max=10 min=1 name="name" value="10" step="5">
<label for="">颜色</label>
<input type="color" name="name" value="">
<input type="submit" name="name" value="提交">
</form>
<!-- email表单元素只验证是否在字符串中间包含'@'符号-->
<!-- email和url表单元素需要借助form才可以起作用 -->
<!-- url表单元素需要添加协议名称 -->
<!-- range表单元素属性：max / min / step / value -->
<input type="text" placeholder="请输入文字" name="name" value="a">
<select multiple class="" name="">
<option value="">iPhone</option>
<option value="">iPad</option>
<option value="">Mac</option>
<option value="">iPod</option>
<option value="">Apple Watch</option>
</select>
<input type="file" name="name" value="" multiple>
<!-- required: 让表单中的元素成为必选项 -->
<!-- multiple: 可以变为多选（select / file） -->
3、选择器
- 使用选择器为标签添加样式
给根元素添加样式 (html)
-- root {}
标签选择器
-- div {}
类选择器
-- .div {}
id选择器
-- #div {}
属性选择器
-- a[href=''] {}
-- input[type=''] {}
伪类选择器
-- a:hover {}
-- li:nth-child(even) {}
后代选择器
-- div h2 {}
直接子级选择器
-- div > h2 {}
群组选择器
-- h2 , h3 , h4 {}
通配符选择器
-- * {}
html5 *新增选择器*
属性选择器中直接写 '=' 代表全等
-- [class = 'div']
属性选择器中直接写 '*=' 代表包含
-- [class *= 'div']
属性选择器中直接写 '^=' 代表以什么开头
-- [class ^= 'div']
属性选择器中直接写 '$='代表以什么结尾
-- [class $= 'div']
- :not () 选择器
- 排除很多元素中的某一个
- :empty () 选择器
- 给所有的空标签添加样式
