HTML第三讲的补充及HTML5新增标签和属性
2015-09-24 第六课 HTML第三讲的补充及HTML5
一、标签的隐藏方式
1、display:none; 不占据位置
2、visibility:hidden; 虽然看不见标签内容，但位置还是占据的。
二、标签之间的图层顺序
1、每个标签都具有z-index的属性，默认都是1，此时图层的顺序是先后建立标签的顺序。
2、只要把z-index的属性按照自己的图层要求顺序调整好序号就可以。
如：有两个标签且需要让第一个标签在最上面：z-index:2;就可以。
三、标签的语义化
SEO 搜索引擎优化
爬数据 把网页中的html数据挑选存入数据库中，方便搜索引擎搜索。
如何提高权重？ h1~h6的权重较高
<em> 只是强调
strong 重点强调
<s> 只是标记删除线
<del> 可以指明具体删除原因和日期，更加具有语义。
** 提高权重时尽量使用语义更清楚的方式。
四、HTML标签补充
1、鼠标放置在标签上面时自动出现对应说明的功能
<abbr title="Hyper text Markup Language">HTML</abbr> ---专门用于缩写说明，语义度更高。
<div title="Hyper text Markup Language">HTML</div> ---通用功能。
2、定义【dl】列表：专用于问答方式的列表，比【ol】【ul】列表语义度更高。
<dl>
<dt>子曰：“巧言令色，鲜矣仁！”</dt>
<dd>孔子说：“花言巧语，装出和颜悦色的样子，这种人的仁心就很少了。”</dd>
<dt>季</dt>
<dd>1、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）</dd>
<dd>2、三个月为一季,一年分春夏秋冬四季</dd>
</dl>
运行结果：
子曰：“巧言令色，鲜矣仁！”
孔子说：“花言巧语，装出和颜悦色的样子，这种人的仁心就很少了。”
季
1、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）
2、三个月为一季,一年分春夏秋冬四季
3、预格式文本标签
<pre>
1、这是一沟绝望的死水
2、清风吹不起半点漪沦
3、不如多扔些破铜烂铁
4、爽性泼它的剩菜残羹
</pre>
** <pre>标签中的内容会保持设计是的原样式，不需要加特殊处理空格和换行符。
4、版权符
© 运行结果是：©
5、对html进行转义
<相当于【<】，>相当于【>】。
如：<body> ---运行结果为：<body>
五、HTML5的新增标签
HTML5是正在兴起的标准，在较高版本的浏览器上才能起作用。
1、多媒体标签：video、audio
A、audio标签
不同浏览器对于HTML5的audio变迁和音频格式的兼容性一览表：
<audio src="files/12.mp3" controls="controls"> ---确定多媒体文件格式
<audio controls="controls" autoplay loop>
<source src="files/12.mp3" type="audio/mpeg"/> ---在两种多媒体文件格式中自动选择
<source src="files/12.ogg" type="audio/ogg"/>
</audio>
** 这样能使audio自动寻找【mp3】和【ogg】中可播放的格式来播放。
ogg格式需要用转换器从mp3格式转换出来。
B、video标签
<video src="files/34.mp4" controls="controls" autoplay>
<video controls="controls">
<source src="files/34.mp4" type="video/mpeg"/>
<source src="files/34.mp4" type="video/ogg"/>
</video>
2、非主流标签
A、<datalist> 定义选项列表
如：<input type="text" list="taglist" />
<datalist id="taglist">
<option>苹果</option>
<option>橘子</option>
<option>西红柿</option>
</datalist>
** 选择内容后必须删除才能再选其他内容。
B、<details> 定义文档细节，当鼠标点击时才显示详细内容。
如：<details>
<summary>Copyright 2011.</summary> ---关键题目：，当鼠标点击关键题目时才显示详细内容。
<p>All pages and graphics on this web site are the property of W3School.</p> ---详细内容
</details>
C、<menu> 定义菜单列表
如：<menu>
<li>home</li>
<li>home</li>
<li>home</li>
</menu>
D、<address> 定义地址标签
</address>
E、<progress> 定义运行中的进度（进程）。
max number 定义完成的值。
value number 定义进程的当前值。
如：<progress max="100" value="30"></progress> ---改变value的值可以获得进度条。
F、<mark> 定义高亮显示的文本。
如：<mark>中国</mark>人民最伟大 ---‘中国’两个字会高亮显示
G、<time> 定义日期或时间，或者两者
如：<p>CSS作业的最后提交时间为<time>2015-09-30 12:00</time>为止。</p>
3、新增的表单元素
<input type="email" />
<input type="url" />
<input type="tel" />
<input type="number" min="1" max="20" step="4" />
<input type="range" min="1" max="20" step="4" />
<input type="search" />
<input type="color" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
4、新增的input属性
A、<autocompelete="on"> 用户输入自动完成功能
如：<form autocompelete="on"> ---有了这行命令之后输入框中输入第一字母时会自动搜寻出合适的项目。
<input type="text" list="citylist" />
<datalist id="citylist">
<option>BeiJing</option>
<option>QingDao</option>
<option>QingZhou</option>
<option>QingHai</option>
</datalist>
</form>
B、<autofocus="autofocus"> 页面加载的时候获取焦点
如：<input type="text" autofocus="autofocus" /> 页面激活后焦点落在这个input标签中。
C、<form="form1"> form外也可以做数据提交
如：<form action="" method="get" id="form1">
...
</form>
<input type="text" name="address1" form="form1" /> --此标签尽管在from外面也被提交。
D、<formaction="2.aspx"> form内的内容也可以改action地址
如：<form action="1.aspx"> ---form中指定的提交页面是"1.aspx"
<input type="submit" value="提交" formaction="2.aspx" /> ---form内元素可以修改要提交的页面。
</form>
E、<multiple="multiple"> file可以支持多文件上传。
如：<input type="file" name="img" multiple="multiple" />
F、<placeholder="提示内容"> 新增默认内容提示。
如：<input type="text" placeholder="请输入用户名"/> ---在输入框中用浅色字显示提示内容。
G、<pattern="正则表达式"> 支持自定义验证功能。
如：<form action="1.aspx">
请输入邮政编码：<input type="text" pattern="[0-9]{6}" placeholder="请输入6位数的邮编" />
<input type="submit" />
</form>
H、<required="required"> 新增不能为空属性
如：<form action="1.aspx">
请输入邮政编码：<input type="text" required="required" /> ---输入框不允许为空
<input type="submit" />
</form>
5、新增全局属性
A、<contenteditable="true"> 规定是否可编辑元素的内容。
如：<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p> ---此时p标签的内容可编辑。
B、<hidden="hidden"> 规定对元素进行隐藏。（display:none效果相同。）
如：<p hidden="hidden">这是一段隐藏的段落。</p> ---被隐藏且不占位置。
<p>这是一段可见的段落。</p>
C、<tabindex="2"> tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。
6、其他属性
A、<reversed start="5"> ol的reversed属性对列表顺序进行降序。
如：<ol reversed start="5" > ---start="5"是指定降序开始的值
<li>SHUFFLE!/三界恋曲</li>
<li>扑杀天使</li>
<li>零之使魔</li>
<li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li>
<li>to love/出包王女</li>
</ol>
显示结果是：
5. SHUFFLE!/三界恋曲
4. 扑杀天使
3. 零之使魔
2.不要撒娇哦/极乐天师/纯情和尚俏尼姑
1.to love/出包王女
