华清远见重庆中心—HTML+CSS基础阶段技术总结

HTML

概述

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

文本格式化标签

b标签和strong标签
作用：加粗
区别：b标签只是单纯地加粗文本，strong标签有强调的语义，浏览器渲染时会更偏重strong

i标签和 em标签(emphasized)
作用：斜体
区别：em标签有强调的语义

del标签和 s标签
作用：删除线
区别：del标签有强调的语义

u标签和ins标签(insert text)
作用：下划线
却别：ins表有强调插入文本的语义

sup标签
作用：上标签，让元素显示在右上角
sub标签
作用：下标签，让元素显示在右下角

块元素、行内元素、行内块元素

块元素
特点：独占一行，可以包含其他块元素或行内元素
常见的块元素：div、p、h1、ol、ul、dl、tabel、form；
注意：p元素里不放块元素

行内元素
特点：不独占一行，一行里可以有多个行内元素
常见的行内元素：a、span、i、strong、em、label、cite、code；

行内块元素
特点：和相邻行内元素在同一行，但是之间会有空白缝隙
常见的行内块元素：img、input、select、textarea、button；

图片和路径

img元素
作用：显示图片
属性：
src 必要属性 定位图片的路径
alt 图片的描述信息，在图片无法正常显示时提示
title 图片的标题，鼠标悬停在图片上时显示
width 定义图片的宽度
height 定义图片的高度

路径
相当于电子路线，定位到计算机上的资源文件
相对路径：
相对当前文件的位置，寻找其他目标资源的路线
./或者文件名 在当前文件的相同目录下
./进入下一级文件
. ./返回上一级文件
绝对路径：
文件在计算机上的完整地址。通常以盘符开头

列表

无序列表 ul
li标签表示列表项
无序列表前是项目符号，可以通过ul的type属性修改项目符号
disc 实心圆点 默认
circle 空心圆
square 正方形

有序列表 ol
li标签表示列表项，li标签里可以放其他任何标签，常用是a标签
可以通过ul的type属性修改序号
阿拉伯数字 1 默认
A/a 英文字母
I/i 罗马数字

自定义列表 dl
dt 表示术语、标题
dd 表示对术语的解释
dt和dd标签里都可以嵌套其他标签

超链接

a标签
href 定义超链接跳转的路径
属性值：
_target 定义跳转的方式
_self 在当前窗口显示跳转之后的内容 默认
_blank 空白页跳转之后的内容
_parent 在父页面的窗口显示

锚点
定位的点
设置id属性，a标签里的href属性=#对应锚点的id属性名""

表格

table标签
tr(table row)一行
td(table data)表示一个单元格，没有加粗效果
th(table header cell)表示标头单元格，有加粗效果

表格常用属性
border 表格的边框，值是数字
cellspacing 单元格之间的空隙 值是像素px
width 表格的宽度
cellpadding 单元格的内边距 值是像素px
align 控制表格的位置 值可以是center left right

合并单元格
rowspan 合并行 rowspan = "2"合并两行 保留的是最上一行的数据
colspan 合并列 colspan = "2"合并两列 保留的是目标单元格的数据
目标单元格 是你要保留数据的单元格 这两个属性写在目标单元格的标签里

表单

表单域 form
name 表单域的名字 一个html中可以有多个表单域
action 设置处理表单的服务器程序的url地址
method 设置提交表单的方式
get 把提交的参数附在action的url地址中 会显示在地址栏 一般用于不需要保密的信息 比如分页
post 把提交的参数包含在表单体中 不会显示在地址栏

表单元素input
表单元素需要放在表单域中
type属性：

text 输入框
passwor 密码框
radio 单选按钮
checkbox 复选框
date 日期 年/月/日
month 年/月
time 时间
datetime-local 年/月/日 时间
color 颜色选择框
file 文件选择框
submit 提交按钮
reset 重置按钮
button 自定义按钮

其他属性
name 定义元素的名字 它的值来自输入的值或者value中设置的值
一组单选按钮的name属性值应该设置为同一个值，被选中的按钮的value值会赋值给name
一组复选框的name属性值应该设置为同一个值，被选中的复选框的value值构成一个数组

value 设置元素的值
placeholder 设置输入框中的提示文字
required 设置必填项，如果不填将会弹出提示信息
checked 在打开页面时，让元素选中状态
readonly 设置元素为只读
disabled 设置元素不可用

内联框架

内联框架 iframe
在页面中嵌入另一个页面
属性：

src 设置嵌入页面的url地址
width 设置内联页面的宽度 height 设置内联页面的高度

实现点击链接切换页面
为iframe页面设置name属性
a链接target = "iframe的name属性值"
a链接的herf中写将要跳转的页面url地址

音频、视频

音频 audio

src 设置音频的url地址
controls 设置显示音频控件，属性值设为controls，显示控件
muted 设置音频为禁音

视频video

src 设置视频资源的地址
controls 设置显示视频控件
width 设置视频的宽度 height 设置视频的高度

CSS

概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css的引入方式

1. 外部样式
   通过head标签里的link标签引入外部css样式文件来写样式
2. 内部样式
   通过head标签里的style标签来写
3. 行内/内联样式
   写在标签内，通过style属性来设置，不同的样式，通过;分割

不同位置引入的样式的优先级: 内联样式 > style标签 > 外部文件

常用的选择器

id选择器
必须！唯一指在后面JS操作中会产生的影响，或者需要对a标签进行锚点跳转时会有影响，会进行就近原则
格式规范：

#设置的样式名{
	样式属性: 样式属性值;
}

class选择器
需要设置相同样式的标签中添加class属性名—通过class=“样式名”
如果要添加多个/需要再对其添加某一个单独设置的样式，就在自定义样式名后，通过空格分割
-----例如
class="set-color set-align
格式规范：

.clss属性名{
	样式属性: 样式属性值;
}

元素/标签选择器
如果说整个页面中！只有一个标签！需要对其设置样式， 那么就可以使用这个选择器
用法：
格式规范：

标签选择器h3{
	样式属性: 样式属性值;
}

注意：如果说有多个相同的标签，那么不推荐使用该选择器，因为他会选择页面中所有对应标签

通配符选择器
选择所有元素
格式规范：

*{
	样式属性: 样式属性值;
}

基础选择器的优先级
优先级由大到小排列如下：

id选择器 > class类选择器 > tag标签选择器

派生选择器

后代选择器
父选择器 子选择器----父亲后面的所有相同类型子元素都选择
选择box-outer里的p元素

.box-outer p{
	color: brown;
}

子代选择器
父选择器>子选择器----父亲的直接子元素选择
选择box里的第一个p元素

.box>p{
	color: brown;

兄弟选择器
前面的一个选择器+下一个选择器
选择临近的一个兄弟，紧挨着的兄弟关系

p+span{
	color: red;
}

哥哥后面的所有弟弟
前面的一个选择器~下一个相同类型的所有选择器
选择后面同类型的所有选择器

p~span{
	color: blue;
}

属性选择器

选择拥有该XXX属性名的标签

标签[XXX属性名]{
	color: #ff0000;
}

选择属性为XXX,值为yyy的标签

标签[XXX属性名="yyy值"]{
	color: #ff0000;
}

选择属性为XXX,值为yyy开头!的标签

标签[XXX属性名^="yyy值"]{
	color: #ff0000;
}

选择属性为XXX,值为yyy结尾!的标签

标签[XXX属性名*="yyy值"]{
	color: #ff0000;
}

动态伪类

伪类选择器
伪类指的是一类标签但是，这类标签不一定需要具备class属性
hover：鼠标悬停时的伪类

标签:hover {
	color:green
}

active：鼠标点击时的伪类

标签:active{
	color:blue;
}

visited：鼠标点击后的伪类

标签:visited{
	color:black;
}

结构伪类

父元素中的第一个子元素
父元素总体！子元素中的第一个

子标签:first-child

父元素中同类型！子元素中的第一个

子标签:first-of-type

父元素中的最后一个子元素
父元素总体！子元素中的最后一个

子标签:last-child

父元素中同类型！子元素中的最后一个

子标签:last-of-type

父元素中第几个指定类型的节点 */

nth-of-type(n)

nth-child 和 nth-of-type 可以使用n来代表所有的子元素
nth-child 和 nth-of-type 的区别
nth-child 先找到指定位置的节点，再判断节点是否是指定类型
nth-of-type 先找指定类型的元素，再判断位置是第几个节点

伪元素

伪元素
伪装成子元素—表示页面中一些不时真实存在的元素，又有位置，又可以显示在需要添加伪装子元素的元素上添加

标签::before
在元素内容！的前面！创建子伪元素的内容！

p::before{
	//里面必须要有content属性，值可以为文字""/图片url("图片地址")
	content: "这是添加在前面的伪元素内容";
	color: white;
}

标签::after
在元素内容！的后面！创建子伪元素的内容！

p::after{
	//里面必须要有content属性，值可以为文字""/图片url("图片地址")
	content: "这是添加在前面的伪元素内容";
	color: white;
}

元素分类

块元素block
独占一行，可以设置宽高------div、h、p

行内元素inline
不会独占一行，不可以设置宽高，根据内容来显示的宽度span、img（但是img可以设置宽高）

行内块元素inline-block
不会独占一行，但是可以设置宽高 为了转换

常用单位

长度单位

• px像素单位，比较常用，绝对单位，像素越小，屏幕显示就越清晰
• rpx在移动端常用，在iPhone6机型下为标准，1rpx = 0.5px 1px =2rpx 375px = 750rpx
• em相对单位，相对于父！元素，根据父！font-size的大小为基准
• rem----相对单位，相对于根！元素，根据根！font-size的大小为基准1rem=20px
• h\vm----相对单位，相对于窗口----存在兼容性问题，对于移动端使用----不常用 1vm=窗口1% 1vh=窗口1%

百分比单位
多种情况可以使用根据父元素调整

颜色单位

• rgb值: 在计算机图形学中，红(red)绿(green)蓝(blue)是计算机的三原色
  使用rgb函数来定义一个颜色值，其中第一个参数代表红色，第二个参数代表绿色，第三个参数代表蓝色
  每个参数的取值范围是：0~255 (256是一个字节的大小Byte)

background-color: rgb(13, 247, 212);

• rgba值: rgb代表红绿蓝，a(alpha通道)代表透明度，取值范围0~1，值越大，越不透明

background-color: rgba(0, 0, 0, 0.2);

• HSL值: H色调 S饱和度（灰度） L代表亮度

background-color: hsl(0deg, 100%, 50%);

• 十六进制值: 以#开头
  十六进制数由1到10超过10的部分由A~F表示
  前两个数代表红色，中间两个数代表绿色，最后两个数代表蓝色
  background-color: #2233ff; 如果颜色值成对出现，可以简写为： #23f

background-color: #f00;

• 带透明度的十六进制

background-color: #ff00ff7b;

常用样式

元素宽高 width height
背景颜色 background-color
字体颜色 color
字体样式 font-family
字体呈现样式 font-weight

normal 正常情况（默认）
italic 斜体

字体大小 font-size
字间距 letter-spacing
行高 line-height
文字水平位置 text-align

left: 文本靠左对齐
center: 文本居中
right: 文本靠右对齐

文字装饰 text-decoration

line-through删除线
overline上划线
underline 下划线

文本装饰线位置 text-decoration-line

overline: 文本上面
underline: 文本下面
line-through: 文本中间
none: 隐藏装饰线

文本溢出隐藏overflow: hidden;
内容不换行white-space: nowrap;
文本溢出显示省略号text-overflow: ellipsis

背景

背景图

background-image: url(图片路径);

背景图的重复方式 background-repeat

no-repeat: 不重复
repeat: 横纵方向都重复
repeat-x: 横向重复
repeat-y: 纵向重复
round: 让图片正好填充满整个背景，但图片可能被拉伸
space: 有间距的铺满背景，但图片不会拉伸也不会被裁剪

背景图尺寸 background-size

auto: 保持图片原始大小
cover: 让图片完整覆盖整个背景，但宽高比不变
contain: 让背景完全包含整个图片，但宽高比不变

图片左上角对齐位置 background-origin
若不设置概述性，默认情况是padding-box

content-box: 图片左上角对齐内容区域的左上角
padding-box: 图片左上角对齐内边距的左上角
border-box: 图片左上角对边框的左上角

背景图的裁剪区域 background-clip
超过该区域的不部分将被裁剪掉

content-box: 超出内容区域的部分将被裁剪掉
padding-box: 超出内边距区域的部分将被裁剪掉
border-box: 超出边框区域的部分将被裁剪掉

背景图在背景中的位置 background-position

top: 向上对齐左右居中
bottom: 向下对齐左右居中
left: 向左对齐上下居中
right: 向右对齐上下居中
center: 居中

第一个数字代表图片左上角x坐标，第二个数字代表图片左上角y坐标
background-position: 50px 100px;

计算函数 calc
函数中可以由任意单位的尺寸进行运算
计算的符号左右有空格
计算属性常用于设置元素宽高 或 设置元素位置

盒模型

盒模型是浏览器对html元素的宽高大小 元素间间距的解析方式
盒模型的四个部分

内容 content
内边距 padding 内容区域到边框的距离
边框 border
外边距 margin

内边距的四种写法
当设置一个值的时候代表每一边内边距都为 30px

padding: 30px;

第一个值代表上下内边距 第二个值代表左右内边距

padding: 20px 50px;

设置 上 右 下的内边距 左侧内边距等于右侧内边距

padding: 10px 20px 30px;

设置上右下左的四边内边距

padding: 10px 20px 30px 40px; 

外边距margin同上

边框 border

solid实线
dashed虚线 
dotted小点 
double双框 
inset嵌入

边框颜色 border-color
边框弧度 border-radius
透明度 opacity
盒子阴影 box-shadow

浮动

使元素从文档结构中浮出（漂浮出来），摆脱文档结构（成为独立浮空单位）

浮动的特点
浮动会漂浮出文档，后续元素将填充到当前浮动元素的位置上来。
浮动的元素前面，如果还有块级元素，那么浮动出来的元素距离窗口顶部的距离，保持不变
当多个元素向相同方向浮动时，文档中上面一个元素会放在下面一个一个元素的前面。

浮动float

待选项：
left: 浮动到左侧
right: 浮动到右侧

由于所有子元素都浮动出去了，所以导致父元素高度坍塌(高度为零)

清除浮动

1. 给高度坍塌的父元素添加overflow: hidden; 可以恢复高度
2. 给高度坍塌的父元素的下一个元素添加 clear: both

定位

定位是css中用于确定元素位置的属性
定位的类型有以下几种:

绝对定位

参考系: 默认参考视口(viewport)
绝对定位的元素将浮出文档流

position: absolute;

可以通过 top bottom left right 来设置坐标
他们表示元素离视口 上下左右 距离多少

绝对定位的参考系 可以修改
给绝对定位元素的先祖元素添加一个 position: relative;可以将该先祖变成参考系
static 是没有定位的意思

相对定位

参考系: 自己

position: relative;

top bottom left right 代表的含义为
相对自己的上边缘下边缘左边缘右边缘多少距离

固定定位

参考系: 视口
该定位方式，当滚动条发生变化时，位置不会变化

position: fixed;

粘性定位

该定位基于用户滚动的位置，它会固定在目标位置。

position: sticky;

滚动条、鼠标形状

若希望页面出现滚动条，则需要满足以下条件:
内容区域的大小 > 容器区域的大小

超出容器部分隐藏

overflow: hidden;

内容超出容器就产生滚动条 否则没有滚动条

overflow: auto;

无论什么情况都显示滚动条

overflow: scroll;

鼠标形状 cursor

待选项:
default: 系统默认样式
move: 移动样式，是一个十字
not-allow: 禁止符号
pointer: 小手指
wait: 等待符号
text: 文本编辑光标

布局

按照功能设计页面，进行页面区域的划分，这个过程叫做布局
布局方法有哪些

1. div + css 布局: div 用于划分功能区域，css 用于设置元素大小和位置
2. table 表格布局: 使用表格对页面进行区域划分
3. flex 弹性盒布局: 按照主要轴和交叉轴方式进行元素排列
4. grid 栅格 网格 布局: 将页面按行列进行布局划分

flex

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

父元素上的属性

必须在父元素上写display:flex 来开启flex功能

规定主要轴 flex-direction
默认情况，主要轴就是横轴

row: 默认值，规定横向为主轴
column: 规定纵向为主轴
row-reverse: 规定横向为主轴，同时反向
column-reverse: 规定纵向为主轴，同时反向

换行方式 flex-wrap

wrap: 换行
nowrap: 不换行
wrap-reverse: 换行且反向

元素在主要轴上的排列方式 justify-content

flex-start: 对齐主轴起始点
flex-end: 对齐主轴结束点
center: 在主轴上居中
space-around: 每个子元素两侧的间隔相等
space-between: 两端对齐，中间平均分布
space-evenly: 平均分布

定义元素在交叉轴上的排列方式 align-items

flex-start: 对齐次要轴起始点
flex-end: 对齐次要轴结束点
center: 在次要轴上居中居中
baseline: 根据子元素中的文本进行文本高度对齐
stretch: 当不设置宽或高时，子元素的宽度或高度会自动占满整个容器

子元素上的属性

必须在父元素上写display:flex 来开启flex功能

排序 数字越小越靠近主要轴的起始位置

设置元素在flex容器中的宽度或高度 flex-basis

0: 不设置元素宽或高
auto: 元素本身的宽或高
其他长度: 设置元素宽或高，优先级高于width或height

当主要轴上没有铺满时 设置flex-grow的元素会填满剩余区域
flex-grow的值代表撑宽之后的元素 占主要轴大小的比例值,数字越大比例越大

元素沾满整行时压缩元素 flex-shrink

值为0: 不压缩
大于零的值，元素将被压缩，且值越大压缩得越厉害

设置子元素在交叉轴上的排布方式align-self
其待选项和 align-items 相同

grid布局

父元素上使用 display: grid 开启网格布局

行高
每个参数代表每行的高度
参数的个数代表有多少行
单位 fr 代表 一行或一列 占总长度的多少份

grid-template-rows: 1fr 1fr;

列宽
每个参数代表每列的宽度
参数的个数代表有多少列

grid-template-columns: 1fr 1fr 1fr;

行间距 row-gap: 20px;
列间距 column-gap: 20px;

行列间距
第一个参数是行间距
第二个参数是列间距

gap: 10px 50px;

网格线的起始行线 grid-row-start: 2;
网格线的结束行线 grid-row-end: 3;
网格线的起始列线 grid-column-start: 3;
网格线的结束列线 grid-column-end: 4;

同时设置网格线的起始和结束行线 grid-row: 1/3;
同时设置网格线的起始和结束列线 grid-column: 2/3;