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="请输入用户名"/>
提示,点击就消失

posted @ 2017-04-23 20:57  Non-zero  阅读(876)  评论(0编辑  收藏  举报