WEB前端基础（HTML+CSS+JavaScript）（上）Lyb的博客-

当前部分是基于HTML与CSS总结，后续有JavaScript更新~

HTML概述(阶段1 入门概述)

一、HTML

超文本标记语言

第一个HTML页面

一、HTML基本结构

HTML模板简要说明

1. 声明

2. HTML基本结构

二、HTML元素

1. 元素
   1. 闭合元素
      1. ‘’
   2. 空元素
      1. ‘’
2. 标签
3. HTML元素属性
   1. 属性名
   2. 属性值

三、HTML头部

1. 元素

   • ‘
   • ’元素：定义HTML页面中所以相对URL的根URL。
   • ‘元素：定义HTML页面引入的外部资源
     • ‘’
     • ‘’
   • ‘元素：定义HTML页面的css样式
   • ’元素：定义HTML页面的元数据信息，例如编码格式，作者，关键字等
     • ‘’
   • ‘

四、HTML注释

CSS概述

层叠样式表

如何使用css

一、内联样式

• “
  这是测试内容

  ”

二、内嵌样式表

• “

三、外联样式表

1. 创建一个为.css的文件
2. 将这个.css文件放到link标签中
   1. “”
      1. rel属性：用来定义引入文件与当前HTML页面的关系
      2. href属性：定义映入的URL

四、css语法结构

1. 选择器
2. 声明块
3. 注释
   1. /* 内容 */

基本选择器(阶段2 CSS选择器)

一、元素(类型)选择器

元素名{

属性：属性值；

}

二、类(Class)选择器

.className{

属性：属性值；

}

三、ID选择器

#ID{

属性：属性值；

}

四、通用(通配符)选择器

*{

属性：属性值；

}`

五、属性选择器

1. [attr]属性选择器：通过HTML元素的attr属性名来定位具体的HTML元素
2. [attr=value]属性选择器：通过HTML元素的attr属性名并且属性值为value来定位具体HTML元素
3. [attr~=value]属性选择器：通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位具体的HTML元素
4. [attr|=value]属性选择器：通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位具体HTML元素
5. [attr^=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value开头来定位的HTML元素
6. [attr$=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value为结束来定位具体的HTML元素
7. [attr*=value]属性选择器：通过HTML元素的attr属性名并且属性值是包含value来定位具体HTML元素

选择器的优先级

1. 分配给指定的CSS声明的一个权重，由匹配的选择器中的每一种选择器类型的数值决定
2. 当优先级与多个CSS声明中的任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
3. 当同一个元素有多个声明的时候，优先级才会有意义

选择器类型的权重

1. 通配符选择器的优先级为0
2. 类型选择器的优先级为1
3. 类选择器和属性选择器的优先级为10
4. ID选择器的优先级为 100
5. 内联样式的优先级为1000

• 内联样式总会覆盖内嵌样式表和外联样式表中的任何样式

层级选择器

一、层级选择器种类

1. 后代选择器
   1. 选择器1 选择器2 {
      属性 : 属性值;
      }
2. 子级选择器
   1. 选择器1>选择器2 {
      属性 : 属性值;
      }
3. 相邻兄弟选择器
   1. 选择器1+选择器2 {
      属性 : 属性值;
      }
4. 普通兄弟选择器
   1. 选择器1~选择器2 {
      属性 : 属性值;
      }

组合选择器

一、组合并集选择器

选择器1, 选择器2, ... ... {
属性 : 属性值;
}

二、组合交集选择器

伪类选择器

一、伪类选择器的种类

1. 动态伪类选择器：常与元素配合使用，用来表示用户的某种行为状态
2. 目标伪类选择器：常与 <a> 元素配合使用，用来定位当前 HTML 页面中唯一一个目标元素。
3. 元素状态伪类选择器：常与表单组件元素配合使用，用来表示表单组件的某种状态。
4. 结构伪类选择器：常与 <table> 元素配合使用，利用 HTML 元素之间的关系定位目标元素。
5. 否定伪类选择器：用来定位与指定选择器不匹配的 HTML 元素。

二、否定伪类选择器

:not(selector) { 属性 : 属性值; }

伪元素选择器

一、语法

选择器::伪元素 { 属性 : 属性值; }

伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

二、::before 和 ::after 伪元素

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

三、::first-letter 伪元素

为第一个字设置格式

四、::first-line 伪元素

为第一行文本设置样式

五、::selection 伪元素

颜色(阶段3：颜色与单位)

一、颜色值的类型

色彩关键字

RGB色彩模式

• 十六进制符号#RRGGBB
• 函数符rgb

HSL色彩模式

是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

• **H **表示色调，其值范围为 0 ~ 360 之间的一个角度
• S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
• L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色

二、透明度

• 如果值为 0 或 0.0 则表示完全透明
• 如果值为 0.5 则表示半透明
• 如果值为 1 或 1.0 则表示不透明

单位

一、CSS单位

1. 绝对长度单位
   • px
2. 相对长度单位
   • em父元素的字体大小
   • ex字符”x”的高度
   • ch数字”0″的宽度
   • rem根元素的字体大小
   • lh元素的line-height
   • vw视窗宽度的1%
   • vh视窗高度的1%
   • vmin视窗较小尺寸的1%
   • vmax视图大尺寸的1%

结构化元素(阶段4：HTML—CSS文本)

一、结构化元素

• 段落p
• 粗体b
• 斜体i
• 上标元素sup
• 下标元素sub
• 换行符br
• 水平线元素hr

二、HTML5结构化元素

1. “

   元素

   用来定义HTML页面中可独立分配或可以复用的结构

2. “

   元素

   定义页面中的独立部分

3. “

   定义页面中的导航链接，菜单，目录和索引

4. “

   侧边栏或者标注框

5. “

   元素

6. “元素

7. “

三、转义字符

语义化元素

一、什么是语义化元素

具有具体含义的元素

1. 加粗
2. 强调，斜体
3. “
   

   缩进，引用

4. 加引号
5. 引文元素
6. 定义元素
7. “
   
   地址元素
8. 内容修改元素

字体样式

一、字体样式

1. font-family
   • 设置一个字体名或字体族名
     • 通用字体族名
       • serif：带衬线字体
       • sans-serif：无衬线字体
       • monospace：等宽字体
       • cursive：草书字体
       • fantasy：具有特殊艺术效果的字体
   • 设置多个字体名或字体族名
2. font-size
   • 字体大小
     • 绝对大小值
     • 相对大小值
       • larger
       • smaller
     • 长度值
       • px
       • em
       • rem
       • ex
     • 百分比值
3. font-weight
   • 粗细程度
     • 绝对值
       • normal=400
       • bold=700
     • 相对值
       • lighter：细
       • bolder：粗
     • 数字值
4. font-style
   • italic
   • oblique
5. font
   • 作为简写形式
     • font-style，font-variant，font-weight属性必须定义在font-size属性之前
     • line-height属性必须定义在font-size之后
     • font-family属性必须最后定义
   • 系统字体
     • caption用于标题控件的系统字体
     • icon用于标签图标的系统字体
     • menu菜单中的
     • message-box对话框
     • small-caption小标题控件
     • status-bar窗口转态栏

二、文本样式

1. text-decoration文本装饰

   • text-decoration-line：元素文本修饰类型
   • text-decoration-color：文本修饰线的颜色
   • text-decoration-style：线的样式

2. line-height行间距

   • 
   • normal关键字
     • 默认为1.2
   • 数字值
   • 长度值
   • 百分比值

3. letter-spacing字母间距

   • normal
   • 长度值：可为负

4. word-spacing单词间距

   • normal
   • 长度值
   • 百分比值

5. text-align水平对齐方式

   • start：左到右left，right
   • end：左到右right，left
   • left
   • right
   • center
   • justify：文字向两侧对齐，对最后一行无效
   • justify-all：强制使最后一行两端对齐

6. vertical-align垂直对齐方式

   • 应用于内联元素
     • 相对于父级元素的值
       • baseline：使元素基线跟父元素的基线对齐
       • sub：使元素基线跟父元素下标基线对齐
       • super：使元素基线跟父元素上标基线对齐
       • text-top：使元素顶部于父元素字体顶部对齐
       • text-bottome：使元素底部与父元素字体底部对齐
       • middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
     • 相对于行的值
       • top：使元素及其后代元素的顶部与整行的顶部对齐。
       • bottom：使元素及其后代元素的底部与整行的底部对齐
   • 应用于表单单元格的值
     • baseline
     • top
     • middle
     • bottom

7. text-indent文本缩进

   • 长度值：可为负
   • 百分比值
   • each-line：文本缩进影响第一行
   • hanging：反转缩进：除了第一行

8. text-shadow文本阴影

   • color：颜色
   • offset-x：阴影在水平方向的偏移量
     • 小于0,左偏移
     • 等于0，不偏移
     • 大于0，右偏移
   • offset-y：阴影在垂直方向的偏移量
     • 上偏移，不偏移，下偏移
   • blur-raduis：阴影模糊半径
     • 值越大，模糊半径越大

9. overflow-wrap

   • 

10. word-wrap，word-break文本换行

    • break-all
    • keep-all

11. white-space处理空白

    • normal

    • nowrap

    • pre

    • pre-wrap

    • pre-line

    • break-spaces