网页前端之HTML

<HTML>

<html>标签相当于java类的大括号

HTML：(Hyper Text Markup Language)超文本标记语言,是用来写网页的，是设计页面的基础。

HTML是由标签所组成的语言，能展示超文本效果,由头和体组成：

1
2
3
4
5
6
<html>    
	<head>
		<title>标题</title>
	</head>
		<font color="red">需要展示给用户看的信息内容</font>
</html>

HTML文件的扩展名为html或者htm:htm是老的命名规范，html是新的

HTML文件由浏览器直接解析运行，无需编译，直接由上到下依次解析执行

HTML标签通常由开始标签和结束标签组成，开始标签和结束标签之间的内容叫做内容体。

没有内容体的标签叫做空标签。仅由一个标签组成，例如：<br/> 自关闭

HTML标签不区分大小写，为了方便阅读，建议小写

HTML标签是有属性的，格式为属性名=“属性值”，属性值用引号引起来(单引号双引号都可以，建议双引号)

HTML标签建议包裹嵌套，不建议交叉嵌套

注释

<!--HTML注释内容-->用于注释HTML源码，不在HTML效果中展示

<head>

<head>中存放的是网页的说明性内容

<meta>

是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等。·

<meta> 元素可提供有关页面的元信息（meta-information,元数据总是以名称/值的形式被成对传递的），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

整体来看，HTML5之前，meta标签只有两个主要属性，分别是 name 属性和 http-equiv 属性。 HTML5新添加”charset”

1
2
3
4
5
6
7
8
9
10
11
<meta name="参数" content="参数值" />  
//name属性主要用于描述网页，对应属性是 content ，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）
这里的name参数可以是多种值，对应不同效果：
Keywords（关键字）
Description（简介）
robots（机器人向导）   用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引
参数为 all ：默认值，文件将被检索，且页面上的链接可以被查询； 参数为 none ：文件将不被检索，且页面上的链接不可以被查询； 参数为 index ：文件将被检索； 参数为 follow ：页面上的链接可以被查询； 参数为 noindex ：文件将不被检索，但页面上的链接可以被查询； 参数为 nofollow ：文件将被检索，但页面上的链接不可以被查询；
author（作者）
copyright（版权）
generator（编辑器）
revisit-after（网站重访）
1
<meta property="参数"  content="参数值"/>
1
2
3
4
5
6
7
8
9
10
<meta http-equiv="参数"  content="参数值"/>
//http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值
Expires（期限）  指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新传输  必须使用GMT的时间格式，或者直接设为0（数字表示多久后过期）
Pragma（cache模式） 禁止浏览器从本地计算机的缓存中访问页面内容   网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览
Refresh（刷新）自动刷新并指向新页面 `<meta http-equiv="refresh"content="5; url=http://www.baidu.com/"/>`
Set-Cookie（cookie设定）
Window-target（显示窗口的设定） 强制页面在当前窗口以独立页面显示,可以用来防止别人在框架里调用你的页面
content-Type（显示字符集的设定）设定页面使用的字符集，一般不用
content-Language（显示语言的设定）
http-equiv="imagetoolbar" 指定是否显示图片工具栏，当为false代表不显示，当为true代表显示
1
<meta charset="UTF-8">

<link> 标签定义该文档与外部资源的关系。最常见的用途是链接样式表，也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标)

网站站点的小图标：

1
2
<link rel="icon" href="images/logo.png" type="image/png" sizes="1651*1024"/>  指定格式为icon，然后类型指定图片，href放资源位置，可以设置大小
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  指定格式为icon，类型指定为ico，href放资源位置

<script>

1、async 表示立即下载该脚本，但不妨碍页面中的其他操作(比如：下载其他资源或等待加载其他脚本)，只对外部文件有效。
2、charset 属性与 src 属性一起使用，告诉浏览器用来编码这个 javascript 程序的字符集。它的值是任何一个 ISO 标准字符集编码的名称。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

3、defer 表示脚本可以延迟到文档完全被解析和显示后再执行。只对外部文件有效。
4、language 已废弃。 原来用于表示编写代码用的脚本语言，因大多数浏览器都会忽略这个属性，因此也没必要再用了。
5、src 表示包含要执行代码的外部文件。

6、type 可以看成language的替代属性；表示编写代码使用的脚本语言的内容类型。默认值为text/javascript

注意：
1、传统做法是将所有的<script>元素都放在页面的<head>元素中，但是这样页面响应就会比较慢（必须等到全部的Javascript代码都被下载、解析和执行完后，才能呈现页面内容）。现在的做法一般都是将Javascript引用放在<body>元素中页面内容的后面。

2、defer和asyncd的作用基本相似。定义defer=“defer”的脚本将延迟到浏览器遇到</html>标签后再执行，原则上是延迟脚本还是按照原来的顺序执行，但是实际上执行的顺序不一定按照指定顺序执行。但是HTML5（以后称为H5）中已经明确规定,defer属性只使用于外部脚本文件，因此支持H5的实现会忽略给嵌入脚本设置的defer属性。async也只适用于外部脚本文件，并告诉浏览器立即下载脚本文件。但与defer不同的是，它并不保证按照指定顺序执行，又称为异步脚本标签（各脚本文件相互独立，互不依赖）

<body>

分类：

1.单标签：在⾃身标签标识结束，主要应⽤场景为功能性标签

双标签：有成对的结束标识，主要应⽤场景为内容性标签

2.行标签：⼜名内联标签，内联标签⾃身不具备宽⾼，可以和其他元素保持在同一行。根据内容多少来占用行内空间，不会自动换行。例：<br>, <td>, <a>, <img>，<span>strong，u（下划线），em(强调)，i(斜体)，sub(下标),sup(上标)

块标签：又名块级标签，块标签可以设置宽⾼，不可以和其他元素保持在同一行，通常独⾃占据⼀⾏。以区域块方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行。例：<h1>, <p>, <ul>, <table>，<div>li，dl，dt，dd,form,hr,pre

行内块级标签：可以和其他元素保持在在一行，还能能设置宽高。例：textarea，input，img，button

所谓的行级标签，块级标签，其实可以根据需要，在开发中通过css样式互相转换。即通过设置display属性，它的属性值中，inline（元素以行内标签进行展示），block（元素以块级标签进行展示），inline-block（元素以行内块级标签进行展示）

3.单一标签：单独出现，表示具体的功能或展示具体的内容

组合标签：配合使⽤，才能产⽣相应的内容与效果

<h>标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题 <h6> 定义最小的标题

注意：

  1. 浏览器会自动地在标题的前后添加空行。
  2. 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后

<p>段落

用于展示效果中划分段落，并且自动在段前和段后自动加空行

align：段落内容的对齐方式，默认是left，内容居左；right，右；center，居中。

（这个将要分段的内容放在<p></p>中即可）

注意：

  1. 浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

  2. 使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）

<br />换行

用于展示效果中换行

HTML源码中换行，浏览器解析时会自动忽略

（这个放在要换行的地方就行）

<font>字体

用于展示效果中修饰文字样式

<font 属性名=”属性值”> 文字</font>

size:控制字体大小。最小1~最大7

color:控制字体颜色.使用英文设置

face:控制字体类型。只能设置系统字库中存在的字体类型
这个font可以加载在文字中间，不一定非要在开始，从哪开始的字就是从哪变化）

<hr />分割线

水平线，多用于段落之间的分割

<pre>原样标签

原样标签会保留空格和换行符，显示原文本文字。格式化文本。预定义格式文本。

在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

<section>段落标签

和p同为块标签，自动换行显示每一段，但是section不存在行距，p自带行距

注：section和P放在一起，p优先，使用行距

<div>块级的块标签

用于在效果中 定义一块，默认占满一行，进行内容的显示 （会自动换行，默认占满一行 适用于大量信息展示）

是块级元素，内容会独立占一行。它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

<span>行级的块标签

用于在效果中 一行上定义一个块，进行内容显示 （有多少内容就会占用多大空间 span不会自动换行 适用于少量信息展示，比如提示密码错误）

HTML <span> 元素是内联元素，行内标签，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

<ol> <li> 有序的列表标签

<ol></ol> 用于在效果中定义一个有序列表 （会表明每个条目的顺序）

列表条项目标签：<li></li> 用于在效果中定义一个列表的项目

<ul> <li> 无序的列表标签

<ul></ul> 用于在效果中定义一个无序列表 （使用最多）

<dl><dt><dd>项目列表标签

dl（定义列表，跟ul…li类似），dt（定义了定义列表中的项目），dd（定义描述项目的内容，跟dt一起搭配）

<sub> 下标

<sup> 上标

实体标签(转义字符)

空格 &nbsp; HTML源码中的多个空格，效果中最终会合并成一个

小于号 &lt;

大于号 &gt;

人民币 &yen;¥

版权 &copy;©

商标 &reg;®

<embed></embed>媒体标签

hidden ： 设置隐藏插件是否隐藏

src ：用于指定音乐的路径 例：<embed src="1.mp3" ></embed>

<marquee> 滚动标签 （已废弃）

用来插入一段滚动的文字。可以使用它的属性控制当文本到达容器边缘发生的事情

direction : 指定滚动的方向

scrollamount : 指定滚动的速度。

loop :指定滚动的次数

<a> 超链接标签

<a></a>用于在效果中定义一个可以点击跳转的链接
href：超链接跳转的路径

​ 内网本机路径：相对路径和绝对路径

​ 互联网路径：http://地址

​ 本页：默认跳转到本页

href : 用于指定链接的资源

target: 设置打开新资源的目标

_Blank 在独立的窗口上打开新资源

_self 在当前窗口打开新资源

file: file协议（文件协议）这种协议主要是用于搜索本地机器的资源文件的。 格式：file:///f:/图片/1.jpg

邮件 的协议： mailTo

迅雷的协议： thunder

超链接标签的作用：

  1. 可以用于链接资源。

  2. 锚点点位:首先编写一个锚点 ,锚点的格式： <a name="锚点名字"> 数据</a> ,再使用a标签 的herf属性连接到锚点出。 href=”#锚点的名字“

超链接正常工作：1. a标签中必须有内容 2.a标签必须有href属性

注意：a标签内容体，不仅仅是文字，也可以是其他内容，例如图片

a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上。例如图片

<img> 图片标签

<img /> 用于在页面效果中展示一张图片
src：图片的路径。（必有属性）

路径的写法：内网路径：绝对路径：C:\javaweb001_html\img\c_1.jpg文件在硬盘上的具体位置 （不建议使用）

相对路径：../img/c_1.jpg 从引入者所在目录出发 ../表示上一层目录 ./表示当前目录 （建议使用）

互联网路径：http://www.baidu.com/xxx.jpg 必须在前面加上http://

​ width： 设置图片宽度

​ height： 设置图片高度

​ 宽度和高度的设置：

​ 默认单位是px，像素 “400” 固定的

​ 百分比设置：是父标签的百分比 “50%” 动态改变的

​ alt: 如果图片资源无法找到，那么就显示对应的文字对图片进行说明。

​ （这些属性放在img和/之间）

<table>表格标签

表格使用到的标签：

<table> 表格

<tr> 定义表格中的一行

<td> 在表格一行中定义单元格

<th> 表头 。默认的样式是居中，加粗。区别于普通单元格标签，里面的内容居中加粗了

<caption> 表格的标题

表格常用的属性：

​ border ：设置表格的边框

​ width : 设置表格的宽度

​ height: 设置表格的高度

单元格合并：<td> <th>都有这个合并属性
colspan： 设置单元格占据指定的列数;跨列合并单元格 colspan=”n”

rowspan： 设置单元格占据指定的行数; 跨行合并单元格 rowspan=”n”

合并步骤：A：确定合并哪几个单元格，确定是跨行合并还是跨列合并

B：在第一个出现的单元格上书写合并单元格属性

C：合并几个单元格，属性值就写几

D：被合并的单元格必须删掉

<thead> 标签用于组合 HTML 表格的表头内容。

<thead> 元素应该与<tbody>和<tfoot>元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

<form>表单标签

表单标签的根标签是<form>标签

用来将用户输入的数据提交给服务器的程序 相当于一个WEB程序的入口

1.定义一个表单 <form>表单内容</form>

2.在表单中定义对应的表单输入项
<input /> 是一种自关闭的标签，用户可以在该标签上通过填写和选择进行数据的输入

​ type：设置该标签的种类

​ text：文本框 默认 不一定需要指定value值

​ password：密码框 内容为非明文

​ radio：单选框 在同一组内才具有单选效果（分组需要用到name属性，将name设置成相同的就变为一组）（单选框只能选择，不能输入 需要指定value属性，否则提交的都是on）（可以checked设置默认选中）

​ checkbox：复选框 在同一组内才具有复选效果

​ submit：提交按钮 用于控制表单提交数据（当表单提交后，会出现 ？参数列表 参数列表格式：参数1=参数值1&参数2=参数值2&参数3=参数值3 这些参数都是之前设置的name，参数值是value）

​ rest：重置按钮 用于将表单输入项恢复到默认状态

​ file：附件框 用于文件上传

​ hidden：隐藏域 一般用于提交时，服务器需要拿到，但是用户不需要看到的数据

​ button：普通按钮 需要和js的事件一起使用

​ name：单选框、复选框进行数据的分组；设置该标签对应的参数名

​ value：设置该标签对应的参数值；作为按钮的名字

​ checked：设置单选框/复选框的默认选中状态 值就是”cheked”

​ readonly：设置该标签的参数值只读，用户无法手动更改，但是数据可以正常提交 readonly=“readonly”

​ disabled：设置该标签不可用，参数值无法更改且参数值也无法提交

​ <select></select>选择框标签 定义一个选择框

​ name：设置该标签对应的参数名

​ multiple：设置该标签选项全部显示，并且可以进行多选提交，默认为单选

​ <option></option>选项标签 用于为一个选择添加一个选项

​ value：设置需要提交的参数值（一般选择的东西都需要指定的返回值value）

​ selected：设置选项的默认选中状态

注意事项：option的内容体一般是用来展示的 参数值应该是option的value属性值

​ <textarea></textarea>文本域标签

表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入

name：设置该标签对应的参数名

文本域和文本框的区别：文本框不能换行，文本域可以

文本框参数值是value属性，文本域参数值是标签的内容体

提交表单

action：指定提交数据的地址.将数据提交到何处（提交的地方其实是？前面的地址） 默认提交到本页

​ 本机内网路径：相对路径: 绝对路径：

​ 互联网路径：http：//

method：指定表单的提交方式.将数据以何种方式提交 默认为get 提交方式可定义为get或者post

get提交方式的特点：把数据拼接到地址栏上

post提交方式的特点：没有把数据拼接到地址栏上。请求体

get和post的区别：

​ get会把提交的参数列表拼接到了地址栏后面，post不会

​ get方式提交的数据敏感信息不安全，post提交的数据相对安全

​ get方式提交的数据量是有限的，post方式从理论上提交的数据量是无限大的。所以尽量使用post方式提交表单

提交表单的注意事项：

提交中文问题：为什么要用URL编码：（因为你可能提交的数据中包含&符号，后台无法正确切割）

URL编码解决方式：对特殊符号，中文进行编码，为了保证表单数据传递时能更好区分出name和value，保证数据传递的完整性

例子：中文的你好进行URL编码：

（1）你好，进行普通的编码，编码成字节数组（使用的是页面规定的字符集，例如utf-8）

（2）字节数组中的每一个元素都会从10进制转为16进制

（3）把已经转为16进制的字节数组，以%进行拼接，拼接出的字符串，就是URL编码后的结果

注意： 表单项的数据如果需要提交到服务器上面，那么表单项必须要有name的属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本输入框 单 行- -> 用户名：<input name="userName" type="text"/><br/>
<!-- 密码框 -->
密码：<input name="password" type="password"/><br/>
<!-- 单选框 -->
性别： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
来自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">广州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 复选框 同一组的复选框name的属性值要一致 -->
兴趣爱好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上传框-->
大头照：<input name="image" type="file" /><br/>
个人简介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
<!-- 重置按钮 -->
<input type="reset" value="重置"/>
</form>
</body>

<figure> 标签

代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体

<template>标签

模板元素

1.标签内容隐藏性: 自带display:none

2.标签位置任意性：类似<script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中

3.childNodes无效性:肉眼看上去是<template>标签里面还有很多子标签,但是template.childNodes无效，可以使用template.innerHTML获取完整的HTML片段。template.content会返回一个文档片段，可以理解为另外一个document，然后，使用document下的一些查询API就可以获得<template>标签里面的“伪子元素”了

<iframe>标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以用来在一个网页内引用另一个网页，网页的内容资源用src。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#fh5co-menu {
  background: ;
  position: absolute;   绝对的
  top: 0;
  z-index: 999;
  width: 100%;
  padding-bottom: 20px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  margin-top: 20px;
}


//控制背景随动
#fh5co-clients {
  padding: 2em 0;
  background: #4fd2c2;
  position: relative;
}


#fh5co-clients1 {
  padding: 2em 0;
  background: #4fd2c2;
  position: relative;

}
@media screen and (max-width: 992px) {
  #fh5co-clients1 .fh5co-client {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  #fh5co-clients1 .fh5co-client {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 480px) {
  #fh5co-clients1 .fh5co-client img {
    max-width: 100%;
  }
}

定位

长度单位

px 像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

ex 相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
% 相对长度单位。相对于浏览器窗口的大小

CSS绝对长度单位 说明
in 英寸Inches (1 英寸 = 2.54 厘米)
cm 厘米Centimeters
mm 毫米Millimeters
pt 点Points (1点 = 1/72英寸)
pc 皮卡Picas (1 皮卡 = 12 点)

PX和PT转换的公式： pt=px乘以3/4。比如12px×3/4=9pt大小。
PX和em转换的公式： em=16乘以px，也就是说1.5em=1.5×16=24px

用px来定义字体，就无法用浏览器字体放大的功能。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
◆CSS中em属性有如下特点

1.em的值并不是固定的；

2.em会继承父级元素的字体大小。

◆所以我们在写CSS的时候，需要注意

1.body选择器中声明Font-size=62.5%；

2.将你的原来的px数值除以10，然后换上em作为单位；

3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释

position: absolute;的元素会相对于第一个设置了position: relative;的祖先元素进行定位，将assistor设置为position: reletive;，滚动条是在parent中的，position: fixed;和parent内的内容滚动就都实现了。

z-index 属性来控制这些框的堆放次序

响应式布局（PC端适配手机端）

只开发一个网页，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。可以适配任何设备，兼容多个终端。

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

设备的划分情况为：

  • 小于768的为超小屏幕（手机）
  • 768~992之间的为小屏设备（平板）
  • 992~1200的中等屏幕（桌面显示器）
  • 大于1200的宽屏设备（大桌面显示器）

屏幕宽度低于480像素的设备（如iPhone等）

1.在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

1
2
3
4
5
6
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 
height：和 width 相对应，指定高度。也可以指定为 window.screen.height
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。 
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

2.在CSS文件尾部增加针对不同屏幕分辨率的规则：

1
2
3
4
5
6
7
8
@media screen and (max-device-width: 720px) {

}

media=”screenand(max-device-width:400px)” href=”tinyScreen.css”/>
如果屏幕宽度小于400像素(max-device-width:400px)，就加载tinyScreen.css文件　
media=”screenand(min-width:400px)and(max-device-width:600px)” href=”smallScreen.css”/>
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件　　

3.布局宽度使用相对宽度。网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦

4.在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em

PC站和手机站匹配最常用的几种方法是移动适配、JS跳转、Meta声明、302规则等等

1、移动适配

现在很多搜索引擎都提供移动适配的功能，例如百度的开放适配和360的移动适配，利用百度站长工具提交PC页-手机页对应关系Sitemap，或者利用360站长工具提交PC页-手机页对应关系txt就能实现PC站内容和手机站一一适配。 这样做的优点是只需要在搜索引擎工具提交资料，无需对站点本事做改动，而且网站内容一一对应，并不只局限于网站首页。 缺点就是只能在百度或者360移动搜索中生效，其他没用提交适配文件的搜索中就无效了。

2、JS跳转

JS跳转对于某些行业来说有着重要的作用，尤其是对于用户转换率网站首页较高的网站，只需要在网站的头部加一段JS代码判定是否是移动端访问，然后所有的流量就会全部流向手机站的主页。 JS跳转的优点是适用于所以的移动搜索，并不局限于百度和360，可以提高用户的转换率。 缺点是难以实现每个页面的一一对应，而且容易被某些搜索引擎判定作弊，从而受到惩罚。

3、Meta声明

Meta声明的格式一般为，站长可以将这段代码加在PC站的头部，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式。 Meta声明的优点是代码简单易懂，操作方便。 缺点是只能在百度移动搜索中生效，对于其他搜索引擎无效。

4、302规则

302规则指的是，当判定移动端访问网站时，302临时跳转到一个网址(手机站)，例如可以在htaccess文件里加上一段判定手机的代码，做个302重定向。 这样做的好处是，不需要再额外在网站的前端代码中加任何东西，也不需要向搜索引擎提交规则，可是据测试，有可能会导致PC站被降权。 虽然302是暂时性的重定向，但过于频繁的302是很有可能给网站带来不利的影响的，具体的尺度需要站长自己去把握。

以上4种适配方法是最为常见的操作方法，通常PC站做了以上处理后，一段时间以后移动端搜索出来的结果，下面匹配的网址就变成了移动站网址，不过标题还是PC站标题。 至于到底哪种方法更好，更倾向于第一种，毕竟百度移动搜索占据着网站的大部分流量，而且用户体验度也最好。

轮播图

轮播图的样式有很多,可以选择一个框架，然后将代码复制下来，将用到的样式放到自己的文件夹里，这样就可以做成一个轮播图。

在layui中，如果想让轮播图完成在放大缩小的过程中保证图片随动，目前解除了两种方法：

1.写一个响应式布局的css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#fh5co-clients {
  padding: 2em 0;
  background: #4fd2c2;
  position: relative;
}
#fh5co-clients {
  margin-bottom: 0px;
}
@media screen and (max-width: 992px) {
  #fh5co-clients {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 768px) {
  #fh5co-clients{
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 480px) {
  #fh5co-clients img {
    max-width: 100%;
  }
}

2.写一个js方法，会不断刷新，影响体验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 var b = 1768/881;//这里的图片数值是根据自己的图片指定
    //获取浏览器宽度
    var W = $(window).width();
    var H = $(window).height();
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height: (W/b).toString()+"px"  //按比例和浏览器可视页面宽度来获取高度
            // ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
            ,indicator: 'none'
        });
    });
    $(window).resize(function () {
// setBanner();
        window.location.reload()  //每当设置后，进行刷新

    })

网页调试技巧

1.F12开发模式，左上角图标有两个：箭头图标可以选择元素，就会指示当前指向的元素，可以注意数值多大，方便知道这个标签管辖的范围。手机图标，点击之后可以模拟手机端查看网页，也可以通过拖动浏览器大小模拟查看。

2.开发者模式下，elements中选择了某一行后，可以在style中查看生效的样式，不生效的样式被划掉了，没有写过的样式不会显示。可以在样式中手动编辑数值模拟调试（比改一处看一处方便一点）

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一起加油吧！