正则表达式

正则表达式是使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串的搜索模式

语法

/正则表达式主体/修饰符(可选)

字符串方法

• search() 搜索字符串，返回匹配的字符串下标或-1

1

'123456'.search(/234/)   // 1

• replace() 替换匹配的字符串，返回修改后的字符串

1

'123456'.replace(/345/, 'abc')   // 12abc6

• split() 从指定位置分割字符串，返回一个数组
• match() 搜索字符串，返回由所有子串组成的数组或null

正则表达式修饰符

• i 忽略区别大小写
• g 执行全局匹配
• m 执行多行匹配

正则表达式元字符

• . 查找单个非换行符字符

• \d 查找数字

• \s 查找空白字符

• \b 匹配单词边界

• \w 查找数字、大小写字母及下划线

正则表达式量词

• n+ 匹配一个或多个字符串n
• n* 匹配零个或多个字符串n
• n? 匹配零个或一个字符串n
• ^ 匹配字符串开始(第一个字符)
• $ 匹配字符串结束(最后一个字符)

正则表达式括号

• [0-9] 匹配任何0-9数字
• [a-zA-Z] [A-z] 匹配任意大小写字母
• [abc] 查找[]内的任意字符
• [^abc] 查找[]外的任意字符
• (x|y) 查找()内任意选项

RegExp 对象及其方法

• test() 匹配字符串是否符合给定模式

返回一个布尔值

• exec() 匹配字符串中正则表达式的匹配

返回一个包含搜索结果数组，未查找到返回null

参考链接

MDN 正则表达式

菜鸟教程 正则表达式

W3school 正则表达式

jQuery

简介

官方文档

https://jquery.com/

内容

jQuery JavaScript函数库

jQuery文件结构(function() {} ())，实质是一个自执行函数，给window对象添加一个jQuery属性和$属性

$是一个函数，传一个匿名函数即入口函数；传一个字符串即选择器；传一个dom对象即jQuery对象

可以用jQuery代替$的使用

引入jQuery即执行该js文件内代码

入口函数

$(function() {}) 等价于 window.onload()

可以写多个jQuery入口函数，其执行时机快于window.onload：window.onload等待所有资源加载完毕后执行；jQuery入口函数只等待dom树加载完成

$(document).ready(function(){})入口函数

建议

• 把所有 jQuery 代码置于事件处理函数中

• 把所有事件处理函数置于文档就绪事件处理器中

• 把 jQuery 代码置于单独的 .js 文件中

• 如果存在名称冲突，则重命名 jQuery 库

jQuery对象

概念

• jQuery对象是伪数组，实际是dom对象的一个包装集合

• 通过jQuery($())包装DOM的对象后产生的对象，为jQuery独有

• 与DOM对象无法相互使用彼此方法

• 建议jQuery对象在变量名前加$

jQuery对象获取DOM对象

• [index]
• .get(index)

jQuery对象获取DOM对象

• $()包装

jQuery事件

• 触发点击事件 .click()

• 设置点击事件 .click(function(){})

特别的，仅会返回符合条件的第一个属性值

• 鼠标移入事件 .mouseover() .mouseenter()

特别的，over在移入其本身及其子元素都会触发，enter仅移入其本身才触发

• 鼠标移出事件 .mouseleave .mouseout

特别的，out在移出其本身及其子元素都会触发，leave仅移出其本身才触发

事件添加

简单事件->bind事件->delegate事件->on事件

简单事件：click(function(){}) 不支持同时注册与动态注册

bind事件：.bind(‘click’, function(){}) 不支持动态注册

delegate事件：.delegate(‘selector‘, {click: function(){}})

on事件：

事件注册 $(selector).on(‘click’, function(){})

事件委托 $(selector).on(‘click’, ‘selector’, function() {})

事件解绑

unbind() 不推荐

undelegate() 不推荐

off() 推荐 无参

事件触发

trigger() 触发事件

事件对象

jQuery事件对象是对原生js事件对象的封装，已处理了兼容性

坐标

• screenX|screenY 原点屏幕左上角
• clientX|clientY 原点可见页面区域左上角
• pageX|pageY 原点页面区域左上角

方法

• stopPropagation() 阻止事件冒泡
• preventDefault() 阻止浏览器默认行为

事件响应方法返回false，可阻止事件冒泡与浏览器默认行为

• keyCode 获取按下键盘的键码

jQuery选择器

简单选择器

• id选择器 $(‘#id‘)
• 类名选择器 $(‘.class‘)
• 元素选择器 $(‘tag’)
• 通配选择器 $(‘*’)

选取当前元素 $(this)

复合选择器

• 并集选择器 $(‘selector1‘, ‘selector2‘)
• 交集选择器 $(‘selector1selector2‘)

关系选择器

• 子运算选择器 $(‘father > son‘)

• 后代元素选择器 $(‘grandfather son‘)

过滤选择器

• $(‘:eq(index)’) 特定序号子元素选择
• $(‘:odd’) 奇数子元素选择
• $(‘:even’) 偶数子元素选择

筛选选择器/方法

• .next() 找下一个兄弟元素
• .prev() 找上一个兄弟元素
• .eq(index) 查找指定下标的兄弟元素
• .parent() 查找父元素
• .siblings(selector) 查找不包含自身的兄弟元素
• .find(selector) 后代选择器
• .children(selector) 子类选择器

jQuery HTML元素操作

获取及设置元素内容属性

• 设置元素内文本 .text(*String*) .text(function(i, origText) {return *string*})

  ​ 会覆盖内部所有内容包括子元素内容

  ​ 不会解析字符串中的HTML部分

  ​ 存在隐式迭代现象

  ​ 回调函数形式：回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值，然后以函数新值返回您希望使用的字符串

1
2
3
4

$("#test1").text(function(i,origText){
  return "Old text: " + origText + " New text: Hello world!
  (index: " + i + ")";
});

• 获取元素内所有文本 .text()

• 获取及设置元素内容 .html()

  同text

  可以解析设置内容的元素节点

• 获取及设置表单字段的值 .val()

  同text

• 创建节点 $()

  需要主动添加到页面内

获取及设置元素样式属性

• 设置元素CSS属性 .css(‘property‘, value)

  ​ .css(‘property1‘: value1)

  ​ .css({‘property1‘: value1, ‘property2‘: value2})

  修改与添加

• 获取元素 CSS属性内容 .css(‘property‘)

1
2
3
4
5
6
7
8

$('#box1').css('width', '300px')
$('#box1').css('width', 300)

$('#box1').css({
    width: 300,
    'height': '300px',
    'background-color': 'green'
})

• 获取和设置元素的属性值 .attr()

  同css，回调函数同text

• 移除属性值 .removeAttr(‘tag‘)

• 设置布尔类型的属性：即元素标签内添加起效，不添加不起效的 .attr(‘tag‘)

获取元素尺寸

• 获取或设置元素宽高 .width() .height()
• 获取元素含内边距宽高 .innerwidth() .innerheight()
• 获取元素含内边距及边框宽高 .outerwidth() .outerheight()
• 获取元素含内外边距及边框宽高 .outerwidth(true) .outerheight(true)

获取元素位置

• 获取元素距document位置 .offset()

  返回对象，包括top和left的值

• 获取元素距设置定位属性的父元素offsetParent的位置 .position()

  返回值情况同offset

插入元素

• 在元素开头结尾插入内容 .prepend(string1, …) .append(string1, …)

  $("p").append("Some appended text.");

​ .appendTo() .prependTo()

$(content).appendTo(selector)

• 在元素之前之后插入元素 .before() .after()

  $("img").after("Some text after");

删除元素

• 删除元素及其子元 素 .remove() .remove(selector)

  $("#div1").remove();

  $("p").remove(".italic"); 过滤

• 删除元素子元素 .empty()

  $("#div1").empty();

获取及设置类class

• 添加类 .addClass()

  $("#div1").addClass("important");

  $("div").addClass("important blue");

• 移除类 .removeClass()

  $("h1,h2,p").removeClass("blue");

  $("div").addClass("important blue");

  $("h1,h2,p").removeClass();

• 添加&删除类 .toggleClass()

• 判断类的存在 .hasClass()

  返回布尔值

  $("#div1").hasClass("important");

其他

• 查询并设置元素内容被卷曲出去的宽高度 scrollLeft() scrollTop()

  即元素的子元素宽高度超出元素本身的宽高度

• 克隆元素 .clone()

  克隆的节点需要主动添加至页面上

  参数true表示克隆事件，否则不克隆事件，默认不克隆

jQuery效果与方法

元素隐藏及显示

• 隐藏元素 .hide()

• 显示元素 .show()

• 隐藏及显示元素 .toggle()

  无参数无动画效果，有参数有动画效果

  speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”normal”、”fast” 或毫秒

  callback 参数是 toggle() 方法完成后所执行的函数名称

  实质是修改display属性

元素淡入淡出

• 淡入已隐藏元素 .fadeIn()

  $(selector).fadeIn(speed,callback);

• 淡出可见元素 fadeOut()

  $(selector).fadeOut(speed,callback);

• 淡入或淡出元素 fadeToggle()

  $(selector).fadeToggle(speed,callback);

• 渐变为指定不透明度 fadeTo()

  $(selector).fadeTo(speed,opacity,callback);

  实质是修改opacity属性

元素滑动

• 向下滑动 .slideDown()

  $(selector).slideDown(speed,callback);

• 向上滑动 .slideUp()

  $(selector).slideUp(speed,callback);

• 向下或向上滑动 .slideToggle()

  $(selector).slideToggle(speed,callback);

  实质是修改padding和margin属性等

元素动画(自定义动画)

• 自定义动画 .animate()

  $(selector).animate({params},speed,easing,callback);

  easing 可选 规定在不同的动画点中设置动画速度的 easing 函数（swing缓动 或 linear匀速）

  可以定义相对值（该值相对于元素的当前值），在值的前面加上 += 或 -=

• 停止动画 .stop()

  $(selector).stop(stopAll,goToEnd);

  可选的 stopAll 参数规定是否应该清除动画队列，默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行

  可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

其他

• 释放 $ 标识符的控制，并返回对$的引用，可创建新的jQuery对象 $.noConflict()

jQuery遍历

祖先

• parent() 获取给定元素的直接父元素

• parents() 获取给定元素的所有祖先元素，直至文档根元素html

  允许参数，以过滤搜索祖先元素

• parentsUntil() 获取直至给定元素间的所有祖先元素

后代

• children() 获取给定元素的所有直接子元素

  可添加参数过滤搜索

• find() 获取给定元素的后代元素

  必须添加参数决定搜索范围

兄弟

• siblings() 获取给定元素的所有兄弟元素，不包括原给定元素
• next() 返回给定元素的下一个兄弟元素
• nextAll() 返回给定元素的之后所有兄弟元素
• nextUntil() 返回给定元素与给定参数间所有跟随的同胞元素
• prev()
• prevAll()
• prevUntil()

过滤

• first() 选取首个元素
• last() 选取最后一个元素
• eq() 选取指定下标的元素，接受参数代表下标
• filter() 选取符合给定规则的所有元素
• not() 选取不符合给定规则的所有元素

jQuery Ajax方法

load() 方法

从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

必需的 URL 参数规定加载的 URL

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合

可选的 callback 参数是 load() 方法完成后所执行的函数名称

1
2
3
4
5
6
7
8
9

$("#div1").load("demo_test.txt");
$("#div1").load("demo_test.txt #p1");

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
        alert("外部内容加载成功！");
    if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
});

get() 方法

通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

必需的 URL 参数规定请求的 URL

可选的 callback 参数是请求成功后所执行的函数名

第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态

1

$.get("demo_test.asp",function(data,status){});

post() 方法

通过 HTTP POST 请求从服务器上请求数据

$.post(URL,data,callback);

ajax() 方法

通过 HTTP 请求加载远程数据

可自选请求参数

其他

链式编程

如$('div').width(100).height(100).css('backgroundColor', 'red');

返回值需均为相应的jQuery对象才能持续调用

end() 返回调用函数链的原始jQuery对象

each() 遍历jQuery对象集合，为各元素执行一次回调函数，回调函数第一个参数为下标，第二个·参数为对应元素的引用

git

版本控制

版本控制软件

操作简便|易于对比|易于回溯|不易丢失|协作方便

本地版本控制系统->集中化版本控制系统->分布式版本控制系统

git

快照：在原有文件基础上重新生成一个文件，类似于备份

操作：本地执行，云端同步

git 文件状态

• 未跟踪（untracked）未被 git 管理

• 未修改（unmodified）工作区文件内容与 git 仓库内文件相同

• 已修改（modified）表示修改了文件，但还没保存到 git 本地仓库中，自上次检出后，作了修改但还没有放到暂存区域

• 已暂存（staged）表示对一个已修改文件的当前版本做了标记以使之包含在下次提交的快照中，文件已修改并放入暂存区

• 已提交（committed）表示数据已经安全地保存在 git 仓库中，Git 目录中保存着特定版本的文件

git 项目阶段

• 工作区是对项目的某个版本独立提取出来的内容，供用户修改与使用

• 暂存区是一个文件，保存了下次将要提交的文件列表信息

• Git 仓库目录是 Git 用来保存项目的元数据和对象数据库的地方

git 全局配置

文件路径 C:/Users/用户名文件夹/.gitconfig 文件

查看所有全局配置项 git config --list --global

git 帮助

git help <verb>

git 初始化仓库

• 将尚未进行版本控制的本地目录转换为 Git 仓库

git init

• 从其它服务器克隆一个已存在的 Git 仓库

git clone <url> [<storagename>]

• 允许 https 协议等，以及 git 协议与 SSH 协议

git 文件操作

git status 检测文件所处状态

• git status -s

• git status –short

标记 A 表示新建的文件

标记 M 表示修改的文件

标记?? 表示未修改的文件

git diff 显示尚未暂存的改动

git add <filename> 开始跟踪新文件&将已跟踪新文件放至暂存区

git commit [-m "message"] 从暂存区提交更新至 git 仓库

​ git commit -a [-m "message"] 一次性将跟踪的文件暂存并提交

git checkout -- <filename> 撤销对文件的修改：将对应工作区文件修改还原成 git 仓库中保存的版本

git reset HEAD <filename> 从暂存区移除文件

git rm {-f|--cached} <filename> -f 从仓库与工作区移除文件:–cached 仅从仓库移除文件，但保留工作区文件

git mv <filefrom> <fileto> 移动文件或重命名文件

git 忽略文件

创建 .gitignore 的文件列出要忽略的文件的模式

• 所有空行或者以 # 开头的行都会被 Git 忽略
• 可以使用标准的 glob 模式匹配，它会递归地应用在整个工作区中
• 匹配模式可以以（/）开头防止递归
• 匹配模式可以以（/）结尾指定目录
• 要忽略指定模式以外的文件或目录，可以在模式前加上叹号（!）取反
  • glob 模式是指 shell 所使用的简化了的正则表达式
  • 星号（*）匹配零个或多个任意字符
  • [abc] 匹配任何一个列在方括号中的字符 （这个例子要么匹配一个 a，要么匹配一个 b，要么匹配一个 c）
  • 问号（?）只匹配一个任意字符；如果在方括号中使用短划线分隔两个字符， 表示所有在这两个字符范围内的都可以匹配（比如 [0-9] 表示匹配所有 0 到 9 的数字）
  • 使用两个星号（**）表示匹配任意中间目录，比如 a/**/z 可以匹配 a/z 、 a/b/z 或 a/b/c/z 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 忽略所有的 .a 文件
*.a

# 但跟踪所有的 lib.a，即便你在前面忽略了 .a 文件
!lib.a

# 只忽略当前目录下的 TODO 文件，而不忽略 subdir/TODO
/TODO

# 忽略任何目录下名为 build 的文件夹
build/

# 忽略 doc/notes.txt，但不忽略 doc/server/arch.txt
doc/*.txt

# 忽略 doc/ 目录及其所有子目录下的 .pdf 文件
doc/**/*.pdf

参考链接

git 查看文件历史

git log

​ -<number> 显示指定的提交历史

按 q 退出

开源

开源：open source code

开源许可协议：open source license

​ GPL MIT 等

开源项目托管平台：github、gitlab、gitee

远程仓库访问方式

• HTTPS 无需配置，每次需输入账号密码

git remote add <本地版本库> <远程仓库url> git remote add origin gitutl-https
git push <远程主机名> <本地分支名>:<远程分支名> git push origin master

• SSH 需额外配置，每次无需输入账号密码

SSH key

• 个人私钥
• git 服务器公钥

分支

查看、创建、切换、合并、删除、跟踪、拉取

主分支 master
实际用于保存及记录整个项目已完成及审计的代码

功能分支：专门用于开发新功能的分支

查看分支

git branch

分支前的 * 代表当前分支

创建分支

git branch <branch-name>

相较于当前分支创建分支

创建分支时不改变原所在分支

切换分支

git checkout <new-branch-name>

快速创建切换分支

git checkout -b <new-branch-name>

合并分支

git merge <branch-name>

将指定分支合并到当前分支

若两分支存在分歧，需要主动处理冲突

删除分支

git branch -d <branch-name>

git branch -D <branch-name> 强制删除

推送分支至远程仓库

git push -u <remote-repository> <local-branch>:<remote-branch> 第一次

之后直接 git push 即可

查看远程仓库分支列表

git remote show <remote-repository>

跟踪[远程仓库]分支

git checkout <remote-branch>

git checkout <local-branch> <remote-repository>/<remote-branch> 同时重命名本地分支

拉取[远程仓库最新]分支

git pull 相较于当前分支

删除[远程仓库]分支

git push <remote-repository> --delete <remote-branch>

1. 样式继承&样式覆盖

CSS 为一个元素设置的某个样式，如果这个样式是允许继承的，那么这个样式也会应用到它的后代元素上

注意：不是所有样式都会被继承，只有可继承的样式才会从祖先元素基础
样式的继承性建议查阅相应元素的参考手册

当一个元素同时被应用上多个相同的样式属性时，浏览器必须从中选择一个属性值，这个过程就是样式覆盖

样式继承有如下的规则：

• 当元素继承的样式发生冲突时，从最近祖先继承的样式有效
• 继承的样式和元素自身设置的样式冲突时，自身设置的样式有效
• 元素自身设置的样式发生冲突时，样式权值高的有效

样式权值按如下的列表相加确定

• 内联样式： 1,0,0,0
• id 选择器： 0,1,0,0
• 类及伪类选择器： 0,0,1,0
• 标签及伪元素选择器： 0,0,0,1
• 通配选择器： 0,0,0,0

即：内联样式>>id选择器>>类及伪类选择器>>标签及伪元素选择器>>通配选择器

• 样式权值相同时，后设置的有效
• !important的样式属性不被覆盖（除非同样为 !important 时，后设置的起效）

可以使用!important来阻止样式被覆盖

注意：除非不得已，尽量避免使用!important

2. 文档流模型

（1）概念

网页是一个多层结构，通过 CSS 可以给每层设置样式，上层会覆盖下层的内容，覆盖的内容不会被用户看到

这些多层结构中，最底下的一层即为文档流，默认情况下元素都在文档流中排列

（2）元素在文档流中特点

• 块元素

在页面中独占一行

默认情况下，宽度会把父元素撑满，即宽度由父元素宽度决定

默认情况下，高度会被内容撑开，即高度由内容的高度决定

• 行内元素

不会在页面中独占一行，只占自身大小

行内元素在页面中从左至右排列，如果一行不能容下，则换到第二行继续自左往右排列，即会自动换行

默认情况下，宽度和高度都被内容撑开，即宽高均由内容决定

（3）元素脱离文档流特点

元素从文档流中脱离，不占据文档流中位置

元素脱离文档流后，无论块元素和行内元素，均会表现为块元素，有以下特点：

• 不会在页面中独占一行
• 宽高默认被内容撑开

设置 float、position、flex 等属性可使元素脱离文档流

3. 盒模型

（1）盒模型概念

所有 HTML 元素都可以视为一个盒子，在盒子模型中对页面的布局实际上就变成将不同的盒子摆放到不同位置

盒子模型包括：外边距、边框、内边距以及内容

• 内容 content 框的内容，其中显示子元素的内容
• 内边距 padding 内容周围的区域，内边距是透明的
• 边框 border 围绕内边距和内容的边框
• 外边距 margin 边界外与其他元素不覆盖的区域，外边距是透明的

（2）可见框概念

可见框即元素可以看到的区域，由内容区、边框、内边距组成，不包括外边距

4. 内容区-content

（1）width 属性及 height 属性

分别设置内容区的宽度与高度

可以取以下值：

• auto 让浏览器计算高度和宽度【默认】
• length 以 px 等单位定义高度或宽度
• % 以包含块的百分比定义高度或宽度
• initial 将高度或宽度设置为默认值
• inherit 从其父值继承高度或宽度

这也是大多数与长度<length>有关的属性的合法取值

（2）min-width 属性 min-height 属性及max-width 属性 max-height 属性

设置元素的最大/最小的宽度/高度

默认值为none，即表示忽略该属性

5. 内边距-padding

（1）padding 属性

设置四个方向内边距

（i）取值

长度单位，要求为正值

或取值为auto

（ii）值个数

可为1~4，不同数量下取值按如下情况所示

按顺时针顺序依次指定值

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）padding-top、padding-right、padding-bottom、padding-left属性

单独设置某方向内边距

6. 边框-border

（1）border-style 属性

指定边框类型，必需，简写属性

（i）取值

• dotted 定义点线边框
• dashed 定义虚线边框
• solid 定义实线边框
• double 定义双边框
• none 定义无边框【默认】
• hidden 定义隐藏边框
• groove 定义 3D 坡口边框，效果取决于 border-color 值
• ridge 定义 3D 脊线边框，效果取决于 border-color 值
• inset 定义 3D inset 边框，效果取决于 border-color 值
• outset 定义 3D outset 边框，效果取决于 border-color 值

（ii）border-top-style、border-right-style、border-bottom-style、border-left-style属性

指定一个方向的边的边框类型

（2）border-width 属性

指定边框的宽度，简写属性

（i）取值

长度，只能为正值

亦可取预设值thin、medium【默认】、strong

（ii）border-top-width、border-right-width、border-bottom-width、border-left-width属性

指定一个方向的边的边框宽度

（3）border-color 属性

指定边框的颜色，简写属性

（i）取值

允许所有颜色模式，如rgb()等
亦可取transparent表示透明色

（ii）border-top-color、border-right-color、border-bottom-color、border-left-color属性

指定一个方向的边的边框颜色

（4）border属性

同时设置四条边框宽度、颜色、样式，是border-width、border-style 以及 border-color 的简写属性

（i）取值

border: width color style

如果不设置其中的某个值也是允许的

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边框，右边框，下边框，左边框
• 三个值：上 左右 下 按顺序分别设置上边框，左右边框，下边框
• 两个值：上下 左右 按顺序分别设置上下边框，左右边框
• 一个值：上下左右 同时设置上下左右边框

（5）border-top、border-right、border-bottom、border-left属性

同时设置一个方向的一条边框宽度、颜色、样式，简写属性

7. 外边距-margin

（1）margin属性

为元素的四周指定外边距的属性

（i）取值

长度单位，允许负值的使用
允许取值为auto

（ii）值个数

• 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距
• 三个值：上 左右 下 按顺序分别设置上边距，左右边距，下边距
• 两个值：上下 左右 按顺序分别设置上下边距，左右边距
• 一个值：上下左右 同时设置上下左右边距

（2）margin-top、margin-right、margin-bottom、margin-left属性

为元素的四周分别指定外边距的属性

8. 块元素盒模型

拥有margin、border、padding、content等结构

（1）水平方向布局

一般而言，子元素在父元素内的元素总宽度应满足公式：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

若不成立，称为过度约束，此时遵循如下规则确定元素的实际宽度

• 如果七个值中没有 auto，则会调整 margin-right 的值使等式成立

比如子元素 width 超过父元素内容区大小，margin-right 会调整为负值，使子元素溢出父元素

• 如果 width、margin-left、margin-right中有一个设置为 auto，则会调整被设置为 auto 的那个值，使等式成立

比如 width 默认值为 auto，所以块元素默认宽会充满整个父元素

• 如果 width、margin-left、margin-right 中有两个及以上设置为 auto

如果 width 设置为固定值，margin-left 和 margin-right 设置为 auto，则同时调整 margin-left 与 margin-right 使等式成立，此时子元素居中
如果 width 设为 auto，则子元素 width 调为最大，其余被设置为 auto 的属性取值为 0

设置 margin: auto 是设置子元素在父元素内水平居中的一种常用方法

（2）垂直方向布局

一般而言，默认情况下父元素高度被内容撑开，子元素在父元素内的元素总高度应满足公式

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

若父元素设置了高度，且子元素高度大于父元素，此时公式不成立，称为溢出，此时子元素会从父元素溢出：

此时可设置overflow属性来处理溢出问题

（3）overflow属性

定义溢出元素内容区的内容的处理方式
是 overflow-x 与 overflow-y 的简写属性

（i）取值

• visible【默认】 内容不会被修剪，会呈现在元素框之外
• hidden 内容会被修剪，并且其余内容是不可见的
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（无论有无溢出都会产生滚动条）
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（有溢出才会产生滚动条）

（ii）overflow-x 与overflow-y属性

指定元素在x轴上或者y轴上对溢出元素内容区的内容的处理方式

9. 行内元素盒模型

行内元素盒模型的结构和块元素基本相同

但亦存在以下几点区别：

• 行内元素不支持设置 width 和 height，内容区宽高只由其内容决定
• 可以设置 border，但是垂直方向 border 不会影响布局
• 可以设置 padding，但是垂直方向 padding 不会影响布局
• 可以设置 margin，但是垂直方向 margin 不会影响布局

10. 盒子大小-box-sizing属性

默认情况下width属性及height属性指的是内容区的大小

box-sizing属性可以改变盒子尺寸计算方式

取值有

• content-box【默认值】 宽高用来设置内容区大小 width = content
• border-box 宽高用来设置盒子可见框的大小 width = content + padding + border

box-sizing: border-box 在前端开发中应用非常广泛，可以用于 控制盒子的可见区域大小

选择器

选择器用于选取需要设置样式的 HTML 元素

（1）简单选择器

（i）元素选择器

• 作用：根据元素名选中指定元素
• 语法：**elementname {}**

（ii）id 选择器

• 作用：根据元素 id 属性值选中一个元素
• 语法：**#idname {}**

（iii）类选择器

• 作用：根据元素的 class 属性值选中一组元素
• 语法：**.classname {}**

（iv）通配选择器

• 作用：选中页面中所有元素
• 语法：*** {}**

（2）复合选择器

（i）交集选择器

• 作用：选中同时符合多个条件的元素
• 语法：**_selector1selector2selector3 _{}**

注意：交集选择器中如果有元素选择器，必须以元素选择器开头

（ii）并集选择器

• 作用：同时选中多个选择器对应的元素
• 语法：**_selector1，selector2，selector3 _{}**

1
2
3
4
5
6
7
8
9
10
11
12

/*
 * 选择器1 * {}
 * 选择器2 span {}
 * 选择器3 .outer {}
 * 选择器4 #inner {}
 * 选择器5 span.inner {}
 * 选择器6 .outer, .inner {}
 */
<div class="outer">  /* 选中的选择器：1|3|6 */
  <span class="inner"></span>  /* 选中的选择器：1|2|5|6 */
  <div class="inner" id="inner"></div>  /* 选中的选择器：1|4|6 */
</div>

（3）关系选择器

关系选择器根据元素之间的关系选取元素，一般直系后代选择器与后代选择器使用的较多一些

（i）直系后代选择器

• 作用：选中指定父元素的指定子元素
• 语法：father > son

（ii）后代选择器

• 作用：选中指定元素的指定后代元素
• 语法：ancestor progeny

（iii）相邻兄弟选择器

• 作用：选择下一个相邻兄弟元素
• 语法：prior + next

注意：一定是选中下一个、相邻的兄弟弟元素

（iv）通用兄弟选择器

• 作用：选择之后所有兄弟元素，不包括自己本身
• 语法：elderbrother ~ youngerbrother

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<main>
  <p>我是p元素</p>
  <div>
    <span>span0</span>
  </div>
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
</main>

<style>
  /* 样式1 没有元素字体变红色 */
  p + span {
    color: red;
  }
  /* 样式2 span1 字体变红色 */
  div + span {
    color: red;
  }
  /* 样式3 span1、span2、span3 字体变红色 */
  p ~ span {
    color: red;
  }
  /* 样式4 span1、span2、span3 字体变红色 */
  main > span {
    color: red;
  }
  /* 样式5 span0、span1、span2、span3 字体变红色 */
  main span {
    color: red;
  }
</style>

（4）属性选择器

属性选择器根据 HTML 元素具有的 HTML 属性选取相应的元素

一般属性选择器使用相对较少，通常用于根据表单元素的type属性选取相应的元素以设置样式

以下 attribute 代表 HTML 属性，value 代表 HTML 属性值

（i）[attribute] 选择器

选取带有指定属性的元素

（ii）[attribute=”value”] 选择器

选取带有指定属性和值的元素（值必须是完整或单独的单词）

（iii）[attribute~=”value”] 选择器

选取属性值包含指定词的元素

（iv）[attribute|=”value”] 选择器

选取指定属性以指定值开头的元素（值必须是完整或单独的单词）

（v）[attribute^=”value”] 选择器

选取指定属性以指定值开头的元素（值不必是完整单词）

（vi）[attribute$=”value”] 选择器

选取指定属性以指定值结尾的元素（值不必是完整单词）

（vii）[attribute*=”value”] 选择器

选取属性值包含指定词的元素（值不必是完整单词）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

a {
  color: blue;
}

/* 包含href属性的超链接元素 */
a[href] {
  background-color: white;
}

/* href属性以 "#" 开头的超链接元素 */
a[href^="#"] {
  background-color: gold;
}

/* href属性包含 "example" 的超链接元素 */
a[href*="example"] {
  background-color: silver;
}

/* href属性包含 "insensitive" 的超链接元素,，不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* href属性包含 "cAsE" 的超链接元素，区分大小写 */
a[href*="cAsE" s] {
  color: pink;
}

/* href属性以 ".org" 结尾的超链接元素 */
a[href$=".org"] {
  color: red;
}

（5）伪类选择器

伪类选择器是用于选择处于特定状态的元素的选择器

（i）子元素的伪类（序号）

• :first-child 选中父元素的第一个子元素
• :last-child 选中父元素的最后一个子元素
• :nth-child() 选中父元素的第 n 个子元素

特殊值：

• n 选中父元素的所有子元素
• 2n 或 even 选中父元素的所有偶数个子元素
• 2n+1 或 odd 选中父元素的所有奇数个子元素
• :nth-last-child() 选中父元素从末尾开始数的第n个元素
• :only-child 选取没有任何兄弟元素的元素

（_以上伪类根据父元素的所有子元素排序计数_）

（ii）子元素的伪类（类型）

• :first-of-type 选中父元素中第一个同类的子元素
• :last-of-type 选中父元素中最后一个同类的子元素
• :nth-of-type() 选中父元素中第 n 个同类的子元素
• :nth-last-of-type() 选中父元素中第 n 个同类的子元素
• :only-of-type 选取没有任何相同类型的兄弟元素的元素

（_以上伪类根据父元素的同类子元素排序计数_）

（iii）超链接的伪类

建议按LVHA 顺序 :link — :visited — :hover — :active 声明超链接样式，否则可能会覆盖预期的样式

• :link 选取表示没访问过的链接（正常链接）
• :visited 选取表示访问过的链接

由于隐私原因，这个伪类只能修改链接的文字颜色、背景颜色、边框颜色、轮廓颜色，且无法修改链接的透明度

• :any-link 选取任一具有href属性的链接

实际效果相当于同时匹配 :link 或 :visited

（iv）用户交互相关伪类

• :hover 选取处于鼠标移入状态的元素

注意这个伪类在触摸屏上使用会存在一些问题，不建议在触摸屏设备上使用

• :active 选取表示鼠标点击状态的元素，即鼠标点击至松开之间的阶段

（v）表单相关伪类

• :checked 选取被选中的input:radio元素或input:checkbox元素或option元素
• :focus 选取获得焦点的input元素

常见的情形如表单输入时显示提示性的样式

• :focus-within 选取自身或自身子元素获得焦点的元素

相当于其自身或其子元素匹配到:focus伪类的元素

• :indeterminate 选取处于不确定状态的input元素

不确定状态如存在未选中的相同name的input:radio元素或input:checkbox元素的indeterminate设定为true或不确定的progress元素

• :default 选取默认状态的input元素

允许在input:radio元素或input:checkbox元素或option元素或button元素上使用

• :placeholder-shown 选取placeholder文本起效时的input或textarea元素
• :disabled 选取被禁用的input元素
• :enabled 选取被启用的input元素

以上两个属性可能需要使用input元素或form元素的disabled属性

• :in-range 选取值在规定范围内的input元素
• :out-of-range 选取值超出规定范围内的input元素

一般需要规定input的type属性为number
以上两个属性需要规定input元素的min属性或max属性以确定数值范围，否则没有意义

• :invalid 选取具有非法值的input元素
• :valid 选取具有合法值的input元素或form元素
• :optional 选取非必须的input元素或select元素或textarea元素
• :required 选取必须的input元素或select元素或textarea元素

以上两个属性可能需要使用input元素或form元素的required属性

• :read-only 选取规定只读的元素
• :read-write 选取规定可写的元素

以上两个属性可能需要使用表单元素的readonly属性或其他元素的contenteditable属性

（vi）类函数伪类

• :not() 接收一个选择器参数，将符合条件的元素从原选择器选中元素中去除
• :is() 接收任意数量的选择器参数，匹配符合任一选择器的元素
• :where() 接收任意数量的选择器参数，匹配符合任一选择器的元素

:where() 和 :is() 的不同之处在于:where() 的优先级总是为 0 而 :is() 的优先级总是由它的选择器列表中优先级最高的选择器决定的

（vii）其他伪类

• :root 选取文档的根元素

通常网页中指html元素，且优先级较高
通常用于声明全局 CSS 变量

• :scope 匹配选择器应匹配的参考点的元素

在样式表使用时，等价于:root
在 DOM API 使用时，等价于调用 API 的元素

• :target 选取唯一的页面元素(目标元素)，其id 与当前URL片段匹配

如https://www.baidu.com.html#p2，:target可以匹配到id为p2的任意类型的元素

• :empty 匹配没有子元素或内部没有文本的每个元素
• :lang() 根据元素的语言属性选取元素

lang可能由元素的 lang 属性决定或文档head标签内的 meta 标签规定的 lang 属性决定

• :fullscreen 选取处于全屏状态的元素
• :defined 选取已定义的元素：包括原生元素以及自定义元素

可以用于控制复杂的自定义组件加载完成前的显示，使其仅在加载完成后显示

（6）伪元素选择器

伪元素选择器用于选取页面中一些特殊的并不存在的元素或是特殊的位置

• ::first-letter 选择文本第一个字母

只适用于块状元素

• ::first-line 选择文本第一行
• ::placeholder 选取表单元素的placeholder属性规定的文本
• ::selection 表示选中的内容
• ::marker 选取列表项目的符号或是数字

注意：以上四个伪元素选择器仅允许使用特定的CSS属性

• ::before 选择元素的开始，可以在元素开始插入一些内容

必须结合 content 属性使用

• ::after 选择元素的最后，可以在元素结束插入一些内容

必须结合 content 属性使用

• ::backdrop 选取全屏模式下的元素的背景，会在当前元素之下但在其他元素之上

可以用于在一些元素的全屏模式下修改默认的背景表现

1. CSS简介

CSS 即层叠样式表 (Cascading Style Sheets)，用于设置网页中元素的样式
最新的CSS版本为CSS3

2. CSS 基本语法

（1）CSS 结构

• 选择器 选择器用于选中页面中指定元素
• 声名块 声名块内包含为元素设定的样式
  • 声名 声名组成声名块，声明是键值对的形式

（2）CSS 注释

1
2
3
4
5

/* 这是一条CSS注释 */

/*
 * 这也是一条CSS注释
 */

可以在代码中的任何位置添加注释，注释可以横跨多行

（3）HTMLclass属性与id属性

**class** 属性规定元素的一个或多个 class 名称
**id** 属性规定元素的唯一 id 值
两者都是 HTML 元素的全局属性
区别在于，同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

（4）CSS 样式表插入位置

有三种插入样式表的方法：

• 内联样式，在标签内通过 style 属性设置元素样式
• 内部样式表，将样式写在 head 标签的 style 标签里
• 外部样式表，在外部 CSS 文件中写样式，再通过 link 标签导入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML>

<html>

  <head>
    <meta charset="utf-8">
    <title>css</title>

    <!-- 外部样式表 -->
    <link rel="stylesheet" type="text/css" href="example.css">

    <!-- 内部样式表 -->
    <style type="text/css">
      div {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <!-- 内联样式 -->
    <div class="e" id="e0" style="height: 100%"></div>
  </body>

</html>

3. CSS 颜色

在HTML中，我们已经了解了一些颜色使用方式，如

• 颜色关键字，如 white 等
• 十六进制颜色，如 #de34e3
• rgb 函数及 rgba 函数，如 rgb(12,34,250)

与之对应的是RGB颜色模式，取值均从0至255

• 红色（red）
• 绿色（green）
• 蓝色（blue）

以下是其他一些在CSS中的颜色使用方法

• hsl函数及hsla函数 hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha)

与之对应的是HSL颜色模式

• 色相（hue）是色轮上从 0 到 360 的度数，0 是红色，120 是绿色，240 是蓝色

• 饱和度（saturation）是一个百分比值，可以认为是颜色的强度，0％ 表示灰色阴影，而 100％ 是全色

• 亮度（lightness）也是百分比，可以认为是应为颜色赋多少光，0％ 是黑色，50％ 是既不明也不暗，100％是白色

• transparent 关键字 | 指定透明色

• currentColor 关键字 | 指定从当前元素的文字颜色获取当前属性应指定的颜色

4. CSS 单位

许多 CSS 属性接受“长度”值，长度是一个后面跟着长度单位的数字，数字和单位之间不能出现空格；但若数字为 0，则可以省略单位

长度单位有两种，分别是绝对单位和相对单位

• 绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸
• 相对长度单位规定相对于另一个长度属性的长度

其中最常用的是px

1. 超链接标签及媒体元素标签

（1）超链接标签<a>

简介

超链接可以用于跳转到新的文档或网页或者当前文档中的某个部分，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，一块区域等等
超链接标签内可以包裹其他任意标签（超链接标签本身除外）

属性

• href 定义指向一个文件或是一个网址的 url 或是一个 url 片段
• target 定义超链接的跳转方式
  • _self：在当前页面中打开超链接【默认值】
  • _blank：在新页面中打开超链接
• download 定义下载 url 指向的文件而不是打开链接，会提示用户保存该文件

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 跳转到网页 -->
<a href="https://baidu.com">百度</a>

<!-- 新窗口打开网页 -->
<a href="https://baidu.com" target="_blank">百度</a>

<!-- 链接到同目录下另一个 html 文件 -->
<a href="another.html">HTML</a>

<!-- 页面书签 -->
<a name="label">看这里</a>
<a href="#label">书签</a>

<!-- 页面书签：利用元素id属性实现 -->
<p id="label">看这里</p>
<a href="#label">书签</a>
<!-- 特别的：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会产生任何错误 -->
<a href="#">去顶部</a>

<!-- # 可作为超链接路径占位符 -->
<a href="#">我是假的超链接</a>
<!-- 也可用 javascript 方式占位 -->
<a href="javascript:;">我是假的超链接</a>

<!-- 发送电子邮件：将用户的电子邮件程序打开来发送新邮件 -->
<a href="mailto:nowhere@mozilla.org">Send email to us.</a>

（2）图像标签<img>

简介

图像标签可以用于向网页中嵌入一幅图像

属性

• src 规定图片的 url 路径
• alt 规定图片的描述
  • 当图片无法加载时会显示 alt 属性内的描述
  • 同时屏幕阅读器会将 alt 属性内的描述读给需要使用阅读器的使用者听，便于理解图像的含义
  • 搜索引擎会根据 alt 中内容识别图片，不给出 alt 属性不会收录图片
  • 空alt属性表明该图像不是内容的关键部分
  • 建议：alt 属性的值应能够清晰、简洁地描述图像的内容而不仅仅是图片文件名或是用于体现图片的存在
• width 及 height 指定图片的宽与高
  • 图片实行的是等比例缩放
  • 建议仅指定 width 和 height 属性中其一，不同时使用，否则可能会扭曲图片的比例
  • 建议仅使用像素px作为图片标签的单位，不推荐使用百分比作为图片标签的单位
  • 可以用CSS的width属性和height属性替代
• decoding 规定图片的解码方式
  • sync 同步解码图片，会阻碍其他内容的显示，可能会导致页面渲染时间增长
  • async 异步解码图片，不会阻碍其他内容显示
  • auto 浏览器自动决定 【默认值】
• importance 规定图片加载时的优先级
  • high 规定图片加载优先级较高
  • low 规定图片加载优先级较低，图片可能会延后显示
  • auto 图片加载优先级由浏览器自动决定 【默认值】
• loading 规定图片的加载方式
  • eager 立即加载图片 【默认值】
  • lazy 延迟加载图片，直至其与浏览器视窗接近一定距离再开始显示，可以加快网页页面的显示

图片格式

• jpeg（jpg）
  • 支持颜色比较丰富，不支持透明效果，不支持动图
  • 一般用来显示照片
• gif
  • 支持的颜色比较少，支持简单透明，支持动图
  • 颜色单一的图片，动图
• png
  • 支持颜色丰富，支持复杂透明，不支持动图
  • 颜色丰富、复杂透明图片（转为网页而生）
• webp
  • 新推出的专用于表示网页中表示图片的格式，具备其他图片格式的所有优点，而且图片特别小
  • 缺点：兼容性较弱（IE 等）

（3）音频标签<audio>

简介

用于向当前页面嵌入一个外部音频文件

属性

• src 音频的 url 路径
• controls 规定向用户提供显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定音频应循环播放
  • 唯一合法取值 loop
• autoplay 规定音频应自动播放，无需等待整个音频文件加载完成
  • 唯一合法取值 autoplay
• muted 规定音频是否静音
  • 默认取值为 false，即不静音；true 代表静音
• preload 建议音频的加载方式
  • none 提示浏览器无需缓存音频
  • metadata 提示浏览器获取音频元信息但不加载
  • auto 提示浏览器需缓存音频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12

<!-- 常规用法 -->
<audio src="someaudio.wav" controls="controls" autoplay="autoplay" loop="loop">
  您的浏览器不支持 audio 标签
</audio>

<!-- 考虑音频文件兼容性的写法 -->
<!-- 仅做了解即可 -->
<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
  <embed height="100" width="100" src="song.mp3" />
</audio>

（4）视频标签<video>

简介

用于向当前页面引入一个外部视频文件，也可以用来引入一个外部音频文件（但建议使用 audio 标签）

属性

• src 规定视频 url 路径
• controls 规定向用户显示控制元件，比如播放按钮
  • 唯一合法取值 controls
• loop 规定视频循环播放
  • 唯一合法取值 loop
• autoplay 规定视频应自动播放，无需等待缓存完成
  • 唯一合法取值 autoplay
• width height 规定视频播放器宽度及高度
  • 单位是像素
  • 推荐在使用<video>标签时都规定视频播放器的高度和宽度
• muted 规定视频是否默认静音
  • 默认取值为 false，即不静音；true 代表静音
• poster 规定视频的海报帧，默认未指定时使用视频的第一帧替代
• preload 建议视频的加载方式
  • none 提示浏览器无需缓存视频
  • metadata 提示浏览器获取视频元信息但不加载
  • auto 提示浏览器需缓存视频
  • 空字符串 等效于auto属性

其他

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 建议用法 -->
<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<!-- 考虑兼容 IE 8 -->
<!-- 仅做了解即可 -->
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

2. 表格

（1）表格简介

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

1
2
3
4
5
6
7
8
9
10
11

<!-- 一个简单的表格示例 -->
<table>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

效果如图

（2）<th> 标签

表格的表头单元格使用 标签进行定义

一般表头会显示为粗体居中的文本

（3）合并单元格

colspan 属性规定单元格可横跨的列数

rowspan 属性规定单元格可横跨的行数

以上两个属性具有最大值 65534，超出的值会自动当作 65534 处理

（4）<caption> 标签

<caption> 标签用于定义表格标题

<caption> 标签必须紧随 table 标签之后。只能对每个表格定义一个标题，通常标题会居中于表格主体内容之上

（5）空单元格问题

如果某个单元格是空的（没有内容），部分浏览器可能无法显示出这个单元格的边框，为此可以在空单元格中添加一个空格占位符从而避免这种状况出现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table border="1">
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    <td>row 1, cell 3</td>
  </tr>
  <tr>
    <td colspan="2">row 2, cell 1&2</td>
    <td rowspan="2">row 2&3, cell 3</td>
  </tr>
  <tr>
    <td>row 3, cell 1</td>
    <td>row 3, cell 2</td>
  </tr>
</table>

（6）<thead>标签及<tbody>标签及<tfoot>标签

这些标签常作为语义化标签

<thead>标签定义表格的列首行
<tbody>标签定义表格的内容主体行
<tfoot>标签定义表格的汇总行

3. 列表

（1）无序列表

无序列表是一个项目的列表，列表项使用粗体圆点进行标记
无序列表使用 <ul> 标签定义，各列表项使用 <li> 定义

• type 规定无序列表的序号类型

注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代

1
2
3
4
5

<ul>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ul>

（2）有序列表

有序列表也是一列项目，列表项目使用数字进行标记
有序列表使用 <ol> 标签定义，各列表项使用 <li> 标签定义
以下属性是 <ol> 标签的 HTML 属性

• reversed 规定有序列表的项是否反向排列，即序号自大而小排列

• start 规定有序列表的起始项的序号，默认值是 1

• type 规定有序列表的序号的种类，默认值是 1

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号
  • 注意：不推荐使用该 HTML 属性，而是建议使用 CSS 的 list-style-type 属性替代
    以下属性是 <li> 标签在<ol> 标签内可选的 HTML 属性

• value 规定项的序号，只允许使用数字，其后的项会从设置的该项的序号开始计数

1
2
3
4
5

<ol>
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ol>

（3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表使用 <dl> 标签定义，各自定义列表项使用 <dt>定义 ，各自定义列表项的定义使用<dd> 定义

1
2
3
4
5

<dl>
  <dt>结构</dt>
  <dd>结构表示网页结构</dd>
  <dd>规定网页中哪里是标题，哪里是段落</dd>
</dl>

（4）列表的使用

实际用的时候直接用列表原生样式比较少（由于样式比较简陋）
使用时更主要是使用其代表的结构和语义
其中无序列表用的比较多，多用于网页导航栏（nav），或者侧边栏等地方；自定义列表可以实现下拉框
另外，列表允许互相嵌套

4. 表单

HTML 表单用于收集不同类型的用户输入并发送给服务器

（1）<form> 标签

<form> 标签用于为用户输入创建 HTML 表单

建议：所有的表单元素都应当包含于<form> 标签内

• name 属性 规定表单的名称

该属性的值必须是独有的值且不能是空字符串

另外，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，所以一般收集信息的_表单元素_都应设置 name 属性

• action 属性 规定当提交表单时，向何处发送表单数据，即发送信息的目标服务器的 URL
• method 属性 规定如何发送表单数据，即HTTP 请求方法
  • 取值：’post’ 或 ‘get’等
• target 属性 规定在提交表单信息后如何显示响应信息
  • _self 在当前的浏览上下文加载
  • _blank 在新的浏览上下文加载
• autocomplete属性 建议浏览器是否应自动补全表单元素内容
  • on 开启
  • off 关闭
  • 该属性的效果取决于浏览器如何处理该属性
• novalidate属性 规定浏览器提交表单前是否应验证表单元素内容的合法性
  • 唯一取值为 novalidate

（2）表单输入元素

<input> 标签用于搜集用户信息

根据不同的 type 属性值，输入字段可以拥有非常非常多样的形式

• type 属性 规定 input 元素的类型
  • （以下标粗的是推荐掌握的）
  • button 定义按钮（通常用于通过 JavaScript 启动脚本）
  • checkbox 定义复选框
  • file 定义输入字段和 “浏览”按钮，用于文件上传
  • hidden 定义隐藏的输入字段
  • image 定义图像形式的提交按钮
  • password 定义密码字段，该字段中的字符会被掩码
  • radio 定义单选按钮
  • reset 定义重置按钮（会清除表单中的所有数据）
  • submit 定义提交按钮（会把表单数据发送到服务器）
  • text 定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
  • number 定义输入数字的控件
  • range 定义输入数字的滚动条
  • tel 定义输入电话号码的控件
  • email 定义输入电子邮件地址的控件
  • url 定义输入 url 的控件
  • color 定义指定颜色的控件
  • month 定义输入日期-年月的控件
  • date 定义输入日期-年月日的控件
  • datetime-local 定义输入日期时间的控件
  • time 定义输入时间的控件
  • week 定义输入日期-年与周数的控件
  • search 定义用于搜索字符串的单行文字区域
• value 属性 规定 input 元素的值，对不同的 input 元素会有不同的效果
• disabled 属性 规定 input 元素是否可使用
• placeholder 属性 规定 input 元素输入为空且未获得焦点时控件显示的内容
• spellcheck 属性 规定是否应检测输入的拼写语法
• required 属性 规定 input 元素是必须的且应检查值的合法性

（仅对 password, search, tel, text, url 有效）

• checked 属性 规定 input 元素是否初始时应被选中

（仅对 radio、checked 有效）

• autofocus 属性 规定 input 元素在加载后自动聚焦
• autocomplete 属性 建议 input 元素应使用自动填充功能
• multiple 属性 规定可选择多个选项

（仅对 email file 有效）
更多 input 元素的 HTML 属性，可以参考 链接

（3）下拉列表

<select> 标签用于定义下拉列表

列表选项应使用 <option> 元素定义，通常会把首个选项显示为被选选项，但可以通过对特定的 <option> 元素添加 selected 属性来定义预定义选项
select 标签拥有 autocomplete、autofocus、disabled、multiple、required 等属性

option 标签拥有 disabled、value 等属性，其中若 value 属性未指定值则默认是元素的文本内容

1
2
3
4
5

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
</select>

（4）文本域

<textarea> 标签定义多行输入字段（即文本域）

• autocomplete、autofocus、disabled、value 等属性
• cols 属性 和 rows 属性规定文本可见宽度及高度，推荐使用 CSS 选择器替代

（5）按钮

<button> 标签定义可点击的按钮

• type属性 规定 button 的类型
  • 取值可为：button reset submit
• autocomplete、autofocus、disabled、maxlength、minlength、placeholder、required、value 等属性

效果同相同type属性取值的 <input> 标签，但可以在 button 标签内放置更多的元素因而可以有更加多样的样式表现

注意：请始终应为按钮规定 type 属性，因为其默认值在不同浏览器中不同

（6）<label> 标签

标签为 input 元素定义标注

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
标签的 for 属性应当与相关元素的 id 属性相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!-- 参考代码 -->
<form method="post" action="#" name="post">
  <input type="text" name="text" maxlength="25" /> <br />
  <input type="password" name="password" /> <br />
  <input type="radio" name="radio" checked />r <br />
  <input type="checkbox" name="checkbox" />c1 <br />
  <input type="checkbox" name="checkbox" />c2 <br />
  <input type="button" value="按钮" /> <br />
  <input type="submit" /> <br />
  <input type="reset" /> <br />
  <input type="file" name="file" accept="image/jpg" /> <br />
  <input
    type="image"
    name="image"
    src="https://www.xidian.edu.cn/__local/C/BD/8E/B4E1319F602F3F83CF5538DDABD_CA336AC2_43244.jpg"
    alt=""
    width="100"
  />
  <br />
  <input type="hidden" /> <br />
  <hr />

  <select name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
  </select>
  <br />

  <textarea name="textarea" placeholder="..." cols="20" rows="20"></textarea>
  <br />
</form>

参考效果

5. 内联框架

iframe 用于在网页内嵌入另外一个网页

1

<iframe src="URL"></iframe>

• src 属性 设置内联网页的 url
• width 属性 和 height 属性 设置内联框架的宽度和高度

实际使用内联框架情况比较少见，常常是用来引用 bilibili 播放器等开放资源，如

1
2
3
4
5
6
7
8
9

<iframe
  src="//player.bilibili.com/player.html?aid=422093073&bvid=BV1J3411475Q&cid=453689337&page=1"
  scrolling="no"
  border="0"
  frameborder="no"
  framespacing="0"
  allowfullscreen="true"
>
</iframe>

HTML-1

1. HTML 简介

（1）HTML 概念

HTML 全名是超文本标记语言 (Hyper Text Markup Language) ，是专门用来描述网页的一种语言

• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

HTML文档 = 网页

• HTML 文档描述 网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页

（2）HTML 版本

当下普遍使用的是 HTML5
HTML5 是最新的 HTML 标准，拥有许多令人激动的新特性，目前大多数主流浏览器都支持HTML5的大部分特性
下一个版本的 HTML 标准 —— HTML6 ，正在讨论中，也许不久之后 HTML6 就会面向广大开发者

（3）推荐编辑器

推荐使用 Visual Studio Code 软件进行前端web端的开发
VS code 官方下载链接

2. HTML 基本语法

（1）标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• HTML 标签对中的第一个标签是开始标签（start tag），第二个标签是结束标签（end tag）
• 开始和结束标签也被称为开放标签和闭合标签

1
2
3

<标签名></标签名>
如：
<html></html>

（2）元素

• HTML 元素以开始标签起始，以结束标签终止
• HTML 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

1
2
3

<空元素/>
如：
<img/>

大多数 HTML 元素可以嵌套，即大多数 HTML 元素可以包含其他 HTML 元素， HTML 文档由相互嵌套的 HTML 元素构成

（3）属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性放置在开始标签内
属性总是以键-值对的形式出现，比如：name=”value”

1
2
3

<标签名 属性名="属性值"></标签名>
如：
<a href="http://www.baidu.com">This is a link</a>

（4）注释

HTML 注释使用 <!-- 注释内容 --> 描述，注释内容放置于开始标签与结束标签之间

1

<!-- 这是一个HTML注释！ -->

（5）文档结构

以下是一个典型的 HTML 文档的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- 文档声名，声名当前网页版本：区别是html、xml等文档类型 -->
<!DOCTYPE html>

<!-- html 根标签，网页中所有元素都写在根元素里边 -->
<html>

  <!-- head 是网页头部，head 中绝大多数内容不会在网页中直接出现，主要用于帮助浏览器和搜索引擎解析网页 -->
 <head>

    <!-- meta 一般用于设置网页元数据，这里 meta 用于设置网页字符集，避免乱码问题 -->
    <!-- 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明为utf-8编码，否则会因为默认编码无法解析汉字出现乱码情况 -->
    <meta charset="utf-8" />

    <!-- title 中的内容会显示在浏览器标题栏中，搜索引擎会主要根据 title 判断网页主要内容 -->
    <title>网页标题</title>

  </head>

  <!-- body 是 html 的子元素，表示网页的主体，网页中所有可见内容都应该写在 body 里 -->
  <body>

    <!-- 这里写的是网页的主体内容 -->

  </body>

</html>

（6）字符实体

在 HTML 中，某些字符是预留的，比如在 HTML 中不能直接使用小于号（<）和大于号（>），这是因为浏览器会把小于号（<）和大于号（>）误认为标签

如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体，比如小于号（<）和大于号（>）可用< 和 >来表示从而正常显示

浏览器常常会截短 HTML 页面中的空格，如果在文本中写 10 个空格，在显示该页面之前，浏览器会合并这些空格，只留下一个空格，如e e在浏览器中实际显示效果为e e，如果需要在页面中增加空格的数量，可以使用  

正常了解以上3个字符实体在开发中是足够了的，更多的字符实体可以参考链接

（7）颜色

HTML中支持多种方式表示颜色，大都基于rgb颜色模式

• 颜色名，如 white black等

关于浏览器支持的颜色名可参考链接

• 十六进制，如 #01ef20，特别的如同 #111111 形式的可简写为 #111
• rgb函数及rgba函数，如rgb(12,34,250)

我们会在CSS部分讲解更多与颜色相关的知识

（8）代码规范

在编写HTML文档时，遵守一些公认的代码规范有助于提高代码的可读性，也利于团队协作

• 使用正确的文档类型

始终在文档的首行声明文档类型<!DOCTYPE html>

• 使用小写元素名
• 关闭所有HTML元素与HTML空元素
• 使用小写属性名
• 所有属性值添加引号
• 合理利用空格和缩进

3. 文本格式化标签及段落标签

（1）标题标签 <h1> ~ <h6>

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

（2）段落标签 <p>

段落通过

标签定义，浏览器会自动地在段落的前后添加空行

（3）水平线标签 <hr/> 与换行标签 <br/>

（4）其他文本格式化标签

• 粗体 <strong>
• 斜体 <em>
• 下划线 <ins>
• 删除线 <del>
• 上标 <sup>
• 下标 <sub>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<h1>this is a h1 tag</h1>
<h2>this is a h2 tag</h2>
<h3>this is a h3 tag</h3>
<h4>this is a h4 tag</h4>
<h5>this is a h5 tag</h5>
<h6>this is a h6 tag</h6>

<p>this is a p tag</p>
<p>this is a p tag too</p>

<p>use br tag <br/> like this</p>

<hr/>

<p>this is a <strong>strong</strong> tap</p>
<p>this is a <em>em</em> tap</p>
<p>this is a <ins>ins</ins> tap</p>
<p>this is a <del>del</del> tap</p>

效果如下

其他文本格式化标签可参考 W3School标签参考手册

一般实际开发中很少用到文本格式化标签，更常见的是使用CSS字体样式来实现文本格式化效果，这里仅做简单介绍；一般使用文本格式化标签用于表现相关的语义

4. 块元素与行内元素

（1）概念

• 块元素：独占一行的元素，如 <p>
• 行内元素：不会独占一行的元素，如 <img>

大多数 HTML 元素被默认定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束），内联元素在显示时通常不会以新行开始

注意：一般情况下块元素中放置块元素或行内元素，行内元素内仅放置行内元素，而不推荐在行内元素中放置块元素

（2）分组标签

<div> 默认是块元素
<span> 默认是行内元素

<div> <span> 在前端开发中非常常用，常用于与CSS相互配合，分别实现对大的内容块和部分文本设置样式；或是充当包裹其他HTML元素的容器和文本的容器

5. 语义化标签

（1）概念

语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用；同时也能够提高HTML文档的可读性，便于协作开发与后续维护

（2）优点

• 代码结构清晰，可读性高，减少差异化，便于团队开发和维护
• 在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验
• 对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息

（3）一些语义化标签简介

下图给出了一些常见语义化标签的使用场景

基础

• 学习资料

初学时可以参考菜鸟教程及W3School文档

学习到一定程度后推荐使用MDN（特别是英文文档，因为中文文档存在更新不及时的情况）或参考相应的官方文档

• IDE

推荐使用 VSCode IDE

亦可使用 WebStorm IDE（可以申请学生版）

HTML

HTML 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 HTML 的基本语法及常用元素，以及语义化标签的概念，此外，后续对一些 Web API 也需要有足够的了解，如 Web Storage API、Web Worker API、SVG 和 Canvas

CSS

CSS 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 CSS 的选择器、盒模型、浮动布局、定位、弹性盒子布局、响应式设计等有足够的了解

JavaScript

JavaScript 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 JavaScript 的基本语法，同时特别注意 JavaScript 的语言特性，并关注 ES6 的发展，此外还需要了解浏览器的 BOM 模型和 DOM 模型、浏览器事件机制、异步编程等方法

Ajax

Ajax 是前端中主流的物理请求方式，主要包括 XMLHttpRequest API 和 Fetch API 两种，此外可以了解一下前端常用的 axios 网络请求库

学习角度来说，主要是了解 XMLHttpRequest 的基本使用以及封装，Fetch 可以作为进阶了解

计算机网络基础

前端中计算机网络也是重要的一部分

学习角度来说，主要了解 OSI 七层网络模型与 TCP/IP 五层网络模型、HTTP 请求方法和请求头及响应头以及状态码、HTTP 协议及 HTTPS 协议、DNS 协议、TCP 协议与 UDP 协议、WebSocket 协议等

Git

Git 是编程领域中目前最主流的版本管理工具，基本上不管是日常开发还是工作开发都在广泛地使用 Git

同时，Github 作为全球最大的技术交流平台，积极参与社区建设也是很重要的一环

学习角度来说，主要了解一些 Git 的基本概念、一些 Git 的基本命令以及 GitHub 的基本操作

Node.js

Node.js 允许在浏览器之外的环境运行 JavaScript 代码

学习角度来说，主要了解 Node.js 的使用以及一些 Node.js 的常见模块

包管理工具

目前主流的包管理工具主要是 npm yarn pnpm

学习角度来说，主要了解 npm 的基本使用及常用指令；yarn 和 pnpm 与 npm 大同小异，可作为进阶内容了解

项目构建工具

目前主流的项目构建工具主要是 webpack vite

学习角度来说，两者都有必要学习，webpack 主要关注其基本概念，vite 主要关注其基本原理

Vue

Vue 框架是国内主流的前端框架之一，被一些中小互联网企业广泛使用

学习角度来说，学习 Vue 可以直接从 Vue3 composition API 开始，除了了解 Vue 的基本开发之外，还需要重点了 Vue 的基本原理，此外需要注意 Vue 的性能优化

TypeScript

TypeScript 是目前前端领域使用最广泛的 JavaScript 超集语言，主要是解决 JavaScript 弱语言的问题，增加了强大且自由的类型系统，在一些大型互联网公司的大型项目中使用非常广泛

学习角度来说，学习 TypeScript，类似与学习 JavaScript，主要是对语言特性的学习；但就 TypeScript 而言，不需要专门去了解类型体操

React

React 框架是国内主流的前端框架之一，被一些大型互联网企业广泛使用

学习角度来说，学习 React 可以直接从 React functional component 开始，除了了解 React 的基本开发之外，此外需要注意 React 的性能优化

参考

黑马程序员前端学习路线 个人比较推荐这个学习路线，更加突出重点
尚硅谷前端学习路线 个人觉得这个的内容非常全面，但需要注意没必要都学习其中的内容

我的个人博客正式开通啦！