鹏叔(https://pengtech.net)

导航

Web基础大全

1. HTML 基础

本文原文位于鹏叔的技术博客空间 - Web基础大全, 请访问原文获取最新更新.

编者: 菲利英语团队

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视频教程，完整地址http://www.pengtech.net/web/web_basic_1

      <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： 在浏览器的整个窗口打开链接，忽略任何框架。

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

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

1.3.5. HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

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

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

1.3.6. HTML <meta> 元素

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

<meta> 标签提供了元数据. 元数据也不显示在页面上，但会被浏览器解析。

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

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

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

<meta> 一般放置于 <head> 区域

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 是什么（详解）
注意事项：

  1. 根据概念，只能指定高版本IE浏览器使用低版本IE浏览器的渲染机制，而无法指定低版本浏览器采用高版本浏览器的渲染机制
  2. 根据官网定义X-UA-compatible标头不区分大小写；不过，它必须显示在网页中除title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用
  3. content的内容是IE=8，或者IE=edge等值，注意不是IE8或者直接写个edge的值，否则不起作用
  4. 添加”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> 元素

<script>标签用于加载脚本文件，如：JavaScript。

<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中的图像
例如:

<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的缩写, 意为: 锚
    例如:
<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/

内部链接:

例如:

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

空链接:

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

下载链接:

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

网页元素链接:

  • 在网页中的各种网页元素都可以被链接, 如文本, 图像, 音频, 视频都可以添加超链接, 例如:
<a href="http://www.baidu.com"> <img src="img.jpg" /> </a>

锚点链接:

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

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

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

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

1.8. 注释和特殊字符

注释:

<!-- 注释语句-->

特殊字符:

空格: &nbsp;
大于号: &gt;

特殊字符列表

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

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

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

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

  • 实例:

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

  • 实例:

    <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，则单击链接后，页面将跳转到对应标签所在位置。

<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之后再详细讨论，这里提供一个简单的示例。

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

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参考文档

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新增的语义化标签

  1. header： 头部标签
  2. nav： 导航标签
  3. article： 内容标签
  4. section： 定义文档某个区域
  5. aside： 侧边栏标签
  6. footer： 尾部标签

注意：

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

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新增的多媒体标签

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

  1. 音频：audio
  2. 视频：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

语法

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

语法

<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规则由两个主要的部分构成, 选择器以及一条或多条样式申明

    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. 空格规范

h3 { 
    color: pink; 
}
  1. 属性值前面, 冒号后面, 保留一个空格
  2. 选择器(标签)和大括号中间保留空格

3.4. CSS 基础选择器

选择器参考文档

3.4.1. 标签选择器

示例:

选择所有 <p> 元素。

p {
    color: red;
}

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

div, p {
    color: red;
}

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

div, p {
    color: red;
}

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

div > p {
    color: red;
}

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

div + p {
    color: red;
}

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

p ~ ul {
    color: red;
}

3.4.2. 类选择器

示例

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

.intro {
    color: red;
}

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

.name1.name2 {
    color: red;
}

3.4.3. 类选择器-多类名

3.4.4. id选择器

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

3.4.5. 通配符选择器

实例:

  * {
      margin: 0;
  }

3.5. CSS字体属性

3.5.1. 字体系列font-family

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

实例:

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

3.5.2. 字体大小font-size

实例:

  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属性设置文本的风格
说明:

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

3.5.5. CSS 复合属性

实例:

p {
    font: normal 16px;
}

3.6. CSS 文本属性

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

3.6.1. 文本颜色 color

取值范围:

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

  • 开发中最常用的是16进制颜色值

    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

    div {
    text-decoration: underline
}

3.6.4. 文本缩进

  • 取值: 缩进数值 10px, 2em
  • 使文本的第一行缩进多少距离
  p {
      text-indent: 2em;
  }

3.6.5. 行间距line-height

p {
      line-height: 26px;
  }

3.7. CSS引入方式

    1. 内部样式表
    <style>
   p {
      color: pink;
   }    
    </style>
    1. 外部样式表
<link rel="stylesheet" href="css文件路径">
    1. 内联方式
      内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
  <div style="color:red; width:10px"></div>

3.8. Emmet语法

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

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

3.8.1. 快速生成HTML结构语法

  1. 生成标签直接输入标签名按tab键即可, 比如div然后tab键, 就可以生成

    <div></div>

  2. 如果想要生成多个相同标签, 加上就可以了, 比如div*3就可以快速生成3个div

  3. 如果有父子级关系的标签, 可以用> 比如 ul>li就可以了

  4. 如果有兄弟关系的标签,用+就可以了比如div+p

  5. 如果生成带有类名或者id名字的, 直接写.demo或者#two tab键就可以了

  6. 如果生成的div类名是有顺序的, 可以用自增符合$

3.9. 复合选择器

3.9.1. 什么是复合选择器

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

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

3.9.2. 后代选择器

//TODO: 补充内容

3.9.3. 子元素选择器

3.9.4. 伪类选择器

  1. 链接伪类

  2. 结构伪类

3.10. 元素显示模式

3.10.1. 什么是元素显示模式

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

3.10.2. 块元素

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

块元素的特点:

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

注意:

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

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

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

行内元素的特点:

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

注意:

  • 链接里面不能再放链接了
  • 特殊情况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. 背景颜色

div {
    background-color: pink;
}

3.11.2. 背景图片

div {
    background-image: url(path)
}

3.11.3. 背景图片平铺

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

background-repeat: repeat-x;

3.11.4. 背景图片位置

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

background-position: x y;

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

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

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

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

参数是精确单位:

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

混合形式:

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

实例:

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

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

精确单位

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

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

混合形式

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

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

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

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

取值范围:

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

3.11.6. 背景复合写法

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

例如:

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

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

3.11.7. 背景色半透明

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

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. 行高的继承

当行高是倍数值

例如:

body {
   font:12px/1.5 'Microsoft YaHei'
}

如上, 行高为1.5

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

div {
    font-size: 14px
}

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

3.12.3. 优先级

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

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

选择器权重如下表所示

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

优先级注意事项:

  1. 权重是由4组数字组成, 但是不会有进位.
  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器, 以此类推.
  3. 等级判断从左向右, 如果某一位数值相同, 则判断下一位数值.
  4. 继承的权重是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. 盒子模型

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

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

  1. 先准备好相关的网页元素, 网页元素基本都是盒子box
  2. 利用css设置好盒子样式, 然后摆放到相应位置
  3. 往盒子里面装内容
    网页布局的核心本质: 就是利用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;
}

边框复合性写法

border: 1px solid red; 没有顺序
  • border-top:
  • border-bottom:
  • border-right:
  • border-left:

实例:

  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

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

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

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

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

3.13.10. 清除盒子的内外边距


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

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

3.13.11. 圆角边框

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

border-radius: 10px;

border-radius: 50%;

每个叫弧度不一样

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属性添加阴影.
语法:

/*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颜色值
/*text-shadow: h-shadow v-shadow blur  color;*/
box-shadow: 10px 10px 10px black;

3.14. CSS浮动

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

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

  1. 普通流(标准流)
  2. 浮动
  3. 定位

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

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

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

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

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

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

3.14.3. 为什么需要浮动

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

3.14.4. 什么是浮动

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

 选择器 {float: 属性值;}

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

3.14.5. 浮动特性(重难点)

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

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

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

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

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

3.14.6. 常见的网页布局

3.14.7. 浮动布局注意点

  1. 浮动和标准流的父盒子搭配
    先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列位置

  2. 一个元素浮动, 理论上其余的兄弟也要浮动.
    一个盒子里面有多少个盒子, 如果其中一个盒子浮动了, 那么其他兄弟也应该浮动, 以防止引起问题.
    浮动的盒子只会影响浮动盒子后面的标准流, 不会影响前面的标准流.

3.14.8. 为什么要清除浮动

我们不应该给父盒子高度

3.14.9. 清除浮动的本质

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

语法:

选择器 {clear: 属性值}

属性值:

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

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

清除浮动的方法:

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

3.15. 定位

3.15.1. 为什么需要定位

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

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. 静态定位

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

语法:

选择器 {
    position: static
}
  1. 静态定位按照标准流特性摆放位置, 它没有边偏移.
  2. 静态定位在布局时很少用到.

3.15.4. 相对定位 relative

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

选择器 {
    position: relative;
}

相对定位的特点:

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

3.15.5. 绝对定位 absolute

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

  选择器 {
      position: absolute;
  }

  1. 如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位(Document文档)

  2. 如果祖先元素有定位(相对, 绝对, 固定定位), 则以最近一级的有定位祖先元素为参考点移动位置.

  3. 绝对定位不再占用标准流中的位置.

3.15.6. 3.15.6.子绝父相

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

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

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

3.15.7. 固定定位 fixed

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

选择器 {
    position: fixed;
}

固定定位的特点:

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

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

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

小算法:

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

3.15.9. 粘性定位 sticky

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

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

粘性定位的特点:

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

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

3.15.10. 定位的叠放次序

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

选择器 {z-index: 1;}

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

3.15.11. 定位的拓展

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

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

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

3.15.12. 元素的显示和隐藏

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

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)的使用

使用精灵图核心:

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

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

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

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

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

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

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

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

4.1.4. 字体图标

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

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

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

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

//字体图标的引入

4.2. CSS三角做法

4.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 在元素内部的后面插入内容
注意:

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

5.4. CSS3 盒子模型 border-box

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

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

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

5.5. CSS3 图片模糊处理

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

5.5.1. CSS3 滤镜filter

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

语法

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: 要过渡的属性 花费时间 运动曲线 何时开始;

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

5.6.2. 狭义的HTML5 和广义的 HTML5

狭义的HTML5就是HTML5本身

  1. 广义的HTML5 是HTML5本身+CSS3+Javascript
  2. 这个集合有时称为HTML5和它的朋友, 通常缩写为HTML5
  3. 虽然HTML5的一些特性仍然不被某些浏览器支持, 但是它是一种发展趋势.
  4. 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%)
对行内元素是没有效果的

  1. 用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维平面内顺时针旋转或者逆时针旋转

transform: rotate(度数);

重点:

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

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

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

transform-origin: x y;

重点:

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

5.7.4. 2D转换之缩放 scale

  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
注意:

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

5.7.6. 2D转换总结

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

5.8. CSS3 动画

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

5.8.1. 动画的基本使用

制作动画分为两步:

  1. 先定义动画
  2. 再使用动画
5.8.1.1. 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
     0% {
         width: 100px;
     }

     100% {
         width: 200px;
     }
}

动画序列

  1. 0%是动画的开始, 100%是动画的完成, 这样的规则就是动画序列.
  2. 在@keyframes中规定某项CSS样式, 就能创建由当前样式逐渐改为新样式的动画效果.
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果, 您可以改变任意多的样式任意多的次数.
  4. 请用百分比来规定变化发生的时间, 或关键词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 动画简写

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. 浏览器私有前缀

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

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

6. 移动web开发流式布局

学习目标:

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

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. 移动端调试方法
  1. Chrome DevTools(谷歌浏览器)的模拟手机调试
  2. 搭建本地web服务器, 手机和服务器一个局域网, 通过手机访问服务器
  3. 使用外网服务, 直接IP或域名访问

6.2. 视口

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

6.2.1. 布局视口 layout viewport

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

6.2.2. 视距视口visual viewport

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

6.2.3. 理想视口 ideal viewport

  1. 为了使网站在移动端有理想的浏览和阅读宽度而设定.
  2. 理想视口, 对设备来讲, 是最理想的视口尺寸
  3. 需要手动添加meta视口标签通知浏览器操作
  4. 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. 物理像素&物理像素比

  1. 物理像素点指的是屏幕显示的最小颗粒, 是物理真实存在的. 这是厂商在出厂时就设置好了, 比如苹果6\7\8是750*1334

  2. 我们开发时候的1px不是一定等于一个物理像素的

  3. PC端页面, 1个px等于1个物理像素的, 但是移动端不尽相同

  4. 一个px的能显示的物理像素点的个数, 称为物理像素比或屏幕像素比

  5. PC端和早期的手机屏幕/普通手机屏幕: 1CSS像素=1物理像素

  6. Retina 视网膜屏幕是一种显示技术, 可以将更多的物理像素点压缩至一块屏幕里, 从而达到更高的分辨率, 并提高屏幕显示的细腻程度.

6.4. 移动端开发选择

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

6.5. 移动端技术解决方案

6.5.1. 移动端浏览器

  1. 移动端浏览器基本以webkit内核为主, 因此我们考虑webkit兼容性问题.
  2. 我们可以放心使用H5标签和CSS样式
  3. 同时我们浏览器的私有前缀我们只需要考虑添加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端有所区别:

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

  2. 响应式页面兼容移动端
    媒体查询
    bootstrap

6.6. Flex 布局

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

6.6.1. flex布局父项常见属性

6.6.1.1. 常见父项属性

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

  1. flex-direction: 设置主轴方向
  2. justify-content: 设置主轴上子元素排列方式
  3. flex-wrap: 设置子元素是否换行
  4. align-content: 设置侧轴上子元素的排列方式(多行)
  5. align-items: 设置侧轴上的子元素排列方式(单行)
  6. 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来表示占多少份数.

  .item {
      flex: <number> /* default 0 */
  }
6.6.2.2. align-self控制子项自己在侧轴上的排列方式

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

 span:nth-child(2) {
     align-self: flex-end;
 }
6.6.2.3. order属性

7. 响应式布局与Bootstrap框架

7.1. rem适配布局学习目标

7.2. rem布局开始

方案?

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

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. 语法规范

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

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

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

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

实例

/* 这句话的意思是: 在我们屏幕上 并且 最大宽度是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(作用域)等概念

  1. CSS需要书写大量看似没有逻辑的代码, CSS冗余度是比较高的
  2. 不方便维护及扩展, 不利于复用
  3. CSS没有很好的计算能力
  4. 非前端开发工程师来讲, 往往会因为确实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 安装

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

8.4. less使用

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

8.5. less 变量

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

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

8.6. 编译

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

vscode 安装插件 Easy less

8.7. less嵌套

8.8. Less运算

9. sass 基础

参考我的博客文章sass学习笔记

10. 参考资料

黑马程序员pink老师前端入门教程

使用 HTML 组织网站内容

posted on 2022-10-22 16:46  eagle.supper  阅读(42)  评论(0)  编辑  收藏  举报