HTML5简介
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5新元素与属性
1.语义标签
- header元素描述了文档的头部区域
- nav元素 定义导航链接的部分
- article元素 定义独立的内容
- section元素 定义文档中的段落
- aside元素 定义页面主区域内容之外的内容（比如侧边栏）
- footer元素 描述了文档的底部区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<div><article>artical
<section>section</section>
</article>
<aside>aside</aside></div>
<footer>footer</footer>
</body>
</html>
定义样式后呈现一下基本结构 （图中尖括号请忽略）
2.音视频标签
HTML5 规定了在网页上嵌入音频元素的标准，即使用 元素，和一种通过 video 元素来包含视频的标准方法。
- audio标签--------音频标签
1.如需在 HTML5 中播放音频，可使用以下代码：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
其中controls 属性供添加播放、暂停和音量控件。
2.元素支持三种音频格式文件: MP3, Wav, 和 Ogg
3.audio标签的属性：
- video 标签---------视频标签
1.如需在 HTML5 中播放视频，可使用以下代码：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
2. 元素支持三种视频格式：MP4, WebM, 和 Ogg
3.audio标签的属性：
3.新增input类型
- 从拾色器中选择一个颜色(type=“color”):
<input type="color" name=" ">
- 定义一个时间控制器(type=date):
<input type="date" name=" ">
- 定义一个日期和时间控制器（本地时间）(type=“datetime”):
<input type="datetime" name=" ">
- 定义一个email选择器( type=“email”):
<input type="email" name="email">
- 选择一个月份(type=“month”)
<input type="month" name=" ">
- 定义一个数值输入域(type=“number”)
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
- 显示滑动条(type=“range”)
<input type="range" name="points" min="1" max="10">
- 定义一个搜索框(type=“search”)
<input type="search" name=" ">
- 定义输入电话号码字段(type=“tel”)
<input type="tel" name=" ">
- 选择一个时间(小时加分钟)(type=“time”)
<input type="time" name=" ">
- 选择周和年(type=“week”)
<input type="week" name=" ">
3.新增表单属性
| 属性 | 值 | 解释 |
|---|---|---|
| required | required | 规定必需在提交表单之前填写输入字段 |
| placeholder | 提示文本 | 表单的提示信息 |
| multiple | multiple | 允许用户输入多个值 |
| autofocus | autofocus | 在当前页面自动获得焦点 |
| autocomplete | on/off | 规定 元素输入字段是否应该启用自动完成功能 |
| step | number | 规定合法数字间隔 |
HTML案例
1. 注册页面案例
(来自b站pink老师,视频请转往b站黑马程序员pink老师前端入门教程)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<form>
<table >
<!-- name要一样（元素名称），id不一样（元素地址） -->
<tr><td>性别</td><td><input type="radio" name="sex" id="man" ><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label></td></tr>
<tr><td>生日</td><td>
<select >
<option selected="selected">--请选择年--</option>
<option >2001</option> <option >2000</option> <option >1999</option>
<option >1998</option> <option >1997</option> <option >1996</option>
<option >1995</option> <option >1994</option> <option >1993</option>
</select>
<select>
<option selected="selected">--请选择月</option>
<option>12</option> <option>11</option> <option>10</option>
<option>9</option> <option>8</option> <option>7</option>
<option>6</option> <option>5</option> <option>4</option>
<option>3</option> <option>2</option> <option>1</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>24</option> <option>23</option> <option>22</option>
<option>21</option> <option>20</option> <option>19</option>
<option>18</option> <option>17</option> <option>16</option>
<option>15</option> <option>14</option> <option>13</option>
<option>12</option> <option>11</option> <option>10</option>
<option>9</option> <option>8</option> <option>7</option>
<option>6</option> <option>5</option> <option>4</option>
<option>3</option> <option>2</option> <option>1</option>
</select></td></tr>
<tr><td>所在地区</td><td><input type="text" value="北京思密达"></td></tr>
<!-- 这里”北京思密达“要在框里显示出来，用到value元素值的概念 -->
<tr><td> 婚姻状况</td><td><input type="radio" name="qingkuang" id="未婚"><label for="未婚">未婚</label>
<input type="radio" name="qingkuang" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="qingkuang" id="lihun"><label for="lihun">离婚</label></td></tr>
<br><tr><td>学历</td><td><input type="text"></td></tr>
<tr><td>喜欢的类型</td><td><input type="checkbox" id="1"><label for="1">妩媚的</label>
<input type="checkbox" id="2"><label for="2">可爱的</label>
<input type="checkbox" id="3"><label for="3">小鲜肉</label>
<input type="checkbox" id="4"><label for="4">老腊肉</label>
<input type="checkbox" id="5"><label for="5">都喜欢</label></td></tr>
<tr><td>自我介绍</td><td><textarea>自我介绍</textarea></td></tr>
<tr><td></td><td><input type="submit" name="免费注册"></td></tr>
<tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr>
<tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr>
<tr><td></td><td><h3>我承诺</h3>
<ul>
<li>年满18、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul></td></tr>
</table>
</form>
<!-- 总结：格式整齐要用到table表格标签，table里不能有其他标签，只能有他的属性（tr td th）
还需注意无序列表，有序列表，自定义列表的区别与使用，无序列表ul有序列表ol,自定义列表（di,dt,dd）
还需要考虑用户的交互，点击文字即可勾选用label(for),给input加id -->
</body>
</html>
此案例较为简单,包含的知识点有:
1.结构整齐,用多行两列的表格制作
2.单选框与复选框的应用
- 要实现单选和多选功能,需要给每个选项添加相同的name属性和不同的id属性
- 要实现点击相应的元素即可选择对应的选项,需要添加label标签
3.无序列表的应用
2. 报名页面案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 0 auto;
width: 800px;
}
.title {
text-align: center;
background-color: rgba(85, 84, 84,.2);
font-weight: 700;
}
i {
color: red;
padding: 0 5px;
}
tr:last-child td {
text-align: center;
}
em {
font-style: normal;
color: rgb(129, 127, 127);
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4" class="title">个人基本信息</td>
</tr>
<tr>
<td><i>*</i>姓名 </td>
<td><input type="text"></td>
<td><i>*</i>性别</td>
<td><input type="radio" name="sex" id="nan">男<input type="radio" name="sex" id="nv">女</td>
</tr>
<tr>
<td>籍贯</td>
<td><input type="text"></td>
<td>出生日期</td>
<td><input type="date" name="" id=""></td>
</tr>
<tr>
<td> </td>
<td colspan="3"><input type="file" name="" id=""></td>
</tr>
<tr>
<td>个人照片</td>
<td colspan="3">注：照片大小请控制在200K以内。</td>
</tr>
<tr>
<td>身份证号码</td>
<td><input type="text"></td>
<td><i>*</i>毕业院校</td>
<td><input type="text"></td>
</tr>
<tr>
<td><i>*</i>最后学历</td>
<td><input type="text"></td>
<td><i>*</i>专业</td>
<td><input type="text"></td>
</tr>
<tr>
<td><i>*</i>毕业时间</td>
<td><input type="text"></td>
<td>学位证书</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="4" class="title">个人能力</td>
</tr>
<tr>
<td rowspan="3">语言能力</td>
<td><i>*</i>英语能力水平</td>
<td colspan="2"><input type="radio" name="leval" id="four">四级<input type="radio" name="leval" id="six">六级
<input type="radio" name="leval" id="other">其他</td>
</tr>
<tr>
<td>日本语能力水平</td>
<td colspan="2"><input type="radio" name="jps" id="one">1级
<input type="radio" name="jps" id="two">2级
<input type="radio" name="jps" id="three">3级
<input type="radio" name="jps" id="four">4级
<input type="radio" name="jps" id="five">其他
</td>
</tr>
<tr>
<td>其他语言能力水平</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td rowspan="3">专业能力</td>
<td>计算机语言</td>
<td colspan="2">
<input type="checkbox" name="language" id="java">JAVA
<input type="checkbox" name="language" id="net">.NET
<input type="checkbox" name="language" id="c">C/C++
<input type="checkbox" name="language" id="more">其他
</td>
</tr>
<tr>
<td>使用平台</td>
<td colspan="2">
<input type="checkbox" name="area" id="windows">WINDOWS系列
<input type="checkbox" name="area" id="unix">UNIX系列
<input type="checkbox" name="area" id="more">其他
</td>
</tr>
<tr>
<td>使用数据库</td>
<td colspan="2">
<input type="checkbox" name="ku" id="oracle">ORACLE
<input type="checkbox" name="ku" id="db2">DB2
<input type="checkbox" name="ku" id="ss">SYBASE/SQL-SEVER
<input type="checkbox" name="ku" id="more">其他
</td>
</tr>
<tr>
<td colspan="2">所获证书（国家标准考试）</td>
<td colspan="2">
<input type="checkbox" name="zhengshu" id="xt">系统分析师
<input type="checkbox" name="zhengshu" id="gj">高级程序员
<input type="checkbox" name="zhengshu" id="cxy">程序员
<input type="checkbox" name="zhengshu" id="more">其他
</td>
</tr>
<tr>
<td></td>
<td colspan="3"><em>格式：工作单位（或项目名称），担任职位，时间，工作内容描述</em> </td>
</tr>
<tr>
<td>工作经验</td>
<td colspan="3"><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td>备注</td>
<td colspan="3"><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="4" class="title">联系方式</td>
</tr>
<tr>
<td><i>*</i>电话</td>
<td><input type="text"></td>
<td><i>*</i>手机</td>
<td><input type="text"></td>
</tr>
<tr>
<td><i>*</i>E-mail</td>
<td><input type="text"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>通讯地址</td>
<td><input type="text"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>邮编</td>
<td><input type="text"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4" class="title">其他</td>
</tr>
<tr>
<td><i>*</i>调查</td>
<td colspan="3">
<em>您是如何了解本站的：</em><br>
<input type="checkbox" name="sourse" id="haibao">海报
<input type="checkbox" name="sourse" id="baozhi">报纸
<input type="checkbox" name="sourse" id="tv">电视
<input type="checkbox" name="sourse" id="friends">朋友介绍
<input type="checkbox" name="sourse" id="ss">搜索引擎
</td>
</tr>
<tr>
<td colspan="4"><input type="submit" value="提交信息"><button>重新填写</button></td>
</tr>
</table>
</body>
</html>
此案例较上一个案例复杂一点,包含的知识点有:
1.四个小模块标题的表格单元格合并
注:这里需要分辨是要合并单元格还是保留空的单元格
2.红色星号* 的制作
- 可添加类名或id属性添加样式
- 这里使用了i标签,给所有的i标签添加样式
3.input多个类型的使用
3. 导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.list {
float: left;
width: 200px;
height: 220px;
margin-right: 10px;
background-color: rgba(91, 155, 180,.5);
border-radius: 0 0 5px 0;
}
ul li {
list-style: none;
padding: 5px 0;
border-bottom: 1px solid white;
}
ul li:first-child {
width: 200px;
background-color: rgba(6, 47, 100,.3);
}
ul li:first-child a {
color: white;
}
ul li a {
color: blue;
text-decoration: none;
padding-left: 15px;
font-weight: 700;
}
ul li a:hover {
color: orange;
}
h5 {
color: #ccc;
}
.neirong {
float: left;
width: 800px;
}
h1 {
font-weight: normal;
}
.fazhan {
color: orange;
}
</style>
</head>
<body>
<div class="list">
<ul>
<li><a href="">走进我们</a> </li>
<li><a href="">项目背景</a></li>
<li><a href="">项目主旨</a></li>
<li><a href="">项目核心</a></li>
<li><a href="">实训项目</a></li>
<li><a href="" class="fazhan">发展历程</a></li>
<li><a href="">学员发声</a></li>
<li><a href=""></a></li>
</ul>
</div>
<div class="neirong">
<h5>当前位置：网站首页》走进我们》发展历程</h5><br>
<h1>发展历程</h1><br><br><br><br>
<p>—— —— 2008年3月，商业可行性调研启动：南大苏富特组件了一支国际化的专业团队，由廖言讯（港）NTC GM、Manmeet Sigh （印度）自身外籍顾问、戴超（南大苏富特服务外包企业务领启航者）针对培训项目进行可行性调研与商业策划；</p><br>
<p>—— ——2008年8-9月，起跑点：南大苏富特总部；</p><br>
<p>—— ——2008年9月24日，与IBM（中国）有限公司大中华区该机经理去中华先生在南京会晤；</p>
</div>
</body>
</html>
此案例结构较为简单,但需要用到大量的CSS样式
1.一般导航栏都会用ul>li>a来制作
2.右边内容使用了标题标签h1,段落标签p,换行标签br
总结
本篇文章主要完善了上一节HTML基础中没有写道的HTNL5新增属性和标签,并结合三个案例巩固了HTML标签和属性的使用,虽然后两个案例用到了CSS,但我们发现用HTML搭建结构并不难,一个网页有结构,表现,行为组成,它的核心部分就是HTML搭建的结构,所以HTML很重要!!!
下一节将会总结CSS的基础知识和小案例.
