HTML

选择什么元素取决于内容的含义而不是显示的效果

语义化

• 为了搜索引擎优化（SEO）
• 为了让浏览器理解网页：阅读模式 语言模式
• HTML元素周期表

文本元素

• h: h1-h6
• p段落
• span无语义，仅用于设置样式
• 以前某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素），到HTML5已经弃用这种说法，内容类别
• pre预格式化文本[无语义]
• 空白折叠：在源代码中的连续空白字符（空白换行制表）在页面显示时，会被折叠为一个，
• 在pre元素中不会出现空白折叠，按原代码，该元素通常用于显示代码
• pre的本质：它有一个默认的CSS white-space:pre

HTML实体

• 实体字符通常用于页面中显示一些特殊符号
• &单词
• &#数字
• <

• &

• 空格 &nbsp
• & &nmp

a元素

• 超链接

• target属性：表示跳转窗口位置（_self/_black）

• 跳转地址；跳转到某个锚点；功能链接

• <a href='javascript:alert('你好')'></a>

• <a href='tel'></a>

  路径的写法

• 绝对路径：站外资源
• 协议名：//主机名：站口号、路径（协议相同可省略协议）
• 相对路径：站内资源
• 以./开头表示当前资源所在的目录
• 以../表示返回上一级目录

  图片元素 img元素

• src属性;source
• alt属性：当图片资源失效时用文字表示
• 和<a><img></a>
• 和map元素
  <map name='1'>
<img usemap='#1'>
  map划分区域
  <area shape="x,y,z" coords='''' href='' alt=''></area></map>

• 衡量坐标避免误差，需要用专业的衡量工具（QQ截图，屏幕发100%）和figure元素关联

• 指代定义通常把图片包括起来

• <figure><h1></h1><img></figure>

  多媒体元素video audio

• controls显示控件、布尔属性
• autoplay自动播放、布尔属性
• muted静音播放、布尔属性
• loop循环播放、布尔属性

  列表元素

• 有序列表 ol li
• 无序列表 ul li
• 定义列表 dl>dt（标题dd描述）

  容器元素

• 该元素代表一个块区域，内部用于放置其他元素
• div没语义
• 语义化容器元素
• header通常表示页头，也可以表示文章的头部
• footer通常用于表示页脚，也可用于表示文章的尾部
• article通常英语表示整片文章
• section通常用于表示文章的章节
• aside通常用于表示侧边栏

元素的包含关系

• 块级元素可包含行级元素，行级元素不可以包含块级元素，a元素除外
• 元素的包含关系由元素的内容类别决定
• 容器元素中可包含任何元素
• a元素几乎可以包含任何元素
• 某些元素有固定的子元素，dl>dt/dd,ul>li,ol>li
• 标题元素和段落元素不能嵌套，并且不能包含容器元素

CSS

color

• 元素内部的字体颜色

• 预设值:定义好的单词

• 三原色：色值 rgb(,,)

• 淘宝红ff4400

• background-color

  字体相关

• 元素内部文字的尺寸大小

• px像素，高度占的像素

• em相对父元素的字体大小--->html也无字体，则使用基准字号（浏览器设置）

• font-weigt：文字粗细程度，可以取值数字，也可以取值预设值

• font-family:字体，必须用户计算机中存在的字体，设置多个字体，sans-serif非衬现字体

• font-size:字体样式，通常设置倾斜：italic；strong:重要的，不能忽略的内容;em表示强弱的内容（斜体）

• text-decoration:underline(下划线)

• a元素下划线，del中划线

• text-indentz:首行文本缩进

• line-height:行高（多行文字时不设置绝对单位，用相对单位，直接用数值），单行文本垂直：绝对单位

• text-align:元素内部文字的水平排列方式

• letter-space文字间隙

选择器

帮助你精确的选中想要的元素

• ID选择器
• document.getElementById()
• class选择器
• document.getElementsByClassName()
• 通过标签的class名进行选择，返回的是一个数组，当我们需要对单个进行操作时，可利用数组的操作来选择单个的元素；这里需要注意的是，不同于ID选择器，因为是一个数组所以是Elements,注意有一个s，又由于在ES6中有class关键字，为了避免重复这里用的是ClassName
• 标签选择器
• document.getElementsByTagName()
• name选器
• document.getElementsByName()
• name选择器一般用于表单，含有name属性的标签；同样，返回的是一个数组。
• 属性选择器
• *[title] {color:red;}img[alt] {border: 5px solid red;}
• 根据属性和属性值选中元素
• 伪类选择器
• 选中某些元素的某种状态
• hover：鼠标悬停状态
• active：激活状态，鼠标按下状态
• link:超链接访问的状态
• visited:访问过后的状态
• link>visited>hover>active
• 伪元素选择器
• ::before{content:'<<'}
• ::after{content:}
• 选择器的组合
• 后代元素 空格
• 子元素 >
• 相邻兄弟元素+
• 后边出现的所有兄弟元素~
• 选择器的并列
• 多个选择器用逗号隔开

层叠样式表

• 声明冲突：同一个样式多次应用到同一个元素
• 层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
• 1，比较重要性2.比较特殊性3.比较源次序
• 比较重要性
• a.作者样式的!important
• b.作者样式表中的普通样式
• c.浏览器默认样式
  -比较特殊性：
• 总体规则：选择器中的范围越窄越特殊
• 具体规则:通过选择器计算出一个4位数
• 千位：如果是内联样式计位1，否则为0
• 百位：将选择器中所有ID选择器的数量
• 十位：等于选择器中类选择器、伪类选择器、属性选择器
• 个位：等于选择器中元素选择器、伪元素选择器
• 应用
• 重置样式表
• reset.css
• normslize.css
• meyer.css

继承

• 子元素会继承父元素的css样式
• 文字内容相关的属性都可以继承

属性值的计算过程

• 渲染每个元素的前提条件：该元素的所有css属性必须有值

  
  在这里插入图片描述
• 1、确定声明值：参考样式表中没有冲突的声明，作为css的属性值，浏览器样式
• 2、层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性
• 特殊的两个css取值:
• inherit强制让元素继承;initial表示初始值（默认值）

盒模型

• 行盒:display:inline-block
• 块盒：display：block

宽高

• 改变宽高范围
• 衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height则设置的是内容盒
• 1.精确计算2.css3属性：box-sizing:content-box/border-box
• 背景覆盖范围
• 默认情况下覆盖边框盒
• 可以通过background-clip进行修改
• 溢出处理
• 默认visible
• overflow控制内容溢出边框盒的处理方式
• hidden/scroll（可控制水平overflow-y/x）
• 短词规则
• word-break会影响文字在什么位置截断换行
• normal普通，字/单词截断
• break-all截断所有，英文单词内部截断
• keep-all所有文字都在单词之间显示，中文则一行显示（空格位置显折）
• 空白处理
• 只能控制单行文本
• white-space:nowrap(不换行）
• text-overflow:elipsis(文本溢出用点代替）
• pre不空白折叠

行盒的盒模型

• 盒子沿着内容延伸
• 行高不能设置，宽高：调整盒行的宽高，应使用字体大小，行高字体类型间接触调整
• 内边距（填充区）：水平方向有效，垂直方向只会影响背景，不会实际占据空间
• border/margin同上

行块盒inline-block

• 不独占一行，盒模型所有尺寸都有效
• 空白折叠发生在行块盒的内部或者行块盒之间

可替换元素和非可替换元素

• 大部分元素，页面上显示的结果，取决于元素内容，成为非可替换元素；小部分元素，页面显示的结果，取决于元素属性，成为可替换元素，例如：img、video、audio
• 可替换元素类似于行块，盒模型中所有尺寸都有效
• object-fit:fill/cover图片的宽高自适应

视觉格式化模型（布局规则）

• 页面中的多个盒子排列规则

• 1.常规流2.浮动3.定位

• 常规流布局

• 所有元素默认情况下都属于常规流布局

• 总体规则：块行独占一行，行盒水平依次排列

• 包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域

• 绝大部分情况下，盒子的包含块，为其父元素的内容盒

• 块盒;

• 1.每个块盒的总宽度必须刚好等于包含块的宽度，宽度默认值auto，margin：0；width吸收能力强于margin；auto将剩余的空间吸收掉；

• 若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间全部被margin-right吸收掉，（和文字的排列方式有关）

• 2.每个块盒垂直方向上的auto值

• height:auto适应内容的高度

• margin;auto表示0

• 3.百分比取值

• padding、宽高、margin可取百分比

• 所有百分比相对包含块的宽度

• 高度的百分比:

• 包含块的高度是取决于子元素的，设置百分比无效

• 包含块的高度是取决于子元素的高度，百分比相对于父元素的高度

• 4.上下外边距的合并（父子元素相邻也合并）

• 两个外边距取最大值

• 浮动

• 应用场景：文字环绕、横向排列

• 基本特点：修改float属性值：默认值为none,left(左浮动，元素靠左靠上），right(元素靠右靠上）

• 当一个元素浮动后，元素必定为块盒（更改为display:block）

• 浮动元素的包含块为父元素的内容盒

• 浮动的表现：浮动的框可以向左向右移动时，直到它的外边缘碰到包含块或另一个浮动框的边缘为止。

• 盒子尺寸

• 1.宽度为auto时，适应内容宽度

• 2.高度为auto时，与常规流一致，适应内容的高度
  -3. margin为auto是为0

• 4.边框、内边距、百分比设置与常规流一样

• 部分无视和全部无视

• 1.使用float脱离文档流时，其他盒子会无视这个盒子，但其他盒子内的文本会为这个元素让出位置，环绕在周围（可以说是部分无视）

• 2.使用absolute脱离文档流的元素，其他盒子内的文本都会无视它（全部无视）
  如果一个元素被设置了position:absolute/fixed，则该元素不能被设置为float,因为这是两个不同的流，一个是浮动流，另外一个是‘定位流’

• 盒子排列

• 1.左浮动的盒子靠上靠左排列

• 2.右浮动的盒子靠上靠右排列

• 3.浮动盒子包含在排列的时候，会避开常规流的排列

• 4.常规流盒子在排列的时候，无视浮动盒子

• 5.行盒在排列时会避开浮动盒子如果没有文字在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫匿名行盒

• 6.外边距合并不会发生

• 高度塌陷：原因：常规流盒子的自动高度，在计算时，不会考虑浮动盒子

• 清除浮动：涉及的CSS属性：

• 1.clear:none

• both/left/right:清除左右浮动，该元素必须出现在所浮动的下方

• 2.clearfix::after{
content:''
display:block
clear:both
}

• 定位

• 手动控制元素在包含块的精确位置

• position属性值：

• 默认值：static静态定位（不定位）

• relative相对定位

• absolute绝对定位

• fixed固定定位

• 一个元素只要position的值不是static认为该元素是一个定位元素

• 定位元素会脱离文档流、相对定位除外

• 一个脱离文档流的元素：

• 1.文档流的元素摆放时，会忽略脱离了文档流的元素

• 2.文档流中元素计算自动高度时，会忽略脱离了文档流的元素

• 相对定位：

• 不会导致文档脱离文档流，只是让元素在原来位置上进行偏移

• 盒子的偏移不会对其他盒子造成任何影响

• 绝对定位

• 1.高度为auto，适应内容

• 2.包含块的变化：找祖先元素中第一个定位元素，该元素的填充盒

• 固定定位

• 1.其他情况和绝对定位完全一样

• 2.包含块不一样，固定为视口（浏览器的可视窗口）

• 定位的居中

• 多个定位元素重叠时：堆叠上下文，只有定位元素设置z-index有效，可以是负数，设置z-index，通常情况下值越大，越靠近用户，常规流和定位元素可覆盖浮动

• 绝对定位，固定定位一定是块盒

• 绝对定位，固定定位一定不是浮动

表单元素

• 主要用于收集用户数据
• 1.input元素，type='text'/'password'密码/'date'日期选择框/'serch'搜索框/'range'划块选择器/‘color’颜色选择/'number'数字输入框/'checkbox'多选框/‘radio’单选框
• value：输入框的值
• placeholder属性，显示提示的文本，文本框没有内容时显示
• input元素可以制造按钮，当type的值为reset,button,submit时
• 2.select元素，下拉列表选择框，mutble多选
• 通常和option元素配合使用（下拉列表的选项）
• selected='selected'默认选中
• <opygroup label=''></opygroup>下拉框选择分组，分组是不能选择的
• 3.fextarea元素：文本域，多行文本框，col横向多少字，rows可写多少行，没有空白折叠
• 4.按钮元素：button,type属性：reset,submit,button默认值是submit
• 5.表单状态：readonly表示只读，不会改变显示样式；disabled是否禁用，会改变现实样式
• 6.配合表单元素的其他元素
• label通常配合多选和单选框使用，显示关联
• <input id='radmore' type='radio'>可通过for属性让lable元素关联某一个表单元素，for属性书写表单元素id的值
• <lable for='radmore'>男</lable>
• 隐式关联，input套在lable之中
• datelist数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合使用，
• <datalist id='userAgen'>
<option value=""></option>
</datalist>
<input type="text" list='userAgen'>
• 7.form元素：通常会将整个表单元素放置到form元素的内部，作用是当提交表单时，会将form元素，内部的表单内容以后合适的方式提交到服务器。
• 8.fieldset元素，表单分组
• 9.美化表单元素
• 新的伪类
• focus
• checked单选和多选被选中的样式
• 常见用法：
• a.重置表单元素样式
• b.设置textarea是否允许调整尺寸，resize:both/none/horizontal(水平方向可以)/vertical(垂直方向可以)
• c.文本框边缘到内容的距离:方式一：使用padding，方式二：使用text-indent首行缩进
• d.控制单选和多选的样式

表格元素

表格不用使用于网页布局表格的渲染速度更慢

其他元素 元素周期表

• <abbr>缩写词
• <tim>提供给浏览器
• <b>区分同等重要的元素，主要用于加粗字体，dataTime属性
• <q>表示一小段引用文本，cite属性表示引用 来自哪里
• <blockquote>表示一大段引用的文本，cite属性表示引用 来自哪里
• <hr>分割线
• meta name ='' description='' content=''用于搜索引擎优化
• <link>链接外部资源，rel属性：relation，链接的资源和当前网页的关系，type属性：MIME类型链接的资源类型

其他

• 1.透明度
• opacity它设置的是整个元素的透明，它的取值0~1
• 在颜色位置设置alpha通道（rgba）
• 2.鼠标
• 用cursor设置，默认值auto
• cursor:url('../../icom')也可以自定义
• 3.盒子隐藏
• display:none不生成盒子
• visibility:hidden生成盒子，只是从视角上移除盒子，盒子仍然占据空间
• 4.背景图
• img属于HTML的概念
• 背景图属于css的概念
• 当图片属于网页内容时，必须使用img图片
• 当图片仅用于美化页面页面时，必须使用背景图
• 设计的css属性
• background-img:背景图会在X轴好Y轴重复
• background-reapt:
• background-size:预设值contain cover,类似于object-fit，数值或百分比相对于盒子
• background-position：center（横、纵向居中），top/botton/left/right,雪碧图（精灵图）（spirit）
• background-attachment:通常用它控制背景图是否固定，fixed
• 背景图和背景颜色混用
• 速写（简写）background:背景图，重复，尺寸，50% 50% ，100%，fixed,颜色
• 5.ifram元素：可替换元素
• 通常是行盒
• 通常显示的内容取决于元素的属性
• css不能完全控制其中的样式
• 具有行块盒的特点
• 6.@规则
• import:'路径'，导入另外一个文件
• charset=‘utf-8’必须写到第一行，告诉浏览器该字符编码
• 7.web字体和图标
• font-family:'...'
• 当用户电脑上没有安装相应字体时，强制让用户下载该字体
• 使用@font-face{
  font-family；‘名字’
  src='url=(../..);'
  }