By
welkin
Updated:
HTML5新标签与特性
兼容性问题 （ie9 以上的版本）
文档类型设定
- document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5 <!DOCTYPE html>
字符设定
- ：HTML与XHTML中建议这样去写
- ：HTML5的标签中建议这样去写
常用新标签
w3c 手册中文官网 : http://w3school.com.cn/
header：定义文档的页眉 头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容 侧边
1
2
3
4
5
6
| <header> 语义 :定义页面的头部 页眉</header>
<nav> 语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义: 定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>
|
datalist 标签定义选项列表。请与 input 元素配合使用该元素
1
2
3
4
5
6
7
8
| <input type="text" value="请输入明星" list="star"/>
<datalist id="star">
<option value="刘德华">刘德华</option>
<option value="刘若英">刘若英</option>
<option value="刘晓庆">刘晓庆</option>
<option value="戚薇">戚薇</option>
<option value="戚继光">戚继光</option>
</datalist>
|
fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
1
2
3
4
5
| <fieldset>
<legend>用户登录</legend> 标题
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>
|
| 类型 |
使用示例 |
含义 |
| email |
type1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| | **tel** | ```<input type="tel"> ```| 输入手机号码格式 |
| **url** | ```<input type="url"> ```| 输入url格式 |
| **number** |```<input type="number">```| 输入数字格式 |
| **search** | ```<input type="search">```| 搜索框（体现语义化） |
| **range** | ```<input type="range">```| 自由拖动滑块 |
| **time** | ```<input type="time"> ```| 小时分钟 |
| **date** | ```<input type="date">```| 年月日 |
| **datetime** | ```<input type="datetime"> ```| 时间 |
| **month** | ```<input type="month">```| 月年 |
| **week** |```<input type="week"> ```| 星期 年 |
##
## 常用新属性
| **属性** | **用法** | **含义** |
| -------------------- | ---------------------------------------- | ---------------------------------------- |
| **placeholder** | ```<input type="text" placeholder="请输入用户名">```| 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回 |
| **autofocus** | ```<input type="text" autofocus> ``` | 规定当页面加载时 input 元素应该自动获得焦点 |
| **multiple** | ```<input type="file" multiple>``` | 多文件上传 |
| **autocomplete** | ```<input type="text" autocomplete="off">```| 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字 |
| **required** | ```<input type="text" required>``` | 必填项 内容不能为空 |
| **accesskey** | ```<input type="text" accesskey="s"> ``` | 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式 |
## 综合案例
```html
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>学生档案思密达</legend>
<label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br />
<label>手机号: <input type="tel" /></label> <br /><br />
<label>邮箱: <input type="email" /></label> <br /><br />
<label>所属学院: <input type="text" placeholder="请选择学院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java学院</option>
<option>前端学院</option>
<option>php学院</option>
<option>设计学院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成绩: <input type="number" /></label> <br /><br />
<label>毕业时间: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
|
|
多媒体标签
- embed：标签定义嵌入的内容
- audio：播放音频
- video：播放视频
多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。
1
| <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
|
多媒体 audio
HTML5通过
并且可以通过附加属性可以更友好控制音频的播放，如：
CSS3 新增选择器
结构(位置)伪类选择器（CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
-
1
2
3
4
5
6
7
8
9
| li:first-child {
color: pink;
}
li:last-child {
color: purple;
}
li:nth-child(4) {
color: skyblue;
}
|
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
1
2
3
4
5
6
7
8
9
10
|
div[class^=font] {
color: pink;
}
div[class$=footer] {
color: skyblue;
}
div[class*=tao] {
color: green;
}
|
1
2
3
4
5
6
7
8
9
10
11
| <div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
|
伪元素选择器（CSS3)
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| p::first-letter {
font-size: 20px;
color: hotpink;
}
p::first-line {
color: skyblue;
}
p::selection {
color: orange;
}
|
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
1
2
3
4
5
6
| div::befor {
content:"开始";
}
div::after {
content:"结束";
}
|
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
“:” 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| div:first-child {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box;
padding: 10px;
border: 15px solid red;
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box;
border: 15px solid red;
}
|
一个使用字体图标的案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
div::before {
content: "\ea51";
position: absolute;
right: 10px;
top: 5px;
}
div:hover {
border: 1px solid red;
}
div:hover::before {
color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
|
效果如下所示：
鼠标经过前：
鼠标经过后：
