HTML CSS xmind总结
2024-06-10 14:09:01
HTML CSS
HTML
【第1章 初识HTML】
- 基本骨架
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><title></title></head><body></body>
</html>- !DOCTYPE：声明文档类型 供浏览器解读- html：HTML标签- lang：语言，定义语言为英语：en，中文：zh-CN- head：文档的头部- base- 可以统一添加属性- <base 属性="属性值">- meta：charset- 字符集是多个字符的集合。- 计算机要准确处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。- utf-8包含全世界所有国家需要用到的字符- GBK包含全部中文字符，加入对繁体字的支持- meta：name/content- 设置关键词：keywords- 设置描述信息：description- 设置网站作者：author- 渲染器：renderer- style- 定义内容css样式- title：文档的标题- body：文档的主体- 超文本标记语言- 超文本：超越文本，超链接文本- 注释：<!--内容-->
### HTML总结 • 【第2章 标签】- //1.排版标签- - 标题：<h1></h1>，h1最大 h6最小- 段落：<p></p>- 换行：<br>- 水平线：<hr>- 分区：div- 范围：span- //2.文本格式化标签- - 加粗：<b></b> <strong><strong>- 倾斜：<i></i> <em></em>- 文本删除线：<s><s> <del><del>- 文本下划线：<u></u> <ins></ins>- 缩小一号：<small></small>- 增大一号：<big></big>- //3.预格式化标签- - <pre></pre>- - 作用：保留编码时的格式- //4.&符号- - 空格： - 大于/小于：>/<- 版权：©- &符号：&- //5.超链接标签- 用法- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>- 锚点：页面内部跳转- - 给标签一个id和值- 给a标签href值=#id名称- 指定链接目标：href- - 本地html，或者远程url页面地址：跳转- 资源文件：下载- 图像、表格、音频、视频等都可以添加超链接- 弹出方式：target- - _self默认值- _blank新窗口打开- //6.图片标签- 用法- <img src="图片URL">- 指定图片目标：src- - 同一级：目标名称- 进一级：文件名/- 退一级：../- 绝对路径：绝对地址- 属性- - 宽：width- 高：height- 边框：border- 图片无法显示的提示：alt- 鼠标移上去，显示的内容：title- 拖动：draggable（true false）- 如果只给一个宽或只给一个高，等比例缩放- //7.视频和音频标签- 视频标签：video- - <video src="视频URL"></video>- 兼容：MP4和WebM MP4和Ogg- 如果浏览器不支持导致视频不能播放，video包裹的文字就会显示- 音频标签：audio- - <audio src="音频URL"></audio>- 兼容：MP3和WAV MP3和Ogg- 如果浏览器不支持导致视频不能播放，audio包裹的文字就会显示- 标签：多个资源：source- 属性- - 显示控件：centrols- 循环播放：loop- 自动播放：autoplay- 停止播放：paused- 是否静音：muted- 在播放：played- //8.emmet语法- 作用- 快捷生成html相关标签的一种语法，其他软件需要安装- 用法- - 生成骨架：!+tab- 生成一个标签：标签- 生产多个标签：标签*数字- 父子关系：父标签>子标签- 兄弟关系：兄弟1+兄弟2- 有id属性的标签：标签 #id名- 有类属性的标签：标签 .类名- 生成标签带内容：标签{内容}- 计数器：标签名{$}*数字- 指定标签的属性：标签[属性名=属性值]- //9.表格- 分层- 表格容器/行容器/单元格容器：table/tr/td- 标签- - 表头单元格标签：th、文字会居中且加粗- 表格标题标签：caption- 题头：thead- 正文：tbody- 脚注：tfoot- 属性- - 跨行合并：rowspan- 跨列合并：colspan- 边框：border- 边框颜色：bordercolor- 背景颜色：bgcolor- 单元格之间的间距：cellspacing默认2像素- 单元格内容与边框的间距：cellpadding默认1像素- 表格宽度：width- 表格高度：height- 水平对齐：align="left/center/right"- 垂直对齐：valign="top/middle/bottom"- //10.列表- 无序列表：ul- - 实心圆(默认值)：disc- 圆环：circle- 方形：square- 不显示标记：none- 有序列表：ol- - 数字(默认值)：1- 字母：a/A- 罗马数字：i/I- 自定义列表：dl/dt/dd- - dt是小标题、dd是对dt的解释- //11.表单- 基本表单结构- <form action=""><input name="key" type="text"><input type="submit">
</form>- - 功能：提交数据- - 表单域：form- - 输入型控件必须要有name属性和value值- - 表单控件、位于表单域以内- 表单控件：input- - 数据的提交去向：action- 数据的提交方式：method：get/post- 说明标签、用id产生关联：label- - 文本框：text- 密码框：password- 邮箱框：email- 数字框：number，间隔属性：step- 搜索框：search- - 文本域：textarea- 文件域：file- 选择域：select/optgroup/option- 隐藏域：hidden- 滑块：range- - 提交按钮：submit- 单选按钮：radio- 复选按钮：checkbox- 图片按钮：image- 普通按钮：button- 清空按钮：reset- 属性- - 名称：name- 提交的值：value- 显示宽度：size- 控制输入的字符数：maxlength- 最小：min- 最大：max- 输入为空显示的字符：placeholder- 自动获得光标：autofocus- - 必填项：required- 只读：readonly- 禁用：disabled- 单选/多选设置默认选中：checked- 正则表达式：pattern- 设置上传的文件类型：accept- 下拉列表允许多选：multiple- 文本域防止拖拽：resize：none;- - name会变成变量名- value会变成变量值- 表单type类型- - 接收URL：url- 接收电话号码：tel- 表单属性- - 自动完成：autocomplete、取值 no 和 off- 不进行内容验证：novalidate- //12.内嵌标签- 用法- <iframe src="引用页面地址" name=""><iframe>- 属性- - 引用地址：src- 框架名：name- 和超链接达成关联：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简介- - CSS是cascading Style Sheet的缩写- CSS全称为"级联样式表"，通常又称为“风格样式表"用于网页风格设计- CSS的三种引入方式- - 行内式：<divstyle="样式属性:样式值;"></div>- 内嵌式：<style></style>内写样式- 外链式：<link rel="stylesheet" href="资源地址" rel="和资源的关系">- 插入图标：<link rel="icon" href="图标地址" type="image/x-icon">- JS里写样式：背景颜色style.backgroundColor="red"- 选择器- 标签选择器：通过标签选择- 标签名{ 样式属性:样式值; }- 类选择器：通过class选择- - .class值{ 样式属性:样式值; }- 不能以数字开头- id选择器；通过id选择- - #id名{ 样式属性:样式值; }- 不能以数字开头，具有唯一性- 通配选择器；通过*选择- 交集选择器- - 从多个相同的元素中选择想选择的元素- 用法：由两个选择器连接构成， span.类{} span#id{}- 并集选择器- - 同时给各个选择器添加相同的部分样式- 用法：通过逗号连接选择器， 选择器1,选择器2{}- 层次选择器- - 后代：M N{}- 父子：M>N{}- 兄弟：M~N{}当前M下面的所有兄弟N- 相邻：M+N{}当前M相邻的N标签- 优先级- - 行内式>内嵌式>外链式- id选择器>类选择器>标签选择器>通配选择器- 最优先：!important- 伪类选择器- - 未点击：link- 经过：hover- 点击时：active- 点击后：visited- 默认超链接为：蓝色，下划线- 匹配所有：any-link- 结构伪类选择器- - 为父级的第一个是该子元素的添加样式：first-child- 为父级的最后一个是该子元素的添加样式：last-child- 选择父级的第N个是该子元素的添加样式：nth-child(1)
(指定：整数）(所有：N）(奇数：2N+1）(偶数：2N)- 选择每个该元素，是其父级第一个：frist-of-type- 选择每个该元素，是其父级最后一个：last-of-type- 选择每个该元素，是其父级第N个：nth-of-type(1)- 伪元素选择器- - 为第一个字符添加样式：first-letter- 为第一行添加样式：first-line- 在最前面添加内容：before- 在最后面添加内容：after
### CSS总结 • 【第2章 CSS样式】- //1.字体样式- 大小：font-size- - 默认：inherited，继承父级大小- 像素：px 百分比：% 倍数：em- 小：x-small 大：large 正常：medium- 粗细：font-weight- - 默认：normal，普通- 粗体：bold，强调700 自定义：100-900- 字体：font-family- 格式："宋体","Arial";- 样式：font-style- - 默认：normal- 斜体：oblique 带有斜体字体：italic- 颜色：color- - 名称：red 16进制的RGB值：#RRGGBB- rgba函数：rgba(red,green,blue,透明度) rgba(255,0,0,0.5)- 透明：transparent- 字体抗锯齿：font-smoothing- - 默认值：subpixel-antialiased 关闭平滑，用锯齿锋利的边缘：none- 光滑的像素级别字体，不是亚像素：antialiased- 与灰度反锯齿呈现文本，不是亚像素：-moz-osx- grayscale- 复合样式：font- - 基本写法：样式 粗细 大小 字体、粗细 样式 大小 字体- - 必要写法：大小 字体- //2.背景样式- 背景颜色：background-color- 背景图片：background-image- 路径：url(路径)- 背景图片平铺方式：background-repeat- - 默认：repeat，平铺满- 水平平铺：repeat-x 垂直平铺：repeat-y 不平铺：no-repeat- 背景图片位置：background-position- - 坐标：(x y) 数字：(px/%)- 水平：(left/center/right) 垂直：(top/center/bottom)- 背景图随滚动条的移动方式：background-attachment- - 按元素进行偏移(默认)：scroll- 按浏览器进行偏移：fixed- 背景图片大小：background-size- - 默认：auto- 数字：(px/%)、只给一个值(宽度)，第二个为auto- 缩放至完全覆盖背景区域：cover- 缩放至宽高适应背景区域：contain- 复合样式：background- - 基本写法：颜色 图片 平铺 滚动 位置- - 颜色渐变：linear-gradient(to 方位或度数deg，颜色 0%，颜色 100%)- //3.段落样式- 水平对齐方式：text-align- - 默认：left、左对齐- 居中：center 右对齐：right 两端对齐：justify- 匹配父级：match-parent- 垂直对齐方式：vertical-align- - 默认、基线：baseline- 顶线：top 中线：middle 底线：bottom- 行高：line-height- - 默认：不是固定值，根据当前字体的大小变化- 数字：px或scale(相对于原来字体的比例)- 首行缩进：text-indent- 缩进：font-size的两倍，或2em[em相对单位]，永远跟一个字体设置的大小相同- 文本装饰：text-decoration- - 默认：none- 下划线：underline- 删除线：line-through- 上划线：overline- 文本大小写：text-transform（针对英文）- - 小写：lowercase- 大写：uppercase- 首字母大写：capitalize- 字间距：letter-spacing- 词间距：word-spacing（针对英文）- 强制折行- - 非常强烈的折行：word-break:break-all;- 不是那么强烈的折行：word-wrap:break-word;- 内联内容方向：direction- - 左往右：ltr 表示：left-to-right- 右往左：rtl 表示：right-to-left- 文字排版方式：writing-mode- - 默认值：horizontal-tb 表示：水平-top-bottom- 垂直，左至右：vertical-lr 垂直，右至左：vertical-rl- 文字描边：-webkit-text-stroke- - 描边宽度：-webkit-text-stroke-width- 描边颜色：-webkit-text-stroke-color- 处理元素内的空白：white-space- - 默认，忽略：normal- 文本不进行换行：nowrap- 元素周围的线：outline- 宽度：outline-width 颜色：outline-color 样式：outline-style- 堆叠顺序：z-index- 属性：数字，数字越大，就处于越顶层- 不透明度：opacity- 属性：从 0.0 （完全透明）到 1.0（完全不透明）- 元素的可视效果(滤镜)：filter- - 默认：none 默认：initial 继承：inherit- 高斯模糊：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- - 像素：px 百分比：%- 只设置一个角：border-top-left-radius- 边框样式：border-style- - 实线：solid- 虚线：dashed- 点线：dotted- 双线：double - 合并边框：border-collapse- - 默认：separated,分开- 合并：collapse- 单独选择一边：border-top/right/bottom/left- 复合样式：border- 基本写法：大小 样式 颜色- //5.列表样式- 设置标记：list-style-type- - 无：none 实心圆：disc 空心圆：circle- 方形：square- 将图像作为标记：list-style-image- 路径：url(路径)- 设置标记的位置：list-style-position- - 默认：outside,外面 里面：inside- 复合样式：list-style- 基本写法：标记 图片标记 标记位置- //6.图片边框：border-image- 样式- - 边框图片路径：border-image-source- 图片边框向内偏移：border-image-slice- 图片边框的宽度：border-image-width- 边框图像区域超出边框的量：border-image-outset- 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。- border-image-repeat- 复合样式- - 基本写法：路径 内偏移 宽度 超出 平铺- - 默认：none 100% 1 0 stretch- //7.元素显示类型：display- 块级元素：独占一行，可以控制宽高，宽度默认100%- - 默认：block 不占空间隐藏：disp：none- 行内元素：不独占一行，宽高设置无效，宽度默认为内容的宽- - 默认：inline 不占空间隐藏：disp：none- 行内块元素：不独占一行，可以控制宽高，宽度默认为内容的宽- - 默认：inline-block 不占空间隐藏：disp：none- 单元格元素：可以使用vertical-align属性- 默认：table-cell 不占空间隐藏：disp：none- 元素显示和隐藏：visibility- 默认：visible，显示 占空间隐藏：hidden- //8.样式特性- 层叠性- 后来居上：后面的会替代前面的样式- 继承性- 子承父业：继承父元素的某些样式- //9.盒子模型- 属性- - 内容宽度：width- 内容高度：height- 盒子边框：border- 自动伸缩：box-sizing：border-box；- 内边距：padding- - 自动设置：auto 值：10- 行内效果不规范- 子元素设置padding，父级盒子不发生变化- 外边距：margin- - 自动设置：auto 负值：-10- 垂直外边距会合并，取最长- 背景颜色会填充到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- - 默认：none，不浮动- 左浮动：left 右浮动：right- 浮动的影响- - 浮动对显示类型的影响：变成类似inline-block- 父子影响：浮动的子级会受到父级影响- 兄弟影响：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。- 清除浮动：clear- - 默认：none，允许出现浮动- 清除左浮动：left 清除右浮动：right 清除两端浮动：both- 方法一，隔墙法，来一个标准流盒子，给边框。- 方法二，溢出隐藏：overflow：hidden/auto/scroll- 方法三，clearfix:after{content display clear}- 了解清除浮动- 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。- //12.定位：position- 静态定位：static- 遵循正常文档流，top、right、bottom、left等属性无效- 绝对定位：absolute- - 脱离正常文档流，使用left、right、top、bottom等属性进行定位- 根据父级进行定位，找设置了定位（除了static）的祖先类元素（父类及以上），直到"body"- 不具有margin，- 相对定位：relative- 遵循正常文档流，使用left、right、top、bottom等属性进行定位- 定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。- 对象不可层叠- 固定定位：fixed- 脱离正常文档流，使用left、right、top、bottom等属性以窗口左上角为参考点进行定位- 控制溢出部分：overflow- - 默认，可见：visible 不可见：hidden- 滚动可见：scroll 自动：auto 继承：inherit- 文字溢出显示省略号：text-overflow: ellipsis;- //13.鼠标指针样式：cursor- 属性- - 默认：default- 自动：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键在控件中的移动顺序,即焦点的顺序- 用法- - 默认：0- 加入TAB键序列：1-32767的一个值- 排除：-1- //16.锚点跳转过度效果：scroll-behavior- 作用- 使锚点跳转有过度效果- 属性- - 默认、滚动框立即滚动：auto- 实现平稳的滚动：smooth- //17.转变形态：transform- 位移：translate- - 格式：translate(X,Y) X轴：translateX() Y轴：translateY()- 百分比：偏移自身的百分比- 旋转：rotate- - 顺时针：rotate(45deg)- 水平：rotateX(deg) 垂直：rotateY(deg)- 设置中心点：transform-origin- - 默认：50% 50%，同：center center- 方位名词：水平 垂直 像素：px- 倾斜：skew- - 格式：skew(Xdeg,Ydeg)- 水平：skewX(deg) 垂直：skewY(deg)- 放大缩小：scale- - 默认一倍：scale(1,1) 水平：scaleX(0.5) 垂直：scaleY(0.5)- 过度效果：transition- - 过渡时间：all 花费时间 何时开始- 指定形态：形态 花费时间 何时开始- 默认：ease 匀速：linear- 加速：ease-in 减速：ease-out 加速然后减速：ease-in-out- 复合样式- - 转变形态基本写法：位移在最前- - 过度效果基本写法：形态 花费时间 何时开始 运动曲线- //18.动画：animation- 样式- - 动画名称：animation-name- 花费时间：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：两个模式都要)- 复合样式- 基本写法：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向- 创建动画- - 关键帧：@keyframes- 开始：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 表示未被选中。
XMind - Trial Version
HTML CSS xmind总结相关推荐
- 头脑风暴xmind文件汇总
大数据风控 中国互联网的六大主流盈利模式 Keep产品结构 产品需求文档(PRD) 商业模式.xmind-医疗其他资源 电商数据分析模板一.xmind-互联网文档类资源 Xmind模板包含商业,学习, ...
- Xmind笔记之HTML5+CSS
HTML5: CSS: CSS3: 转载于:https://www.cnblogs.com/congke/p/9663407.html
- CSS 速复习（基础知识） (思维导图App: Xmind）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_43900956/article/ ...
- 工具--Eclipse/MarkDown/XMind文章分类目录
1.Eclipse 1.1 Eclipse基础用法 Eclipse自动提示 在eclipse中输入.后提示解决 http://blog.csdn.net/baidu_37107022/article/ ...
- 用html画一个企鹅图案的代码,6张思维导图，帮你搞定html、css（css画QQ企鹅）
想要思维导图原图的小伙伴 ,请关注公众账号"码农范er",输入关键字,"HTML思维导图",获取文件链接. 先给大家看一张喜欢的图片,缓解下心情,最近敲敲代码 ...
- html基础、css基础（前端基础知识入门）
html以及css知识点总结 前言:大家好啊,我是小编达闻西.我相信在茫茫的文海之中相遇,这是一份莫大的缘分.在武侠小说中,遇见有缘人都会传你绝世神功,从而你就可以称霸武林,迎娶白富美,走上人生巅峰. ...
- XMind 8破解激活为XMindPro 详细教程【亲测可用！！】
本文转自:https://blog.csdn.net/qq_18979765/article/details/83655924 由于最近在用XMind整理知识点,索性分享下XMind 的破解操作.(免 ...
- Xmind 8 pro 安装及破解教程
<本文只是作为记录而转载> 版权声明:本文为博主原创文章,转载请附上博文链接.感谢合作! https://blog.csdn.net/qq_16093323/article/details ...
- html+css+vue面试
v-model的实现,双向绑定的原理 我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性.如果属性发上变化了,就需要告诉订阅者Wat ...
最新文章
- Java过滤器与SpringMVC拦截器之间的关系与区别
- spring+hibernate的配置
- Ubuntu 16.04下Caffe-SSD的应用（四）——ssd_pascal.py源码解读
- mysql 存储过程调用权限消失的问题，恢复权限
- 硬核，这个充电宝居然烧煤气！
- JPA 2.1和Java EE 7中的JPQL增强功能（第1部分– JOIN ON）
- 第218天：Angular---模块和控制器
- 第 15 章 垃圾回收相关算法
- python爬虫正则表达式爬取网页标签_Python爬虫实例（4）-用urllib、re和正则表达式爬取网页图片...
- 【Alpha】“北航社团帮”小程序v1.0发布声明
- nbi可视化_教您通过NBI大数据可视化工具零编码轻松实现桑基图的制作
- html网页设计课程设计总结,网页制作课程设计报告总结.doc
- 用MATLAB绘制三维网格图和三维曲面图
- 关于移动互联网运营的分享总结
- 凸包 初学 Andrew 和 Melkman （模板） 旋转卡(qia)壳(ke)
- N76E003 串口接收字符串，完整输出
- java将小写数字变成大写输出
- firebox安装selenium和firebug各种问题解决办法
- 编译原理实验三【中间代码生成程序设计】
- 学习笔记15--机器人操作系统
热门文章
- 桌面显卡天梯图2023年2月 台式机显卡天梯图2023
- 如何改进课堂学习方法?
- python的输出语法_Python入门语法综述
- 洛谷P1150 Peter的烟(逻辑建模)
- 酷派大神F2使用QPST进行nv备份恢复，解决无信号问题
- 魔趣（Mokee）开源代码（android 7.1.2 Android8.1）同步下载
- Arduino UNO+DS1302+74HC595联级+8位数码管时钟+Proteus仿真
- MindMapper中如何添加父主题
- 我说，执着造就了成功
- JDBC连接执行mysql存储过程报权限错误：User does not have access to metadata required to determine stored procedure