最佳体验方案：结构、样式、行为相分离
一、语法规范
1.1基本语法概述
- 包含在尖括号内
- 多数双标签, 成对出现
- 少数单标签
1.2标签关系
- 包含关系（父子）
- 并列关系（姐妹）
二、基本结构标签
三、VSC自动生成标签
3.1 文档类型声明标签，提示用html5显示页面；
3.2 告诉浏览器为英文网站，中文网站可改成"zh-CH"；
3.3 必须写，采取UTF-8来保存文字，否则会乱码；
四、常用标签
- 标题标签
- 语义：做标题使用
- 特点：大小逐级递减、变粗、独占一行
2.
- 语义：分割段落
- 特点
- 根据窗口大小可自动换行
- 段落间有空隙
3.换行标签
- 语义：强制换行
- 特点
- 单标签
- 行间无空隙
4.文本格式化标签
- 加粗、倾斜、下划线、删除
- 语义：强调作用
5.盒子标签(无语义，装内容，布局)
5.1
- 特点：独占一行，一行只能放一个,大盒子
5.2
- 特点：一行可以有多个，小盒子
6.图像标签（单标签）& 路径
6.1
- src为img标签必须属性，用于指定文件的路径和文件名
属性：属于该标签的特性
- 其他属性：
注意:
(1) 图像标签可以拥有多个属性, 必须写在标签名的后面
(2) 属性间不分顺序,属性和标签名, 属性与属性之间都以空格分开
(3) 属性采取键值对的格式。属性=“属性值”
(4) 想让图片居中，要让父标签p加css水平对齐代码
6.2 路径
- 铺垫
目录文件夹：普通文件夹
根目录：打开目录文件夹的第一层即根目录
6.2.1相对路径：图片相对与html页面的位置
- 同一级：
- 下一级：
- 上一级：
6.2.2绝对路径：目录下的绝对位置
如：D:webimg
logo.jpg 或 http://www.itcast.cn/images/logo.jpg
注意：从盘符开始为 而网址和相对路径为/
7.超链接标签
- href必须属性
- target指定链接打开方式，_self默认, _blank为在新窗口打开
分类
(1) 外部链接，如网页 http://www.baidu.com
(2) 内部链接，网站内部页面跳转 index.html
(3) 空链接
(4) 下载链接，一般为文件或压缩包
(5) 网页元素链接，如文本、图像、音频等都能添加超链接
(6) 锚点链接，类似目录，快速定位页面某一位置
- 链接文本的href属性，设置置为#名字，
如 - 目标位置标签+“id=名字”
如
8.注释标签(ctrl+/)
结构标签：
(1)定义表格头部(一整行),内必须有,一般在第一行
(2)定义主体,放数据
(3)以上标签都放在里
10.2 表格属性 (一般写在table标签里)
- align 表格位置 = left，center，right
- border 边框 = 默认1
- cellpadding 文字与单元格距离
- cellspacing 单元格间的距离
- width 表格宽
- hight 表格高
10.3 合并单元格
（1）分类：
- 跨行合并：rowspan=“单元格个数”
- 跨列合并：colspan=“单元格个数”
（2）目标单元格：跨行最上，跨列最左
（3）步骤
- 确定分类
- 找到目标单元格。写合并方式=合并数量
eg. - 删除多余单元格
11.列表标签
11.1无序列表
(1) 语法
注意：
- 列表项无顺序
- 中只能嵌套
- 相当于容器，可以放所有元素
- 去掉前面圆点
11.2有序列表
(1) 语法
11.3自定义列表
(1)语法
注意：
- 里只放dt和dd。dt和dd里可放任何标签
- 相当于大哥带着一群小弟
11.表单标签
- 构成：一个表单包含表单域、表单控件、提示信息
11.1表单域
- 属性
(1)action=url(属性值), 用于指定并处理表单数据的服务器程序的地址
(2)method=post/get, 设置提交方式
(3)name, 指定表单名称，区分多个表单域
- 作用：绑定某个元素，扩大用户的选择范围，提升用户体验
- 语法：
for属性值应该和id一样
是label!!! 不要打成lable!!!(之前就弄错了)
11.2.3 select下拉标签
- 使用场景：多个选项，使用该标签可节省空间
- 语法：
注意：
(1)中至少包含一对
(2)在中定义selected="selected"时，设置当前选项为默认选中状态
11.2.4 textarea文本域标签
- 使用场景：输入内容较多，多用于留言板
- 语法：双标签
1、主要针对搜索引擎
2、可用多次
3、IE9中需要转成块级元素
4、移动端常用
6.2多媒体标签
-
视频
-
语法
语法同上
- 总结
- 音频和视频标签使用基本一致
- 谷歌浏览器禁止了自动播放
- 视频可以加muted静音播放视频
- 多个属性值最好展开写，可读性强；
- 选择器是HTML标签，属性与值以键值对形式承成对出现；
- 选择器和{ }之间有空格，属性的：也要打空格，更美观；
- 每个属性值以；结束
二、选择器
2.1选择器分类
- 基础选择器：单个选择器组成
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
- 复合选择器
2.2基础选择器
-
标签选择器
含义：用HTML标签名称作为选择器。统一某一类标签样式
缺点：不能差异化设置样式 -
类选择器（开发常用）
语法：
注意：
- 调用时在标签后加class=“类名”
- 类名不和标签一样
- 多次调用
- 不用纯数字和中文命名，类名较长时可用—分割
- 一个标签可以指定多个类名
- id选择器（常与Javascript搭配）
注意：
- 标签后加“id=“id名”
- 只能调用一次
- 通配符选择器
含义：“*”定义，表示页面中所有标签
语法：
三、字体属性
3.1字体系列
font-family
3.2大小
font-size：20px;
- px(像素)是网页常用单位
- 谷歌浏览器默认大小为16px
- 不同浏览器显示字体大小不同，尽量设置确定值，不要默认大小
- 标题标签需要单独指定大小
3.3粗细
font-weight:normal/bold/bolder/lighter/数字（不带单位）
实际开发倾向于用数字指定粗细
400等价于normal，700等价于bold3.4文字样式
font-style：normal/italic（斜体）；
3.5字体复合
语法
顺序不能变!
size和family不能省略！！注意：line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效
四、文本属性
4.1颜色color
表示 属性值 预定义颜色值 red、green、blue等 十六进制 #FF0000 RGB代码 rgb(255,0,0)或rgb(100%,0%,0%) 4.2水平对齐text-align
属性 属性值 left 左对齐(默认) center 居中 right 右对齐 4.3修饰text-decoration
属性 属性值 none 无装饰(常用)（可去掉链接自带下划线） underline 下划线（链接a自带） overline 上划线 line-through 删除线 4.4缩进text-indent
用来指定文本第一行的缩进（通常用于段落首行缩进）
em是相对单位，1em为当前元素（font-size）1个文字大小4.5行间距line-height
- 行间距有上间距、文本高度、下间距组成
文字实现垂直居中小技巧：让行高=盒子高度
若没设置盒高，盒子高度会调成行高
注意：line-height和font简写方法不能分开，否则行高与盒子的垂直居中会失效
五、引入方式
5.1内部样式表
含义：在HTML页面内部写样式，利用标签，一般写在中
5.2行内样式表
含义：在标签内部style属性设CSS样式，适于修改简单样式
要用双引号！5.3外部样式表
含义：单独建CSS文件，再根据实际情况引入HTML
步骤：- 建立CSS文件
- 引入相应的HTML文件
(1) link定义当前文档和被链接文档的关系，stylesheet表示被链接文档是一个样式表文件
(2) href定义URL, 可以是相对路径/绝对路径六、复合选择器
6.1 后代选择器（空格）
含义：父元素里的子元素
语法：
注意：- 空格隔开
- 类似于路径，最终目标是元素二
- 元素一、二可以是任一选择器
6.2 子选择器（>）
含义：最近一级子元素
语法：6.3 并集选择器（,）
含义：不同标签设置相同属性，集体声明
语法：七、元素显示模式
一般分为块元素和行内元素
7.1块元素
（如)
特点：
- 独占一行
- 高、宽、外边距、内边距都可控
- 默认宽度为容器的100%
- 是容器（盒子），里面可放行内/块级元素
文字类的元素内不能放块元素（如
7.2行内元素/内联元素
(如)
特点：
- 一行可放多个行内元素
- 高宽为本身文字大小，再设置无效
- 行内元素只能容纳文本/行内元素
特殊情况链接里可放块级元素，但最好转换成块级模式
行内元素的左右内外边距有效，但上下内外内边距无效，对于该行内元素，竖直方向的内边距有效果但对其他元素无影响。
7.3行内块元素
(如)
特点：
- 一行可放多个，之前见会有间隙
- 默认宽为本身内容宽度
- 可设置高、宽、内外边距
具有前两者的共同点：一行能放多个又能设置高宽
7.4模式转换（常用于增大链接的触发范围）
- 转换成块级元素：
- 转换成行内元素：
- 转换成行内块元素：
八、背景
属性 作用 值 background-color 背景颜色 颜色值/十六进制/rgb background-image 背景图片 url(图片路径) background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y background-position:x y 背景位置 方位(left right center top bottom)/精确单位 background-attachment 背景附着 scroll(滚动)/fixed(背景固定) 背景简写 简写 颜色 图片地址 平铺 滚动 位置 背景色半透明 透明效果 background:rgba(0,0,0,0.5);透明值 方位词：水平(left,center,right)、垂直(top,center,bottom)
九、CSS三大特性
9.1层叠性
- （相同选择器设置相同样式）
若冲突：就近原则
9.2继承性
- （一般继承父元素的文字样式）
特殊：行高继承性 字号大小/行高（相对单位）
9.3优先级
- （一个元素有多个选择器）
选择器相同，则执行层叠性；若不同则按选择器的权重
选择器 权重 继承计算
18.8新增属性过渡（重点）
-
动画效果
-
语法
- 前两个必须有
- 运动曲线默认ease，先快后慢，延迟默认为0s
- 时间一定带单位
- 若想要多个属性都变化，要么用逗号，分隔，要么加all
- 谁做过渡给谁加
需要三个标签进行优化：title、description、keyword
二、title网站标题
- 网站名（产品名）-网站介绍（不超过30汉字）
三、description网站说明
四、keywords关键字
- 页面关键字，最好在6~8个关键词，再用逗号隔开的形式
一、tab栏选项卡
子盒子的浮动float和清除浮动clearfix和垂直居中vertical-align属性失效
2.2父项常见属性—flex-direction
- 设置主轴方向
- 子元素跟着主轴排列。主轴默认为x轴，可改。
属性值 说明 row 默认从左到右（主轴为x） row-reverse 从右到左（主轴为x）（顺序颠倒） column 从上到下（主轴变成y） column-reverse 从下到上（主轴变成y） 2.3flex-wrap
- 设置子元素是否换行
- 两种值。默认nowrap（不换行），wrap（换行）
2.4flex-flow
- 复合了主轴和换行
2.5justify-content
- 设置主轴上的子元素排列方式
属性值 说明 flex-start 默认从头开始，（从左到右） flex-end 从尾部开始排（顺序不变） center 盒子整体在父元素的主轴居中 pace-around 平分剩余空间（margin-left/right） pace-between 先两边贴边再平分剩余空间（重要） 2.6 align-item
- 设置侧轴上子元素的排列方式（单行，不换行时）
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起再居中 stretch 拉伸 2.7align-content
- 设置侧轴上多行子元素的排列方式（换行）
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起再居中 space-around 侧轴平分剩余空间 space-between 先在侧轴贴两边，再平分 stretch 子项高度平分父元素高度 2.8子项常见属性-flex
- 子项目分配剩余空间，定义所占份数
2.9子项常见属性-align-self
- 子项侧轴的排列方式
- 可覆盖父项的align-item属性
- 若无父元素，则=stretch
2.10子项常见属性-order
- 数值越小，排列越前，默认为0
-