HTML 页面结构、三大属性、样式规则
HTML 页面结构
<!-- htm5文档的声明 --><!DOCTYPE html><!-- 表明本身是个html文档 语言为英文 --><html lang="en"> <!-- html文档的头部标签 --> <head> <!-- 规定 HTML 文档的字符编码：UTF-8 --> <meta charset="UTF-8" /> <!-- 设置页面的像素宽度与显示效果 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- html页面在浏览器上显示的标题 --> <title>Document</title> <!-- 此标签内还可以包含一些样式表、JS脚本等内容 --> </head> <!-- html文档的主体标签 包含文档的所有内容（文本、超链接、图像、表格和列表等等。） --> <body> <h2>你好</h2> </body> <!-- html文档的结束 --></html>
HTML 三大通用属性
| 属性 |
描述 |
示例 |
| class |
描述页面中的一类元素 |
class="title-class" |
| id |
描述页面中的唯一元素 |
id="title-id" |
| style |
元素的行内 CSS 样式 |
style="color: red;" |
元素，类，id 不同级别的样式规则
示例 1
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style> </head> <body> <h2>PHP中文网</h2> </body></html>
运行结果
示例 2
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .class-h2 { color: blue; } </style> </head> <body> <h2 class="class-h2">PHP中文网</h2> </body></html>
运行结果
示例 3
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .class-h2 { color: blue; } #id-h2 { color: red; } </style> </head> <body> <h2 class="class-h2" id="id-h2">PHP中文网</h2> </body></html>
运行结果
示例 4
代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .class-h2 { color: blue; } #id-h2 { color: red; } </style> </head> <body> <h2 class="class-h2" id="id-h2" style="color: yellow;">PHP中文网</h2> </body></html>
运行结果
总结
- 从示例 1 与示例 2 可以看出 class 比 标签 优先级高
- 从示例 2 与示例 3 可以看出 id 比 class 优先级高
- 从示例 3 与示例 4 可以看出 style 比 id 与 class 优先级都高
