html5
#HTML5
1.1 语义化标签
新增的,用法不变,根据名字对应结构有相应的含义
作用:方便开发者开发
1.头部标签 页眉
<header>网页头部内容</header>
2.脚部标签
<footer>网页底部内容</footer>
3.导航标签 链接各个页面
<hav>页面导航内容</hav>
4.区段标签 可包含所有段
<section>“节”或“段”</section>
5.文章标签 自成一体
<article>网页里独立的文章</article>
6.附属信息
<aside>网页附属信息</aside>
7.表格的语义化
table标签:定义一个表格
tr标签:定义行
th标签:定义表格头部内容的列
td标签:定义表格主题内容的列
thead标签:定义表格头部
tbody标签:定义表格主体部分
<table>
<caption>标题</caption>
<thead>
<tr>
<th>姓名</th> 加粗
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>llk</td>
<td>lqt</td>
</tr>
</thead>
<tbody>
<tr>
<td><td/>
</tr>
</tbody>
</table>
#1.2HTML5 新增表单控件
1.邮件 输入域
<input type="email"/>
2.URL地址 输入域
<input type="url"/> 自动验证url域的值
3.数值
<input type="number"/>
4.拾色器
<input type="color"/> 不知道什么用
5.日起选择器
<input type="date"/> 日月年
<input type="month"/> 月年
<input type="week"/> 周年
<input type="time"/> 时间
<input type="datatime-local"/> 时间,日月年(本地)
1.3音频
1.支持格式
Ogg Vorbis/MP3/Wav
2.单个音频
<audio src="(文件位置)" controls="controls">
your browser does not support the audio tag</audio>
3.多个音频 引入不同格式的,浏览器寻找合适格式播放
<audio controls="controls">
<source src="baroqeu.ogg" type="audio/ogg"/>
<source src="baroqeu.mp3" type="audio/mp3"/>
your browser does not support the audio tag</audio>
4.单个视频
<video src="(文件位置)" controls="controls">
your browser does not support the audio tag</video>
5.多个视频 浏览器选择合适视频格式播放
<video controls="controls">
<source src="baroqeu.ogg" type="audio/ogg"/>
<source src="baroqeu.mp4" type="audio/mp4"/>
your browser does not support the audio tag</video>
#属性
1.href 链接指向的页面URL
2.title 定义鼠标悬停时的内容
<a href="#" title="悬停内容">链接1</a>
3.target
<a href="#" target="_blank">链接1</a> 原页面保留,跳转到一个新页面
4.name 锚点名称
<a name="maodian">点击</a> 锚点位置
<a href="#maodian">点击必须</a> 条跳转到锚点位置
二、图片标签
<img src="图片地址"/>
属性:
<img title="悬停内容"/>
<img alt="文本"/> 当图片无法加载显示的文本
三、控制标签
<label for="username">用户名:</label>
<input id="username" type="text"/>
绑定文字和域,for id 内容相同的
四、内联框架
<iframe src="显示另外一个页面" frameborder="1/0(有无边框)" name="test"></frame>
<a href="*.html" target="test">点击</a>
在一个域里显示一个页面,点击跳转到指定页面
5.下拉列表
<select multiple="multiple(多选)" size="数字(下拉选项数量)>
<option select="selected">项</option>
开始时下拉列表默认项
</select>
7.0 table
1.<table border="1">有无边框,若加大数字,边框加大
2.<table border="1" cellpadding="10"> 字到单元格之间的距离
3.<table border="1" cellspacing="10"> 单元格之间的距离
4.<td colspan="2">项</td> 將这一列与下一列合并
5.<td rowsspan="2">项</td> 將这一行与下一行合并
#form的属性:
1.action
<form action="*.html">提交表单并跳转到*页面
2.method
<form action="" method="get/post">
get:显示提交数据,速度快,用于查询数据
post:不显示提交数据,慢,传送数据
#7.1 input
1.value
<input value="">更改按钮上的字,更改显示的默认值
2.disabled
<input value="" disabled="disabled">
禁用
输入框属性:
1.name 定义input元素的名称
<form action="#" method="get"> 会在地址栏显示输入数据,post不显示
<input type="text" name="username"/> 无name数据无法提交
<input type="password" name="password"/> 同上
<input type="submit" /> 只有提交按钮才能提交数据
</form>
2.maxlength
<input type="text" maxlength="5"/>
字符的最大长度
3.placeholder
<input type="text" placehoder="请输入用户名"/>
提示,点击就消失