您的位置：主页 > 魔豆动态 > 网站优化 >

html5一篇足矣

日期：2017/09/30     阅读：     来源：未知

html5一篇足矣

前言：万物之始，大道至简，演化至繁。水滴不染尘世浮华，方能纯净如冰川灵动如丝绒。落红不逐春日绚烂，方有一年春尽一年春。

一、html5的介绍

1.1介绍

html号称超文本标记语言，代表着浏览器技术发展的一个阶段。html版本1到版本5的更新迭代都是由组织W3C管理的。当时到html4.1的时候，W3C组织就声称不再更新版本了。而改用XHTML。但是由于浏览器的各种不兼容的问题，于是乎W3C这个组织就和其他的浏览器产商一起联合起来将这门语言再次更新到html5

比喻：

html5 >机器人的骨骼

css3 >机器人的外在修饰

js > 机器人的行为如行走、抬腿

Jquery > 封装好的控制行为的库，可以提高效率

1.2优势

1.3开发工具

HBuild、WebStrom、sublime Text

html5一篇足矣

二、代码规范

2.1代码规范

新建一个Web项目

html5一篇足矣

相比html4来说，html5的语法更加简洁并且在规定上也更加宽松。

三、各类标签

3.1文本标签

<a href="#1">第一节</a>

<a href="#2">第二节</a>

<a href="#3">第三节</a>

</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

<a name="1">第一节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

&hellip;&hellip;以上省略一万行&hellip;&hellip;

==========以下全都是分隔符============</br>

<a name="2">第二节的内容 我☝应该说点啥的。

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

==========以下全都是分隔符============</br>

</a>

3.2分组标签

顾名思义，分组元素就是用来组织相关内容的html元素，对它们进行清晰有效的分类。

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚香</li>

</ul>

ul标签表示无序列表（就像咱们平时说的无符号整形，在前面也是加了一个u），而li标签则表示内部的列表项

<dl>

<dt>第一份内容</dt>

<dd>第一行详细内容</dd>

<dd>第二行详细内容</dd>

<dl>

虽然说这三个标签是一个整体，但是dt和dd标签并非都必须出现

<figure>

<figcaption>这里有一张图哦</figcaption>

<img src="img.png">

</figure>

3.3表格标签

表格的用途是以网格的形式显示二维数据。开发者可以对表格中的元素标签设置不同的属性如边框宽度、颜色等使表格呈现出不同的效果。

3.3.1 标签

<table border="1" style="width:300px;">

<tr> <!--相当于行-->

<td>王昭君</td> <!--相当于每行中的每一列-->

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

<tr> <!--相当于行-->

<td>貂蝉</td> <!--相当于每行中的每一列-->

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

<!--<table border="1" style="width:300px;">-->

<colgroup style="background:white;" span="1"></colgroup> <!--设置第一个颜色为白-->

<colgroup style="background:red;" span="1"></colgroup> <!--设置第二个颜色为红 span代表一列-->

<colgroup>

<col> <!--占位，表示第一列不设置-->

<col style="background: pink;">

</colgroup>

3.3.2属性

<tr>

<th rowspan="4">学员</th>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

3.3文档元素

文档元素的主要作用是划分各个不同的内容，让整个布局更加清晰。 进入代替div。让整个布局元素都具有语义。

<h1>这里是一个大标题</h1> <h3>这里是一个副标题</h3>

<header>

<hgroup>

<h1>这里是一个大标题</h1>

<h3>这里是一个副标题</h3>

</hgroup>

</header>

<footer>

<h4>这里是尾部的副标题</h4>

这里存放页面的尾部：如版权声明，友情链接

</footer>

如上面那段代码，头部的h4标题就能与h1绑定起来，从而和尾部的h4分离。

<article>

<header>

<nav>&hellip;&hellip;</nav>

</header>

</article>

<aside>这是一个注释栏</aside>

html5一篇足矣

3.4嵌入元素

嵌入元素主要功能是把外部的一些资源插入到html中。

<a href="index.html">

<img ismap src="img_5.jpg" alt="风景图">

</a>

<img src="img_5.jpg" usemap="#Map" />

<map name="Map">

<area shape="circle" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">

</map>

<a href="index.html" >index</a>

<a href="http://www.baidu.com" target="in">百度</a>

<iframe src="http://www.baidu.com" width="300" heigth="300" name="in"></iframe>

<progress value="30" max="100"></progress>

<meter value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

3.5音频和视频标签

音频和视频文件其实都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题字幕等信息。在网页实现中，有很多的浏览器厂商都有自己的标准，所以html5规范也没有强制指定编解码器了。所以在网页上嵌入视频和音频时，最好提供mp4格式和webM格式的视频。否则有可能由于浏览器不兼容的问题导致视频不能播放。

<video src="test.mp4" width="320" height="400" controls

poster="img_5.jpg"></video>

<video src="test.mp4" width="320" height="400" controls poster="img_5.jpg">

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

3.6表单标签

表单标签是用于获取用户的输入数据的。

<form>

用户名：<input name="user">

<button>提交</button>

</form>

属性

音乐<input type="checkbox" checked>

体育<input type="checkbox">

<input type="radio" name="sex" value="男" checked>男

<input type="radio" name="sex" value="女">女

<input type="hidden" value="1" name="id">

<input type="file" accept="image/gif">

<form>

<input type="text" list="abc">

<button>提交</button>

</form>

<datalist id="abc">

<option value="1">湖南</option>

<option value="2">海南</option>

</datalist>

<form id="register" name="reg" action="index.html">

用户名：<input name="user">

<button>提交</button>

</form>

年龄：<input name="age" form="register">

<label for="user"> 用户名：</label>

<input id="user" name="user">

<fieldset>

<legend>注册分组</legend>

<label for="user"> 用户名：</label>

<input id="user" name="user">

<button>提交</button>

</fieldset>

<select name="fruit" size="5" multiple >

<!--value值是真正要提交上去的值，而后面的是显示到页面的值-->

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</select>

optgroup标签:对列表进行分组选择。

<form action="http://www.baidu.com">

<select name="fruit" multiple size="5">

<optgroup label="表情包">

<option value="1">花花菇凉</option>

<option value="2">文小喵</option>

</optgroup>

<optgroup label="书">

<option value="4" selected>微微一笑很倾城</option>

<option value="5">神雕侠侣</option>

</optgroup>

</select>

<button>提交</button>

</form>

<!--wrap表示是否插入换行符 有soft和hard两种。hard提交之后在地址栏可以看见%插入的隐藏换行符-->

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

<input type="text" placeholder="请输入区号和座机" pattern="^[d]{2,4}-[d]{6,8}$">

html对网页页面的布局或者是表单验证等功能都相对简陋，并且不同的浏览器支持的成熟度是不尽相同的。因此在大部分情况下，还是要借助js或jqury等前端库，来呈现丰富多彩的验证效果。

更多>>相关文章