、 利用meta标签

Meta标签主要用来描述一个HTML网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等，它的Description和Keywords属性，可加入网站的关键字，让网页利于搜索引擎。

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。

以上标签只支持一种尺寸，正确的做法是用js动态生成下面标签，前提是要先获取屏幕尺寸。

<script type="text/javascript">

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了。但这只适合布局简单的页面，复杂的页面实现很困难。

3、 使用CSS3单位rem

在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者差别请自行查阅），假设宽度为W，一个div在宽度为640px的设计稿的下的宽度为dW1，如果html的font-size为100px，那么这个div的宽度用rem表示是多少呢？

计算：div宽度dW2=dW1/100,px与rem之间换算除以100就可以，这是假定屏幕宽度为640的，而不同宽度的屏幕怎么处理，为了能保证换算容易那就要为html设置一个合适的font-size，计算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多数浏览器font-size的最小值为12px，所以只能用100作为缩放比例。

所以会在头部加上这个JS代码：

<script type="text/javascript">

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、 媒体查询

媒体查询正是为解决网页适应手机屏幕。媒体查询的功能就是为不同的“媒体”设置不同的css样式，页面尺寸，设备屏幕尺寸等，比如我们要为宽度小于480px的页面中的class="icon"的元素设置样式，可以这样写，@media screen and (max-width=480px) {.icon{ some styles }};具体可自行研究。

以上几种方法，仅供大家参考。如有不妥，欢迎指正。制作自适应页面需要比较好的编程基础和技术觉悟，一般的小白，不建议大家为了做自适应网页专门学习HTML5、CSS3和JS，毕竟这并非一朝一夕就能学会的。如果技术小白想做自适应网页，这里给大家提供一种思路，用建站宝盒。完全不需要编程基础，全程拖拽，一样能做出让人惊艳的自适应网站。现在还有免费建站活动，无论外行内行，大家可以注册体验一下。

零基础免费做HTML5自适应网站：http://www.iisp.com/design/free-site.php?s=yuqiuping

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

一、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

二、代码规范

2.1代码规范

新建一个Web项目

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

• 单标签不用写关闭符号

• 双标签省略结束标签

• html、head、body、colgroup、tbody可以完全省略

• 删除其中一些，打开浏览器的检查元素功能，也不会报错

三、各类标签

3.1文本标签

• b标签：表示关键字和产品名称。<b>html</b>其实它的实际作用就是将一段文字加粗。但是并不是特别强调它的重要性。比如说：在一段文字当中出现的某些关键字或者产品的名称就可以用b标签

• strong标签：表示比较重要的文字<strong>html</strong>它的作用也是加粗，只是它在强调一段比较重要的文本

• br单标签：换行

• wbr标签：安全换行you've no idea how worried <wbr> i was当用户对网页进行缩放的时候可能会有一些单词被挤到下一行。如果不行某个单词被分离的话，可以使用安全换行标签

• i标签：倾斜。em标签语义一样，但em表示强调<i>倾斜标签</i>它用于表示外文词汇或科技术语

• s标签：删除线。del标签表示强调。<s>html</s>删除线

• u标签：给文字加下划线。ins标签表示强调<u>html</u>下划线

• small标签：添加小号字体<small>放小一号</small>将文本放小一号。通常用于免责声明和澄清声明。

• sub和sup标签：添加上标和下标X₅和Y²（sub和sup长差不多，这个要如何去记忆呢？大家可以看到b的肚子在下面，所以呢它是下标，而p的头部在上方，所以记录是上标。那这样一来是不是就感觉清晰了许多呢）

• q标签：引用来自其它出处的内容<q>有朋自远方来</q>

• ruby标签：语言元素。常用于帮助读者正确发音。<ruby>夔<rp>（</rp><rt>kui</rt><rp>）</rp></ruby><rp><rt>用来帮助读者掌握表意语言文字的正确发音。比如说汉语拼音在文字的上方。

• bdo标签：设置文字方向<bdo dir="rtl">设置文字方向</bdo>dbo必须使用属性dir才可以设置，一共两个值：rtl从右到左和ltr从左到右。一般默认是ltr。还有一个bdi元素也是处理方向的，由于是特殊语言的效果，并且主流浏览器有些不支持，所以可以忽略。

• mark标签：突出显示文本<mark>突出显示文本</mark>加上一个黄色的背景，黑色的字。从语义上来看，与上下文相关而突出的文本，用于记号。

• a标签：超链接a元素属于文本元素，有一些私有属性。

  href属性 <a href="http://www.baidu.com">百度</a> 这个属性是必须的，否则a元素就变得毫无意义。它的属性值意味着点击跳转到指定的外部网站去。

  target属性<a href="http://www.baidu.com" target="_blank">百度</a> 这个属性告诉浏览器希望打开的新窗口显示在哪里。_blank表示在新窗口中打开文档。_self表示在当前窗口打开文档。默认_self。(_parent和_top这些要结合框架来使用，但是基本上用得已经很少了。)

  锚点设置：用于将同一个文档中的另一个元素移入视野。说通俗一点就是通过点击这个锚点定位到页面中的某个位置。

<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元素，对它们进行清晰有效的分类。

• p标签：表示段落<p>这是一个段落</p> <p>这是一个段落</p>p标签就是将内部包含的文本形成一个段落。它们可以自动换行，而且段落与段落之间保持一定量的空隙。

• div标签：通用分组<div>这是一个块标签</div> <div>这是另一个块标签</div>在早期的版本中经常用到，用div将其他数据或标签包裹起来，进而进行布局。但是在html5中，渐渐被其他元素替代。（它与p标签的区别就是两段文本间没有空隙。空隙间隔和br标签换行一样）

• blockquite标签：引用大段其他地方的内容<blockquote>引用别人的内容的辅导费打发打发可以换行哦他也有首尾缩进的效果</blockquote>有段落空隙的功能，还包含了首尾缩进的功能。

• pre标签：按照原格式展示数据<pre> 我就是 长这样的 参差不齐 </pre>（有时候某些文字就想要按照原来的格式显示出来就要用到pre标签。它就是将数据原封不动的显示出来）

• hr标签：单标签。添加一条分割线。

• ul和li标签：添加无限列表

<ul>

<li>貂蝉</li>

<li>大乔</li>

<li>小乔</li>

<li>孙尚香</li>

</ul>

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

• ol和li：表示有序列表

• start属性：表示从第几个序列开始统计。<ol start="2">

• reversed属性：是否倒序排列。<ol reversed>（不过这个属性有很多的浏览器不支持，所以要谨慎使用）

• type属性：表示列表的编号的类型 <ol type="A">

• value属性：这是属于li的属性。表示强行设置某个项目的编号。<li value="7">安琪拉</li>

• dl、dt、dd：列表标签

<dl>

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

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

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

<dl>

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

• figure和figcaption标签：使用插图的意思。一般用于图片的布局。

<figure>

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

<img src="img.png">

</figure>

3.3表格标签

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

3.3.1 标签

• table：表示表格标签

• tr：代表某一行

• td：代表一个单元格。

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

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

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

<td>沉鱼落雁</td>

<td>法师</td>

</tr>

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

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

<td>羞花闭月</td>

<td>刺客</td>

</tr>

</table>

• th：代表标题单元格。代表标题，作用是将内部文字居中且加粗。

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• thead：代表表头。（某些时候，网页上的表头是由js动态生成的。有可能没按照先后的顺序排列，如此一来表头就有可能显示到第二行、第三行甚至是表尾。用thead将tr括起来可以让数据永远显示在第一行）

<thead>

<tr>

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

• tfoot:表示表尾：与表头相反

• tbody:表示表格的主体部分

• (这里非常建议用分主体、表头、表尾的方式写。因为到后期使用CSS样式的时候只要拿到某个标签就可以设置总体的样式了，这样就会非常方便)

• caption:添加表格的标题

• colgroup:群组。用于设置列的属性。默认设置第一个（有的时候需要设置单独列的属性，如果说我只想设置第二列的属性，则需要把第一列的设置成白色）

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

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

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

• col：群组的子标签。更加灵活的设置列属性。通过占位符设置不需要的属性。

<colgroup>

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

<col style="background: pink;">

</colgroup>

3.3.2属性

• border:表示边框的宽度 <table border="1"></table>

• style:通用属性。在css中做详解。

• colspan：合并列 <td colspan="3">统计</td>这句代码表示共占三个单元格

• rowspan:合并行

<tr>

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

<th>姓名</th>

<th>特征</th>

<th>职业</th>

</tr>

3.3文档元素

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

• header标签：表示页面头部。通常包括标题或导航等内容。下面内容会换行（在页面中一般会用样式将它设置到居中）

• footer标签:表示页面的尾部，一般用于版权声明、友情链接等。

• h1-h6标签：标题标签，有字体加粗的效果。从1-6字号依次减小

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

• hgroup:组合标题。hgroup的作用就是当多个标题出现，干扰到一对或多个本身需要整合的标题。

<header>

<hgroup>

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

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

</hgroup>

</header>

<footer>

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

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

</footer>

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

• section标签: 定义一个文档的主题内容

• nav标签: 给文档页面添加一个导航

• aritcle标签：添加一个独立成篇的文档（像平常看到的论坛，贴吧，评论都有自己的头、尾和内容等）

<article>

<header>

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

</header>

</article>

• aside标签：生成注释栏。

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

• address表示文档或者是article元素的联系信息

• <address>联系信息</address>

• 本身有倾斜的效果。如果是在article元素下表示其下的联系信息，如果是在body元素下表示整个文档的联系信息

3.4嵌入元素

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

• img标签：用于显示图片

• src：嵌入图像的url

• alt：（如果图片能正常显示则没有任何效果。若图片加载不成功会出现备用内容）

• width/height:定义图片的宽度和高度,单位是像素<img src="img.png" alt="风景图" width="320" height="400"/>

• ismap:获取到图片区域的像素点加入了ismap属性之后，点击图片在浏览器中就会获得图片被点击的地方的像素点。（把文件在目录中打开，讲文件拷贝到谷歌浏览器打开就能看见）

<a href="index.html">

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

</a>

• usemap:创建分区的响应图。比如说点击图片的某一部分，可以跳转到某一个网页。（当点击了coords这块区域时，跳转到指定的网页）

<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>

• iframe标签：嵌入另一个文档。表示在一个页面内建立一个区域引入另一个页面。

<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标签：用于显示进度

• 该标签会产生一个进度条，一般我们会用js代码来控制其内部的值。(当前值用value来表示，而最大值用max来表示)

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

• meter标签：显示范围里的值（类似于进度条,可以规定最大值和最小值max/min。low值规定它的值过低，high表示值过高。而optimun表示最佳值，但是这个属性是呈现不出效果的）

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

3.5音频和视频标签

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

• video标签: 视频标签属性：

• src:视频资源的url

• width：视频宽度

• height:视频高度

• <video src="test.mp4" width="320" height="400"></video>

• controls:设置后显示播放控件（未设置这个属性时，视频就像一张图片，设置controls之后才能显示视频播放控件）

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

• autoplay:表示立即播放视频

• loop:反复播放视频（也就是说在播放结束之后会重新播放视频）

• muted:设置之后，视频会处于静音状态

• poster:指定视频数据载入时显示的图片。（相当于视频的一个封面）

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

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

• preload:预加载。不设置会在第一次播放自动缓存。如果值为none会直到用户点击时再加载视频。如果值为metadata表示播放之前只加载第一帧。auto是默认的，表示要求浏览器尽快的加载视频。

• 兼容多个浏览器 source标签

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

<source src="test.webm"/>

<source src="test.mp4"/>

</video>

• audio标签：用于嵌套音频内容。属性与视频元素类似。只是没有宽高设置和图片。

• <audio src="test.mp3" controls></audio>

3.6表单标签

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

• form标签：表示定义html表单。用该标签包含的标签具有提交功能。也就是说，在浏览器的地址栏里面能获取到用户的信息。(如果不定义表单，那么它是无法提交数据的)

<form>

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

<button>提交</button>

</form>

属性

• action:表示表单提交到的页面(也就是要把数据传入到哪个页面中)

• method:表示表单的提交方式。默认是get。而get和post请求的区别就是post后面不跟请求体。也就是用户信息。相对来说更加的安全。（一般来说，get是用于超链接提交居多，post用作表单提交居多）

• <form method="post" action="http://www.haosou.com"></from>

• enctype:表示浏览器对发送给服务器的数据采用的编码格式。有三种格式。默认是不能将文件上传到服务器&rdquo;application/x-www-form-urlencoded&ldquo;、multipart/form-data用于将文件上传到服务器、text/plain不建议使用

• name:设置表单名称，以便程序调用

• target:提交的目标，与超链接无异

• autocomplete:设置浏览器记录用户输入的信息。分为on和off两个值。默认为on。

• novalidate：设置是否执行客户端数据有效性检查

• input标签：表示用来收集用户输入数据的控件。它默认会出现一个单行的文本框。

• type:文本框的类型。值为text时表示单行文本框；值为password表示密码框；值为search时，除了火狐浏览器的其他浏览器外，会显示一个叉来取消搜索内容，值为number时，表示只限于数字输入；值为range时，生成一个数值范围文本框；当type为date系列时，可以获取日期和时间的值，有六种形态date、month、time、week、datetime、datetime-local；当值为color代表可以获取不同的颜色；当值为checkbox、radio时表示复选框和单选。单选的name值必须一样。checked表示默认勾选状态值为img是表示产生一张图片按钮，后面可以接src,alt,width等熟悉值为email,tel,url时表示输入电子邮件、电话和网址格式值为hidden时，生成一个隐藏控件（看不见，但提交的时候会显示，一般用于关联主键id提交）值为file的时候，表示上传文件。accept属性表示限制文件<input type="text">

音乐<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">

• maxlength:设置文本框最大字符长度

• readonly:设置文本框为只读状态。可以提交但是不能修改文本框的值。

• placeholder:占位符

• size:设置文本框的宽度

• required:表明用户必须输入一个值，否则无法通过输入验证

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

• autofocus:让光标聚焦在某个input元素上，方便用户直接输入。<input name="user" autofocus>

• disabled:禁止input元素 （连点击都不能）

• list：为文本框提供建议值

<form>

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

<button>提交</button>

</form>

<datalist id="abc">

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

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

</datalist>

• value:默认在输入框内出现的值

• form：与表单外的数据挂钩一遍提交

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

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

<button>提交</button>

</form>

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

• label标签:把文字和input标签包裹起来可以方便设置样式，并且当用户点击文字的时候，光标会自动移入到对应的input框。（如果只是设置了文字用label包裹，又想点击文字将标签自动移入对应的框，可以将label的属性for的值设置成与input的id设置成一样）

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

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

• fieldset标签:对表单进行编组。三个属性name、form、disabled

• legend标签：添加分组说明的标签（也就是说给分组加上一个标题）

<fieldset>

<legend>注册分组</legend>

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

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

<button>提交</button>

</fieldset>

• button标签:创建一个按钮。type属性有三个值，submit表示提交，reset表示重置，也就是把input的值变成初始值。button表示一个普通的按钮。

• select标签：下拉列表。需要和option标签配合使用。

• name属性：设定提交时的名称

• disabled属性：将下拉列表禁用

• form属性：将表单外部与内部挂钩

• size属性：下拉列表的个数

• multiple属性：设置是否可以多选

• required:选择验证，必须选择后才能通过

<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>

• textarea标签:生成一个可变大小的多行文本框

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

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

• pattern：正则表达式。开头和结尾用^和$ novalidate属性表示不要验证该表单

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

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