Web基础大全

发表于 2021-10-26 更新于 2024-03-25 分类于 frontend 阅读次数：本文字数： 43k 阅读时长 ≈ 39 分钟

1. HTML 基础

1.1. HTML 简介

HTML 就一直被用作万维网的信息表示语言，使用 HTML 描述的文件需要通过 web 浏览器显示出效果, 被称为超文本标记语言。用 HTML5 编写的文件, 后缀以.htm 或.html 结尾.

HTML 是一种建立网页文件的语言，通过标记式的指令(Tag)，将文字，图形、动画、声音、表格、链接、影像等内容显示出来。

1.2. HTML 整体结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菲利英语</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
      rel="stylesheet"
    />
    <link href="style.css" rel="stylesheet" />
    <script>
      // JavaScript 代码
    </script>
  </head>

  <body>
    <header>
      <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav>
      <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目，省略…… -->
      </ul>

      <form>
        <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容" />
        <input type="submit" value="搜索" />
      </form>
    </nav>

    <main>
      <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article（一篇文章），内容略…… -->
      </article>

      <aside>
        <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接，略略略…… -->
        </ul>
      </aside>
    </main>

    <footer>
      <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

以上是一个网页的基本结构, 麻雀虽小, 五脏俱全. 下面将逐一介绍.

DOCTYPE

<!DOCTYPE html> 文档类型, 这是必不可少的开头。现在新增的网页都需要如示例一样定义文档类型, 否则将触发浏览器的怪异模式. DOCTYPE 的作用是启用浏览器的标准模式. 如果没有这一行文档说明, html 文档将被认为是 HTML 标准制定之前的遗留文档, 而触发浏览器的怪异模式去兼容它, 这显然不是我们期望的. 对于 DOCTYPE, 这里只做简单介绍, 后续有详细说明.

html 标签

HTML 文档总是以<html>标签开始并以</html>结束的, 也就是说，网页的内容全部全部包含在< html>与< /html>之间. 所有的 HTML 文件都有两个主要结构：头部 head 和主体 body。

head 标签

所有那些你加到页面中，且不向看客展示的页面元素，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用作风格化页面的 CSS、字符集声明等等。

body 标签

该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

1.3. html 头部

1.3.1. 定义和用法

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

1.3.2. 标题

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

1.3.3. <base> 元素

<base> 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一个页面最多只能使用一个<base>元素。
常见的 url 路径形式分别有相对路径与绝对路径，如果 base 标签指定了目标，浏览器将通过这个目标来解析当前文档中的所有相对路径，包括的标签有（a、img、link、form），也就是说，浏览器解析时会在路径前加上 base 给的目标，而页面中的相对路径也都转换成了绝对路径。使用了 base 标签就应带上 href 属性和 target 属性
一个文档的基本 URL，可以通过使用 document.baseURI (en-US) 的 JS 脚本查询。如果文档不包含 <base> 元素，baseURI 默认为 document.location.href。
说说 base href 属性：
- 比如由 base 制定了一个 URL 地址，接下来你所要调用的文件或图片等就无须再填写完整的地址，只需写上该文件名或图片名即可。
- 下面来简单的认识一下 base 标签的用法，链接到鹏叔的博客空间的 HTML 视频教程，完整地址https://www.pengtech.net/web/web_basic_1
  1
  2
  3
  4
  5
  6
  <head>
  <base href="https://www.pengtech.net/" target="_blank" />
  </head>
  <body>
  <a href="web/web_basic_1">html基础教程</a>
  </body>
base target 属性：
target 属性是网页窗口的打开方式，在 base 标签中设置该属性，那么页面中所有的链接都将默认遵循这个方式来打开网页，分别有如下几种选择：
_blank：在新窗口打开链接页面。
_parent:在上一级窗口中打开链接。
_self：在当前窗口打开链接,此为默认值，可以省略。
_top：在浏览器的整个窗口打开链接，忽略任何框架。

1.3.4. HTML <link> 元素

1
2
3

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

rel 表示 “关系 (relationship) ” 它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。你将在链接类型中看到很多不同类型的关系

1.3.5. HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
  <style type="text/css">
    body {
      background-color: yellow;
    }
    p {
      color: blue;
    }
  </style>
</head>

1.3.6. HTML <meta> 元素

meta 标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面，搜索引擎（关键词），或其他 Web 服务。

随着 web 标准的发展, 越来越多的属性被加入到 meta 标签中来.

1.3.6.1. <meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程教程">

定义网页作者:

<meta name="author" content="eagle">

每 30 秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

指定浏览器渲染方式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

详细解释参考闷音的浅析网页 meta 标签中 X-UA-Compatible 属性的使用或者这篇文章X-UA-Compatible 是什么（详解）
注意事项：

根据概念，只能指定高版本 IE 浏览器使用低版本 IE 浏览器的渲染机制，而无法指定低版本浏览器采用高版本浏览器的渲染机制
根据官网定义 X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用
content 的内容是 IE=8，或者 IE=edge 等值，注意不是 IE8 或者直接写个 edge 的值，否则不起作用
添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。【大多数国产浏览器都是有谷歌内嵌的，所以建议默认加上】

设置文档的视宽缩放

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

1.3.6.2. <meta> 标签- charset

如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

1.3.7. HTML <script> 元素

1.3.8. HTML <noscript> 元素

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。详细解释与使用说明请参考noscript.

1.4. 文字排版

1.4.1. 标题

h1~h6
标题标签的特性:
- 加粗
- 标题标签独占一行

1.4.2. 段落和换行标签

段落标签: P
段落和段落之间有较大缝隙
换行标签: br

1.4.3. 文本格式化标签

粗体: strong 或者 b
斜体: em 或者 i
删除线: del 或者 s
下划线: ins 或者 u

1.5. 布局标签

1.5.1. div 和 span

div 是 division 的缩写, 有时候我们也习惯叫图层, 用于在页面上进行分割. DIV 元素是用来为 HTML 文档内大块（block-level）的内容提供结构和背景的元素。
span 意为跨度,跨距.

1.5.1.1. div 和 span 的区别

div:

在 html 页面布局时，我们经常会使用到 div 标签和 span 标签，那么 div 标签和 span 标签之间有什么区别？

div 标签是块级(block)元素，拥有块级元素的特点。每对 div 标签（<div></div>）里的内容都可以占据一行，不会其他标签在一行显示；div 标签总是从新行开始显示；

且 div 标签可以通过 css 样式来设置自身的宽度（也可省略，当没有使用 css 自定义宽度时，div 标签的宽度为其的容器的 100%）、高度，且还可以设置标签之间的距离（外边距和内边距）；

我们还可以在 div 标签中，使用其他标签（行内元素、块级元素都行），比如：span 标签，p 标签，也可以是 div 标签

span:

span 标签是行内(inline)元素，拥有行内元素的特点。span 标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示。

span 标签的宽度、高度都无法通过 css 样式设置，它的宽高受其本身内容（文字、图片）限制，随着内容的宽高改变而改变；span 标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。

关于块元素和行内元素以及 block-inline 的差别请参考鹏叔的技术博客 - block inline 和 inline-block 三者之间的区别

1.6. 图像处理

1.6.1. 图像标签

img 标签用于定义 html 中的图像
例如:

1	<img src="path" />

img 是 image 的缩写, 意为图像

1.6.1.1. img 标签属性说明

src 是 img 标签的必须属性, 它用于指定图像文件的路径和文件名
alt 文本替换文本,图像不能显示时的替代文字
title 提示文本, 鼠标放到图像上, 显示的文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像边框的粗细

例如

<!-- width height border 的单位为像素px -->
<img
  src="photo.jpg"
  alt="my favorite movie star"
  title="andy liu"
  width="500"
  height="300"
  border="5"
/>

1.7. 超链接

1.7.1. 超链接标签

在 html 标签中, a 标签用于定义超链接, 作用是从一个页面链接到另一个页面
a 为单词 anchor 的缩写, 意为: 锚
例如:

1	<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

1.7.1.1. a 标签属性说明

href: 用于指定链接目标的 url 地址,
target: 用于指定链接页面的打开方式, 其中_self 为默认值,_blank 为在新窗口中打开, target 有一下四种取值:
- _blank: 浏览器总在一个新打开、未命名的窗口中载入目标文档。
- _self: 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
- _parent:
- _top:

1.7.1.2. 链接分类

外部链接:

例如 https://www.philoenglish.com/

内部链接:

例如:

1	<a href="home.html">主页</a>

空链接:

1	<a href="#">开发中</a>

下载链接:

1	<a href="artifacts.zip">下载</a>

网页元素链接:
在网页中的各种网页元素都可以被链接, 如文本, 图像, 音频, 视频都可以添加超链接, 例如:

1	<a href="http://www.baidu.com"> <img src="img.jpg" /> </a>

锚点链接:

在链接文本的 href 属性中, 设置属性值为#名字的形式, 例如

1	<a href="#two"> 第二集</a>

找到目标位置标签, 里面添加一个 id 属性=刚才的名字, 例如

1	<h3 id="two">第二集介绍</h3>

1.8. 注释和特殊字符

注释:

1	<!-- 注释语句-->

特殊字符:

1	空格:   大于号: >

特殊字符列表

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

1.9. 表格

1.9.1. 表格标签

table:
- tr: 行 table row
- th: 表头 table title
- td: 数据 table data

1.9.2. 表格属性

table 标签的属性
align: 表格对齐方式选项 left, center, right
border: 表格边框
cellpadding: 单元格内容和边框之间的距离
cellspacing: 单元格和单元格之间的距离
width:

实例:

<table
  align="center"
  border="1"
  cellpandding="0"
  cellspacing="0"
  width="500"
  height="249"
>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>刘德华</td>
    <td>男</td>
    <td>56</td>
  </tr>
  <tr>
    <td>张学友</td>
    <td>男</td>
    <td>58</td>
  </tr>
</table>

1.9.3. 表格结构标签

为什么需要用结构标签?
HTML 中的 thead、tbody 和 tfoot 元素用于根据表行的内容将其分组为逻辑(logical)部分。想要这样做的主要原因有两个：
- 允许正文独立于页眉和/或页脚进行滚动
- 为了更容易地将不同的样式规则应用于表的不同部分。
三个结构标签
- thead: 表格头部区域
- tbody: 表格主体区域
- tfoot: 定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

示例:

<table border="1">
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
</table>

效果:

Council budget (in £) 2018
Items	Expenditure
Donuts	3,000
Stationery	18,000

1.9.4. 合并单元格

跨行合并: rowspan=”合并单元格的个数”
夸列合并: colspan=”合并单元格的个数”

示例:

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

效果:

Month	Savings	Savings for holiday!
January	$100	$50
February	$80	$50

1.10. 列表

1.10.1. 无序列表

实例:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

1.10.2. 有序列表

实例:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

1.10.3. 自定义列表

实例:

<dl>
  <dt>列表项1</dt>
  <dd>列表项1.1</dd>
  <dd>列表项1.2</dd>
  <dt>列表项2</dt>
  <dd>列表项2.1</dd>
  <dd>列表项2.2</dd>
</dl>

1.11. 表单标签

1.11.1. 表单域 form

1	<form action="demo.php" method="post" name="name"></form>

1.11.2. 表单控件(表单元素)

1.11.2.1. input 表单元素

input type:
- text
- password
- radio
- checkbox
- file
- hidden
- image
- reset
- submit: 提交表单按钮
- button: 定义可点击按钮, 多数情况下通过 js 启动脚本

1.11.2.2. input 表单元素属性

name:定义表单元素的名称
value:规定 input 元素的值
checked:规定 input 元素首次加载时被选中
maxlength: 规定输入字段的字符的最大长度
autocomplete: 自动完成属性指定输入字段是否应启用自动完成。
自动完成允许浏览器预测值。当用户开始键入字段时，浏览器应根据先前键入的值显示填充字段的选项。
注意：自动完成属性适用于以下输入类型：text, search, url, tel, email, password, datepickers, range, and color.
自动完成属性有两可选值(on|off), on 表示开启自动完成, off 表示关闭自动完成功能.

1.11.2.3. label 标签

label 标签经常和 input 标签搭配使用
label 标签为为 input 元素定义标注
label 标签用于绑定一个表单元素, 当点击 label 标签内的文本时, 浏览器就会自动将焦点转到或者选择对应的表单元素上, 用来增加用户体验.
label 标签的 for 属性

实例:

1 2	<label for="sexRadio"> male</label> <input type="radio" name="sex" id="sexRadio" />

核心: label 标签的 for 属性应当与相关元素的 id 属性相同.

1.11.2.4. select 表单控件

使用场景: 在页面中, 如果有多个选项让用户选择, 并且想要节约页面空间时, 我们可以使用 select 标签控件定义下拉列表.

语法:

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option selected="selected">选项3</option>
  ...
</select>

注意事项:
- select 中至少包含一对 option
- 在 option 中添加 selected 属性设置默认选中

1.11.2.5. textarea 控件

实例:

1	<textarea cols="50" rows="5"> 此处为默认输入文本</textarea>

1.12. frame 标签 (HTML5 不支持)

<frame> 标签定义 <frameset> 中的子窗口（框架）。

<frameset> 中的每个 <frame> 都可以设置不同的属性，比如 border、scrolling, noresize 等等。

注意 : HTML5 不支持 <frame> 标签。
注释：如果您希望验证包含 frame 的页面，请确保 <!DOCTYPE> 被设置为 “HTML Frameset DTD” 或者 “XHTML Frameset DTD”

示例:

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

1.13. 标签的常用属性

很多 HTML 标签都有对应的属性，即写在标签开始部分中的属性名和属性值，如 a 的 href、img 的 src 等。这里再介绍 4 种重要而且通用的属性：id、class、name 和 style。

1.13.1. id

id 属性可以给标签取一个 id, id 值应当在整个页面中独一无二，使用 id 可以有针对性地操作某一个标签，如控制样式、绑定事件等。另外，如果将 a 的 href 设置为#加上某一标签的 id，则单击链接后，页面将跳转到对应标签所在位置。

1 2	<p id="main">这是最主要的一段话</p> <a href="#main">跳到main所在位置</a>

1.13.2. class

class 属性可以给标签去一个 class, 同一个 class 值可以用于多个标签, 从而使用 class 同时操作多个标签, 如控制它们的样式, 为它们绑定事件等.

<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>

1.13.3. name

name 属性和 class 类似，只是基于 name 控制相应的标签没有 class 那么方便，可以将 id、class 和 name 理解成一个人的身份证号、姓、名等。

1.13.4. style

style 属性可以为标签添加内联样式，即使用 CSS 的一种方法，等我们了解 CSS 之后再详细讨论，这里提供一个简单的示例。

1	<p style="color: red">这是一段有颜值的内容</p>

title

title：提供有关元素的额外信息，当鼠标悬停在元素上时，通常以工具提示的形式显示。

href

href：在<a>（锚）标签中指定链接的目标 URL。

例如，一个简单的带有属性的 HTML 元素可能看起来像这样：

1	<a href="https://www.example.com" title="访问例子网站">点击这里</a>

在这个例子中，<a>标签有两个属性：href（指定链接的目标 URL）和title（提供当鼠标悬停在链接上时显示的额外信息）。属性值 "Example Domain" 和 "访问例子网站" 分别与它们的属性名称相关联，并被包含在引号中。

src

src：在<img>、<script>和<iframe>等标签中指定要嵌入的资源的路径。

alt

alt：为<img>标签定义图像的替代文本，如果图像无法显示，将显示该文本。

type

type：指定<input>标签的类型（例如text、password、submit等）。

placeholder

placeholder：为<input>和<textarea>元素提供提示文本，当输入字段为空时显示。

1.14. HTML 标签简写及全称

下表列出了 HTML 标签简写及全称：

标签	英文全称	中文说明
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Direction of Text Display	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题 1 到标题 6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本)
small	Small	变小（文本）
span	Span	跨度范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）

1.15. 查阅 html 参考文档

百度: http://www.baidu.com
W3C: http://www.w3school.com.cn
MDN: https://developer.mozilla.org/zh-CN/

2. HTML5 的新特性

2.1. 怪异模式和标准模式

在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，以及为微软（Microsoft）的 Internet Explorer 准备的版本。当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。

浏览器如何决定使用哪个模式？

对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。为了确保你的页面使用标准模式，请确认你的页面如同本范例一样拥有 DOCTYPE：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>

范例中的 DOCTYPE，，是所有可用的 DOCTYPE 之中最简单的，也是 HTML5 所推荐的。HTML 的早期变种也属于推荐标准，不过，当今的浏览器都会对这个 DOCTYPE 使用标准模式，就算是早已过时的 Internet Explorer 6 也一样。目前，并没有正当的理由，去使用其他更复杂的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能会面临触发接近标准模式或者怪异模式的风险。

请确定你把 DOCTYPE 正确地置于 HTML 文件的顶端。如果有任何其他字符位于 DOCTYPE 之前，比如注释或 XML 声明，会导致 Internet Explorer 9 或更早期的浏览器触发怪异模式。

在 HTML5 中，DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准中，DOCTYPE 会附加其他意义，但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。

更多关于浏览器排版引擎的说明, 可以参考怪异模式和标准模式

2.2. HTML 新增的语义化标签

header：头部标签
nav：导航标签
article：内容标签
section：定义文档某个区域
aside：侧边栏标签
footer：尾部标签

注意：

这种语义化标准主要针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签

2.3. 更多 HTML 语义化标签

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

2.4. HTML 新增的多媒体标签

新增的多媒体标签主要包含两个：

音频：audio
视频：video

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

2.4.1. video 标签

1. 视频 video

当前 video 元素支持三种视频格式：尽量使用 MP4

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES since 21， linux 30	YES	YES
Safari	YES	NO	NO
Opera	YES since Opera 25	YES	YES

语法

1	<video src="url" controls="controls"></video>

video 常用属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放，谷歌浏览器需要添加 muted 来解决自动播放问题
controls	controls	向用户显示播放控件
width	pixels 像素值	设置播放器宽度
height	pixels 像素值	设置播放器高度
loop	loop	是否循环播放
preload	auto 预先加载视频 none 不应加载视频	规定是否预加载视频, 如果有了 autoplay, 就忽略该属性
src	url	视频 url 地址
poster	imagurl	加载等待的画面图片
muted	muted	静音播放

2.4.2. audio 标签

语法

1	<audio></audio>

音频格式支持情况:

Browser	MP3	Wav	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

video 常用属性

属性	值	描述
controls	controls	向用户显示播放控件
loop	loop	是否循环播放
src	url	视频 url 地址
muted	muted	静音播放

谷歌浏览器把音频和视频自动播放禁止了

2.5. 新增 input 标签

属性值	说明
type="email"	限制用户输入必须为 Email 类型
type="url"	限制用户输入必须为 url 类型
type="date"	限制用户输入必须为日期类型
type="time"	限制用户输入必须为时间类型
type="month"	限制用户输入必须为月类型
type="week"	限制用户输入必须为周类型
type="number"	限制用户输入必须为数字类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单

2.6. HTML5 图形

使用 HTML5 你可以简单的绘制图形:

使用 <canvas> 元素。
使用内联 SVG。SVG 教程可以参考我的博客鹏叔的技术博客 - SVG
使用 CSS3 2D 转换、CSS3 3D 转换。

3. CSS 基础

3.1. CSS 简介

CSS 是层叠样式表(Cascading Style Sheets)的简称
有时我们也称之为 CSS 样式表或者级联样式表
CSS 也是一种标记语言
CSS 主要用于设置 HTML 页面的文本内容(字体, 大小, 对齐方式), 图片的外形(宽高, 边框样式, 边距等) 以及版面的布局和外观显示样式.

3.2. CSS 语法规范

CSS 规则由两个主要的部分构成, 选择器以及一条或多条样式申明
1
2
3
4
h1 {
color: red;
font-size: 25px;
}
其中 h1 为选择器, 大括号里的内容为样式申明
选择器是用于指定 CSS 样式的 HTML 标签, 大括号内容是对对象设置的具体样式
属性和属性值以键值对的形式出现
属性是对指定的对象设置的样式属性, 例如字体大小, 文本颜色等
属性和属性值之间使用冒号”:”分割
多个键值对之间用英文”;”进行区分

3.3. CSS 代码风格

3.3.1. 样式格式书写

1. 紧凑格式

h3 {
  color: deeppink;
  font-size: 20px;
}

1. 展开格式

h3 {
  color: deeppink;
  font-size: 20px;
}

强烈推荐第二种格式, 更直观

3.3.2. 样式大小写

h3 {
  color: pink;
}

H3 {
  color: pink;
}

强烈推荐样式选择器、属性名、属性值关键字全部使用小写字母, 特殊情况除外.

3.3.3. 空格规范

1
2
3

h3 {
  color: pink;
}

属性值前面, 冒号后面, 保留一个空格
选择器(标签)和大括号中间保留空格

3.4. CSS 基础选择器

选择器参考文档

3.4.1. 标签选择器

示例:

选择所有 <p> 元素。

1
2
3

p {
  color: red;
}

选择所有 <div> 元素和所有 <p> 元素。

div,
p {
  color: red;
}

选择 <div> 元素内的所有 <p> 元素, 包括子元素和孙元素。

div,
p {
  color: red;
}

选择<div> 元素的所有<p>子元素, 不包括孙元素。

1
2
3

div > p {
  color: red;
}

选择紧跟 <div> 元素的首个 <p> 子元素。

1
2
3

div + p {
  color: red;
}

选择前面有 <p> 元素的每个 <ul> 元素。(p 和 ul 同级别, p 元素位于 ul 之前)

1
2
3

p ~ ul {
  color: red;
}

3.4.2. 类选择器

示例

选择 class=”intro” 的所有元素。

1
2
3

.intro {
  color: red;
}

选择 class 属性中同时有 name1 和 name2 的所有元素

1
2
3

.name1.name2 {
  color: red;
}

3.4.3. 类选择器-多类名

3.4.4. id 选择器

id 选择器以 “#” 来定义
id 选择器经常和 javascript 搭配使用

3.4.5. 通配符选择器

实例:

1
2
3

* {
  margin: 0;
}

3.5. CSS 字体属性

3.5.1. 字体系列 font-family

中文字体, 或字体名称有多个单词组成最好使用双引号引起来
一般给 body 指定统字体来为页面设置统一的字体
如果设置了多个字体, 浏览器将会按顺序选择系统中存在的字体, 应用到文字上

实例:

1
2
3

body {
  font-family: "宋体", "Microsoft Yahei", Arial, Helvetica, sans-serif;
}

3.5.2. 字体大小 font-size

实例:

1
2
3

body {
  font-size: 18px;
}

3.5.3. 字体粗细 font-weight

取值范围
<font-weight-absolute> = normal | bold | lighter | bolder| Numeric value>

说明: 1. 数字 400 相当于 normal, 700 相当于 bold 2. lighter, bolder 不是绝对粗细, 是相对于父元素的粗细更细一些或更粗一些 3. 实际开发中更喜欢使用数字来表示粗细

实例:

p {
  font-weight: bold;
}

p {
  font-weight: 700;
}

3.5.4. 文字样式 font-style

CSS 使用 font-style 属性设置文本的风格
说明:

取值范围: normal, italic, oblique, oblique 400deg;
Italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。斜体（italic）和倾斜体（oblique）都是通过人工倾斜常规字体的字形来模拟的（使用 font-synthesis 对此进行控制）。
如果关键字是 oblique，则可附加一个可选的角度。
实例:

1
2
3

p {
  font-style: normal;
}

3.5.5. CSS 复合属性

实例:

1
2
3

p {
  font: normal 16px;
}

3.6. CSS 文本属性

CSS text(文本)属性可以定义文本的外观, 比如文本的颜色, 对齐方式, 装饰文本, 文本缩进, 行间距等

3.6.1. 文本颜色 color

取值范围:

预定义的颜色值: red, green, blue 等等
16 进制颜色值: #FF0000
RGB 代码: rgb[255, 0, 0] 或 rgb[%100, 0, 0]

开发中最常用的是 16 进制颜色值
1
2
3
div {
color: red;
}

3.6.2. 文本对齐 text-align

text-align 属性用于设置元素内文本的水平对齐方式
取值范围: left, center, right
默认值为 left

3.6.3. 文本装饰 text-decoration

text-decoration 属性规定添加到文本的修饰, 可以给文本添加下划线, 删除线, 上划线等.
取值范围: none, underline, overline, line-through
1
2
3
div {
text-decoration: underline;
}

3.6.4. 文本缩进

取值: 缩进数值 10px, 2em
使文本的第一行缩进多少距离

1
2
3

p {
  text-indent: 2em;
}

3.6.5. 行间距 line-height

1
2
3

p {
  line-height: 26px;
}

3.7. CSS 引入方式

1. 内部样式表

<style>
  p {
    color: pink;
  }
</style>

1. 外部样式表

1	<link rel="stylesheet" href="css文件路径" />

1. 内联方式
  内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

1	<div style="color:red; width:10px"></div>

3.8. Emmet 语法

Emmet 语法的前身是 Zen coding, 它使用缩写, 来提高 html/css 的编写速度, Vscode 内部已经集成该语法.

快速生成 HTML 结构语法
快速生成 CSS 样式语法

3.8.1. 快速生成 HTML 结构语法

生成标签直接输入标签名按 tab 键即可, 比如 div 然后 tab 键, 就可以生成
1
<div></div>
如果想要生成多个相同标签, 加上就可以了, 比如 div*3 就可以快速生成 3 个 div
如果有父子级关系的标签, 可以用> 比如 ul>li 就可以了
如果有兄弟关系的标签,用+就可以了比如 div+p
如果生成带有类名或者 id 名字的, 直接写.demo 或者#two tab 键就可以了
如果生成的 div 类名是有顺序的, 可以用自增符合$

3.9. 复合选择器

3.9.1. 什么是复合选择器

在 CSS 中, 可以根据选择器的类型把选择器分为基础选择器和复合选择器, 复合选择器是建立在基础选择器之上, 对基本选择器进行组合形成的.

复合选择器可以更准确, 更高效选择目标元素
复合选择器是由两个或多个基础选择器, 通过不同的方式组合而成的
常用的复合选择器包括: 后代选择器, 子选择器, 并集选择器, 伪选择器

3.9.2. 后代选择器

//TODO: 补充内容

3.9.3. 子元素选择器

3.9.4. 伪类选择器

链接伪类
结构伪类

3.10. 元素显示模式

3.10.1. 什么是元素显示模式

作用: 网页标签非常多, 在不同地方会用到不同类型的标签, 了解他们的特点可以更好的布局我们的网页.
元素显示模式就是元素以什么方式显示, 比如 div 自己占一行, 比如一行可以放多个 span
HTML 元素一般分为块元素和行内元素两种类型

3.10.2. 块元素

常见的块元素有 h1~h6, p, div, ul, ol, li 等, 其中 div 是最典型的块元素

块元素的特点:

比较霸道, 自己独占一行
高度, 宽度, 外边距以及内边距都可以控制
宽度默认是容器的 100%
是一个容器及盒子, 里面可以放行内或块级元素

注意:

文字类的元素不能使用块级元素
p 标签主要用于存放文字, 因此 p 里面不能放块级元素, 特别不能放 div
同理, h1~h6 等都是文字类块标签, 里面也不能放其他块级元素

3.10.3. 行内元素(内联元素)

常见的行内元素有 a, strong, b, em, i, del, s, ins, u, span 等, 其中 span 标签是最典型的行内元素, 有的地方也将行内元素称为内联元素.

行内元素的特点:

相邻行内元素在一行上, 一行可以显示多个
高, 宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意:

链接里面不能再放链接了
特殊情况 a 里面可以再放块级元素但是给 a 转换一下块级模式更安全

3.10.4. 行内块元素

在行内元素中有几个特殊的标签 img, input, td 它们同时具有块元素和行内元素的特点, 有些资料称它们为行内块元素.

行内块元素的特点:

与行内元素相比，主要区别在于行内块元素允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

3.11. CSS 背景

通过 CSS 背景属性, 可以给页面元素添加背景样式.
背景属性可以设置背景颜色, 背景图片, 背景平铺, 背景图片位置, 背景图像固定等.

3.11.1. 背景颜色

1
2
3

div {
  background-color: pink;
}

3.11.2. 背景图片

1
2
3

div {
  background-image: url(path);
}

3.11.3. 背景图片平铺

取值范围: repeat-x, repeat-y, no-repeat, repeat

1	background-repeat: repeat-x;

3.11.4. 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置.

1	background-position: x y;

参数代表的意思是: x 坐标和 y 坐标, 可以使用方位名称或者精确单位

参数值	说明
length	百分数, 由浮点数和单位标识构成的长度值
position	top center, bottom left, right center 方位名词

注意:
参数是方位名词时:

如果是方位名词, right center 和 center right 是等价的.
如果只指定了一个方位名词, 另一个值省略, 则第二个默认居中对齐.

参数是精确单位:

如果参数是精确坐标, 那么第一个肯定是 x 坐标, 第二个一定是 y 坐标

混合形式:

第一参数一定是 x 坐标, 第二个参数是 y 坐标

实例:

1 2	<!-- 顶部居中 --> background-position: center top;

1 2	<!-- 顶部居中 --> background-position: top;

精确单位

1 2	<!-- x:20px y:50px --> background-position: 20px 50px;

1 2	<!-- x:20px 垂直居中 --> background-position: 20px;

混合形式

1 2	<!-- x:20px 垂直居中 --> background-position: 20px center;

1 2	<!-- 水平居中垂直20px --> background-position: center 20px;

3.11.5. 背景图片固定(背景附着)

background-attachment 属性设置背景图像是否固定或者随着页面的其他部分滚动.

取值范围:

scroll: 背景图像是随对象内容滚动
fixed: 背景图像固定

3.11.6. 背景复合写法

为了简化背景属性的代码, 我们可以将这些属性合并简写在同一个属性 background 中, 从而节约代码量, 当使用简写属性时, 没有特定的书写顺序, 一般习惯约定顺序为:
background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

例如:

1	background: black url(images/bg.jpg) no-repeat fixed center top;

1	background: transparent url(images/bg.jpg) repeat-x fixed top;

3.11.7. 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果

1	background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度, 取值范围在 0-1 之间, 0 表示完全透明, 1 表示完全不透明

注意:

CSS3 新增属性, 是 IE9+版本浏览器才支持的
但是现在实际开发中,我们不太关注兼容性写法了,可以放心使用

3.12. CSS 的三大特性

CSS 有三个非常重要的特性: 层叠性, 继承性, 优先级.

3.12.1. 层叠性

相同选择器给属性设置不同的样式, 此时一个样式就会覆盖(层叠)另一个冲突的样式. 层叠性主要解决样式冲突的问题.

层叠性原则:

样式冲突: 遵循的原则是就近原则, 哪个样式的结构近, 就执行哪个样式
样式不冲突, 不会层叠

3.12.2. 继承性

CSS 中的继承: 子标签会继承父标签的某些样式, 如文本颜色和字号等.

恰当地使用继承可以简化代码, 降低 css 样式的复杂性
子元素可以继承父元素的样式(text-, font-,line-这些元素开头的可以继承, 以及 color 属性)

3.12.2.1. 行高的继承

当行高是倍数值

例如:

1
2
3

body {
  font: 12px/1.5 "Microsoft YaHei";
}

如上, 行高为 1.5

如果子元素例如 div 的字体大小为 14px, 那么 div 的实际行高为, 字体高度乘以从父元素继承来的行高 1.5 倍, 实际行高为 21px

1
2
3

div {
  font-size: 14px;
}

<html>
  <head> </head>
  <body>
    <div>一花一世界</div>
  </body>
</html>

3.12.3. 优先级

当同一个元素指定多个选择器, 就会有优先级的产生

选择器相同, 则执行层叠性
选择器不同, 则根据选择器权重执行

选择器权重如下表所示

选择器	选择器权重
继承或者通配符	0,0,0,0
标签选择器	0,0,0,1
类选择器, 伪类选择器	0,0,1,0
ID 择器	0,1,0,0
行内样式 style=””	1,0,0,0
!important	无穷大

优先级注意事项:

权重是由 4 组数字组成, 但是不会有进位.
可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器, 以此类推.
等级判断从左向右, 如果某一位数值相同, 则判断下一位数值.
继承的权重是 0

3.12.3.1. 权重叠加

权重叠加: 如果是复合选择器, 则会有权重叠加, 需要计算权重.
例如

ul li {
  color: green;
}
li {
  color: red;
}

如上所示,复合选择器 ul li 的权重为 0,0,0,1 + 0,0,0,1 = 0,0,0,2
而选择器 li 的权重是 0,0,0,1 所以 ul li 选择器定义的字体颜色样式将生效

3.13. 盒子模型

网页布局要学习三大核心, 盒子模型, 浮点和定位, 学习好盒子模型能非常好的帮助我们布局页面.

看透网页布局的本质
网页布局过程

先准备好相关的网页元素, 网页元素基本都是盒子 box
利用 css 设置好盒子样式, 然后摆放到相应位置
往盒子里面装内容
网页布局的核心本质: 就是利用 CSS 摆盒子

3.13.1. 盒子模型(Box Model) 组成

所谓盒子模型: 就是把 HTML 页面中的布局元素看作是一个矩形的盒子, 也就是一个盛装内容的容器,
CSS 盒子模型本质是一个盒子, 封装周围的 HTML 元素, 它包括: 边框, 外边距, 内边距, 和实际内容

3.13.2. 边框(border)

border 可以设置元素的边框, 边框有三部分组成: 边框宽度(粗细) 边框样式, 边框颜色

border-style: none | solid | dashed | dotted | double

border-color: 颜色值

border-width: 设置边框宽度

实例:

div {
  width: 50px;
  height: 50px;
  border-color: red;
  border-width: 5px;
  border-style: solid;
}

边框复合性写法

1	border: 1px solid red; 没有顺序

border-top:
border-bottom:
border-right:
border-left:

实例:

1
2
3

div {
  border-top: 1px solid red;
}

3.13.3. 表格的细线边框

border-collapse

合并相邻的边框

3.13.4. 边框会影响盒子实际大小

实际宽度等于 width + border-width

3.13.5. 内边距(padding)

padding-left

padding-right

padding-top

padding-bottom

padding 复合写法

panding: 5px; // 上下左右 5px

panding: 5px 10px; // 上下 5px 左右 5px

panding: 5px 6px 10px; // 上下 5px 左右 5px

3.13.6. padding 不会撑大盒子的情况

如果盒子本身没有指定 width/height 属性, 则此时 padding 不会撑开盒子大小

3.13.7. 外边距(margin)

margin-left
margin-right
margin-top
margin-bottom

3.13.8. margin 复合写法

margin: 5px; // 上下左右 5px
margin: 5px 10px; // 上下 5px 左右 5px
margin: 5px 6px 10px; // 上 5px 左右 6px 下 10px

3.13.9. 外边距的典型应用

外边距可以让块级盒子水平居中,

width: 100px
background-color: pink;
margin-left: auto;
margin-right: auto;

行内元素居中办法, 让父元素 text-align 等于 center

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素, 父元素有上外边距同时子元素也有上外边距, 此时父元素会塌陷较大的外边距.

外边距合并问题:
解决方案:

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加 overflow:hidden

还有其他方法, 比如浮动, 固定, 绝对定位盒子不会有塌陷的问题.

3.13.10. 清除盒子的内外边距

* {
  margin: 0px;
  padding: 0px;
}

注意: 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距, 但是转换为块级和行内块元素就可以设置上下边距

3.13.11. 圆角边框

在 CSS3 中, 新增圆角边框样式, 这样我们的盒子就可以变圆角了.

1	border-radius: 10px;

1	border-radius: 50%;

每个叫弧度不一样

1	border-radius: 10px 30px 40px 50px;

border-top-right-radius: 10px;
border-top-left-radius: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

3.13.12. 盒子影子

CSS3 中新增了盒子影子, 我们可以使用 box-shadow 属性添加阴影.
语法:

1 2	/box-shadow: h-shadow v-shadow blur spread color inset;/ box-shadow: 10px 10px 10px 10px black inset;

h-shadow: 必需, 水平阴影的位置, 允许负值.
v-shadow: 必需, 垂直阴影的位置, 允许负值.
blur: 可选, 模糊距离.
spread: 可选, 阴影的尺寸.
color: 可选, 阴影的颜色, 请参阅 CSS 颜色值
inset:可选, 将外部阴影改为内部阴影.

3.13.13. 文字阴影 text-shadow

h-shadow: 必需, 水平阴影的位置, 允许负值.
v-shadow: 必需, 垂直阴影的位置, 允许负值.
blur: 可选, 模糊距离.
color: 可选, 阴影的颜色, 请参阅 CSS 颜色值

1 2	/text-shadow: h-shadow v-shadow blur color;/ box-shadow: 10px 10px 10px black;

3.14. CSS 浮动

3.14.1. 传统网页布局的三种方式

网页布局的本质: 用 CSS 来摆放盒子, 把盒子摆放到相应位置.
CSS 提供了三种传统布局方式简单说, 就是盒子如何进行排列顺序:

普通流(标准流)
浮动
定位

3.14.2. 普通流(标准流/文档流)

所谓的标准流: 就是标签按照规定好默认方式排列

块级元素会独占一行, 从上向下顺序排列.
- 常用元素: div, hr, p, h1~h6, ul, ol, dl, form, table
行内元素会按照顺序, 从左到右顺序排列, 碰到父元素边缘自动换行
- 常用元素: span, a, i, em 等

以上都是标准流布局, 标准流是最基本的布局方式.

这三种布局方式都是用来摆放盒子的, 盒子摆放到合适位置, 布局自然就完成了.

注意: 实际开发中, 一个页面基本都包含了这三种布局方式, 后面移动端学习新的布局方式.

3.14.3. 为什么需要浮动

总结: 有很多布局效果, 标准流没有办法完成, 此时就可以利用浮动完成布局, 因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用: 可以让多个块元素一行内排列显示.
网页布局第一准则: 多个块级元素纵向排列选标准流, 多个块级元素横向排列使用浮动.

3.14.4. 什么是浮动

float 属性用于创建浮动框, 将其移动到一边, 直到左边缘或右边缘触及包含块或另一个浮动框的边缘.
语法:

1
2
3

选择器 {
  float: 属性值;
}

属性值:
none:元素不浮动, 默认值
left:元素向左浮动
right: 元素向右浮动

3.14.5. 浮动特性(重难点)

加了浮动之后的元素, 会具有很多特性, 需要我们掌握的

浮动元素会脱离标准流
浮动的元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性

设置了浮动的元素最重要的特性

脱离标准流的控制浮动到指定位置
浮动的盒子不再保留原先的位置

浮动元素经常和标准流的父级搭配使用

3.14.6. 常见的网页布局

3.14.7. 浮动布局注意点

浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列位置
一个元素浮动, 理论上其余的兄弟也要浮动.
一个盒子里面有多少个盒子, 如果其中一个盒子浮动了, 那么其他兄弟也应该浮动, 以防止引起问题.
浮动的盒子只会影响浮动盒子后面的标准流, 不会影响前面的标准流.

3.14.8. 为什么要清除浮动

我们不应该给父盒子高度

3.14.9. 清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度, 则不需要清除浮动
清除浮动后, 父级就会根据浮动子盒子自动检查高度, 父级有了高度, 就不会影响下面的标准流了

语法:

1
2
3

选择器 {
  clear: 属性值;
}

属性值:

left: 不允许左侧有浮动元素,(清除左侧浮动的影响)
right: 不允许右侧有浮动元素(清除右侧浮动的影响)
both: 同时清除左右两侧浮动的影响
我们实际工作中, 几乎自用 clear:both

清除浮动的策略是: 闭合浮动

清除浮动的方法:

额外标签发也称为隔墙法, 是 W3C 推荐的做法.
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

3.15. 定位

3.15.1. 为什么需要定位

浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子.
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置, 并且可以压住其他盒子.

3.15.2. 定位组成

定位: 将盒子定在某一个位置, 所以定位也是在摆放盒子, 按照定位的方式移动盒子.

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式, 边偏移则决定了该元素的最终位置.

1. 定位模式
定位模式决定元素的定位方式, 它可以通过 CSS 的 position 属性来设置, 其值可以分为四种:

static: 静态定位, 静态定位是元素的默认定位方式, 无定位的意思.
relative: 相对定位, 相对定位是元素在移动位置的时候, 是相对于它原来在标准流的位置来说的.
absolute: 绝对定位, 绝对定位是元素在移动位置的时候, 是相对于它祖先元素来说的.
fixed: 固定定位, 固定定位是元素固定于浏览器可视区域, 主要使用场景; 可以在浏览器页面滚动时元素位置不会改变.
sticky: 粘性定位, 粘性定位可以被认为是相对定位和固定定位的混合.

边偏移
边偏移就是定位的盒子移动到最终位置. 有 top, bottom, left 和 right 4 个属性.

变偏移属性	示例	描述
top	top: 80px	顶部偏移量, 定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量, 定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量, 定义元素相对于其父元素左边线的距
right	right: 80px	右侧偏移量, 定义元素相对于其父元素右边线的距

3.15.3. 静态定位

静态定位是元素的默认定位方式, 无定位的意思

语法:

1
2
3

选择器 {
  position: static;
}

静态定位按照标准流特性摆放位置, 它没有边偏移.
静态定位在布局时很少用到.

3.15.4. 相对定位 relative

相对定位是元素在移动位置的时候, 是相对于它原来的位置来说的
语法:

1
2
3

选择器 {
  position: relative;
}

相对定位的特点:

它是相对自己原来的位置来移动(移动位置的时候参照点事自己原来的位置)
原来在标准流的位置继续占有, 后面的盒子仍然以标准流的方式对待它. (不脱离标准流, 继续保留原来的位置)

3.15.5. 绝对定位 absolute

绝对定位是元素在移动位置的时候, 是相对于它祖先元素来说的
语法:

1
2
3

选择器 {
  position: absolute;
}

如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位(Document 文档)
如果祖先元素有定位(相对, 绝对, 固定定位), 则以最近一级的有定位祖先元素为参考点移动位置.
绝对定位不再占用标准流中的位置.

3.15.6. 3.15.6.子绝父相

弄清楚这个口诀, 就明白了绝对定位和相对定位的使用场景.
这个子绝父相太重要了, 是我们学习定位的口诀, 是定位中最常用的一种方式, 这句话的意思是: 子级是绝对定位的话, 父级要用相对定位.

子级绝对定位, 不会占有位置, 可以放到父盒子里面任何一个地方, 不会影响其他兄弟盒子.
父盒子需要加定位限制子盒子在父盒子内显示.
父盒子布局时, 需要占有位置, 因此父亲只能是相对定位.

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级.
总结: 因为父级需要占有位置, 因此是相对定位, 子盒子不需要占有位置, 则是绝对定位.
当然, 子绝父相不是用于不变的, 如果父元素不需要占有位置, 子绝父相也会遇到.

3.15.7. 固定定位 fixed

固定定位是元素固定于浏览器可视区域, 主要使用场景; 可以在浏览器页面滚动时元素位置不会改变.
语法:

1
2
3

选择器 {
  position: fixed;
}

固定定位的特点:

以浏览器的可视窗口为参照点移动元素.
跟父元素没有任何关系
不随滚动条滚动.
固定定位不占有标准流中的位置.

固定定位也是脱离标准流的, 其实固定定位也可以看做是一种特殊的绝对定位.

3.15.8. 固定定位小技巧固定在版心右侧

小算法:

让固定定位的盒子 left:50%, 走到浏览器可视区域的一半位置
让固定定位的盒子 margin-left: 版心宽度的一半距离, 多走版心宽度的一半位置

3.15.9. 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合, sticky 粘性的
语法

选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点:

以浏览器的可视窗口为参照点移动元素
粘性定位占有原先的位置
必须添加 top, left, right, bottom 其中的一个才有效.

跟页面滚动搭配使用, 兼容性较差, IE 不支持.

3.15.10. 定位的叠放次序

在使用定位布局时, 可能会出现盒子重叠的情况. 此时, 可以使用 z-index 来控制盒子的前后次序(Z 轴)
语法

1
2
3

选择器 {
  z-index: 1;
}

数值可以是正整数, 负整数或 0, 默认是 auto, 数值越大, 盒子越靠上
如果属性值相同, 则按照书写顺序, 后来者居上
数值后面不能加单位
只有定位的盒子才有 z-index

3.15.11. 定位的拓展

定位特殊性
绝对定位和固定定位也和浮动类似

行内元素添加绝对定位或者固定定位, 可以直接设置高度和宽度.
块级元素添加绝对或者固定定位, 如果不给宽度或者高度, 默认大小是内容的大小.
脱标的盒子不会触发外边距塌陷.

浮动元素不同,只会压住它下面标准流的盒子, 但是不会压住下面标准流盒子里的文字(图片) 但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字, 因为浮动产生的目的最初是为了做文字环绕效果的, 文字会围绕浮动元素.

3.15.12. 元素的显示和隐藏

display:none 隐藏元素, 不再占用原来的位置

1	display: none;

visibility 可见性
取值:
visible
hidden

visibility 隐藏元素后, 继续占用原来的位置

3.15.13. overflow

overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度和宽度)时, 会发生什么.
属性值:

visible
hidden: 超出的部分隐藏
scroll
auto: 超出的时候显示滚动条, 不超出没有滚动条

一般情况下,我们都不想让溢出的内容显示出来, 因为溢出的部分会影响布局,
但是如果有定位的盒子, 请慎用 overflow:hidden 因为它会隐藏多余的部分.

4. CSS 高级部分

4.1. 精灵图

4.1.1. 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这就大大降低页面加载速度.

因此, 为了有效地减少服务器接收和发送请求的次数, 提高网页的加载速度, 出现了 CSS 精灵技术(也称为 CSS Sprites)

核心原理: 将网页中的一些小背景图像整合到一张大图中, 这样服务器只需要一次请求就可以了.

4.1.2. 精灵图(sprites)的使用

使用精灵图核心:

精灵技术主要针对背景图片使用, 就是把多个小背景整合到一张大图片中.
这个大图片也称为 sprites 精灵图
移动背景图片位置, 此时可以使用 background-position.
移动的距离就是这个图片的 x 和 y 坐标, 注意网页中的坐标有所不同.

4.1.3. 字体图标及参生和优点

字体图标使用场景：主要用于显示网页中通用，常用的一下小图标。

精灵图是有诸多优点的，但是缺点也很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点
轻量级：一个字体图标字体要比一系列图像要小，一旦字体加载了，图标就会马上渲染出来，减少服务器服务器请求。
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂的，还是使用精灵图。

4.1.4. 字体图标

字体图标是一些网页常见的小图标，我们直接网上下载即可，因此使用可以分为：

字体图标的下载
字体图标的引入（引入到 html 页面中）
字体图标的追加（以后添加新的小图标）
推荐下载网站：

icomoon http://icomoon.io

icomoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，是它们成一字型，该字体库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里 iconfont http://www.iconfont.cn
这个是阿里妈妈 M2MUX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库，可以使用 AI 制作图标上传生成，重点是免费！

//字体图标的引入

4.2. CSS 三角做法

4.3. 用户界面-鼠标样式

1
2
3

li {
  cursor: default;
}

属性值：
default
pointer
move
text
not-allowded

5. CSS3

5.1. CSS3 新增属性选择器

5.2. CSS3 新增结构伪类选择器

5.3. CSS3 伪元素选择器

伪元素选择器可以帮助我们利用 CSS 创建新标签元素, 而不需要 HTML 标签, 从而简化 HTML 结构.
选择符合
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意:

before 和 after 创建一个元素, 但是属于行内伪元素
新创建的这个元素在文档中是找不到的, 所以我们称其为伪元素
语法: element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素, after 在父元素内容的后面创建元素
伪元素选择器和标签选择器一样, 权重为 1

5.4. CSS3 盒子模型 border-box

CSS3 中可以通过 box-sizing 来指定盒子模型, 有 2 个值: 即可指定为 content-box, border-box, 这样我们计算盒子大小的方式就发生了改变.

默认为 content-box
可以分成两种情况:

box-sizing:content-box 盒子大小为 width + padding + border (CSS3 出现以前, 默认的盒子模型)
box-sizing: border-box 盒子大小为 width

5.5. CSS3 图片模糊处理

图片变模糊
计算盒子宽度 width: calc 函数

5.5.1. CSS3 滤镜 filter

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素.

语法

1	filter: 函数(); 例如 filter: blur(5px); blur模糊处理数值越大越模糊

5.5.2. CSS3 calc 函数

calc()此 CSS 函数让你在声明 CSS 属性值时执行一些计算

width: calc(100%-80px)

5.6. CSS3 的新特性

5.6.1. CSS3 过渡

过渡(transition) 是 CSS3 中具有颠覆性的新特性之一, 我们可以在不使用 Flash 动画或 javascript 的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果.
过渡动画: 是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看, 更动感十足, 虽然低版本浏览器不支持但是不会影响页面布局.
经常和:hover 一起搭配使用

transition: 要过渡的属性花费时间运动曲线何时开始;

属性: 想要变化的 css 属性, 宽度高度背景颜色内外边距都可以. 如果想要所有的属性都变化过渡, 写一个 all 就可以了. 多个属性使用逗号分割
花费时间: 单位是秒(必须写单位) 比如 0.5s
运动曲线: 默认是 ease (可以省略)
何时开始: 单位是秒(必须写单位), 可以设置延迟触发时间, 默认是 0s (可省略)

5.6.2. 狭义的 HTML5 和广义的 HTML5

狭义的 HTML5 就是 HTML5 本身

广义的 HTML5 是 HTML5 本身+CSS3+Javascript
这个集合有时称为 HTML5 和它的朋友, 通常缩写为 HTML5
虽然 HTML5 的一些特性仍然不被某些浏览器支持, 但是它是一种发展趋势.
HTML5 MDN 介绍:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

5.7. 2D 转换

转换(transform) 是 CSS3 中具有颠覆性的特征之一, 可以实现元素的位移,旋转,缩放等效果.
移动: translate
旋转: rotate
缩放:scale

5.7.1. 2D 转换之移动 translate

2D 移动是 2D 转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位
语法

transform: translate(x,y);
或者
transform: translateX(n)
transform: translateY(n)

移动盒子位置的方法: 定位, 盒子外边距, 2D 转换移动;
重点:
定义 2D 转换中的移动, 沿着 X 和 Y 轴移动元素
translate 最大的优点: 不影响到其他元素的位置
translate 中的百分比单位是相对于自身元素的 translate(50%, 50%)
对行内元素是没有效果的

用 translate 让一个盒子水平垂直居中

p {
    position: absolute;
    top: 50%;
    left: 50%
    width: 200px;
    height: 200px;
    background: purple;
    /*translate中的百分比单位是相对于自身元素的 */
    transform: translate(-50%;,-50%;);
}

5.7.2. 2D 转换之选择 rotate

2D 选择指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转

1	transform: rotate(度数);

重点:

rotate 里面跟度数, 单位是 deg 比如 rotate(45deg)
角度为正时,顺时针, 负值时为逆时针
默认旋转的中心点是元素的中心点

5.7.3. 2D 转换中心点 transform-origin

我们可以设置元素转换的中心点
语法

1	transform-origin: x y;

重点:

注意后面的参数 X 和 Y 用空格隔开
xy 默认转换的中心点是元素的中心位置(50%, 50%)
还可以给 x y 设置像素或者方位名词(top bottom left right center)

5.7.4. 2D 转换之缩放 scale

1	transform: scale(x, y);

注意:
注意其中的 x 和 y 用逗号分隔
tansform: scale(1,1) 宽度和高度都放大一倍, 相当于没有放大
tansform: scale(2,2) 宽度和高度都放大 2 倍
tansform: scale(2): 只写一个参数, 第二个参数则和第一个参数一样, 相当于 scale(2,2)
tansform: scale(0.5, 0.5) 缩小
相对于修改宽高缩放 scale 的优势: 可以设置转换中心点缩放, 默认以中心点缩放的, 而且不影响其他盒子

5.7.5. 2D 转换综合写法

P365
注意:

同时使用多个转换, 其格式为: transform: translate() rotate() scale() 等等
其顺序会影响转换的效果(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性的时候, 记得要将位移放到最前面

5.7.6. 2D 转换总结

转换 transform 我们简单理解就是变形有 2D 和 3D 之分
我们暂且学了三个分别是位移旋转和缩放
2D 移动 translate(x,y) 最大优势是不影响其他盒子, 里面参数用%, 是相对于自身宽度和高度来计算的
可以分开写比如 translateX(x) 和 translateY(y)
2D 旋转 rotate(度数) 可以实现旋转元素, 度数的单位是 deg
2D 缩放 scale(x,y) 里面的参数是数字不跟单位, 可以是小数, 最大优势是不影响其他盒子
设置转换中心点 transform-origin: x y; 参数可以是百分比, 像素或者方位名词
当我们进行综合写法, 同时有位移和其他属性的时候, 记得要将位移放在最前面

5.8. CSS3 动画

动画(animation) 是 CSS3 中具有颠覆性的特性之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果.
相比较过渡, 动画可以实现更多变化, 更多控制连续自动播放等效果.

5.8.1. 动画的基本使用

制作动画分为两步:

先定义动画
再使用动画

5.8.1.1. 用 keyframes 定义动画(类似定义类选择器)

@keyframes 动画名称 {
  0% {
    width: 100px;
  }

  100% {
    width: 200px;
  }
}

动画序列

0%是动画的开始, 100%是动画的完成, 这样的规则就是动画序列.
在@keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果.
动画是使元素从一种样式逐渐变化为另一种样式的效果, 您可以改变任意多的样式任意多的次数.
请用百分比来规定变化发生的时间, 或关键词 from 和 to, 等同于 0%和 100%.

5.8.1.2. 使用动画

div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间;
}

5.8.2. 动画常用属性

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写属性, 除了 animation-play-state 属性
animation-name	规定@keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒, 默认是 0
, (必须的值)
animation-timing-function	规定动画的速度曲线, 默认是 ease
animation-delay	规定动画何时开始, 默认为 0
animation-iteration-count	规定动画播放的次数, 默认是 1, 还有 infinite
animation-direction	规定动画是否在下一个周期逆向播放, 默认是 normal, alternate 逆向播放
animation-play-state	规定动画是否正在运行或暂停, 默认是 running, 还有 pause
animation-fill-mode	规定动画结束后状态, 保持 forwards, 回到起始 backwards

5.8.3. CSS3 动画简写

1 2	animation: name duration timing-function delay iteration-count direction fill-mode;

5.8.4. 速度曲线

animation-timing-function: 规定动画的速度曲线, 默认是 ease

值	描述
linear	动画从头到尾是相同的, 匀速
ease	默认, 动画以低速开始, 然后加速, 在结束前变慢.
ease-in	动画以低速开始.
ease-out	动画以低速结束.
ease-in-out	动画以低速开始和结束.
steps	指定时间函数中的间隔数量. 步长

5.9. 3D 转换

5.9.1. 认识 3D 转换

5.9.2. 3D 转换 translate3d

5.9.3. 透视 perspective

在 2D 平面参数近大远小视觉立体, 但是只是二维效果的

如果想要在网页产生 3D 效果需要透视(理解成 3D 物体投影在 2D 平面内)
模拟人类的视觉位置, 可以认为安排一只眼睛去看
透视我们也称为视距: 视距就是人的眼睛到屏幕的距离
距离视觉点越近的电脑平面成像越大, 越远越小
透视的单位是像素

透视写在被观察元素的父盒子上面的
d: 就是视距, 视距就是一个人的眼睛到屏幕的距离
z: 就是 z 轴, 物体距离屏幕的距离, z 轴越大我们看到的物体越大.

5.9.3.1. 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加.

私有前缀

moz: 代表 firfox 浏览器私有属性
ms: 代表 ie 浏览器私有属性
webkit: 代表 safari, chrome 私有属性
o: 代表 opera 私有属性

6. 移动 web 开发流式布局

学习目标:

能够知道移动 web 开发现状
能够写出标准的 viewport
能够使用移动 web 的调试方法
能够说出移动端常见的布局方案
能够描述流式布局
能够独立完成京东移动端首页

6.1. 移动端基础

6.1.1. 移动端基础

6.1.1.1. 浏览器现状

PC 端常见浏览器
360 浏览器, 谷歌浏览器, 火狐浏览器, QQ 浏览器, 百度浏览器, 搜狗浏览器, IE 浏览器.

移动端常见浏览器
UC 浏览器, QQ 浏览器, 欧朋浏览器, 百度手机浏览器, 360 安全浏览器, 谷歌浏览器, 搜狗浏览器, 猎豹浏览器, 以及其他杂牌浏览器.

国内的 UC 和 QQ, 百度等手机浏览器都是根据 webkit 修改过来的内核, 国内尚无自主研发的内核, 就像国内的手机操作系统都是基于 Android 修改开发的一样.

总结: 兼容移动端主流浏览器, 处理 Webkit 内核浏览器即可.

6.1.1.2. 手机屏幕现状

移动端设备屏幕尺寸非常多, 碎片化严重.
Android 设备有多种分辨率: 480X800, 480X854, 540X960, 720X1280, 1080X1920, 还有传说中的 2K, 4K 屏.
近年来 iPhone 的碎片化也加剧了, 其设备的主要分辨率有: 640X960, 640X1136, 750X1334, 1242X2208 等
作为开发者无需关注这些分辨率, 因为我们常用的尺寸单位是 px

6.1.1.3. 常见移动端屏幕尺寸

设备	尺寸	开发尺寸	物理像素比(dpr)
iphone 3G	3.5	320*480	1.0
iphone 4/4S	3.5	320*480	2.0
iphone 5/5S/5c	4.0	320*568	2.0
HTC One M8	4.5	360*640	3.0
iphone 6	4.7	375*667	2.0
Nexus 4	4.7	384*640	2.0
Nexus 5x	5.2	411*731	2.6
iphone6 Plus	5.5	414*736	3.0
Samsung Galaxy Note4	5.7	480*853	3.0
Sony Xperia Z Ultra	6.4	540*960	2.0
Nexus 7	7.0	600*960	1.3
iPad mini	7.9	768*1024	1.0

注: 以上数据均参考自:
https://material.io/devices
注: 作为前端开发, 不建议大家纠结 dp, dpi, ppi 等单位

6.1.1.4. 移动端调试方法

Chrome DevTools(谷歌浏览器)的模拟手机调试
搭建本地 web 服务器, 手机和服务器一个局域网, 通过手机访问服务器
使用外网服务, 直接 IP 或域名访问

6.2. 视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口, 视觉视口和理想视口

6.2.1. 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口, 用于解决早期的 PC 端页面在手机上显示的问题.
IOS, Android 基本都将这个视口分辨率设置为 980px, 所以 PC 上的网页大多都能在手机上显示, 只不过元素看上去很小, 一般默认可以通过手动缩放网页.

6.2.2. 视距视口 visual viewport

字面意思, 它是用户正在看到的网站的区域. 注意: 是网站的区域.
我们可以通过缩放去操作视觉视口, 但不会影响布局视口, 布局视口仍保持原来的宽度.

6.2.3. 理想视口 ideal viewport

为了使网站在移动端有理想的浏览和阅读宽度而设定.
理想视口, 对设备来讲, 是最理想的视口尺寸
需要手动添加 meta 视口标签通知浏览器操作
meta 视口标签的主要目的: 布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽, 我们布局的视口就多宽.

6.2.4. meta 视口标签

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

属性	解释说明
width	宽度设置的是 viewport 宽度, 可以设置 device-width 特殊值
initial-scale	初始缩放比, 大于 0 的数字
maximum-scale	最大缩放比, 大于 0 的数字
minimum-scale	最小缩放比, 大于 0 的数字
user-scalable	用户是否可以缩放, yes 或者 no (1 或 0)

6.3. 二倍图

6.3.1. 物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒, 是物理真实存在的. 这是厂商在出厂时就设置好了, 比如苹果 6\7\8 是 750*1334
我们开发时候的 1px 不是一定等于一个物理像素的
PC 端页面, 1 个 px 等于 1 个物理像素的, 但是移动端不尽相同
一个 px 的能显示的物理像素点的个数, 称为物理像素比或屏幕像素比
PC 端和早期的手机屏幕/普通手机屏幕: 1CSS 像素=1 物理像素
Retina 视网膜屏幕是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而达到更高的分辨率, 并提高屏幕显示的细腻程度.

6.4. 移动端开发选择

现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案

6.5. 移动端技术解决方案

6.5.1. 移动端浏览器

移动端浏览器基本以 webkit 内核为主, 因此我们考虑 webkit 兼容性问题.
我们可以放心使用 H5 标签和 CSS 样式
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可

6.5.2. 初始化 normalize.css

移动端 CSS 初始化推荐使用 normalize.css
Normalize.css: 保护了有价值的默认值
Normalize.css: 修复了浏览器的 bug
Normalize.css: 是模块化的
Normalize.css: 有详细的文档

官网地址: http://necolas.github.it/normalize.css/

6.5.3. CSS3 盒子模型 box-sizing

传统模式宽度计算: 盒子的宽度 = CSS 中的 width+border+padding
CSS3 盒子模型: 盒子的宽度 = CSS 中设置的宽度 width 里面包含了 border 和 padding, 也就是说, 我们的 CSS3 中的盒子模型, padding 和 border 不会撑大盒子了

6.5.4. 特殊样式

6.5.5. 移动端常见布局

移动端技术选型
移动端布局和以前我们学习的 PC 端有所区别:

单独制作移动端页面
流式布局(百分比布局)
flex 弹性布局
less+rem+媒体查询
混合布局
响应式页面兼容移动端
媒体查询
bootstrap

6.6. Flex 布局

个人觉得弹性盒子, 或者弹性布局这种叫法并没有很好的表达出该单词在英文语境中的本意.

6.6.1. flex 布局父项常见属性

6.6.1.1. 常见父项属性

以下 6 个属性是对父元素设置的

flex-direction: 设置主轴方向
justify-content: 设置主轴上子元素排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上子元素的排列方式(多行)
align-items: 设置侧轴上的子元素排列方式(单行)
flex-flow: 复合属性, 相对于同时设置了 flex-direction 和 flex-wrap

6.6.1.2. 主轴和侧轴 (main-axis / cross-axis)

在 flex 布局中,是分为主轴和侧轴两个方向, 同样的叫法有: 行和列, x 轴和 y 轴
默认主轴方向是 x 轴, 水平向右
默认侧轴方向是 y 轴方向, 水平向下

6.6.1.3. flex-direction 设置主轴方向

属性值
flex-direction 属性决定主轴的方向(即项目的排列方向)
注意: 主轴和侧轴是会变化的, 就看 flex-direction 设置谁为主轴, 剩下的就是侧轴. 而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从下到上
column-reverse	从上到下

6.6.1.4. justify-content: 设置主轴上子元素排列方式

justify 英文解释:(printing) to adjust (printed lines) by spacing so that the lines will be of the correct length. 参考 rejustify, just 有正义, 刚好的意思, ify 是使得…怎么样的意思, 使得什么刚好.
justify 是印刷术语: 通过调整打印线的间隙使得每行或列都有正确的宽度. 使得间距刚刚好.

justify-content: 属性定义了项目在主轴上的对齐方式.
注意: 使用这个属性之前一定要确定好主轴是哪个.

属性值	说明
flex-start	默认值, 从头部开始, 如果主轴是 x 轴, 则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐 (如果主轴是 x 轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

6.6.1.5. align-items: 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴上的排列方式, 在子项为单项的时候使用.

属性	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中
strech	拉伸(默认值)

6.6.1.6. align-content 设置侧轴上的子元素排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行), 在单行是没有效果的

属性	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中
strech	拉伸(默认值)
space-around	平分剩余空间
space-around	先两边贴边再平分剩余空间

6.6.2. flex 子项常见属性

flex 子项占的份数
align-self 控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序(前后顺序)

6.6.2.1. flex 属性

flex 属性定义子项目分配剩余空间, 用 flex 来表示占多少份数.

1
2
3

.item {
  flex: <number>; /* default 0 */
}

6.6.2.2. align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性. 默认值为 auto, 表示继承父元素的 align-items 属性, 如果没有父元素. 则等同于 stretch

1
2
3

span:nth-child(2) {
  align-self: flex-end;
}

6.6.2.3. order 属性

7. 响应式布局与 Bootstrap 框架

7.1. rem 适配布局学习目标

7.2. rem 布局开始

方案?

页面布局文字能否随着屏幕大小变化而变化?
流式布局和 flex 布局主要针对于宽度布局, 那高度如何设置?
怎样让屏幕发生变化的时候元素高度和宽度等比例缩放?

rem 单位
rem(root em)是一个相对单位, 类似于 em, em 是父元素字体大小.
不同的是 rem 的基准是相对于 html 元素的字体大小.
比如, 根元素(html)设置 font-size:12px 非根元素设置 width:2rem, 则换算成 px 表示就是 24px.

7.3. 媒体查询

7.3.1. 什么是媒体查询

媒体查询(Media Query)是 CSS3 新语法.

使用@media 查询, 可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中, 页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机, Android 手机, 平板等设备都用得到多媒体查询

7.3.2. 语法规范

1
2
3

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

用@media 开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

媒体类型
all: 用于所有设备
print: 用于打印机和打印预览
screen: 用于电脑屏幕, 平板电脑, 智能手机等

媒体特性:
每种媒体类型都具有各自不同的特性, 根据不同媒体类型的媒体特性设置不同的展示风格, 我们暂且了解三个. 注意他们要加小括号包含
width: 定义设备中页面可见区域的宽度
min-width: 定义输出设备中页面最小可见区域宽度
max-width: 定义输出设备中页面最大可见区域宽度

实例

1
2
3

/* 这句话的意思是: 在我们屏幕上 并且 最大宽度是800像素时, 设置我们想要的样式*/
@media screen and (max-width: 800px) {
}

7.4. 媒体查询+rem 实现元素动态大小变化

实例

@media screen and (min-width: 320px) {
  html {
    font-size: 50px;
  }
}
@media screen and (min-width: 640px) {
  html {
    font-size: 100px;
  }
}

.top {
  height: 1rem;
  font-size: 0.5rem;
  background-color: green;
  color: #fff;
}

7.5. 媒体查询引入文件

当样式比较繁多的时候, 我们可以针对不同的媒体使用不同的 stylesheets(样式表)
原理, 就是直接在 link 中判断设备的尺寸, 然后引入不同的 css 文件

语法规范

<link
  rel="stylesheet"
  media="@media mediatype and | not | only (media feature)"
  href="mystylesheet.css"
/>

8. Less 基础

8.1. 维护 css 的弊端

CSS 是一门非程序式语言, 没有变量, 函数, SCOPE(作用域)等概念

CSS 需要书写大量看似没有逻辑的代码, CSS 冗余度是比较高的
不方便维护及扩展, 不利于复用
CSS 没有很好的计算能力
非前端开发工程师来讲, 往往会因为确实 CSS 编写经验而很难写出良好且易于维护的 CSS 代码项目.

8.2. less 介绍

Less (Leaner Style Sheets) 是一门 CSS 扩展语言, 也成为 CSS 预处理器.
作为 CSS 的一种形式的扩展, 它并没有减少 CSS 的功能, 而是在现有的 CSS 语法上, 为 CSS 加入程序式语言的特性.
它在 CSS 的语法基础之上, 引入了变量, Mixin 混入, 运算以及函数等功能, 大大简化了 CSS 的编写, 并且降低了 CSS 的维护成本, 就像它的名称所说的那样, Less 可以让我们用更少的代码做更多的事情.
less 中文网址: http://lesscss.cn
常见的 CSS 预处理器:Sass, Less, Stylus

一句话: Less 是一门 CSS 预处理语言, 它扩展了 CSS 的动态特性.

8.3. Less 安装

安装 nodejs, 网址: http://nodejs.cn/download/
检查是否安装成功, 使用 cmd 命令 node -v
基于 nodejs 在线安装 less, 使用 cmd 命令 ‘npm install -g less’ 即可
检查是否安装成功, 使用 cmd 命令 lessc -v 查看版本即可

8.4. less 使用

我们首先新建一个后缀名为 less 的文件, 在这个 less 文件里面书写 less 语句

8.5. less 变量

变量是指没有固定的值, 可以改变的. 因为我们 CSS 中的一些颜色和数值等经常使用.

@变量名: 值;

变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

8.6. 编译

本质上, less 包含一套自定义的语法及一个解析器, 用户根据这些语法定义自己的样式规则, 这些规则最终会通过解析器, 编译生成对应的 CSS 文件.
所以, 我们需要把我们的 less 文件, 编译生成 css 文件, 这样我们的 html 页面才能使用.