15.HTML全局属性完整的全局属性请参考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Global_attributes16.meta 元信息1.配置字符编码metacharsetUTF-82.针对移动端的一个配置metanameviewportcontentwidthdevice-width, initial-scale1.03.配置网页的关键字metanamekeywordscontent网上购物,电商购物,皮鞋,化妆品4.配置网页描述信息80字以内metanamedescriptioncontent黄鱼鱼购物网成立于2008年致力于打造国内优质的电商购物平台5.针对搜索引擎爬虫配置metanamerobotscontent此处可选值见下表6.配置网页作者metanameauthorcontenttony7.配置网页生成工具metanamegeneratorcontentVisual Studio Code8. 配置定义网页版权信息metanamecopyrightcontent2023-2027©版权所有9. 配置网页自动刷新3秒自动跳转metahttp-equivrefreshcontent3;urlhttps://www.bilibili.com完整的网页元信息请参考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/metaCSS一、CSS基础1.CSS的编写位置1.行内样式代码效果图2.内部样式代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title位置2_内部样式/titlestyleh1{color:red;font-size:40px;}h2{color:green;font-size:60px;}p{color:blue;font-size:80px;}img{width:200px;}/style/headbodyh1欢迎来到尚硅谷学习/h1h2欢迎学习前端/h2p北京欢迎你/pp上海欢迎你/pp江苏欢迎你/pp西安欢迎你/pimgsrc../images/小姐姐 (1).gifalt小姐姐/body/html效果图style 标签理论上可以放在 HTML 文档的任何地方但一般都放在head 标签中3.外部样式新建一个扩展名为.css 的样式文件把所有 CSS 代码都放入此文件中在 HTML 文件中引入 .css 文件linkrelstylesheethref./xxx.csslink 链接rel:relation 关系stylesheet 样式表link标签要写在head 标签中2. 样式表的优先级行内样式 内部样式 外部样式优先级相同即并列的都是后面的 覆盖 前面的3.CSS语法规范4. CSS代码风格二、CSS选择器1. CSS基本选择器1.通配选择器可以选中所有的HTML元素headmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title01_通配选择器/titlestyle*{color:orange;font-size:40px;}/style/headbodyh1欢迎来到土味官网土的味道我知道/h1brh2土味情话/h2h3作者优秀的网友们/h3p万水千山总是情爱我多点行不行/pp草莓、蓝莓、蔓越莓今天你想我了没/pp我心里给你留了一块地我的死心塌地/p/body效果图2.元素选择器为页面中 某种元素 统一设置样式代码效果图3.类选择器根据元素的class 值来选中某些元素。class 种类、类别一个元素不能写多个class属性一个元素的class 属性能写多个值要用空格隔开代码效果图4. ID选择器根据元素的id属性值来精准的选中某个元素代码效果图一个元素只能拥有一个id 属性多个元素的id属性值不能相同一个元素可以同时拥有 id 和 class 属性2. CSS复合选择器1.交集选择器选中同时符合多个条件的元素代码效果图2.并集选择器选中多个选择器对应的元素代码效果图注意并集选择器我们一般竖着写任何形式的选择器都可以作为并集选择器的一部分并集选择器通常用于集体声明可以缩小样式表体积3.后代选择器选中指定元素中符合要求的后代元素代码效果图注意后代选择器最终选择的是后代不选中祖先。儿子、孙子、重孙子都算是后代。结构一定要符合之前讲的HTML 嵌套要求例如不能p中写h1 ~ h64. 子代选择器选中指定元素中符合要求的子元素儿子元素 先写父再写子代码效果图注意子代选择器最终选择的是子代不是父级子、孙子、重孙子、重重孙子 … 统称后代子就是指儿子5.兄弟选择器相邻兄弟选择器通用兄弟选择器6.属性选择器选中属性值符合一定要求的元素第一种第二种第三种第四种第五种7.伪类选择器选中特殊状态的元素一、动态伪类:link 超链接未被访问的状态a独有:visited 超链接访问过的状态a独有:hover 鼠标悬停在元素上的状态所有元素都能用:active 元素激活的状态所有元素都能用:focus 获取焦点的元素只有表单能用什么是激活—— 按下鼠标不松开注意点遵循LVHA 的顺序即 link 、visited 、hover 、active二、结构伪类常用1第一第二无任何显示第三第四常用2结构1结构2结构3了解即可空格也算内容以下为作业效果图