HTML5 基础（2）—— 网页布局的改变、标签属性的变化
一、网页布局的改变
传统布局
HTML5布局
HTML5布局的有点
- 使用更多语义化的标签代替大量无意义的div可以网页的质量
- 减少以前用于CSS调用的class和id属性，减少代码量
- 对搜索引擎的友好
HTML5标签简单兼容
header,nav,section,aside...,footer{display:block}在CSS中这样写，可以当浏览器不支持HTML5标签的时候也知道该标签代表的是块级元素。
二、标签属性的变化
（一）input标签新增类型
- url
- number
- range
- date picker
- search
- color
- tel
1.email（移动端）
<input type="email" name="my-email"/>只有在移动端点击email类型的input框时，会弹出方便输入邮箱的小键盘，PC端无效果。
在PC端输入错误内容后提交表单的时，提交事件会被阻止并提示错误
2.url（移动端）
<input type="url" name="url"/>在移动端会弹出方便输入网址的小键盘
3.tel（移动端）
<input tyoe="tel" name="tel"/>方便移动端输入号码。
4.number
<input type="number" name="number"/>使input输入框只能输入：0123456789-+.e这个几个数字和字符。
也方便移动端的输入
5.date pickers（细分为6个类型）
- date —— 选取日、月、年
- month —— 选取月、年
- week —— 选取周和年
- time —— 选取时间
- datetime —— 选取时间、日、月、年（UTC时间）（个别浏览器不兼容，如chrome）
- datetime-local —— 选取时间、日、月、年（本地时间）
data: <input type="date"/>
<br>
month: <input type="month"/>
<br>
week: <input type="week"/>
<br>
time: <input type="time"/>
<br>
datetime: <input type="datetime"/>
<br>
datetime-local: <input type="datetime-local"/>
<br>6.range
<input type="range" name="range1" min="1" max="10"/><!-- 值选择的范围 1~10 -->
<input type="range" name="range2"/><!-- 默认值的范围是 1~100 -->7.search
<input type="search" name="search"/> 内容后面会多个x号
8.color
<input type="color" name="color"/>
默认颜色是黑色
（二）表单新增属性
- autocomplete
- autofocus
- multiple
- placeholder
- required
1.autocomplete属性
该属性的作用是表单提交刷新页面后，再次填写内容输入框会有下拉历史提示框。
autocomplete属性有两个值：
- on 开启
- off 关闭
form或input默认拥有自动完成属性。
<form action="#" autocomplete="on">
<p>请输入姓名：</p>
<input type="text" name="name"/>
<br><br>
<p>请输入邮箱：</p><!-- 一些重要的信息我们不需要有提示，可以设置该属性off关闭指定input -->
<input type="email" name="email" autocomplete="off"/>
<br><br>
<input type="submit" value="提交"/>
</form>2.autofocus属性
规定在页面加载时，域自动获得焦点。
autofocus="autofocus"autofocus属性适用于所有的input标签类型。
<form action="#" autocomplete="on">
用户名：<input type="text" name="text" autofocus="autofocus"/>
<br><br>
邮箱：<input type="email" name="email" autocomplete="off"/>
<br><br>
手机号码：<input type="number" name="phone" autocomplete="off"/>
<br><br>
<input type="submit">
</form>3.multiple属性
规定输入域中可以选择多个值
PS：multiple属性适用于以下类型的<input>标签：email和file
<form action="#" autocomplete="on">
用户名：<input type="text" name="text" autofocus="autofocus" />
<br><br>
邮箱：<input type="email" name="email" autocomplete="off"/>
<br><br>
手机号码：<input type="number" name="phone" autocomplete="off"/>
<br><br>
<input type="submit">
</form>
ps：file类型选择要选择多个类型按住ctrl，email类型要输入多个邮箱请用 , （逗号）来分隔，只有这样后台接收的才会是一个邮箱的字符串数组。
4. placeholder属性（很实用）
提供一种提示，描述输入框所期待的值，会在输入域为空的时候显示。
<form action="#">
请输入用户名：<input type="text" name="username" placeholder="请输入用户名" />
<br><br>
请输入密码：<input type="paasword" name="pwd" placeholder="请输入密码" />
</form>
以前这种效果需要使用js才能实现，在html5可以更方便的实现。
ps：placeholder属性适用于input标签类型有：
- text
- search
- url
- tel
- password
5.required属性
规定必须在提交之前填写的输入域不能为空。
required="required"<form action="#">
用户名：<input type="text" name="username" placeholder="请输入用户名" required="required" />
<br><br>
密码：<input type="password" name="pwd" placeholder="请输入密码" required="required" />
<br><br>
查询信息：<input type="search" name="search" placeholder="请输入你要搜索的内容">
<br><br>
<input type="submit"/>
</form>
ps：required属性适用于input标签类型有：text、search、url、tel、email、password、date pickers、number、checkbox、radio、file
（三）链接属性
- size
- target
- 超链接
1.sizes
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">2.target
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>href ：规定页面中所有相对链接的基准 URL
target：可以控制整个页面所有超链接的跳转方式
3.超链接
a：media=”“（表示对设备进行优化，handheld对手持设备进行支持，tv表示对电视设备进行支持）
a：hreflang=”zh” （设置语言，这里设置语言是中文）
a：rel=”external”（设置超链接的引用，这里超链接为外部链接）
（四）其他属性
- script
- ol
- html
- style
1.script的新属性（重要）
（1）defer 脚本延迟加载（只有IE兼容）
- defer 加载到脚本时先不引入，而是等整个页面都渲染完成后在引入。
<head>
<script defer="defer" src="url"/></script>
</head>对你没看错，HTML5 之前，我们要引入js文件，或者是大型的js库（Bootstrap、Angular、React）我们为了不影响页面的渲染都是在</body>标签之前引入的，但这又不符合语意，defer 属性可以让<script>标签写在<head>中但也可起到延迟到页面加载的最后再引入js文件（但目前只有IE支持该属性）
（2）async 多线程加载脚本（兼容主流浏览器）
<head>
<script async="async" src="url"/></script>
</head>- async 但浏览器加载带有async属性的<script>标签的时候，加载变为双线程，读取js文件的同时，也是在加载网页，既不影响js文件加载，也不影响网页的加载。是网页端首次进行多线程的操作。（兼容主流浏览器）
2.ol有序列表的新属性
新增属性：
- start —— 起始值
- reversed —— 倒叙排列
<ol start="3" reversed="reversed">
<li>HTML</li>
<li>JS</li>
<li>CSS</li>
<li>JAVA</li>
<li>PHP</li>
</ol>3.html的新属性
<html manifest="cache.manifest">cache这个是可以自定义的。
当网页带有这个属性的时候，正常浏览此网页时，会将该网页的.htmk、.css、.js文件存储到本地，当断网访问该网页的时候也可以正常浏览，做到页面的离线应用。
4.style的新属性（不提倡使用）
<style scopde>
...
</style>这样我们可以在任何位置，里面写css
下一篇： HTML5(一)