html:

结构化标准化语言HTML、XML表现标准语言css行为标准javaScript

DOM、ECMAScript

结构化标准化语言HTML、XML骨架表现标准语言css皮囊行为标准javaScript

DOM、ECMAScript动画

initial-scale1.0titleDocument/title

/head

HTML标签通常由尖括号和包围的关键词构成如html。

大多数HTML标签是成对出现的称为双标签。

例如html和/html分别作为HTML文档的开始和结束标签。

第一个标签是开始标签第二个标签是结束标签它们之间的内容构成了标签的主体。

有些特殊的标签是单个标签称为单标签或自闭合标签例如br

结构标签用于定义HTML文档的整体结构如html、head、body等。

文本格式化标签用于改变文本的显示方式如h1到h6用于定义六级标题p用于定义段落br

hrefURL链接文本/a。

图像标签用于在HTML页面中嵌入图像如img

src图像URL

/。

列表标签用于创建列表包括无序列表ul和有序列表ol以及列表项li。

表格标签用于创建表格包括table、tr表格行、th表头单元格、td表格单元格等。

表单标签用于创建表单收集用户输入包括form、input、textarea、select等。

布局标签如div和span用于布局和样式控制。

div是块级元素通常用于布局span是行内元素用于对文本的某部分进行样式控制。

选择器

bodyh1我爱中国/h1h2我爱中国/h2h3我爱中国/h3h4我爱中国/h4h5我爱中国/h5h6我爱中国/h6我爱世界

/body

/html经验css的最后一条声明的“”是可以不写的但是W3C规范建议最后一条声明的结束也要把“”写上

h1为标题标签

initial-scale1.0titleDocument/titlestyleh1

{color:

}---------------------------------------------------------------------------------------------!DOCTYPE

html

initial-scale1.0title05外部样式表-链接式/title!--

相对路径/绝对路径,推荐使用相对路径./

initial-scale1.0title06外部样式表-导入式/titlestyle

typetext/css!--

使用链接的css文件先加载到网页种再进行编译显示。

而import导入的css文件客户端先显示HTML结构再把css文件加载到网页中。

link不会因为网速慢先加载出未经美化的超文本import是属于CSS2.1特有的对不兼容CSS2.1的浏览器是无效的

现在基本不使用导入式

initial-scale1.0title07css样式优先级/titlelink

relstylesheet

/html如果有多个相同的样式最后一个会覆盖前面的不相同的样式会叠加

4.CSS基本选择器

initial-scale1.0titleDocument/titlestylep

{font-size:

bodyp2024年6月份全国居民消费价格同比上涨0.2%。

其中城市上涨0.2%农村上涨0.4%食品价格下降2.1%非食品价格上涨0.8%消费品价格下降0.1%服务价格上涨0.7%。

1­­—6月平均全国居民消费价格比上年同期上涨0.1%。

/p

/body

initial-scale1.0title09类选择器/titlestyle.mycolor{color:

blue;}.mysize

initial-scale1.0titleDocument/titlestyle/*

*/#first

/html标签选择器直接应用于html标签类选择器可以在页面中多次使用id选择器在同一个页面中只能使用一次

4.4

initial-scale1.0title11选择器的优先级/titlestyle/*

类选择器

F后代选择器选择匹配的F元素且匹配的F元素包含在匹配的E元素内EF子选择器选择匹配的F元素且匹配的F元素是匹配的E元素的子元素EF相邻兄弟选择器选择匹配的F元素且匹配的F元素紧位于匹配的E元素后面E~F通用兄弟选择器选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素

后代选择器案例:

initial-scale1.0titleDocument/titlestylep

font

--p我爱中国,font我span爱/span世界/font/pfont我爱编程/font

/body

initial-scale1.0titleDocument/titlestyle/*

子选择器

--p我爱中国,font我span爱/span世界/font/pp我爱编程,span我爱html/span/p

/body

initial-scale1.0titleDocument/titlestyledivp{color:

blue;}/style

bodydiv我爱编程p我爱世界/pspan我爱湖北/span/divp我爱世界/pp我爱世界22/p

/body

initial-scale1.0titleDocument/titlestylediv~p

{color:

E:first-child作为E的第一个子元素E:last-child作为最后一个子元素E:nth-child(n)第n个子元素E:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-typeE

F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素

!DOCTYPE

initial-scale1.0title16结构伪类选择器/titlestyle/*给第一个li设置颜色为红色*/ul

li:first-child

green;}/*给第2个p设置字体大小为50px*/p:nth-child(2)

{font-size:

bodypp1/ppp2/ppp3/pullili1/lilili2/lilili3/li/ul

/body

属性选择器功能描述E[attr]选择匹配具有属性attr的E元素E[attrval]选择匹配具有属性attr的E元素且属性为valE[attr^val]选择匹配元素E且E元素定义了属性attr其属性值以val开头的任意字符串E[attr$val]选择匹配元素E且E元素定义了属性attr其属性值以val结尾的任意字符串E[attr*val]只要包含了val的任意字符串

!DOCTYPE

initial-scale1.0title17属性选择器/titlestyle.demo

{width:

hrefhttps://www.***paper.cn澎湃/a/p/body

/html四、总结