1.HTML字符实体在HTML中我们可以用一种特殊的形式的内容来表示某个符号这种特殊形式的内容就是HTML实体。比如小于号 用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符我们必须在HTML源码中插入字符实体字符实体由三部分组成一个和一个实体名称或者一个#和一个实体编号最后加上一个分号2.HTML全局属性常见的全局属性3.meta元信息4.CSS 简介Css的全称为层叠样式表CascadingStyle_SheetsCSS也是一种标记语言用于给HTML结构设置样式例如文字大小、颜色、元素宽高等等简单理解CSS可以美化HTML让HTML更更漂亮核心思想HTML搭建结构CSs添加样式实现了结构与样式的分离5.CSS 行内格式写在标签的style属性中又称内联样式。语法 h1 style“color:red;font-size:60px;”欢迎来到尚硅谷学习/ h1注意点:1.style属性的值不能随便写写要符合CSS语法规范是名值的形式2.行内样式表只能控制当前标签的样式对其他标签无效存在的问题书写繁琐、样式不能复用、并且没有体现出结构与样式分离的思想不推荐大量使用只有对当前元素添加简单样式时才偶尔使用6.CSS 内部样式写在html页面内部将所有的css代码提取出来单独放在7.CSS 外部样式写在单独的.css文件中随后在HTML文件中引入使用。语法1.新建一个扩展名为.css的样式文件把所有CSS代码都放入此文件中。h1{color: red;font-size:40px;}2.在HTML文件中引I入.css文件。 link rel“stylesheet” href“./xxx.css”注意点1. link标签要写在 head标签中2. link标签属性说明href引入的文档来自于哪里relrelation关系说明引入的文档与当前文档之间的关系3.外部样式的优势样式可以复用、结构清晰可触发浏览器的缓存机制提高访问速度实现了结构与样式的完全分离4.实际开发中几乎都使用外部样式这是最推荐的使用方式8.样式表优先级优先级规则行内样式内部样式外部样式1.内部样式、外部样式这二者的优先级相同且后面的会覆盖前面的简记“后来者居上”2.同一个样式表中优先级也和编写顺序有关且后面的会覆盖前面的简记“后来者居上”9.CSS 语法规则CSS语法由两部分构成选择器找到要添加样式的元素声明块设置具体的样式声明块是由一个或多个声明组成的声明的格式为属性名属性值备注1最后一个声明后的分号理论上能省略备注2选择器与声明块之间属性名与属性值之间均有一个空格理论上能省略10.CSS代码风格展开风格一一开发时推荐便于维护和调试h1{color: red;font-size:40px;}紧凑风格——项目上线时推荐可减小文件体积h1(color:red;font-size:40px;}备注:项目上线时我们会通过工具将【展开风格】的代码变成【紧凑风格】这样可以减小文件体积节约网络流量同时也能让用户打开网页时速度更快11.CSS基本选择器基本选择器包括1.通配选择器2.元素选择器3.类选择器4.id选择器1.通配选择器作用可以选中所有的HTML元素2.元素选择器作用为页面中某种元素统一设置样式3.类选择器作用根据元素的class值来选中某些元素class翻译过来有种类、类别的含义所以class值又称类名注意点1.元素的class属性值不带.但css的类选择器要带.2.class值是我们自定义的按照标准不要使用纯数字、不要使用中文、尽量使用英文与数字的组合若由多个单词组成使用-做连接例如left-menu且命名要有意义做到“见名知意”3.一个元素不能写多个class属性下面是错误示例该写法错误元素的属性不能重复后写的会失效 h1 class“speak” class“big”你好啊/ h14.一个元素的c1ass属性能写多个值要用空格隔开例如该写法正确class属性能写多个值 h1 class“speakbig”你好啊/ h14.ID选择器作用根据元素的id属性值来精准的选中某个元素注意id属性值尽量由字母、数字、下划线、短杠组成最好以字母开头、不要包含空格、区分大小写一个元素只能拥有一个id属性多个元素的id属性值不能相同一个元素可以同时拥有id和class属性12.复合选择器1.交集选择器作用选中同时满足多个条件的元素并且的关系语法选择器直接连写中间不加空格示例选中是p标签并且class为beauty的元素2.并集选择器分组选择器作用一次性选中多组选择器对应的元素或者的关系语法多个选择器之间用** 逗号**隔开3.后代选择器作用选中指定元素内部所有符合条件的后代儿子、孙子都算语法祖先选择器空格后代选择器4.子代选择器只选中父元素直接子元素儿子孙子辈不会选中语法父选择器子选择器5.兄弟选择器6.属性选择器作用选中属性值符合一定要求的元素。语法1.[属性名]选中具有某个属性的元素。2.[属性名“值”]选中包含某个属性且属性值等于指定值的元素。3.[属性名^”值”]选中包含某个属性且属性值以指定的值开头的元素。4.[属性名$“值”]选中包含某个属性且属性值以指定的值结尾的元素。5.[属性名*“值”]选择包含某个属性属性值包含指定值的元素。13.伪类选择器作用选中特殊状态的元素。如何理解“伪”一虚假的不是真的。如何理解“伪类”一像类class但不是类是元素的一种特殊状态。14.伪类选择器 动态伪类link超链接未被访问的状态visited超链接访问过的状态hover鼠标悬停在元素上的状态active元素激活的状态什么是激活——按下鼠标不松开注意点遵循LVHA的l顺序即link、visited、hover、activefocus获取焦点的元素表单类元素才能使用focus伪类当用户点击元素、触摸元素、或通过键盘的“tab”键等方式选择元素时就是获得焦点15.伪类选择器 结构伪类1.:first-child所有兄弟元素中的第一个。2.:last-child所有兄弟元素中的最后一个。3.:nth-childn所有兄弟元素中的第n个。4.:irst-of-type所有同类型兄弟元素中的第一个。5.:last-of-type所有同类型兄弟元素中的最后一个。6.:nth-of-typen所有同类型兄弟元素中的第n个。关于n的值1.或不写什么都选不中—一几乎不用。2.n选中所有子元素一—几乎不用。3.1~正无穷的整数选中对应序号的子元素。4.2n或even选中序号为偶数的子元素。5.2n1或odd选中序号为奇数的子元素。6.-n3选中的是前3个。