web前端——html+css知识点总结(上)

2023年6月20日发(作者：)

web前端——html+css知识点总结（上）前端开发语⾔介绍HTML（Hypertext Markup Language）（描写结构）超⽂本标记语⾔，作⽤是⽤来写页⾯的结构，描述⽹页的⼀种语⾔，使⽤标签来描述。CSS（Cascading Style Sheets） 层叠样式表 （样式/表现）css通常称为CSS样式表/层叠样式表，主要⽤于设置页⾯中⽂本内容（字体，⼤⼩，对齐⽅式等）、图⽚的外形（宽⾼。边框样式，边距等），样式定义如何显⽰html标签，简单理解就是给页⾯设置样式。JS（JavaScript） 脚本语⾔ （⾏为/动作）JavaScript是基于对象和事件驱动的解释性的脚本语⾔，主要⽬的其实就是增减web交互，加强⽤户体验。基于对象：js是⼀种基于对象的语⾔，这意味着它能运⽤⾃⼰已经创建的对象，因此，许多功能可以来⾃脚步环境种对象的⽅法与脚步的相互作⽤。事件驱动：JavaScript 可以直接对⽤户或者客户输⼊做出响应，⽆须经过 web 服务器，它对⽤户的响应，以事件驱动的⽅式进⾏。解释性：浏览器可以直接识别和解析js代码。关于js⽅⾯的内容在js笔记总结中详细记录。HTMLHTML⽂档称为⽹页，web浏览器读取HTML⽂档，并以⽹页的形式显⽰出它们.html是描述⽹页的格式⽤标签（标记，元素）来描述页⾯，由关键字和尖⾓号组成的，标签通常都是成对出现的，也有单独出现的，成对出现的标签，前⾯的叫开始标签（开放标签），后⾯的叫结束标签（闭合标签），单独出现的⼀个标签叫做空标签或者⾃闭合标签。页⾯的最基本结构//这种声明⽂档⽅式是html5的⽅式,告诉浏览器的解析器使⽤哪种规范来解析该⽂档 //

声明⽂档//html标签

除了声明⽂档以外，其他页⾯中所有内容都放在html标签中

//meta标签

设置页⾯语⾔信息 //head标签

页⾯的头部//body标签

页⾯主体的部分//页⾯中展⽰出来的部分放到body标签⾥⾯meta 表⽰页⾯的编码格式常⽤编码格式gb2312(国标2312，针对中⽂简体)gbk（国标扩）UTF-8(万国码)注释HTMLCss/* 注释内容 */Js单⾏：//注释内容//注释内容多⾏/*注释内容注释内容*/注释快捷键

ctrl+/浏览器及内核Chrome浏览器 webkit–>blinkFirefox浏览器 geckoSafari浏览器 webkitOpera浏览器 presto–>webkit–>blinkIE浏览器 trident四⼤内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。浏览器的私有前缀内核Gecko内核WebKit内核Presto内核Trident内核浏览器⽕狐浏览器Chrome、SafariOpera(欧朋)IE私有前缀-moz--webkit--o--ms-常⽤标签1. h1 主标题 ⼀级标题(⼀般⼀个页⾯只有⼀个主标题，所以h1标签通常只⽤⼀次)2. h2 ⼆级标题3. h3 3级标题4. h4 4级标题5. h5 5级标题6. h6 6级标题7. p 段落8. strong b 可以让⽂字加粗 都是内联标签，strong更具有强调的意义9. em i 可以让⽂字倾斜 都是内联标签，em更具有强调的意义10. div标签 没有任何语义 可以把它看做⼀个盒⼦或者⼀个块11. span 标签 没有任何语义 和div的区别就是⼀个是块⼀个是内联12. ⽆序列表ul和li配合使⽤ul和li是固定嵌套ul的直接⼦元素只能是lili的⽗元素可以是ul或者ol13. 有序列表ol和li配合使⽤是固定嵌套ol的直接⼦元素只能是li有序列表和⽆序列表，列表项前⾯的序号或者点状使⽤list-style：none 去掉ul{list-style: none;}ol{list-style: none;}14. 定义列表（⾃定义列表）dl dt dd 配合使⽤，是固定嵌套关系dl 是dt 和dd的⽗元素dt 和dd是兄弟元素dd是对dt的解释说明15. img标签⾃闭合标签（空标签）src=“图⽚路径”alt=“图⽚的描述” 当图⽚加载不出来或加载失败时会显⽰⾥⾯的⽂字title=“图⽚标题” 当⿏标放到图⽚上时会显⽰⾥⾯的⽂字Width=“宽度”Height=“⾼度”绝对路径与相对路径绝对路径1. 具体的⽹址2. 从盘符开始的（不建议使⽤）相对路径1. 当被引⼊⽂件和当前⽂件在同⼀个⽂件夹⾥ 直接写图⽚名字（包含后缀名）2. 进⼊⽂件夹： ⽂件夹名/3. 出⽂件夹： …/块标签、内联标签、内联块标签块标签单独占⼀⾏可以设置宽⾼等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd内联标签（⾏内标签）在同⼀⾏显⽰不可以设置宽度宽⾼由内容撑开strong b em i span内联块标签（⾏内块标签）在同⼀⾏显⽰可以设置宽⾼等样式img链接、表格、表单a标签 （内联标签）打开百度//可以写绝对路径点击我打开复习.html//可以写相对路径

点击我下载⼩秘密的⽂件//下载⽂件

我还不知道这个页⾯的路径//不知道具体路径是什么，写#占位a标签有默认的⽂字颜⾊以及下划线锚点链接 咏鹅

咏柳       永春//跳转到当前页⾯的指定位置（点击咏鹅

跳到咏鹅这⾸诗的位置）

//跳转到另外⼀个页⾯的指定位置，指定的位置是页⾯中

四个圈

//在当前页⾯的a标签的href属性⾥写“另外⼀个页⾯的路径#指定位置的id名”点击我跳转到另外⼀个页⾯的指定位置Id名组成：a到z A到Z 0到9 中划线 下划线 以字母开头同⼀个页⾯同样的id名只能⽤⼀次br标签强制换⾏通常⽤在⽂本换⾏⾥表格之前：⽤来布局页⾯现在：明显是表格的部分才使⽤表格布局（课程表，报表）表格的宽⾼是由内容决定的，⼀列的宽度也是由内容决定的如果给table标签设置宽度，每⼀列的宽度也是和内容有关，内容多的分配的宽度就多想改变⼀列的宽度：只需要改变这⼀列中其中⼀个单元格的宽度想改变⼀⾏的⾼度：只需要改变这⼀⾏中其中⼀个单元格的⾼度1.关于表格的标签（1） table标签：表格 所有的和表格有关的标签都要写在table标签中间（2） tr ⼀⾏（3） td 单元格（4） th 表头单元格 （默认⽂字居中对齐，加粗）（5） caption 表格的标题（放在table的⼦元素的位置，默认⽔平⽅向居中）（6） thead 表格的头部（7） tbody 表格的主体（8） tfoot 表格的脚注thead tbody tfoot的作⽤可以让表格的语义化更强这⾥语义化是什么?以及他的作⽤在页⾯⾥使⽤特有的标签和标签中特有的属性来格式化⽂档（标题 h标签，段落 p…）语义化的好处：1. 在没有css的情况下，也能呈现很好的内容结构2. ⽅便开发和维护3. 对⽤户体验好4. 对seo好2.在标签⾥写的属性（1） 在table的开始标签⾥写border=“1”： 给表格设置边框（2） cellspacing=“0” 单元格与单元格之间的距离（3） cellpadding=“0” 单元格内容与边框之间的距离（4） width=“” 给table或者单元格设置都可以（5） height=“” 给table或者单元格设置都可以（6） 跨列合并colspan=“2”横着的两个单元格合并在需要被合并的单元格的最左侧的单元格⾥写这个属性（7） 跨⾏合并rowspan=“3”竖着的3个单元合并在需要被合并的单元格的最上⾯的单元格⾥写这个属性3.在css⾥设置表格样式初步认识css语法：属性名:属性值 中间⽤冒号隔开在head中加style标签，在标签中写样式（1） 给表格设置边框td{border:10px solid green;border:1px solid black;border：//边框10px: //边框的宽度solid: //边框样式（实线）black: //边框的颜⾊}（2） 让表格的边框合并成⼀条线，表格的边框和边框之间会存在空隙table{border-collapse: collapse;}表单1. input标签 （内联块标签）（1）type=“text” ⽂本框（2）type=“password” 密码框（3）type=“radio”单选框中只想选中其中⼀项：起同样的name名字点击⽂字把对应的单选框选中，给⽂字包label标签在input标签⾥写id的名字，在label标签⾥写for=“id名”男⼥（4）type=“checkbox” 复选框（5）type=“submit” 提交按钮（6）type=“reset” 重置按钮（7）type=“button” 没有提交功能的按钮（通常⽤来启动某些js程序）（8）type=“image” ⽤src引⼊图⽚路径 图⽚形式的按钮（9）type=“file” 上传⽂件的按钮2. 下拉框select 和option配合使⽤ ，是固定嵌套19911992年ea⽂本域⽤户可以拖拽改变⼤⼩在css⾥设置resize:标签 表单（可以限制表单的提交范围）表单相关属性value=“” 默认值placeholder=“请输⼊姓名” 提⽰⽤户输⼊的⽂字（html5新增内容）checked=“checked” 默认选中某项（⽤在单选框和复选框⾥的） 属性名和值相同，可以把值省略，直接写checked就可以了action="" 表单提交到什么位置method="" 表单提交⽅式 GET 不安全 有长度限制 POST 相对安全 没有长度限制selected 默认选中某⼀项（⽤在下拉框⾥的）size=“2” 下拉框⾥展⽰⼏项maxlength=“4” 最⼤长度disabled 禁⽤ 数据不可以更改也不可以提交，背景默认是灰⾊readonly 只读 数据不可以被更改，但是可以被提交标签嵌套规则1. 块标签⾥可以放其他标签，p标签⾥不要放块标签2. 内联标签⾥最好不要放块标签，但是a标签⽐较特殊3. a标签⾥不要放表单中的提交按钮，a标签⾥不要放a标签认识css属性名:属性值 中间⽤冒号隔开语法：选择器{声明;声明;声明;…}声明与声明中间⽤分号隔开}css的三种引⼊⽅式内部样式写在html⽂件的head标签⾥，在head标签⾥写style标签，在style标签⾥按照css的语法写样式只有这么⼀个html⽂件需要这些样式的时候外部样式新建⼀个css的⽂件，在css的⽂件⾥按照css的语法写样式把css⽂件引⼊到html⽂件⾥同⼀个css⽂件可以引⼊到多个html⽂件⾥同⼀个html⽂件可以引⼊多个css⽂件//在html⽂件的head标签⾥写link标签//rel="stylesheet"

被引⼊⽂件和当前⽂件之间的关系是引⼊了外部样式表//href="" css⽂件的路径//type="text/css" css⽂件的类型多个html⽂件需要共同的样式时⾏间样式写在标签的开始标签⾥在开始的标签⾥写style=“”

只有这么⼀个标签需要这个样式的时候内部外部⾏间样式的优先级遵循就近原则通常情况下 ⾏间>内部> 外部（内部外部优先级看先后顺序）⽂字和⽂本相关样式1. 字号(⼦元素可继承)浏览器默认字号是16px浏览器的最⼩字号是12px（⽕狐可以更⼩）h标签的字号特殊font-size：20px;2. ⽂字是否加粗(⼦元素可继承)font-weight:bold;//normal

不加粗//bold

加粗//取值还可以是100到9003. ⽂字是否倾斜(⼦元素可继承)font-style: italic;//italic;倾斜//normal;不倾斜4. 字体(⼦元素可继承)安全字体：微软雅⿊ 宋体 楷体 ⿊体可以设置多种字体，中间⽤逗号隔开字体名字如果有空格，就必须加引号font-family:'宋体'；5. ⾏⾼(⼦元素可继承)单位可以是px 也可以是字号的倍数line-height:20px;单⾏⽂字在垂直⽅向居中，设置⽂字的⾏⾼和盒⼦⾼度相等6. 复合写法font:italic normal 20px/50px '楷体';font:是否倾斜 是否加粗 字号/⾏⾼ 字体其中字号和字体是不可以省略的是否倾斜省略的话，默认是不倾斜是否加粗省略的话，默认是不加粗7. ⽂字颜⾊(⼦元素可继承)color：英⽂单词 red green blue等等⼗六进制#0到9 a到f#ff0000 #f00#ff00f0#ff00ff #f0f#00ffoo 没有o前两位 红⾊中间两位 绿⾊后两位 蓝⾊rgb(red,green,blue) 0到2558. ⽂本对齐⽅式(⼦元素可继承)可以让⽂字 内联块 内联元素在⽗元素⾥居中text-align:left;//left//center//right9. ⾸⾏缩进(⼦元素可继承)text-indent单位 px emem是⼀个相对的单位，是相对于font-size的⼀个单位1em=20px 2em=40pxfont-size:20px

10. ⽂本装饰text-decoration：overline //上划线//line-through

中划线//underline

下划线//none

去掉线text-decoration： 什么位置的线 线的样式 线的颜⾊位置：overline line-through underline线的样式:solid 实线dotted 点状dashed 虚线wavy 波浪线⽗元素的样式可以延伸到⼦元素⾥，但不是继承11. 字母与字母之间的距离（⽂字与⽂字之间的距离）letter-spacing:可以继承12.单词与单词之间的距离word-spacing:可以继承选择器1. 标签选择器直接写标签的名字div{}p{}div{color:pink;}2. class选择器（类选择器）⽤.选中

3. id选择器

迪丽热巴

class 和id的区别同⼀个class名，可以多次使⽤同⼀个标签，可以有多个class名同⼀个id名，在⼀个页⾯只能⽤⼀次同⼀个标签，只能有⼀个id名4. 后代选择器p1 和p2 全都选中5. ⼦代选择器（直接⼦元素选择器）.box>p(选中box中p2)选择器还分为群组选择器、交集选择器、通配符（*）、伪类选择器。群组选择器⽤逗号隔开.big,#chenyun,p,.chenhe,.list li{ color: yellow; }交集选择器{color: red;}在这⾥插⼊代码⽚ 选择所有div标签⾥，class名是box的通配符 *把所有标签都选中可以⽤来清除浏览器的默认样式*{margin: 0;padding: 0;list-style: none;}伪类选择器a:link{color: red;}a:visited{color: yellow;}a:hover{color:pink;}a:active{color: green;}:link 初始状态:visited 访问过以后的状态:hover 滑过的状态（⿏标悬停）:active ⿏标按住的状态注意顺序：l-v-h-a选择器的优先级如何计算⾏间 1000>id 100>class 10>标签 11. 当选择到了同⼀个标签上时，⽐较权重，谁权重⼤谁优先级⾼2. 当选择到了同⼀个标签上，权重也相同时，看先后顺序，遵循就近原则3. 当选择到不同标签上，继承来的样式要⼩于给⾃⼰本⾝设置的样式4. 加了!important的样式，优先级会⼤于⾏间样式的优先级（也遵循继承来的样式优先级⼩于给⾃⼰本⾝设置的样式）

2023年6月20日发(作者：)

web前端——html+css知识点总结（上）前端开发语⾔介绍HTML（Hypertext Markup Language）（描写结构）超⽂本标记语⾔，作⽤是⽤来写页⾯的结构，描述⽹页的⼀种语⾔，使⽤标签来描述。CSS（Cascading Style Sheets） 层叠样式表 （样式/表现）css通常称为CSS样式表/层叠样式表，主要⽤于设置页⾯中⽂本内容（字体，⼤⼩，对齐⽅式等）、图⽚的外形（宽⾼。边框样式，边距等），样式定义如何显⽰html标签，简单理解就是给页⾯设置样式。JS（JavaScript） 脚本语⾔ （⾏为/动作）JavaScript是基于对象和事件驱动的解释性的脚本语⾔，主要⽬的其实就是增减web交互，加强⽤户体验。基于对象：js是⼀种基于对象的语⾔，这意味着它能运⽤⾃⼰已经创建的对象，因此，许多功能可以来⾃脚步环境种对象的⽅法与脚步的相互作⽤。事件驱动：JavaScript 可以直接对⽤户或者客户输⼊做出响应，⽆须经过 web 服务器，它对⽤户的响应，以事件驱动的⽅式进⾏。解释性：浏览器可以直接识别和解析js代码。关于js⽅⾯的内容在js笔记总结中详细记录。HTMLHTML⽂档称为⽹页，web浏览器读取HTML⽂档，并以⽹页的形式显⽰出它们.html是描述⽹页的格式⽤标签（标记，元素）来描述页⾯，由关键字和尖⾓号组成的，标签通常都是成对出现的，也有单独出现的，成对出现的标签，前⾯的叫开始标签（开放标签），后⾯的叫结束标签（闭合标签），单独出现的⼀个标签叫做空标签或者⾃闭合标签。页⾯的最基本结构//这种声明⽂档⽅式是html5的⽅式,告诉浏览器的解析器使⽤哪种规范来解析该⽂档 //

声明⽂档//html标签

除了声明⽂档以外，其他页⾯中所有内容都放在html标签中

//meta标签

设置页⾯语⾔信息 //head标签

页⾯的头部//body标签

页⾯主体的部分//页⾯中展⽰出来的部分放到body标签⾥⾯meta 表⽰页⾯的编码格式常⽤编码格式gb2312(国标2312，针对中⽂简体)gbk（国标扩）UTF-8(万国码)注释HTMLCss/* 注释内容 */Js单⾏：//注释内容//注释内容多⾏/*注释内容注释内容*/注释快捷键

ctrl+/浏览器及内核Chrome浏览器 webkit–>blinkFirefox浏览器 geckoSafari浏览器 webkitOpera浏览器 presto–>webkit–>blinkIE浏览器 trident四⼤内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。浏览器的私有前缀内核Gecko内核WebKit内核Presto内核Trident内核浏览器⽕狐浏览器Chrome、SafariOpera(欧朋)IE私有前缀-moz--webkit--o--ms-常⽤标签1. h1 主标题 ⼀级标题(⼀般⼀个页⾯只有⼀个主标题，所以h1标签通常只⽤⼀次)2. h2 ⼆级标题3. h3 3级标题4. h4 4级标题5. h5 5级标题6. h6 6级标题7. p 段落8. strong b 可以让⽂字加粗 都是内联标签，strong更具有强调的意义9. em i 可以让⽂字倾斜 都是内联标签，em更具有强调的意义10. div标签 没有任何语义 可以把它看做⼀个盒⼦或者⼀个块11. span 标签 没有任何语义 和div的区别就是⼀个是块⼀个是内联12. ⽆序列表ul和li配合使⽤ul和li是固定嵌套ul的直接⼦元素只能是lili的⽗元素可以是ul或者ol13. 有序列表ol和li配合使⽤是固定嵌套ol的直接⼦元素只能是li有序列表和⽆序列表，列表项前⾯的序号或者点状使⽤list-style：none 去掉ul{list-style: none;}ol{list-style: none;}14. 定义列表（⾃定义列表）dl dt dd 配合使⽤，是固定嵌套关系dl 是dt 和dd的⽗元素dt 和dd是兄弟元素dd是对dt的解释说明15. img标签⾃闭合标签（空标签）src=“图⽚路径”alt=“图⽚的描述” 当图⽚加载不出来或加载失败时会显⽰⾥⾯的⽂字title=“图⽚标题” 当⿏标放到图⽚上时会显⽰⾥⾯的⽂字Width=“宽度”Height=“⾼度”绝对路径与相对路径绝对路径1. 具体的⽹址2. 从盘符开始的（不建议使⽤）相对路径1. 当被引⼊⽂件和当前⽂件在同⼀个⽂件夹⾥ 直接写图⽚名字（包含后缀名）2. 进⼊⽂件夹： ⽂件夹名/3. 出⽂件夹： …/块标签、内联标签、内联块标签块标签单独占⼀⾏可以设置宽⾼等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd内联标签（⾏内标签）在同⼀⾏显⽰不可以设置宽度宽⾼由内容撑开strong b em i span内联块标签（⾏内块标签）在同⼀⾏显⽰可以设置宽⾼等样式img链接、表格、表单a标签 （内联标签）打开百度//可以写绝对路径点击我打开复习.html//可以写相对路径

点击我下载⼩秘密的⽂件//下载⽂件

我还不知道这个页⾯的路径//不知道具体路径是什么，写#占位a标签有默认的⽂字颜⾊以及下划线锚点链接 咏鹅

咏柳       永春//跳转到当前页⾯的指定位置（点击咏鹅

跳到咏鹅这⾸诗的位置）

//跳转到另外⼀个页⾯的指定位置，指定的位置是页⾯中

四个圈

//在当前页⾯的a标签的href属性⾥写“另外⼀个页⾯的路径#指定位置的id名”点击我跳转到另外⼀个页⾯的指定位置Id名组成：a到z A到Z 0到9 中划线 下划线 以字母开头同⼀个页⾯同样的id名只能⽤⼀次br标签强制换⾏通常⽤在⽂本换⾏⾥表格之前：⽤来布局页⾯现在：明显是表格的部分才使⽤表格布局（课程表，报表）表格的宽⾼是由内容决定的，⼀列的宽度也是由内容决定的如果给table标签设置宽度，每⼀列的宽度也是和内容有关，内容多的分配的宽度就多想改变⼀列的宽度：只需要改变这⼀列中其中⼀个单元格的宽度想改变⼀⾏的⾼度：只需要改变这⼀⾏中其中⼀个单元格的⾼度1.关于表格的标签（1） table标签：表格 所有的和表格有关的标签都要写在table标签中间（2） tr ⼀⾏（3） td 单元格（4） th 表头单元格 （默认⽂字居中对齐，加粗）（5） caption 表格的标题（放在table的⼦元素的位置，默认⽔平⽅向居中）（6） thead 表格的头部（7） tbody 表格的主体（8） tfoot 表格的脚注thead tbody tfoot的作⽤可以让表格的语义化更强这⾥语义化是什么?以及他的作⽤在页⾯⾥使⽤特有的标签和标签中特有的属性来格式化⽂档（标题 h标签，段落 p…）语义化的好处：1. 在没有css的情况下，也能呈现很好的内容结构2. ⽅便开发和维护3. 对⽤户体验好4. 对seo好2.在标签⾥写的属性（1） 在table的开始标签⾥写border=“1”： 给表格设置边框（2） cellspacing=“0” 单元格与单元格之间的距离（3） cellpadding=“0” 单元格内容与边框之间的距离（4） width=“” 给table或者单元格设置都可以（5） height=“” 给table或者单元格设置都可以（6） 跨列合并colspan=“2”横着的两个单元格合并在需要被合并的单元格的最左侧的单元格⾥写这个属性（7） 跨⾏合并rowspan=“3”竖着的3个单元合并在需要被合并的单元格的最上⾯的单元格⾥写这个属性3.在css⾥设置表格样式初步认识css语法：属性名:属性值 中间⽤冒号隔开在head中加style标签，在标签中写样式（1） 给表格设置边框td{border:10px solid green;border:1px solid black;border：//边框10px: //边框的宽度solid: //边框样式（实线）black: //边框的颜⾊}（2） 让表格的边框合并成⼀条线，表格的边框和边框之间会存在空隙table{border-collapse: collapse;}表单1. input标签 （内联块标签）（1）type=“text” ⽂本框（2）type=“password” 密码框（3）type=“radio”单选框中只想选中其中⼀项：起同样的name名字点击⽂字把对应的单选框选中，给⽂字包label标签在input标签⾥写id的名字，在label标签⾥写for=“id名”男⼥（4）type=“checkbox” 复选框（5）type=“submit” 提交按钮（6）type=“reset” 重置按钮（7）type=“button” 没有提交功能的按钮（通常⽤来启动某些js程序）（8）type=“image” ⽤src引⼊图⽚路径 图⽚形式的按钮（9）type=“file” 上传⽂件的按钮2. 下拉框select 和option配合使⽤ ，是固定嵌套19911992年ea⽂本域⽤户可以拖拽改变⼤⼩在css⾥设置resize:标签 表单（可以限制表单的提交范围）表单相关属性value=“” 默认值placeholder=“请输⼊姓名” 提⽰⽤户输⼊的⽂字（html5新增内容）checked=“checked” 默认选中某项（⽤在单选框和复选框⾥的） 属性名和值相同，可以把值省略，直接写checked就可以了action="" 表单提交到什么位置method="" 表单提交⽅式 GET 不安全 有长度限制 POST 相对安全 没有长度限制selected 默认选中某⼀项（⽤在下拉框⾥的）size=“2” 下拉框⾥展⽰⼏项maxlength=“4” 最⼤长度disabled 禁⽤ 数据不可以更改也不可以提交，背景默认是灰⾊readonly 只读 数据不可以被更改，但是可以被提交标签嵌套规则1. 块标签⾥可以放其他标签，p标签⾥不要放块标签2. 内联标签⾥最好不要放块标签，但是a标签⽐较特殊3. a标签⾥不要放表单中的提交按钮，a标签⾥不要放a标签认识css属性名:属性值 中间⽤冒号隔开语法：选择器{声明;声明;声明;…}声明与声明中间⽤分号隔开}css的三种引⼊⽅式内部样式写在html⽂件的head标签⾥，在head标签⾥写style标签，在style标签⾥按照css的语法写样式只有这么⼀个html⽂件需要这些样式的时候外部样式新建⼀个css的⽂件，在css的⽂件⾥按照css的语法写样式把css⽂件引⼊到html⽂件⾥同⼀个css⽂件可以引⼊到多个html⽂件⾥同⼀个html⽂件可以引⼊多个css⽂件//在html⽂件的head标签⾥写link标签//rel="stylesheet"

被引⼊⽂件和当前⽂件之间的关系是引⼊了外部样式表//href="" css⽂件的路径//type="text/css" css⽂件的类型多个html⽂件需要共同的样式时⾏间样式写在标签的开始标签⾥在开始的标签⾥写style=“”

只有这么⼀个标签需要这个样式的时候内部外部⾏间样式的优先级遵循就近原则通常情况下 ⾏间>内部> 外部（内部外部优先级看先后顺序）⽂字和⽂本相关样式1. 字号(⼦元素可继承)浏览器默认字号是16px浏览器的最⼩字号是12px（⽕狐可以更⼩）h标签的字号特殊font-size：20px;2. ⽂字是否加粗(⼦元素可继承)font-weight:bold;//normal

不加粗//bold

加粗//取值还可以是100到9003. ⽂字是否倾斜(⼦元素可继承)font-style: italic;//italic;倾斜//normal;不倾斜4. 字体(⼦元素可继承)安全字体：微软雅⿊ 宋体 楷体 ⿊体可以设置多种字体，中间⽤逗号隔开字体名字如果有空格，就必须加引号font-family:'宋体'；5. ⾏⾼(⼦元素可继承)单位可以是px 也可以是字号的倍数line-height:20px;单⾏⽂字在垂直⽅向居中，设置⽂字的⾏⾼和盒⼦⾼度相等6. 复合写法font:italic normal 20px/50px '楷体';font:是否倾斜 是否加粗 字号/⾏⾼ 字体其中字号和字体是不可以省略的是否倾斜省略的话，默认是不倾斜是否加粗省略的话，默认是不加粗7. ⽂字颜⾊(⼦元素可继承)color：英⽂单词 red green blue等等⼗六进制#0到9 a到f#ff0000 #f00#ff00f0#ff00ff #f0f#00ffoo 没有o前两位 红⾊中间两位 绿⾊后两位 蓝⾊rgb(red,green,blue) 0到2558. ⽂本对齐⽅式(⼦元素可继承)可以让⽂字 内联块 内联元素在⽗元素⾥居中text-align:left;//left//center//right9. ⾸⾏缩进(⼦元素可继承)text-indent单位 px emem是⼀个相对的单位，是相对于font-size的⼀个单位1em=20px 2em=40pxfont-size:20px

10. ⽂本装饰text-decoration：overline //上划线//line-through

中划线//underline

下划线//none

去掉线text-decoration： 什么位置的线 线的样式 线的颜⾊位置：overline line-through underline线的样式:solid 实线dotted 点状dashed 虚线wavy 波浪线⽗元素的样式可以延伸到⼦元素⾥，但不是继承11. 字母与字母之间的距离（⽂字与⽂字之间的距离）letter-spacing:可以继承12.单词与单词之间的距离word-spacing:可以继承选择器1. 标签选择器直接写标签的名字div{}p{}div{color:pink;}2. class选择器（类选择器）⽤.选中

3. id选择器

迪丽热巴

class 和id的区别同⼀个class名，可以多次使⽤同⼀个标签，可以有多个class名同⼀个id名，在⼀个页⾯只能⽤⼀次同⼀个标签，只能有⼀个id名4. 后代选择器p1 和p2 全都选中5. ⼦代选择器（直接⼦元素选择器）.box>p(选中box中p2)选择器还分为群组选择器、交集选择器、通配符（*）、伪类选择器。群组选择器⽤逗号隔开.big,#chenyun,p,.chenhe,.list li{ color: yellow; }交集选择器{color: red;}在这⾥插⼊代码⽚ 选择所有div标签⾥，class名是box的通配符 *把所有标签都选中可以⽤来清除浏览器的默认样式*{margin: 0;padding: 0;list-style: none;}伪类选择器a:link{color: red;}a:visited{color: yellow;}a:hover{color:pink;}a:active{color: green;}:link 初始状态:visited 访问过以后的状态:hover 滑过的状态（⿏标悬停）:active ⿏标按住的状态注意顺序：l-v-h-a选择器的优先级如何计算⾏间 1000>id 100>class 10>标签 11. 当选择到了同⼀个标签上时，⽐较权重，谁权重⼤谁优先级⾼2. 当选择到了同⼀个标签上，权重也相同时，看先后顺序，遵循就近原则3. 当选择到不同标签上，继承来的样式要⼩于给⾃⼰本⾝设置的样式4. 加了!important的样式，优先级会⼤于⾏间样式的优先级（也遵循继承来的样式优先级⼩于给⾃⼰本⾝设置的样式）