#大有学问#

#头条创作挑战赛#

在HTML基础上增加了新的标签、新的表单标签、新的表单属性。

新增的语义化标签

div标签对搜索引擎来说，是没有语义的。新增的语义标签主要是针对搜索引擎识别的。

头部标签：<header>

导航标签：<nav>

内容标签：<article>

定义文档某个区域：<section>

侧边栏标签：<aside>

尾部标签：<footer>

代码练习

<header>头部标签</header>
<nav>导航栏标签</nav>
<article class="clearF">
  <article class="article1">
    内容标签
    <section>定义文档某个区域</section>
  </article>
  <aside>侧边栏标签</aside>
</article>
<footer>尾部标签</footer>

* {
  margin: 0;
  padding: 0;
}
.clearF {
  clear: both;
}
header,
nav,
article,
footer {
  width: 1200px;
  background-color: antiquewhite;
  border-radius: 15px;
  margin: 10px auto;
  text-align: center;
}
header {
  height: 100px;
  line-height: 100px;
}
nav {
  height: 50px;
  line-height: 50px;
}
article {
  background-color: white;
  height: 300px;
}
.article1 {
  width: 580px;
  text-align: center;
  background-color: antiquewhite;
  border-radius: 15px;
  margin: 0;
  float: left;
}
aside {
  width: 580px;
  height: 300px;
  line-height: 300px;
  background-color: antiquewhite;
  border-radius: 15px;
  float: right;
}  
section {
  width: 300px;
  height: 50px;
  line-height: 50px;
  border-radius: 15px;
  background-color: white;
  margin: auto;
}
footer {
  height: 50px;
  line-height: 50px;
}

新增多媒体标签

• 视频标签：<video></video>

语法：

<video src="文件地址"></video>

属性：

src：视频文件路径。

width：播放器宽度。

height：播放器高度。

autoplay：视频就绪自动播放。

controls：向用户显示播放控件。

loop：是否循环播放。

poster：加载等待的画面图片。

muted：静音播放。

代码练习

video {
  width: 500px;
}

<h3>视频文件：自动播放</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted"></video>
<br>
<h3>视频文件：添加播放控件</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted" controls="controls"></video>
<br>
<h3>视频文件设置循环播放</h3>
<video src="../images/video.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
<br>
<h3>视频文件设置加载图片</h3>
<video src="../images/video.mp4" controls="controls" poster="../images/meitizhub.jpg"></video>

• 音频标签<audio></audio>

语法：

<audio src="文件地址"></audio>

属性：

src：文件路径。

autoplay：音频就绪自动播放。

controls：向用户显示播放控件。

loop：循环播放。

代码练习

<audio src="../images/audio.mp3" controls="controls"></audio>
<h3>给音频文件添加循环播放</h3>
<audio src="../images/audio.mp3" controls="controls" loop="loop"></audio>

input标签

属性值

• type属性值

email：输入类型为Email类型

url：输入类型为url类型

date：输入类型为日期。

time：输入类型为时间。

month：输入类型为月。

week：输入类型为周。

number：输入类型为数字。

tel：输入类型为手机号码

search：输入类型为搜索框。

color：生成一个颜色选择表单。

<form action="">
  <ul>
    <li>邮箱：<input type="email"></li>
    <li>网址：<input type="url"></li>
    <li>日期：<input type="date"></li>
    <li>时间：<input type="time"></li>
    <li>月份：<input type="month"></li>
    <li>周：<input type="week"></li>
    <li>数量：<input type="number"></li>
    <li>手机号码：<input type="tel"></li>
    <li>搜索：<input type="search"></li>
    <li>颜色：<input type="color"></li>
    <li><input type="button" value="提交"></li>
  </ul>
</form>

• 其他属性

required：内容不能为空。

placehoder：提示文本。

autofocus：自动聚焦属性。

autocomplete：on| off 是否显示历史输入。

multiple：提交时可多选文件。

<form action="">
  <input type="srarch" name="srar" id="" required="required" placeholder="请输入内容" autofocus="autofocus" autocomplete="on" >
  <input type="file" multiple="multiple">
  <input type="submit" value="提交">
</form>

下篇文章学习CSS新特性。