![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的很认真
Collection
Collection
1.默写Html的文档结构
<!DOCTYPE html><!--声明文档类型为HTML5--><html><!--根元素所有html的文档内容都要写这标签中--><head><!--头元素，提供给浏览器和搜索引擎使用，用来描述文档的字符编码集，视口大小比如<meta charset="UTF-8">用来通知浏览器HTML文档的编写语言所属的编码集是‘UTF-8'--><head><titlle><!--显示在浏览器标签上的文本，指定当前页面的标题--></tittle><body><!--页面的主体内容，允许或希望用户的内容都应该写到这里，用户也只对这里感兴趣--></body></html>
| 元素类型 | 标签类型 | 语法 | 实例 |
|---|---|---|---|
| 非空元素 | 双标签 | <起始标签 属性1 属性2…>元素内容</结束标签> | <p>学习让我强大</p> |
| 空元素 | 单标签 | <标签 属性1 属性2..> | img src="imgges/girl.jpg" alt="女生" |
2.HTML的三大属性
3.css和js中的选择器
<!DOCTYPE html><html><head><style>/* 通过标签名称设置样式 */p {color: red}/* 通过class属性设置样式 */.p-class{color: red}/* 通过id属性设置样式 */#p-id{color: red}</style></head><tittle></tittle><body><p id="p-id" class="p-class">PHP中文网</p></body></html>
id>class>标签（CSS选择器的优先级）
var定义变量和let区别在于可以全局作用，let只能在声明块内有效
<!DOCTYPE><html><head></head><tittle></tittle><body><h2 id="h2-id" class="h2-class">PHP中文网</h2><body><script>// 通过标签选择let h2 = document.ElementsByTagName("h2")// 通过ID选择let h2 = document.ElementById("h2-id")// 通过class类名选择let h2 = document.ElementsByClassName("h2-class")// 通过CSS样式选择，let h2 = document.querySelector("#h2-id")// document.querSelector获取符合条件的第一个元素// document.querySelectorAll获取符合条件的所有元素</scrtpt></html>
总结
1.了解了html文档的结构类型和各个标签的作用
2.了解了html元素的三大属性
3.搞清三大属性在js和css中的获取及其他们的在选择器中的优先级