其他分享
首页 > 其他分享> > 2021-01-30

2021-01-30

作者：互联网

HTML CSS
HTML
【第1章 初识HTML】
基本骨架

- !DOCTYPE：声明文档类型 供浏览器解读
- html：HTML标签

	- lang：语言，定义语言为英语：en，中文：zh-CN

- head：文档的头部

	- base

-### HTML总结 • 【第2章 标签】

//1.排版标签

段落：
换行：
水平线：
分区：div
范围：span
//2.文本格式化标签

倾斜：
文本删除线：
文本下划线：
缩小一号：
增大一号：
//3.预格式化标签

//4.&符号

大于/小于：&gt/&lt
版权：&copy
&符号：&amp
//5.超链接标签

用法

文本或图像
锚点：页面内部跳转

给a标签href值=#id名称

指定链接目标：href

资源文件：下载

图像、表格、音频、视频等都可以添加超链接

弹出方式：target

_blank新窗口打开

//6.图片标签

用法

指定图片目标：src

进一级：文件名/

退一级：…/

绝对路径：绝对地址

属性

高：height

边框：border

图片无法显示的提示：alt

鼠标移上去，显示的内容：title

拖动：draggable（true false）

如果只给一个宽或只给一个高，等比例缩放

//7.视频和音频标签

视频标签：video

兼容：MP4和WebM MP4和Ogg

如果浏览器不支持导致视频不能播放，video包裹的文字就会显示

音频标签：audio

兼容：MP3和WAV MP3和Ogg

如果浏览器不支持导致视频不能播放，audio包裹的文字就会显示

标签：多个资源：source

属性

循环播放：loop

自动播放：autoplay

停止播放：paused

是否静音：muted

在播放：played

//8.emmet语法

作用

快捷生成html相关标签的一种语法，其他软件需要安装
用法

生成一个标签：标签

生产多个标签：标签*数字

父子关系：父标签>子标签

兄弟关系：兄弟1+兄弟2

有id属性的标签：标签 #id名

有类属性的标签：标签 .类名

生成标签带内容：标签{内容}

计数器：标签名{$}*数字

指定标签的属性：标签[属性名=属性值]

//9.表格

分层

表格容器/行容器/单元格容器：table/tr/td
标签

表格标题标签：caption

题头：thead

正文：tbody

脚注：tfoot

属性

跨列合并：colspan

边框：border

边框颜色：bordercolor

背景颜色：bgcolor

单元格之间的间距：cellspacing默认2像素

单元格内容与边框的间距：cellpadding默认1像素

表格宽度：width

表格高度：height

水平对齐：align=“left/center/right”

垂直对齐：valign=“top/middle/bottom”

//10.列表

无序列表：ul

圆环：circle

方形：square

不显示标记：none

有序列表：ol

字母：a/A

罗马数字：i/I

自定义列表：dl/dt/dd

//11.表单

基本表单结构

	-     - 功能：提交数据
	-     - 表单域：form
	-     - 输入型控件必须要有name属性和value值
	-     - 表单控件、位于表单域以内

//12.内嵌标签

用法

属性

和超链接达成关联：target=“name”

边框：frameborder

页面滚动：scrolling

//13.嵌入对象：object

作用

是用来定义一个嵌入的对象，经常用来在页面中添加多媒体
（图像、音频、视频、Java applets、ActiveX、PDF、Flash等
属性

规定对象所属的表单：form（值：form_id）
指定供对象处理的数据文件的 URL：data（值：URL）
data属性中规定的数据的 MIME 类型：type
宽：width
高：height
名称：name
规定与对象一同使用的客户端图像映射的 URL：usemap
CSS
CSS总结 • 【第1章 CSS简介和选择器】
CSS简介

标签选择器：通过标签选择

标签名{ 样式属性:样式值; }
类选择器：通过class选择

不能以数字开头

id选择器；通过id选择

不能以数字开头，具有唯一性

通配选择器；通过*选择

交集选择器

用法：由两个选择器连接构成， span.类{} span#id{}

并集选择器

用法：通过逗号连接选择器， 选择器1,选择器2{}

层次选择器

父子：M>N{}

兄弟：M~N{}当前M下面的所有兄弟N

相邻：M+N{}当前M相邻的N标签

优先级

id选择器>类选择器>标签选择器>通配选择器

最优先：!important

伪类选择器

经过：hover

点击时：active

点击后：visited

默认超链接为：蓝色，下划线

匹配所有：any-link

结构伪类选择器

为父级的最后一个是该子元素的添加样式：last-child

选择父级的第N个是该子元素的添加样式：nth-child(1)
(指定：整数）(所有：N）(奇数：2N+1）(偶数：2N)

选择每个该元素，是其父级第一个：frist-of-type

选择每个该元素，是其父级最后一个：last-of-type

选择每个该元素，是其父级第N个：nth-of-type(1)

伪元素选择器

为第一行添加样式：first-line

在最前面添加内容：before

在最后面添加内容：after

CSS总结 • 【第2章 CSS样式】
//1.字体样式

大小：font-size

像素：px 百分比：% 倍数：em

小：x-small 大：large 正常：medium

粗细：font-weight

粗体：bold，强调700 自定义：100-900

字体：font-family

格式：“宋体”,“Arial”;
样式：font-style

斜体：oblique 带有斜体字体：italic

颜色：color

rgba函数：rgba(red,green,blue,透明度) rgba(255,0,0,0.5)

透明：transparent

字体抗锯齿：font-smoothing

光滑的像素级别字体，不是亚像素：antialiased

与灰度反锯齿呈现文本，不是亚像素：-moz-osx- grayscale

复合样式：font

//2.背景样式

背景颜色：background-color

背景图片：background-image

路径：url(路径)
背景图片平铺方式：background-repeat

水平平铺：repeat-x 垂直平铺：repeat-y 不平铺：no-repeat

背景图片位置：background-position

水平：(left/center/right) 垂直：(top/center/bottom)

背景图随滚动条的移动方式：background-attachment

按浏览器进行偏移：fixed

背景图片大小：background-size

数字：(px/%)、只给一个值(宽度)，第二个为auto

缩放至完全覆盖背景区域：cover

缩放至宽高适应背景区域：contain

复合样式：background

//3.段落样式

水平对齐方式：text-align

居中：center 右对齐：right 两端对齐：justify

匹配父级：match-parent

垂直对齐方式：vertical-align

顶线：top 中线：middle 底线：bottom

行高：line-height

数字：px或scale(相对于原来字体的比例)

首行缩进：text-indent

缩进：font-size的两倍，或2em[em相对单位]，永远跟一个字体设置的大小相同
文本装饰：text-decoration

下划线：underline

删除线：line-through

上划线：overline

文本大小写：text-transform（针对英文）

大写：uppercase

首字母大写：capitalize

字间距：letter-spacing

词间距：word-spacing（针对英文）

强制折行

不是那么强烈的折行：word-wrap:break-word;

内联内容方向：direction

右往左：rtl 表示：right-to-left

文字排版方式：writing-mode

垂直，左至右：vertical-lr 垂直，右至左：vertical-rl

文字描边：-webkit-text-stroke

描边颜色：-webkit-text-stroke-color

处理元素内的空白：white-space

文本不进行换行：nowrap

元素周围的线：outline

宽度：outline-width 颜色：outline-color 样式：outline-style
堆叠顺序：z-index

属性：数字，数字越大，就处于越顶层
不透明度：opacity

属性：从 0.0 （完全透明）到 1.0（完全不透明）
元素的可视效果(滤镜)：filter

高斯模糊：blur(px) 阴影：drop-shadow(h v 模糊半径 尺寸 颜色)

亮度：brightness(%) 对比度：contrast(%) 透明度：opacity(%)

饱和度：saturate(%) 灰度：grayscale(%) 深褐色：sepia(%)

色相旋转：hue-rotate(deg) 旋转：invert(%)

接收一个XML文件，设置SVG指定描点：url()

IE浏览器透明度alpha(opacity=30)、表示opacity(30%)

//4.边框样式

边框大小：border-width

边框颜色：border-color

圆角边框：border-radius

只设置一个角：border-top-left-radius

边框样式：border-style

虚线：dashed

点线：dotted

双线：double

合并边框：border-collapse

合并：collapse

单独选择一边：border-top/right/bottom/left

复合样式：border

基本写法：大小 样式 颜色
//5.列表样式

设置标记：list-style-type

方形：square

将图像作为标记：list-style-image

路径：url(路径)
设置标记的位置：list-style-position

复合样式：list-style

基本写法：标记 图片标记 标记位置
//6.图片边框：border-image

样式

图片边框向内偏移：border-image-slice

图片边框的宽度：border-image-width

边框图像区域超出边框的量：border-image-outset

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image-repeat

复合样式

//7.元素显示类型：display

块级元素：独占一行，可以控制宽高，宽度默认100%

行内元素：不独占一行，宽高设置无效，宽度默认为内容的宽

行内块元素：不独占一行，可以控制宽高，宽度默认为内容的宽

单元格元素：可以使用vertical-align属性

默认：table-cell 不占空间隐藏：disp：none
元素显示和隐藏：visibility

默认：visible，显示 占空间隐藏：hidden
//8.样式特性

层叠性

后来居上：后面的会替代前面的样式
继承性

子承父业：继承父元素的某些样式
//9.盒子模型

属性

内容高度：height

盒子边框：border

自动伸缩：box-sizing：border-box；

内边距：padding

行内效果不规范

子元素设置padding，父级盒子不发生变化

外边距：margin

垂直外边距会合并，取最长

背景颜色会填充到margin以内的区域（不包括margin区域）

顶部塌陷：子级设置顶部会让父级一起移动，给父级设置边框或内边距

或：溢出隐藏；浮动；定位

水平方向控制：margin-inline-start margin-inline-end

垂直方向控制：margin-block-start margin-block-end

//10.盒子阴影：box-shadow

参数1-6

垂直偏移量，正值向下，负值向上

模糊半径（可选）数值越大越模糊，0表示实心阴影

阴影尺寸（可选）

阴影颜色

内/外阴影（可选） 外部：outset 内部：inset

文字阴影参数1-4：text-shadow

垂直偏移量

模糊半径（可选）

阴影颜色

//11.浮动和清除

添加浮动：float

左浮动：left 右浮动：right

浮动的影响

父子影响：浮动的子级会受到父级影响

兄弟影响：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，
那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；
如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，
也就是说A的顶部总是和上一个元素的底部对齐。

清除浮动：clear

清除左浮动：left 清除右浮动：right 清除两端浮动：both

方法一，隔墙法，来一个标准流盒子，给边框。

方法二，溢出隐藏：overflow：hidden/auto/scroll

方法三，clearfix:after{content display clear}

了解清除浮动

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
//12.定位：position

静态定位：static

遵循正常文档流，top、right、bottom、left等属性无效
绝对定位：absolute

根据父级进行定位，找设置了定位（除了static）的祖先类元素（父类及以上），直到"body"

不具有margin，

相对定位：relative

遵循正常文档流，使用left、right、top、bottom等属性进行定位
定位时，原本该元素占据的空间位置不变，
以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。

对象不可层叠

固定定位：fixed

脱离正常文档流，使用left、right、top、bottom等属性以窗口左上角为参考点进行定位
控制溢出部分：overflow

滚动可见：scroll 自动：auto 继承：inherit

文字溢出显示省略号：text-overflow: ellipsis;

//13.鼠标指针样式：cursor

属性

自动：auto

文字：text

加载：wait

十字准星：crosshair

指针：pointer

帮助：help

移到：move

禁止：not-allowed

向北的箭头：n-resize

箭头朝右上：ne-resize

向东的箭头：e-resize

箭头朝右下：se-resize

向南的箭头：s-resize

箭头朝西南：sw-resize

向西的箭头：w-resize

箭头朝西北：nw-resize

放大：zoom-in

缩小：zoom-out

//14.浏览器私有前缀

-webkit：chrome、safar私有属性
-ms： IE浏览器私有属性
-moz ： firefox浏览器私有属性；
-o： Opera私有属性。
//15.tabindex属性

作用

可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序
用法

加入TAB键序列：1-32767的一个值

排除：-1

//16.锚点跳转过度效果：scroll-behavior

作用

使锚点跳转有过度效果
属性

实现平稳的滚动：smooth

//17.转变形态：transform

位移：translate

百分比：偏移自身的百分比

旋转：rotate

水平：rotateX(deg) 垂直：rotateY(deg)

设置中心点：transform-origin

方位名词：水平 垂直 像素：px

倾斜：skew

水平：skewX(deg) 垂直：skewY(deg)

放大缩小：scale

过度效果：transition

指定形态：形态 花费时间 何时开始

默认：ease 匀速：linear

加速：ease-in 减速：ease-out 加速然后减速：ease-in-out

复合样式

//18.动画：animation

样式

花费时间：animation-duration

运动曲线：animation-timing-function（默认：ease）

何时开始：animation-delay

播放次数：animation-iteration-count（无限次：infinite）

是否反方向：animation-direction
正向：normal 反向：reverse
先正向再反向：alternate 先反向再正向：alternate-reverse

运行或暂停：animation-play-state（运行：running）(暂停：paused)

状态：animation-fill-mode（默认：none ）

(forwards：播放完后，保持最后一帧）

(backwards：播放时，保持第一帧）

(both：两个模式都要)

复合样式

基本写法：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向
创建动画

开始：from 或百分比：0%

结束：to 或百分比：100%
@keyframes 动画名称{
from {
background-color: red;
}

to {
background-color: blue;
}
}
CSS总结 • 【第3章 弹性布局：flex】
主轴方向：flex-direction

默认、水平从左往右：row 水平从右往左：row-reverse

垂直从上往下：column 垂直从下往上：column-reverse
元素在主轴的对齐方式：justify-content

默认、左对齐：flex-start 右对齐：flex-end 居中：center

元素间距相等：space-between 元素两端间距相等：space-around
元素间距与两端间距相等：space-evenly
换行方式：flex-wrap

默认、不换行：nowrap

换行：wrap 逆方向换行：wrap-reverse
对齐div元素：align-items

默认、填满父级宽高：stretch

居中：center 位于开头：flex-start 位于结尾：flex-end
基线：baseline 设置为默认：initial 继承：inherit
多项多轴线的对齐方式，一个轴线没有作用：align-content

默认、轴线占满整个交叉轴：stretch

交叉轴起点：flex-start 交叉轴终点：flex-end 交叉轴中点：center
交叉轴两端，间隔平均分布：space-between
每根轴线两侧的间隔都相等：space-around
弹性布局属性

排列顺序，数值越小。排列越靠前：order

默认：0
放大比列：flex-grow

默认：0
缩小比列：flex-shrink

默认：1
在分配多余空间之前，项目占据的主轴空间：flex-basis

默认：auto

复合样式：flex
复合样式：flex

基本写法：放大比例 缩小比例 占据的主轴空间
单个或多个项目的对齐方式：align-self、可覆盖align-items属性

默认：auto 填满父级宽高：stretch

居中：center 位于开头：flex-start 位于结尾：flex-end
基线：baseline 设置为默认：initial 继承：inherit

CSS总结 • 【第4章 WAI-ARIA无障碍】
作用

为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范

在 WAI-ARIA概述 中对WAI-ARIA及其他支持文档进行了介绍
组成

role：(角色)标识了一个元素的作用

aria：描述了与之有关的事物（特征）及其是什么样的（状态）

role角色

alert：表示警告

dialog：表示Modal弹出窗
presentation：表示描述
application：表示应用

button：表示按钮

raido：表示单选框
checkbox：表示复选框
combobox：表示表单控件

grid：表示网格

gridcell：表示单元格
group：表示组合并

heading：表示标题、h1

listbox：表示列表框、select
option：表示选项
menu：表示菜单
menubar：表示菜单栏
menuitem：表示菜单项
menuitemradio：只能单选的菜单项
menuitemcheckbox：可复选的菜单项
ARIA属性

aria-activedescendant：当工具栏获取焦点时，它的子控件获取焦点

aria-atomic：表示区域内容是否完整播报。值为 true 和 false

aria-autocomplete：表示表单的自动完成，可选值有 inline 、 list 、both 和 none。

aria-busy：表示当前区域的忙碌状态。默认为 false。取值为 true 时，表示该区域正在加载。取值为 error 时，表示该区域验证无效

aria-controls：如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。

aria-dropeffect：表示拖拽效果。可选值有： copy , move , reference , execute , popup , none , 依次表示：复制，移动，参照，执行，弹出以及没有效果。

aria-flowto：如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。

aria-grabbed：拖拽中元素的捕获状态。默认为 undefined ，表示元素捕获状态未知。 true 表示元素可以捕获； false 表示不能被捕获。

aira-haspopup：true 表示点击的时候会出现菜单或是浮动元素； false 表示没有pop-up效果。

aria-label：定义一个字符串值标记当前元素。

aria-labelledby：一般用在区域元素上，对应的 id 一般为对应的标题或是标签元素的 id 关系型属性。

aria-live：默认为off, 表示不宣布更新；polite 表示只有用户闲时宣布；assertive 表示尽快对用户宣布；rude 表示即时提醒用户，必要的时候甚至中断用户。

aria-multiselectable：表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。

aria-owns：表示元素所拥有的、值为目标元素 id

aria-readonly：表示是否只读。默认为 false , 表示元素值可以被修改。

aria-relevant：表示区域内哪些操作行为需要做出反应。additions 新增时, removals 删除时, text 改变时, all 同时使用以上三个属性值。

aria-required：表示元素值是否必须，默认为false。

aria-secret：表示机密状态

aria-sort：排序，值：ascending (↑), descending (↓), none , other

aria-valuetext：定义等同于 aria-valuenow 可读的文本

aria-level：数值。表示等级

aria-posinset：数值。用在设置和获取一个集合内某项的当前位置

aria-valuemax：数值，允许的最大值

aria-valuemin：数值，允许的最小值

aria-valuenow：数值，表示当前值

ARIA状态

aria-checked：表示检查的状态，true 表示元素被选择；false 表示元素未被选择；mixed 表示元素同时有选择和未选择状态。

aria-disabled：表禁用状态， true 表示当前是非激活状态； false 表示清除非激活状态。
aria-expanded：表示展开状态，默认为 undefined , 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false 表示元素不是展开的。
aria-hidden：可选值为 true 和 false , true 表示元素隐藏(不可见)， false 表示元素可见。
aria-invalid：表示元素值是否错误的。默认为 false , 表示是OK的，如果为 true , 则表示值验证不通过。
aria-pressed：表示按下的状态，默认为 undefined , 表示按下状态未知； true 表示元素往下（按钮按下）； false 表示元素抬起； mixed 表示元素同时有按下和没有按下的状态。
aria-selected：表示选择状态，默认为 undefined ，表示元素选择状态未知。 true 表示元素已选择；false 表示未被选中。

标签：01,样式,标签,元素,默认,aria,2021,30,属性
来源： https://blog.csdn.net/lijunjie666888/article/details/113411377