开始于2021年8月3日09点59分

课程学习路线：HTML5-> CSS3->H5C3提高->项目拼优购电商网站

仅更新到H5C3提高的C3提高部分（新增选择器），忙于其他事情，暂不继续更新

文章目录

HTML

HTML简介

  • 网页

    • 什么是网页
    • 什么是HTML
    • 网页的形成

  • 常用浏览器及内核

  • Web标准

    • 为什么需要Web标准
    • Web标准构成
      • 结构（Structure）、表现（presentation）、行为（behavior）

1. HTML标签

  • 1.1 语法规范
  • 1.2 标签关系 包含关系、并列关系

2. HTML基本结构标签

  • 2.1 第一个HTML
    • <html></html> <head></head> <body></body> <title></title>

3. 网页开发工具

  • 3.1 VSCode
  • 3.2 网页声明标签 <!DOCTYPE>
  • 3.3 lang语言种类<html lang = 'en'> or <html lang = 'zh-CN'>
  • 3.4 charset 字符集 常用的 GB2312 BIG5 GBK UTF-8

4. 标签语义

  • 4.1 标题<h1> - <h6>

  • 4.2 段落<p></p>

    • 文本在一个段落中会根据浏览器大小自动换行
    • 段落与段落之间会保有比较大的空隙

  • 4.3 换行<br />

  • 4.4 文本格式化标签

    语义标签说明
    加粗<strong></strong>或者<b></b>更推荐<strong>标签加粗 语义更强烈
    斜体<em></em>或者<i></i>更推荐<em>标签加粗 语义更强烈
    下划线<ins></ins>或者<u></u>更推荐<ins>标签加粗 语义更强烈
    删除线<del></del>或者<s></s>更推荐<del>标签加粗 语义更强烈

  • 4.5 <div>和<span> 没有语义，只是一个盒子

    <div>今日头条</div>
<span>今日价格</span>
    • div是division的缩写，表示分割、分区。span意为跨度、跨距。

    特点：

    • <div>标签用来布局，一行只能放一对。大盒子
    • <span>标签用来布局，一行可以放多个。小盒子

  • 4.6 图形标签和路径

    • 4.6.1 图片标签<img src = ‘图片url’/>

      属性属性值说明
      src图片路径必须属性
      alt文本替换文本。图片不能显示时，显示该文本
      title文本提示文本。鼠标放在图片上时，显示该文本
      width像素设置图片的宽度
      height像素设置图片的高度
      border像素设置图片的边框粗细

      属性间部分先后顺序，采用空格分开，采取键值对的格式。

    • 4.6.2 路径

      • 4.6.2.1 相对路径

        以文件所在的位置参考基础，而建出的目录路径

        相对路径分类符号说明
        同一级路径图片文件位于HTML文件同一级 如<img src='img.jpg'>
        下一级路径/图片文件位于HTML文件下一级 如<img src='images/img.jpg'>
        上一级路径…/图片文件位于HTML文件上一级 如<img src='../img.jpg'>

      • 4.6.2.2 绝对路径

      指目录下的绝对路径，通常以盘符开始。或者完整的网络地址。

  • 4.7 链接标签<a></a>

    • 4.7.1语法规范<a herf="https://www.baidu.com">

      a是anchor的缩写，意为：锚。

      两个属性的作用

      属性说明
      href用于指定链接的url地址，（必须属性）当为标签应用href属性时，具有超链接功能
      target用于指定链接页面的打开方式，其中_self为默认值，__blank为新窗口打开。

    • 4.7.2 链接分类

      1. 外部链接 必须以http/https开头
      2. 内部链接 网站内部页面之间的相互连接 例如<a href="index.html">首页</a>
      3. 空链接 当前没有确定链接目标时 例如<a href="#">反馈</a>
      4. 下载链接 如果href里面地址是一个文件或者压缩包，会下载这个文件
      5. 网页元素链接 在网页中的各种网页元素，如文本、图片、表格、音频、视频等
      6. 锚点链接 可以快速定位到页面中的某个位置 例：
      <a href="#two">第二集</a>
<h2 id="two">第二集</h2>

  • 4.8 注释标签

    <!--这是注释-->

5. 特殊字符

特殊字符描述代码
空格&nbsp;
<小于号&lt;
>大于号&gt;

其他的用到再查询。

6. 表格标签

<table>
	<tr>
	<th></th>
	</tr>
	<tr>
	<td></td>
	</tr>
	...
</table

<table></table>表格标签，<tr></tr>行标签，<th></th>表头标签，需嵌套在行标签内内容会被加粗居中显示，<td></td>单元格标签，需嵌套在行标签内。

  • 表格属性

一般不直接设置，后面通过CSS来设置。

属性名属性值说明
alignleft 、center、right规定表格相对周围元素的对齐方式
border1或者“”规定表格单元是否拥有边框，默认“”，即没有边框
cellpadding像素值规定单元边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格宽度
  • 表格结构标签
  1. <thead></thead>用于定义表格的头部，内部必须拥有<tr>标签，一般位于第一行
  2. <tbody></tbody>用于定义表格的主体
  • 合并单元格

  1. 跨行合并 rowspan=“合并单元格的个数”

  2. 跨列合并 colspan=“合并单元格的个数”

  3. 目标单元格

    1. 跨行：最上侧单元格为目标单元格，合并代码写在这个单元格
    2. 跨列：最左侧单元格为目标单元格，合并代码写在这个单元格

  4. 合并三部曲

    1. 确定是跨行合并还是跨列合并
    2. 找到目标单元格，书写合并代码
    3. 删除多余的单元格
    <table align="center" border="1" cellspacing="0" width=400 height=200>
    <tbody>
    <tr>
    	<td></td>
    	<td colspan="2"></td>
    </tr>
     <tr>
    	<td rowspan="2"></td>
    	<td></td>
    	<td></td>
    </tr>
     <tr>
    	<td></td>
    	<td></td>
    </tr>
    </tbody>
</table>

7. 列表

  • 7.1 无序列表

<ul>无序列表标签，一般会以项目符号呈现列表项，列表项用<li>标签

<h4>
    你喜欢的编程语言是？
</h4>
<ul>
	<li>C语言</li>
	<li>C++</li>
	<li>Java</li>
	<li>Python</li>
</ul>
  1. 无序列表的各个列表项之间没有顺序级别之分，是并列的；
  2. <ul></ul>标签中只能嵌套<li></li>，直接在<ul>标签内书写其他标签或文字都是不被允许的；
  3. <li>与</li>之间可以放入任何标签和内容，它相当于一个大的容器；
  4. 无序列表会带有自己的样式属性，但实际使用中，会使用CSS来设置。
  • 7.2 有序列表

<ol>有序列表标签，其各个列表项会按照一定顺序排列定义。

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

注意事项和无序列表类似。

  • 7.3 自定义列表：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>描述列表（自定义列表），该标签会和<dt>（定义项目/名字）和<dd>（描述项目/名字）一起使用。

<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>
  1. <dl>里只能包含<dt>和<dd>；
  2. <dt>、<dd>个数没有限制，但经常是一个<dt>对应多个<dd>。

8. 表单

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。

  • 8.1 表单标签

<form>标签用于定义表单域，实现用户信息的收集和传递。

<form>标签会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交的方式" name="表单域名称">
    各种表单控件
</form>

常用属性：

属性属性值说明
actionurl地址用于接收和处理表单数据的服务器程序的url地址
methodpost/get用于设置表单数据的提交方式，post或者get
name名称用于指定表单域的名称，用于区分同一个页面的多个表单域

  • 8.2 表单控件

    1. input输入表单元素

      <input>标签，用于收集用户信息，包含一个type属性

      <input type="属性值">

      1. <input>为单标签

      2. type属性设置不同属性值用来指定不同的空间类型

      3. type属性值：

        属性值描述
        button定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
        checkbox定义复选框。
        file定义输入字段和"浏览""按钮，供文件上传。
        hidden定义隐藏的输入字段。
        image定义图像形式的提交按钮。
        password定义密码字段。该字段中的字符被掩码。
        radio定义单选按钮。
        reset定义重置按钮。重置按钮会清除表单中的所有效据。
        submit定义提交按钮。提交按钮会把表单数据发送到服务器。
        text定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

      4. 除type属性外，<input>标签还具有其他属性：

        属性属性值说明
        name用户定义定义input元素的名称
        value用户定义规定input元素的值
        checkedchecked规定此input元素首次加载时应当被选中
        maxlength正整数规定输入字段的字符的最大长度
        1. name和value是每个表单元素都有的属性值，主要给后台人员使用。
        2. name表单元素的名字，要求单选按钮和复选框都要有相同的名字。

      5. <label>标签，给元素定义标注

        <label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单玩素上用来增加用户体验.

        <label for="male">男</label>
<input type="radio" name="gender" id="male">

        <label>标签的for属性应与相关元素的id属性相同

    2. select下拉表单元素

      多个选项供用户选择，并且想要节约空间时。

      <select>标签定义下拉列表

      <select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
      1. <select>中至少包含一对<option>
      2. 在<option>中定义selected="selected"时，当前项即为默认选择项

    3. textarea文本域表单元素

      当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。

      <textarea>标签，用于定义多行输入的控件

      <textarea cols="20" rows="5">
	在此是显示在文本域的内容
</textarea>
      1. cols=“每行中的字符数”，rows=“显示的行数”，实际开发不会使用，都是通过CSS来调整

    CSS基础

    1. 简介

    美化网页，布局页面

    1.1 HTML局限性

    丑

    1.2 CSS层叠样式表

  • 设置HTML页面的文本内容、图片外形、版面的布局以及外观显示样式

  • 美化HTML，让HTML更好看，让页面布局更简单

  • 使结构（HTML）与样式（CSS）分离。

1.3 CSS语法规范

主要有两部分组成：选择器、一条或多条声明

  1. 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  2. 属性和属性值以**“键值对”**的形式出现

1.4 CSS代码风格

  1. 样式格式

    1. 紧凑格式

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

    2. 展开格式

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

    推荐第二种，更直观

  2. 样式大小写

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

  3. 样式空格

    1. 属性值前面，冒号后面，保留一个空格
    2. 选择器（标签)和大括号中间保留空格

2. 选择器

2.1 选择器的作用

选择不同的标签。

2.2 选择器分类

  • 基础选择器

    由单个选择器组成（标签选择器、类选择器、id选择器和通配符选择器）

  • 复合选择器

2.3 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签定统一的CSS样式。

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;    
    属性3: 属性值3;    
    ...
}

可以把某一类标签全部选择出来，能快速的为页面中的某一类同类型标签统一设置样式；缺点是不能差异化设置标签，只能选择全部的标签。

2.4 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示

.类名 {
    属性1: 属性值1;
    ...
}

例如把拥有red类的HTML元素改成红色：

.red {
    color: red;
}

相应的，HTML元素要用class属性；

<div class="red">
    我变红了
</div>

样式点定义，

结构类调用。

一个或多个，

开发最常用。

—pink老师

注意：

  1. 类选择器使用“”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的).
  2. 可以理解为给这个标签起了一个名字，来表示。
  3. 长名称或词组可以使用中横线来为选择器命名。
  4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
  5. 命名要有意义，尽量使别人一眼就知道这个类名的目的。
  6. 命名规范:见附件( Web前端开发规范手册.doc )

2.4.1 多类名

  1. 使用方式： <div class="red font20">红色20像素</div>

    • 在class中使用空格隔开

    • 这个标签分别具有这些类名的样式

  2. 使用场景

    • 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
    • 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
    • 从而节省CSS代码，也方便统一修改

2.5 id选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以**“#”**来定义。

#id名 {
    属性: 属性值
    ...
}

例如，将id为nav元素的内容设置为红色：

#nav {
    color: red;
}

**注意：**一个id选择器只能调用一次

类选择器与id选择器的区别：

  1. 类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
  2. id选择器好比人的身份证号码，是唯一的，不得重复。
  3. id选择器和类选择器最大的不同在于使用次数上。
  4. 类选择器在修改样式中用的最多， id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.6 通配符选择器

在CSS中，通配符选择器使用**“*”**定义，它表示选取页面中所有元素(标签)。

* {
    属性:属性值;
    ...
}

例：

* {
    color: red;
}
  • 通配符选择器不需要调用，自动就给所有的元素使用样式
  • 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距后期讲)
* {
    margin: 0;
    padding: 0;
}

2.7 基础选择器总结

基础选择器作用特点使用情况用法
标签选择器选出所有相同的标签不能差异化选择较多p {color: red;}
类选择器选出一个或多个标签可以根据需求选择非常多.red {color: red;}
id选择器一次只能选择一个标签id属性只能在HTML文档中出现一次一般和js搭配使用#nav {color: red;}
通配符选择器选择所有的标签选择的太多，有部分不需要特殊情况使用* {color: red;}

3. 字体属性

3.1 字体系列

使用font-family属性定义文本的字体系列。

p {
    font-family: "微软雅黑";
}
div {
    font-family: Arial,"Microsoft Yahei","微软雅黑";
}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体: body {font-family. "Microsoft YaHei ,tahoma,arial,‘Hiragino Sans GB’;}

3.2 字体大小

使用font-size属性定义字体大小

p {
    font-size: 20px;
}
  • px（像素)大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给<body>标签指定整个页面的字体大小

3.3 字体粗细

使用font-weight属性定义字体粗细

p {
    font-weight: bold;
}
属性值说明
normal默认值（不加粗）
bold加粗
bolder特加粗
lighter细体
100-900400等同于normal，700等同于bold，注意这个数字后面不加单位

实际开发中，更推荐使用数值表示字体粗细

3.4 文字样式

使用font-style属性定义文字风格

p {
    font-style: normal;
}

font-style的属性值：

属性值说明
normal默认值，浏览器会显示标准的字体样式。
italic浏览器会显示斜体的样式。

实际开发中很少使用斜体，反而要给斜体标签(<em>、<i>）改成不倾斜！

3.5 字体复合属性

CSS可以把上述字体属性按既定顺序符合书写：

body {
    font: font-style font-weight font-size/line-height font-family;
    /*line-height为行间距，可以省略*/
}

例如，设置微软雅黑的加粗斜体，16像素：

body {
    font: italic 700 16px 'Microsoft Yahei';
}
  • 使用font属性时，必须按上面的顺序书写，不能更换顺序，各个属性用空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用

3.6 字体属性总结

属性表示注意点
font-size字号通常使用px 像素，一定要写上单位
font-family字体实际开发中，团队约定字体
font-weight字体粗细blod，加粗，数值700；normal，不加粗，数值是400
font-style字体样式italic，斜体；normal，不倾斜
font字体连写1.顺序；2.字号和字体必须保留

4. 文本属性

定义文本的外观，如文本颜色，对齐方式、装饰、缩进、行间距等

4.1 文本颜色

使用color属性定义文本颜色

p {
    color: pink;
}

color的属性值：

属性值说明
预设的颜色值red、green、pink…
十六进制表示#FF00CC、#FFFFFF…
RGB表示rgb(255,0,0)，rgb(100%,0%,0%)…

4.2 对齐方式

使用text-align属性设置元素内的文本内容的水平对齐方式

h2 {
    text-align: center;
}
属性值说明
center居中对齐
left左对齐，默认值
right右对齐

本质是设置盒子里的文字的水平对齐方式！

4.3 装饰文本

使用text-decoration属性规定添加到文本的装饰，包括下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

text-decoration的属性值：

属性值说明
none默认。没有装饰（常用）
underline下划线。链接标签自带下划线（常用）
overline上划线（几乎不用）
line-throught删除线（几乎不用）

4.4 文本缩进

使用text-indent来指定第一行的缩进，通常是将段落首行缩进。

p {
    text-indent: 20px;
    /*第一行都会缩进给定的长度，这个长度甚至可以是负值*/
}

首行缩进还有更好的写法：

p {
    text-indent: 2em;
}

em是一个相对单位，是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

4.5 行间距

使用line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离

p {
    line-height: 26px;
    /*行间距：文本的像素加上间距和下间距*/
    /*26px的行间距，若字体为16px，则上下间距为5px*/
}

4.6 文本属性总结

属性表示注意点
color文本颜色通常使用16进制书写
text-align文本对齐设定文本的水平对齐格式
text-indent文本缩进首行缩进2字符：2em；
text-decoration文本修饰下划线：underline；取消下划线：none
text-height行高控制行间距

5. 引入方式

5.1 CSS的三种样式表

  1. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

5.2 内部样式表

内部样式表（内嵌样式表）是写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个**<style>**标签中。

<style>
div {
    color: red;
    font-size: 12px;
}
</style>
  • <style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的**<head>标签**中
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置

5.3 行内样式表

行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">
    夏天夏天悄悄过去留下小秘密
</div>
  • style其实就是标签的属性
  • 在双引号中间，写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • ·由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定CSS，通常也被称为行内式引入

5.4 外部样式表

核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。实际开发都是外部样式表。适合于样式比较多的情况。

引入外部样式表的步骤：

  1. 新建css文件，把所有css样式放入此文件中；

  2. 在HTML页面中，使用**<link>标签**引入这个文件；

    <link rel="stylesheet" href="css文件路径">
    属性作用
    rel定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet”，表示被链接的文档是一个样式表文件。
    href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

5.5 css引入方式总结

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高结构样式混写较少控制一个标签
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面
外部样式表完全实现结构和样式相分离需要引入最多控制多个页面

6. chorme调试工具

  1. f12打开、右键->检查
  2. 使用调试工具
    1. Ctrl+滚轮可以放大开发者工具代码大小。
    2. 左边是HTML元素结构，右边是CSS样式。
    3. 右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜
    4. Ctrl +0复原浏览器大小。
    5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
    6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

2021年8月5日12点30分

CSS入门

1. Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,

1.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类名是有顺序的，可以用自增符号**$**
  7. 如果想要在生成的标签内部写内容可以用**{}**表示
1.2 快速生成css样式语法

css基本采取简写形式即可

  1. 比如w200 tab键，生成：width: 200px;
  2. 比如lh26 tab键，生成：line-height: 26px;

1.3 快速格式化代码

Vscode快速格式化代码: shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:

  1. 文件------>【首选项】---------->【设置】;

  2. 搜索emmet.include;

  3. 在settings.json下的【用户】中添加以下键值对:

    "editor.formatOnType": true,
"editor.formatOnSave": true

  4. 只需要设置一次即可，以后都可以自动保存格式化代码

2.复合选择器

2.1 复合选择器

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

  • 复合选择器可以更准确、更高效的选择目标元紊(标签)
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等
2.2 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {
	样式;
}/*这种写法只会选择元素1中的全部元素2（后代元素）*/

例如：

ul li {
    color: red;
}/*ul内的所有li标签内容变成红色*/
  • 元素1和元素2之间用空格隔开
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2可以是儿子，也可以是孙子，可以嵌套下去，只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器
2.3 子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

父元素1>子元素2 {
    样式;
}

例如：

div > p {
    color: red;
}/*选择div里所有最近的一级p标签元素*/
  • 元素1和元素2之间用**>号**隔开
  • 元素1是父级，元素2是子级，最终选择元素2
  • 元素2必须的亲儿子，其他级别的标签不会选择。你可以叫它亲儿子选择器
2.4 并集选择器

**并集选择器可以选择多组标签同时为他们定义相同的样式。**通常用于集体声明.

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1, 元素2 {
    样式;
}

例如：

ul,/*标签选择器*/
div,/*标签选择器*/
.pig ul {/*后代选择器*/
    color: red;
}
  • 元素1和元素2之间用逗号隔开
  • 并集选择器通常用于集体声明
  • 约定的书写规范，并集选择器竖着书写
2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用**冒号(😃**表示，比如:hover .:first-child。

伪类选择器很多，比如链接伪类、结构伪类等

2.6 链接伪类选择器
链接伪类选择器类别说明
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下，未松开的链接）

2.6.1 链接伪类选择器注意事项：

  1. 为了确保生效，请按照LVHA的循顺序依次声明:link - :visited - :hover - :active。
  2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

2.6.2 链接伪选择器实际开发中的写法

a {
    color: #333;
    text-decoration: none;
}/**/

a:hover {
    color: #369;
    text-decoration: underline;
}/**/
2.7 :focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元紊。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus{
    background-color: yellow;
}
2.8 复合选择器总结
选择器作用特征使用情况隔开符号及用法
后代选择器选择后代元素可以是子孙后代较多空格 .nav p
子代选择器选择最近一级元素只选亲儿子较少大于号 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多逗号 .nav,.header
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住a {} 和a:hover{}
:focus链接选择器选择获得光标的表单跟表单相关较少input:focus

3. 元素显示模式

3.1 什么是元素显示模式

作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签）以什么方式进行显示，比如**<div>自己占一行，比如一行可以放多个<span>**。

HTML元素一般分为块元素和行元素两种类型

3.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中**<div>标签是最典型的块元素**。

块元素的特点：

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

注意：

  • 文字类的元素内不能使用块级元素

  • <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

  • 同理，<h1>~**<h6>**等都是文字类块级标签，里面也不能放其他块级元素

3.3 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中**<span>标签是最典型的行内元紊**。有的地方也将行内元素称为内联元素。

行内元素的特点：

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

注意：

  • 链接里面不能再放链接
  • 特殊情况链接**<a>里面可以放块级元素，但是给<a>**转换一下块级模式最安全
3.4 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

  1. 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。
  2. 一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。
  3. 高度，行高、外边距以及内边距都可以控制(块级元素特点)。
3.5 元素显示模式总结
元素模式元素排列设置模式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度和高度容器的100%可以包含任何标签
行内元素一行只能放多个行内元素不可以设置宽度和高度它本身内容的宽度文本或其他行内元素
行内块元素一行只能放多个行内块级元素可以设置宽度和高度它本身内容的宽度
3.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性比如想要增加链接**<a>**的触发范围。

  • 转换为块级元素：display: block
  • 转换为行内元素：dispaly: inline
  • 转化为行内块元素：dispaly: inline-block

补充一个小技巧：把单行文字设置为垂直居中：把行间距设置为盒子的高度：

a {
    display: block;
    height: 40px;
    line-height: 40px;
}

4. 背景

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

4.1 背景颜色

使用background-color属性定义元素的背景颜色。

background-color: transparent(默认值)/颜色值;
4.2 背景图片

使用background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。(精灵图也是一种运用场景)

background-image: none/url();
参数值作用
none无背景图片（默认）
url使用绝对或相对路径指定背景图片
4.3 背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat: 属性值;
属性值作用
repeat背景图片在纵向和横向上平铺（默认）
no-repeat背景图片不平铺
repeat-x背景图片在横向上平铺
repeat-y背景图片在纵向上平铺
4.4 背景图片位置

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

background-position: x y;
/*参数的意思是：x坐标和y坐标*/
/*可以是方位名词或精确值*/
参数值说明
lenght百分比数|由浮点数和单位组成的长度值
positiontop|center|bottom|left|center|right

  1. 参数是方位名词

    • 如果指定的两个值都是方位词，则两个值的前后顺序无关

    • 采用方位词时，如果只写一个方位词，则另一个默认是center（居中对齐）

  2. 参数是精确数值

    • 第一个一定是x坐标，第二个一定是y坐标
    • 如果只指定了一个数值，那么改数值一定是x坐标，y坐标默认垂直居中

  3. 参数的混合单位

    • 第一个值一定是x坐标，第二个一定是y坐标
4.5 背景固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动的效果

background-attachment: scoll|fixed
参数作用
scroll背景图片是随对象内容滚动（默认）
fixed背景图像固定
4.6 背景复合写法

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

background: transparent url(url) repeat-y fixed top;
  • 开发中更推荐使用使用复合写法
4.7 背景颜色半透明

css3提供了设置背景颜色半透明的效果

background: rgba(0, 0, 0, 0.3);
  • 前面三个参数的rgb颜色，最后一个0.3是alpha透明度，取值在0~1之间
  • alpha的0.3可以省略成.3，rgba(0, 0, 0, .3)
  • css3新增属性，IE9+版本浏览器支持
  • 放心使用，不太关注兼容性写法
4.8 背景总结
属性作用值
background-color背景颜色预定义的颜色值|十六进制|RGB颜色
background-image背景图片url(图片路径)
background-repeat背景平铺repeat|no-repeat|repeat-x|repeat-y
backgrong-position背景位置length|position
background-attachment背景固定scroll|fixed
背景复合写法书写更简单依次是：背景颜色 背景图片路径 平铺方式 固定方式 背景位置
背景色半透明背景颜色半透明background:rgba(0,0,0,0.3);
  • 背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

2021年8月6日14点17分

CSS三大特性

css有三个非常重要的特性：层叠性、继承性、优先级

1. 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式突的问题

层叠性原则：

  • 样式冲突，遵循的原则是就近原则，
  • 样式不冲突，不会层叠
div {
    color: red;
    font-size: 12px;
}
div{
    color: pink;
}
/*最终会显示为12像素，粉红色*/

2. 继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>
<body>
	<div>
        <p>
            龙生龙，凤生凤，老鼠生的儿子会打洞
        </p>
    </div>
</body>
<!--p标签中的样式继承自div-->
  • 恰当地使用继承可以简化代码，降低css样式的复杂性
  • 子元素可以继承的样式：text-，font-，line-这些开头的元素，以及color属性

特别的，行高的继承

body {
	font: 12px/1.5 "Microsoft Yahei"
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高
  • 如果子元素设置了行高，此时行高为：文字大小*1.5
  • body行高为1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3. 优先级

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

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行
选择器权重1优先级
！important2+∞高
行内样式1，0，0，0|
id选择器0，1，0，0|
类选择器、伪类选择器0，0，1，0|
标签选择器0，0，0，1↓
继承、通配符选择器0，0，0，0低
div {
	color: red!important;
    font-size:12px;
}

注意：

  1. 权重是有4组数字组成,但是不会有进位。
  2. 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推.
  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
  4. 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，!important无穷大
  5. 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
<style>
    #father {
        color: red;
    }
    
    p {
        color: pink;
    }
    
    body {
        color: yellow;
    }
    
</style>
<body>
    <div id="father">
        <p>我是什么颜色？</p>
    </div>
    <a href="#">链接会是什么状态？</a>
</body>
  • 标签p内容的颜色的粉红色；
  • 链接a会是蓝色带下划线；
  • 这都是因为继承的选择器，优先级最低，p标签和a标签选择器优先级高（a有标签选择器是因为浏览器默认为链接写了蓝色带下划线的）

复合选择器的权重叠加

权重叠加∶如果是复合选择器，则会有权重强加，需要计算权重。

<style>
    /* 复合选择器的权重叠加 */
    ul li {
        color: green;
    }
    /* ul li 权重：0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
    li {
        color: red;
    }
    /* li 权重：0，0，0，1 */
    .nav li {
        color: pink;
    }
	/* .nav li 权重：0，0，1，0 + 0，0，0，1 = 0，0，1，1*/
</style>
<body>
    <ul class="nav">
        <li>萝卜</li>
        <li>青菜</li>
    </ul>
</body>

权重叠加练习

  • div ul li ————>0，0，0，3
  • .nav ul li ————>0，0，1，2
  • a:hover ————>0，0，1，1
  • .nav a ————>0，0，1，1

2021年8月7日14点31分

盒子模型

1. 盒子模型

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

1.1 网页布局本质

网页布局过程

  1. 准备好相关的网页元素，网页元素基本都是盒子Box。
  2. 利用CSS设置好盒子样式，然后摆放到相应位置。
  3. 往盒子里面装内容。

本质：利用CSS摆盒子

1.2 盒子模型组成

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

  • 边框：border
  • 外边距：magin
  • 内边距：padding
  • 内容：content
1.3 边框 border

border可以设置元素的边框。边框由三部分：边框粗细、边框样式、边框颜色

border: border-width|border-style|border-color;
属性作用
border-width定义边框粗细，单位是px
border-style边框的样式，重点记住solid、dashed、dotted
border-color边框颜色

复合写法：

border: 1px solid red;/*没有顺序，一般要求这个顺序*/

分开书写：

  • -top：上边框
  • -bottom：下边框
  • -left：左边框
  • -right：右边框
1.4 表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapes: collapse;
  • 设置为collapse，相邻边框会合并
1.5 边框影响盒子的实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

  1. 测量盒子大小的时候不量边框
  2. 如果测量的时候包含了边框,则需要width/height减去边框宽度
1.6 内边距 padding

padding属性用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左内边距
padding-right右内边距
padding-top上内边距
padding-bottom下内边距

复合写法：

可以有一到四个，不同值个数含义不同：

值的个数意思
padding: 5px1个值，代表上下左右内边距都是5px
padding: 5px 10px2个值，第一个代变上下内边距，第二个代变左右内边距
padding: 5px 10px 20px3个值，第一个代变上内边距，第二个代变左右内边距，第三个代表下内边距
padding: 5px 10px 20px 30px4个值，依次是上、右、下、左，顺时针
  • 以上4种情况，实际开发都会使用
1.7 padding会影响盒子实际大小

当我们给盒子指定padding值之后，发生了2件事情:

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案∶
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

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

1.8 外边距 margin

margin属性用于设置外边距，控制盒子与盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

margin简写代表的意义跟padding完全一致

1.8.1 外边距的典型应用：

外边距可以让块级盒子水平居中，但是必须满足：

  1. 盒子必须指定了宽度（width）
  2. 盒子左右外边距都设置auto
.header {
    width: 960px;
    margin: 0 auto;
}

常见的写法，以下三种都可以：

margin-left: auto;
maigin-right: auto;

margin: auto;

margin: 0 auto;

更推荐使用最后一种写法

行内元素和行内块元素水平居中只需给父元素添加：text-algin： center;即可

1.8.2 外边距合并

使用margin设置块级元素的上下外边距时，可能会出现外边距的合并。

  1. 相邻块级元素垂直外边距（上下外边距）的合并

    当上下两个块级元素（兄弟关系），上面的块级元素设置了下外边距100px，下面的块级元素设置了上外边距200px，但它们之间的边距只为200px，这就是外边距的合并。这种情况外边距仅取最大的外边距。

    • 解决方案：

    尽量只给一个盒子添加margin值

  2. 嵌套块元素垂直外边距的塌陷

    对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会先较大的外边距值。

    • 解决方案：
      1. 为父元素添加上边框
      2. 为父元素添加内边距
      3. 为父元素添加overflow: hidden；推荐使用这种方法，不会增加盒子的宽度
      4. 其他方法比如：浮动、固定、绝对定位的盒子
1.9 清除内外边距

网页元素很对带有默认的内外边距，不同浏览器默认的也不相一致。因此在布局前，首先清除网页元素的内外边距：

* {
    padding: 0;
    margin: 0;
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。可以转换为行内块或块级元素再设置。

2. PS基本操作

因为网页美工大部分效果图都是利用**PS ( Photoshop )**来做的，所以以后我们大部分切图工作都是在PS里面完成。

  • 文件→打开∶可以打开我们要测量的图片
  • Ctrl+R:可以打开标尺，或者视图→标尺右击标尺，把里面的单位改为像素
  • Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图
  • 按住空格键，鼠标可以变成小手，拖动PS视图
  • 用选区工具拖动可以测量大小
  • Ctrl+D可以取消选区，或者在旁边空白处点击一下也可以取消选区

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wDEHNcO6-1635692892128)(截图/2021年8月7日22点56分.png)]

3. 综合案例

4. 圆角边框

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

border-radius属性用于设置元素的外边框圆角。

radius半径(圆的半径)原理：（椭)圆与边框的交集形成圆角效果

border-radius: length;
  • 参数值可以为像素或者百分比
  • 如果盒子是正方形，设置成一个圆，则把参数设置为正方形高度的一半，或者设置为50%
  • 如果想设置圆角矩形，同理设置为高度的一半
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角，顺时针
  • 也可以分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

5. 盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;
值说明
h-shadow必需。水平阴影位置，可以是负值
v-shadow必需。垂直阴影位置，可以是负值
blur可选。模糊距离，虚 -> 实
spread可选。阴影的大小
color可选。阴影的颜色。可用rgba()设置
inset可选。将外阴影（outset）设置为内阴影
  • 默认就是外阴影（outset）。但是不可以写上，否则阴影会无效
  • 盒子阴影不占空间，不会影响其他盒子排列

6. 文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;
值说明
h-shadow必需。水平阴影位置，可以是负值
v-shadow必需。垂直阴影位置，可以是负值
blur可选。模糊距离，虚 -> 实
color可选。阴影的颜色。可用rgba()设置
  • 作为了解，实际较少使用。

CSS浮动

目标：

  • 能够说出为什么需要浮动
  • 能够说出浮动的排列特性
  • 能够说出3种最常见的布局方式
  • 能够说出为什么需要清除浮动
  • 能够写出至少2种清除浮动的方法
  • 能够利用Photoshop实现基本的切图
  • 能够利用Photoshop插件实现切图
  • 能够完成学成在线的页面布局

1. 浮动 float

1.1传统网页的三种布局

网页布局的本质——用CSS来摆放盒子。

把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序)∶

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

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

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

以上都是标准流布局，前面学习的就是标准流，标准流是最基本的布局方式

注意：实际开发中，一个页面基本都包含了这三种布局方式（移动端会学习新的布局方式）。

1.3 为什么需要浮动

提问: 我们用标准流能很方便的实现如下效果吗?

  1. 如何让多个块级盒子(div)水平排列成一行?
    • 比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白继嘹，很难控制。
  2. 如何实现两个盒子的左右对齐?

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

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

1.4 什么是浮动

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

float: 属性值
属性值说明
none元素不浮动（默认）
left元素向左浮动
right元素向右浮动
1.5 浮动特性（重难点）

加入了浮动元素，会具有很多特性，需要掌握的：

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

1 最重要的特性：

  1. 脱离标准流的控制（浮）移动到指定位置（动）,（俗称脱标）
  2. 浮动的盒子不再保留原先的位置，如果后面有标准流的盒子就会顶替之前的位置，可能会重叠（理解为ps的图层叠加？）

2 如果多个盒子设置了浮动，则他们会按照属性值在一行内显示并且顶端对齐排列

  • 注意：浮动的元素是相互贴靠在一起的（没有缝隙），如果父级盒子宽度装不下这些浮动的盒子，多出的盒子会另起一行显示

3 浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挟着一起的
  • 行内元素同理
1.6 浮动元素经常和标准流父级搭配使用

为了约束元素位置，网页布局一般采取的策略是：

先用标准流的父元素排列好上下位置，之后内部子元素采取浮动排列左右位置。这是符合网页布局第一准则的

2. 常见网页布局

2.1 常见网页布局
  1. 插图1
  2. 插图2
  3. 插图3
2.2 浮动布局注意点
  1. 浮动和标准流的父盒子搭配
    • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
  2. 一个元素浮动了，理论上其余兄弟元素也要浮动
  • 一个里面父级有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防引起问题
  • 浮动的元素只会影响浮动盒子后面的标准流，不会影响前面的标准流

3. 清除浮动

3.1 为什么需要清除浮动

由于父级盒子很多情况下，需要根据子元素自动取得高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
3.2 清除浮动本质
  • 清除浮动本质就是清除浮动元素的影响
  • 如果父元素本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
clear:属性值;
属性值说明
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响
  • 实际中，几乎只用clear: both;
  • 清除浮动的策略是：闭合浮动
3.3 清除浮动的方法
  1. 额外标签法也称为隔墙法，是W3C推荐的做法
  2. 父级添加overflow属性
  3. 父级添加:after属性
  4. 父级添加双伪元素
3.3.1 额外标签法

额外标签法会在浮动元素末尾添加一个空标签。例如：

<div style="clear: both"></div>

  • 优点：通俗易懂，书写方便

  • 缺点：添加许多无意义的标签，结构化差

注意：这个空标签必须是块级元素

3.3.2 父级添加overflow属性

可以给父级添加overflow属性，值可以设置为hidden、auto、scroll。

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分
3.3.3 :after 伪元素法

:after方式是额外标签法的升级版，也是给父元素添加：

.clearfix:after {
    content: "";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
}
.clearfix {/*兼容IE6、7专用*/
    *zoom: 1;
}
  • 优点：没有增加标签、结构更简单
  • 缺点：照顾低版本浏览器
  • 代表网站：百度、淘宝网、网易等
3.3.4 双伪元素清除浮动

也是给父元素添加

.clearfix:before,
.clearfix:after {
    content: "";
   display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {/*兼容IE6、7专用*/
    *zoom: 1;
}
  • 优点:代码更简洁
  • 缺点: 照顾低版本浏览器
  • 代表网站: 小米、腾讯
3.4 清除浮动总结

为什么需要清除浮动 ?

  1. 父级没高度
  2. 子盒子浮动了
  3. 影响下面的布局
清除浮动方式优点缺点
额外标签法通俗易懂、书写方便添加许多无意义标签, 结构化差
父级overflow: hidden书写方便溢出隐藏
父级:after伪元素结构语义化正确IE6、7不支持:after,兼容性差
父级双伪元素结构语义化正确IE6、7不支持:after,兼容性差

4. PS切图

4.1 常见的图片格式
  1. jpg图像格式: JPEG (JPG )对色彩的信息保留较好，高清，颜色较多，产品类的图片经常用jpg格式的
  2. gif图像格式:GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
  3. png图像格式是一种新的网络图形格式，结合予GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成背景透明的图片,请选择png格式.
  4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说, 最大的优点我们可以直接从上面复制文字, 获得图片, 还可以测量大小和距离.
4.2 图层切图

最简单的切图方式: 右键图层 -> 快速导出为png.

很多情况下, 需要合并图层再导出:

  1. 选中需要的图层,右键 - > 合并图层(ctrl + e)
  2. 合并后的图层右键 - > 导出
4.3 切片切图
  1. 利用切片工具选中图片
    • 利用切片工具手动划出图片范围
  2. 导出选中的图片
    • 菜单 -> 导出 -> 存储为Web设备所用格式 -> 选择需要存储的图片格式 -> 存储
4.4 PS插件切图

Cutterman是一款运行在Photoshop中的插件,能够自动将你需要的图层进行输出,以代替传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程

官网: <a href = “http://www.cutterman.cn/zh/cutterman">http://www.cutterman.cn/zh/cutterman

注意: Cutterman插件要求PS是完整版. 即可以使用扩展功能的版本.

5. 学成在线案例

5.1 准备素材和工具
  1. 学成在线PSD源文件。
  2. 开发工具 ：PS(切图)/cutterman插件+vscode (代码） + chrome(测试)。
5.2 案例准备工作

我们本次采取结构与样式相分离思想∶

  1. 创建study目录文件夹(用于存放我们这个页面的相关内容)。
  2. 用vscode打开这个目录文件夹.
  3. study目录内新建images文件夹，用于保存图片。
  4. 新建首页文件index.html (以后我们的网站首页统一规定为index.html).
  5. 新建style.css样式文件。我们本次采用外链样式表。
  6. 将样式引入到我们的HTML页面文件中。
  7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。
5.3 CSS属性书写顺序(重要)

建议遵循以下顺序∶

  1. 布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写，毕竟关系到模式)
  2. 自身属性: width / height / margin / padding / border / background
  3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / backgroundlinear-gradient .

示例:

.jdc {
    diaplay: block;
    position: relative;
    float: left;
    /*布局定位*/
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    /*自身属性*/
    font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
    color: #333;
    /*文本属性*/
    background: rgba(0,0,0,0.5);
    border-radius: 10px;
    /*其他rgba属于CCS3新增的内容*/
}
5.4 页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路:

  1. 必须确定页面的版心（可视区），我们测量可得知
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
  3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
  4. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
  5. 所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累
5.5 确定版心

这个案例的版心为1200px, 定义一个公共版心类:

.w {
    width: 1200px;
    margin: auto;
}
5.6 头部制作
  • 1号是版心盒子header 1200*42 的盒子水平居中对齐,上下给一个margin
  • 版心盒子里面包括2号盒子logo
  • 版心盒子里面包括3号盒子nav导航栏
  • 版心盒子里面包括4号盒子search搜索栏
  • 版心盒子里面包括5号盒子user个信息
  • 注意: 要求里面4个盒子必须都是浮动

导航栏注意点：

实际开发中，我们不会之间用链接a而是用li包含链接的做法(li+a)

  1. li+a 语义更清晰, 一看这就是有条理的列表型内容
  2. 如果直接用a, 搜索引擎容易辨别为有堆砌关键字嫌疑,从而影响网站排名

注意:

  1. 让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示.
  2. 这个nav导航栏可以不给宽度,将来可以继续添加其余文字.
  3. 因为导航栏里面文字不一样多所以最好给链接a左右padding撑开盒子,而不是指定宽度

CSS定位

目标：

  • 能够说出为什么要用定位

  • 能够说出定位的4种分类

  • 能够说出4种定位各自的特点

  • 能够说出为什么常用子绝父相布局

  • 能够写出淘宝轮播图布局

  • 能够说出显示隐藏的2种方式以及区别

1. 定位

1.1 为什么需要定位

提问:以下情况使用标准流或者浮动能实现吗?
1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.
2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

所以：

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

定位：将盒子定在某一个位置，所以定位也是再摆盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

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

1.2.1 定位模式

通过CSS的position属性来设置，有四个值：

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
1.2.2 边偏移

通过四个属性来设置：

边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离
1.3 静态定位 static（了解）

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

选择器 {
    position: static;
}
  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到
1.4 相对定位 relative （重要）

相对定位是元素在移动位置的时候，是相对于自身原来的位置来的

选择器 {
	position: relative;
}

相对定位的特点：（务必记住）

  1. 它是相对于自己原来的位置来移动的
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，原来的位置保留）

因此，相对定位并没有脱标，最典型的应用是限制绝对定位的

1.5 绝对定位 absolute （重要）

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

选择器 {
    position: absolute;
}

绝对定位的特点：（务必记住）

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位
  2. 如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
  3. 绝对定位不再占有原先的位置（脱标）
1.6 子绝父相的由来

这句话的意思是：“子级是绝对定位的话，父级就要用相对定位”

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

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到

1.7 固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变。

选择器 {
    position: fixed;
}

固定定位的特点：（务必记住）

  1. 以浏览器的可视窗口为参照点移动

    • 跟父元素没有任何关系

    • 不随滚动条滚动

  2. 固定定位不再占有原先的位置

    • 固定定位也是脱标的，可以看作是一个特殊的绝对定位

小技巧：固定在版心右侧位置

  1. 让固定定位的盒子left: 50%、走到浏览器可视区（也可以看做版心)的一半位置。
  2. 让固定定位的盒子**margin-left:**版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。
1.8 粘性定位 sticky （了解）

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

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

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点（固定定位特点）
  2. 粘性定位占有原先位置（相对定位特点）
  3. 必须添加top、left、right、bottom其中一个才有效

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

1.9 定位总结
定位模式是否脱标移动位置使用频率
static 静态定位否不能使用边偏移很少
relative 相对定位否（占有位置）相对于自身常用
absolute 绝对定位是（不占有位置）相对于带有定位的父级常用
fixed 固定定位是（不占有位置）浏览器可视区常用
sticky 粘性定位否（占有位置）浏览器可视区目前很少
1.10 定位叠放次序 z-index
选择器 {
	z-index: 1;
}
  • 数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不可以加单位
  • 只有定位的盒子才有z-index属性
1.11 定位的拓展

  1. 绝对定位的盒子水平居中、垂直居中

    加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过下面方法计算实现水平和垂直居中

    1. left: 50%：让盒子左侧移动到父级元素的水平中心位置；
    2. margin-left: -100px;让盒子向左移动自身宽度的一半（假设盒子宽是200px）

  2. 定位特殊特性

    绝对定位和固定定位也和浮动类似

    1. 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
    2. 块级元素添加绝对定位或者固定定位，如果不设置宽度或高度，默认大小就是内容的大小

  3. 脱标的盒子不会触发外边距塌陷

    用浮动元素、绝对定位、固定定位元素的都不会触发外边距合并的问题

  4. 绝对定位、固定定位会完成压住盒子

    浮动元素不同，只会压住它下面标准流的盒子，但是不会压住盒子里的内容

    但是绝对定位（固定定位）会压住下面标准流所有的内容

    浮动之所以特殊，是因为浮动最初目的就是做文字环绕效果的。

2. 案例——淘宝焦点轮播图

3. 网页布局总结

  • 通过盒子模型，清楚知道大部分html标签是一个盒子。
  • 通过CSS浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

  1. 标准流
    可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  2. 浮动
    可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
  3. 定位
    定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

4. 元素的显示和隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新显示

本质：让一个元素在页面中因此或者显示出来

  1. display 显示隐藏
  2. visibility 显示隐藏
  3. overflow 溢出显示隐藏
4.1 display属性

display属性用于设置一个元素如何显示

  • display: none; 隐藏对象；
  • display: block; 除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不在占有原来的位置

应用及其广泛，搭配JS可以做很多网页特效。

4.2 visibility 可见性

visibility属性用于指定一个元素可见还是隐藏

  • visibility: visible; 元素可见；
  • visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none; （用处更多，重点）

4.3 overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条
  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
  • 但是如果有定位的盒子，请慎用overflow:hidden; 因为它会隐藏多余的部分。

CSS高级技巧

目标：

  • 能够使用精灵图
  • 能够使用字体图标
  • 能够写出CSS三角
  • 能够写出常见的CSS用户界面样式
  • 能够说出常见的布局技巧

1. 精灵图

1.1 为什么需要精灵图

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

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称css Sprites、CSS雪碧)。

核心技术：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2 精灵图（sprites）的使用

使用精灵图核心：

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
  2. 这个大图片也称为sprites精灵图或者雪碧图
  3. 移动背景图片位置，此时可以使用background-position.
  4. 移动的距离就是这个目标图片的×和y坐标。注意网页中的坐标有所不同
  5. 因为一般情况下都是往上往左移动，所以数值是负值。
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

  1. 精灵图主要针对于小的背景图片使用
  2. 主要借助于背景图片位置来实现
  3. 一般情况下精灵图都是负值（网页的坐标：x轴右边走是正值，y轴下边走是正值）

2. 字体图标

2.1 字体图标的产生

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

精灵图是有很多优点，但是缺点很明显：

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

此时，字体图标iiconfont很好解决了以上的问题。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点
  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用

注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

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

推荐下载网站：

  • iconmoon字库：https://iconmoon.io

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

  • 阿里 iconfont 字库 https://www.iconfont.cn

    这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用Al制作图标上传生成。重点是，免费!

2.4 字体图标的引入

下载完成后，注意压缩文件不要删，后面会用

  1. 把压缩包解压，里面的fonts文件夹放入项目的根目录下；

    不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

  2. 在CSS样式中全局声明字体︰简单理解把这些字体文件通过css引入到我们页面中。

    一定注意字体文件路径的问题。

    @font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?drjfm0');
	src: url('fonts/icomoon.eot?drjfm0#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?drjfm0') format('truetype'),
		url('fonts/icomoon.woff?drjfm0') format('woff'),
		url('fonts/icomoon.svg?drjfm0#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

    这段代码可以在压缩包里的style.css文件里找到！！！

    1. 直接link这个css文件

  3. html标签内添加小图标

    1. 在压缩包里打开demo.html文件，找到需要的图标复制字体图标到标签内
    2. 给使用了字体图标的标签声明字体样式：font-family: ‘iconmoon’;
2.5 字体图标的追加

把压缩包里面的selection.json 重新上传到网站，然后选中自己想要的新图标，重新下载替换源文件即可

3. CSS三角

网页常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-left-color: pink;
}

4. CSS用户界面样式

4.1 什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提升用户的体验

  • 鼠标样式
  • 表单轮廓
  • 防止表单域拖拽
4.2 鼠标样式 cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

选择器 {
    cursor: pointer;
}
属性值说明
default默认的鼠标样式
pointer小手（链接时）
move移动（查看大图时）
text文本（打字时）
not-allowed禁止
4.3 轮廓线 outline

给表单添加 outline: 0 或者outline: none;之后，就可以去掉表单默认的蓝色边框

input {
	outline: none;
}
4.4 防止表单拖拽

实际开发中，文本域右下角是不允许拖拽的，可以通过 resize属性取消

textarea {
	resize: none;
}

5. 垂直居中 vertical-align

5.1 属性应用

使用场景：设置图片或者表单（行内块元素）和文字垂直居中对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效

vertical-align: baseline | top | middle | bottom;
属性值说明
baseline默认。与父元素的基线对齐
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低元素的底端对齐

图片、表单都属于行内块元素、默认的 vertical-align是基线对齐的

设置为 vertical-align: middle;可以让文字与图片垂直居中对齐。

5.2 解决图片底部默认留白

图片底侧会有一个空白空隙，原因是行内块元素默认是和文字基线对齐

主要的解决方法有两种：

  1. 给图片添加 vertical-align: middle | top | bottom;都行，只要不是基线对齐就行（推荐）
  2. 把图片转换为块级元素 display: block;

6. 溢出文字显示为省略号

6.1 单行文本溢出

必须满足下面三个条件：

  1. 文本强制单行显示；
  2. 溢出隐藏
  3. 省略号代替溢出部分
1. 强制单行显示
white-space: nowarp;
2. 溢出隐藏
overflow: hidden;
3. 省略号代替溢出部分
text-overflow: ellipsis;
6.2 多行文本溢出

多行文本溢出显示省略号，有较大兼容性问题，适用于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检索伸缩盒子对象的子元素的排列方式
-webkit-box-orient: vertical;
  • 更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

7. 常见布局技巧

  • margin负值的运用
  • 文字围绕浮动元素
  • 行内块的巧妙运用
7.1 margin负值的运用
  1. 让每个盒子 margin-left: -1px;正好压着相邻盒子边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可
    1. 如果没有定位，则加相对定位（保留当前位置）
    2. 如果都有定位，则设置 z-index提高层级
7.2 文字围绕浮动元素

文字标准流，会环绕浮动的元素

7.3 行内块的巧妙运用

行内块元素之间默认会有间距，制作页码很方便，给父元素添加 text-align: center;后会很便捷的水平居中，十分方便

7.4 CSS制作直角三角形

在原先CSS三角的基础上：（以直角在右边的直角三角形为例）

  1. 把底部、左侧边框的宽度设为0，颜色设为透明；
  2. 把顶部边框的宽度调大，把等边直角三角形拉高，颜色设置为透明；
border-width: 150px 100px 0 0;
border-style: solid;
border-color: transparent #ccc transparent transparent;

8. CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对CSS初始化

简单理解:CSS初始化是指重设浏览器的样式。(也称为CSS reset )

每个网页都必须首先进行CSS初始化。

这里我们以京东css初始化代码为例。

Unicode编码字体∶

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如:

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

HTML5和CSS3提高

  • 能够说出3~5个HTML5新增布局和表单标签
  • 能够说出CSS3的新增特性有哪些

1. HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

声明︰

  1. 新特性增加了很多，但是我们专注于开发常用的新特性。
  2. 基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。
1.1 HTML5新增的语义标签
  • <header> 头部标签
  • <nav> 导航标签
  • <article> 内容标签
  • <section> 定义文档某个区域
  • <aside> 侧边栏标签
  • <footer> 底部标签

注意：

  • 这些语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转化为块级元素
  • 移动端不存在兼容性，更喜欢使用这些标签
  • HTML5新增了很多标签，需要慢慢学习
1.2 多媒体标签

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

  1. 音频：<audio>
  2. 视频：<video>

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

1.2.1 视频<video>

HTML5在不使用插件的情况下，也可以原生地支持视频格式播放，但是支持的格式有限

浏览器MP4WebMogg
Internet Explorer支持不支持不支持
Chorme支持支持支持
Firefox支持（从Firefox21 版本开始、
Linux系统从Firefox30 开始）		支持支持
Safari支持不支持不支持
Opera支持支持支持
<video src="url" controls="controls"></video>

兼容性写法：

<video width="300">
    <source src="media.mp4" type="video/mp4">
    <source src="media.ogg" type="video/ogg">
    您的浏览器暂不支持video标签播放视频
</video>

常见的属性：

属性值说明
autoplayautoplay视频自动播放（chorme需要添加muted属性才可以自动播放）
controlscontrols向用户展示视频控件
width像素设置播放器宽度
height像素设置播放器高度
looploop是否循环播放视频
preloadauto(预先加载视频)；
none(不预加载视频)		规定是否预加载视频（若设置了autoplay属性则会忽略）
src视频路径视频url
poster图片路径加载等待时显示的图片
mutedmuted静音播放
1.2.2 音频<audio>
<audio src="url" controls="controls"></audio>

source写法：

<audio controls="controls">
	<source src="music.mp3" type="audio/mpeg">
	<source src="music.ogg" type="audio/ogg">
    您的浏览器暂不支持audio标签。
</audio>

常见属性：

属性值说明
autoplayautoplay音频就绪后自动播放
controlscontrols向用户展示音频控件
looploop音频循环播放
srcurl要播放音频的url
  • chorme禁止了音频的自动播放
1.2.3 多媒体标签总结
  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • chorme禁止了音频和视频的自动播放属性
  • 视频标签是重点，我们经常设置自动播放，取消控件，循环和设置大小属性
1.3 新增input表单
属性值说明
type=“email”限制用户输入的必须为邮箱
type=“url”限制用户输入的必须为URL
type=“date”限制用户输入的必须为日期
type=“time”限制用户输入的必须为时间
type=“month”限制用户输入的必须为月份
type=“week”限制用户输入的必须为周
type=“number”限制用户输入的必须为数字
type=“tel”限制用户输入的必须为手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单
  • 重点记住 number、tel、search
1.4 新增表单属性
属性值说明
requiredrequired表示内容不能为空，必填项
placeholder提示文本提示信息
autofocusautofocus自动聚焦，页面加载完成自动聚焦光标
autocompleteoff/on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =”"off"需要放在表单内，同时加上name属性，同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色∶

input::placeholder {
	color: pink;
}

2. CSS3的新特性

2.1 CSS3的现状
  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习∶新增选择器和盒子模型以及其他特性
2.2 新增选择器
  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器
2.3 属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

选择符简介
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且值以val开头的E元紊
E[att$=val]匹配具有att属性且值以val结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素
  • 类选择器、属性选择器、伪类选择器权重都是10
2.4 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符说明
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

属性：

属性值说明
autoplayautoplay音频就绪后自动播放
controlscontrols向用户展示音频控件
looploop音频循环播放
srcurl要播放音频的url
  • chorme禁止了音频的自动播放
1.2.3 多媒体标签总结
  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • chorme禁止了音频和视频的自动播放属性
  • 视频标签是重点，我们经常设置自动播放，取消控件，循环和设置大小属性
1.3 新增input表单
属性值说明
type=“email”限制用户输入的必须为邮箱
type=“url”限制用户输入的必须为URL
type=“date”限制用户输入的必须为日期
type=“time”限制用户输入的必须为时间
type=“month”限制用户输入的必须为月份
type=“week”限制用户输入的必须为周
type=“number”限制用户输入的必须为数字
type=“tel”限制用户输入的必须为手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单
  • 重点记住 number、tel、search
1.4 新增表单属性
属性值说明
requiredrequired表示内容不能为空，必填项
placeholder提示文本提示信息
autofocusautofocus自动聚焦，页面加载完成自动聚焦光标
autocompleteoff/on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete =”"off"需要放在表单内，同时加上name属性，同时成功提交
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色∶

input::placeholder {
	color: pink;
}

2. CSS3的新特性

2.1 CSS3的现状
  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛
  • 现阶段主要学习∶新增选择器和盒子模型以及其他特性
2.2 新增选择器
  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器
2.3 属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

选择符简介
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且值以val开头的E元紊
E[att$=val]匹配具有att属性且值以val结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素
  • 类选择器、属性选择器、伪类选择器权重都是10
2.4 结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符说明
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

  1. 范围越小，权重越大 ↩︎

  2. 添加在某一属性的后边 ↩︎

# css # html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

如何利用 Seaborn 实现高级统计图表

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟