一、HTML
HTML传达内容，而不传达样式！
1.定义
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，是一种用于创建网页的标准标记语言。
语义化：HTML中的元素、属性及属性值都拥有默认含义。这便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。
这是一段简单的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>（1）<!doctype html> 用于标记版本，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
（2）<html> 用于告知浏览器其自身是一个 HTML 文档。
（3）<head> 用于定义文档的头部，它是所有头部元素的容器。其中包含页面的元数据（如编码、标题等）
（4）<body> 用于定义文档的主体，其中囊括了文档的所有内容。（如文本、超链接、图像、表格等）
2.常用标签
- 标题
<h1>~<h6>
<h1> 定义字体最大的标题。<h6> 定义字体最小的标题。
- 列表
有序列表 <ol> ：有序列表每一项使用数字进行标记，每一项为 <li>
无序列表 <ul> ：无序列表中每一项前使用粗体圆点进行标记，每一项为 <li>。
定义列表 <dl> ：定义列表是项目及其注释的组合，<dt>为标题 <dd>为内容。（定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等）
- 链接（超链接）
<a> 标签
（1） 有两种使用 <a> 标签的方式：
1.使用 href 属性：创建指向另一个文档的链接，例如：
<a href="url">text</a>2.使用 name 属性：创建文档内的书签，书签不会以任何特殊方式显示，它是不可见的。
<a name="label">书签</a>（2）target属性：用于定义被链接的文档在何处显示。
| 值 | 描述 |
|---|---|
| _black | 响应显示在新窗口或选项卡中。 |
| _self（默认值） | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
- 多媒体
<img> 图像标签 ：要在页面上显示图像，需要使用源（src），源属性的值是图像的 URL 地址。alt替换文本属性：用来为图像定义一串预备的可替换的文本（图片加载失败时展示）
<audio> 音频标签：controls属性显示播放控件。
<video> 视频标签：controls属性显示播放控件。
- 表单
<select> 元素定义下拉列表。
<option> 元素定义待选择的选项。
<textarea> 元素定义多行输入字段。
<button> 元素定义可点击的按钮。
<datalist> 元素为 <input> 元素规定预定义选项列表。
<input>：不同的type属性，有不同的元素形态。
type属性：
<input type="text"> 定义供文本输入的单行输入字段。
<input type="password"> 定义密码字段。
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮。
<input type="checkbox"> 定义复选框。
<input type="button> 定义按钮。
<input type="number"> 用于应该包含数字值的输入字段。
3.HTML DOM节点树
（1）DOM（Document Object Model文档对象模型）
HTML DOM 是 HTML 的标准对象模型和编程接口。它是关于如何获取、更改、添加或删除 HTML 元素的标准。
当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被结构化后，以树的形式呈现，如下图所示。
二、CSS
1.CSS基础
- 选择器Selector
通配选择器：*
元素选择器：元素名（例如：p{}）
id选择器：#
类选择器：.
属性选择器：[]（例如：input[type="password"]{}）
- 伪类：用于定义元素的特殊状态
状态性、结构性
状态性->a:link默认、a:visited、a:hover、a:active、:focus
结构性->li:first-child、li:last-child
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
| :enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
| :focus | input:focus | 选择获得焦点的 <input> 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
| lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
- 组合方式
input:focus：同时满足
nav a：后代选择器匹配属于指定元素后代的所有元素。
section>p：子选择器匹配属于指定元素子元素的所有元素。
h2~p：通用兄弟选择器匹配属于指定元素的同级元素的所有元素
h2+p：相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
选择器组：body,h1,h2,h3{}（用，隔开）
- 颜色
RGB：#000000 或 rgb（0,0,0）
HSL：色相 饱和度% 亮度% hsl（20,50%,50%）
（补充：alpha透明度：rgba(，，，) hsla(，，，)）
- 文本样式
font-family：建议最后写上通用字体族，英文在中文前
Web fonts：@font-face{src:url();}
font-size：关键字、长度（px、em）、百分数（相对于父元素字体大小）
font-style：正斜
font-weight：粗细
line-height：行间距（无单位是和字体大小的比例）
text-align：文字对齐（left center right justify）
spacing：间距（letter-spacing，word-spacing）
text-indent：缩进
text-decoration：文字修饰(下划线、删除线)
white-space：空格（空白符）
- CSS调试
浏览器开发者模式
2.CSS原理
- 选择器特异度（specificity）
高优先级覆盖
- 继承
一些属性会继承父元素的计算值
inherit：显式继承（*{box-sizing：inherit;}）：不可继承属性变为可继承
（补充：初始值（默认值）：每个属性都有初始值（initial））
- CSS求值过程
DOM+样式->filtering（规则）->cascading（层叠：筛选声明值）->defaulting（没有声明，继承或初始值）->resolving（相对值转化绝对值）->formatting（计算值转换）->constraining（限制：小数到整数）->实际值
- 布局layout：确定内容大小、位置
1）常规流（行级、块级、表格、FlexBox、Grid布局）
2）浮动
3）绝对定位
盒模型：
margin、border、padding、width、height
width：content box宽度（内容）
height：content box高度（容器指定高度时、百分比才生效）
padding：内边距（百分数相对于容器宽度）
border：容器边框（border-wight/border-style/border-color）(solid/dotted)
margin：外边距（百分数相对于容器宽度）（margin：auto水平居中）margin collapse：边距覆盖，折叠
补充：
boxing-sizing：border-box（宽、高变为边框宽高）
overflow：内容溢出（visible、hidden、scroll）
常规流：
1）块级block level box：不会并列摆放（例：body、article、div、section、p）
display：block
2）行级inline level box：可和其它行级盒子放在一行（width、height不适用）（例：span、em、strong）
display：inline
（补充：display：inline-block 本身行级，可以放在行盒中，可以设置宽高
display：none无排版，不展示）
3）行级排版上下文IFC：只包含行级盒子的容器
垂直方向布局vartical-align：middle；
4）块级排版上下文BFC：从上到下摆放，垂直margin合并
5）Flex Box：规定摆放流向、摆放顺序等.
display：flex；
flex-direction：摆放流向（row、row-reverse、column、column-reverse）
justify-content：内部容器排列，水平对齐（flex-start、flex-end、center、space-between、space-around、space-evenly）
align-items：垂直对齐（flex-start、strwtch、baseline......）
align-self：（单个元素设置）、order（指定排列顺序）
Flexibility弹性：flex-grow有伸展能力、flex-shrink有收缩能力、flex-basis基础长度）
6）Grid布局：多个方向布局
display：grid；生成块级grid容器
grid-template：划分为网格（设置每个子元素占据哪些行和列）
划分方法 例如：
grid-template-columns：100px（30%） 100px 200px
grid-template-rows：100px 100px（auto）
grid line：网格线 grid area 网格区域
grid-area：1/1/3/3；（占多个格子）
浮动：图文环绕效果
7）float：left；right
绝对定位
8）position（static、relative、fixed、absolute）
position:relative：相对原本位置偏移，不影响其他
absolute：脱离常规流（当做不存在），相对于父级最近的非static祖先定位，不影响流内元素定位
fixed：相对于屏幕定位，脱离常规流（如：导航栏等）
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
