HTML5基础语义化标标签及伪类选择器

指HTML5与css3及Javascript。
文档第一行是当前文档类型（html1.0-html5.0）
Html与Html5的区别：
书写不同：
HTML5 在语法规范上也做了比较大的调整，去除了许多冗余的内容，书 写规则更加简洁、清晰；
单标签不用写关闭符号双标签省略结束标签 html、head、body、colgroup、tbody 可以完全省略；（尽量不要太随意）
HTML5 并不仅仅只是做为HTML 标记语言的一个最新版本，更重要的是 它制定了Web 应用开发的一系列标准，成为第一个将Web 做为应用开发平台的 HTML 语言。
HTML5 定义了一系列新元素，如新语义标签、智能表单、多媒体标签 等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地 理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas 我们可开发网页版游戏。
语义标签，如p表示一个段落、ul表示一个无序列表

基础语义化标标签介绍：

<header> 页眉
<nav>导航
<footer> 页脚
<section> 区块
<article>
<article> 文章 如文章、评论、帖子、博客
<aside> 侧边栏 如文章的侧栏
<figure> 内容分组 与 ul > li 做个比较
<mark> 标记 (不常用)
<progress> 表示进度 (带用“UI”，不常用)
<time> 表示日期
<label> 绑定表单元素
窗体大小单位：
vh 高； vw宽； 当前窗口的百分之一；
vmin较小值；vmax较大值；

表单

type类型：
email 输入email 格式
tel 手机号码
url 只能输入url 格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
datetime 时间日期
month 月份
week 星期
元素
atalist 数据列表 一般与input 配合使用
meter 表示度量器 不建议用作进度条
keygen 生成加密字符串：
keygen 元素是密钥对生成器（key-pair generator）。当提交表单 时， 一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到 服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
属性：
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身(on/off)
novalidate 关闭验证，可用于标签
required 必填项
事件：
pattern 正则表达式 验证表单
手机号:<input type=“tel” name=“tel” required=“required” pattern="\d{2}/" >
应用于提交按钮上，如：<nput type=“submit” formaction=“xxx.php”>
oninput 输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发
智能列表datalist eg:

 <input type=”text” list=”data”> 
 <datalist id=”data”> 
        <option>包子</option>
        <option>水果</option> 
        <option>汉堡</option>
   </datalist>

表单练习：

多媒体：

3种格式：.mp3/.mp4 .ogg .wav;
video（播放MP4）
embed（直接播放MP3或MP4）
audio（既可以播放MP3，也可以播放MP4）
<source src=“地址路径”>
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
poster 添加图片
width 设置播放窗口宽度
height 设置播放窗口的高度

css

属性选择器
其特点是通过属性来选择元素，5 种形式：
1、属性名 div[class] {}
2、属性值 div[class=div1] {}
3、属性值 “任意”位置有v的；div[class*=v]{}
4、属性值首字母是m； div[class^=m] {}（多个也可以）
5、属性值里包含val 字符并且在 最后面位置； div[class$=val]{}
伪类选择器
ul>li:nth-child(n) {第n 个li元素，计算方法是li元素的全部兄弟元素 }
ul>li:nth-child(3){ 第三个li元素 }
ul>li:nth-last-child(n){倒数第几个}
ul>li:last-child(2){倒数第二个;}
ul>li:nth-child(2n)(even){偶数；}
ul>li:nth-child(2n-1)(odd){奇数；}
li:nth-child(-1n+5){选中前面五个 }
li:nth-last-child(-1n+5){选中后面五个}
first-child{第一个}
last-child {最后一个}
first-line;首行
selection选中区域
ul:empty{空元素}

target 结合锚点进行使用，处于当前锚点的元素会被 选中；
<li><a href="#title1">CSS (层叠样式表)</a>
<h2 id=“title1”>CSS (层叠样式表) h2:target{color:red;}