一、前端三宝
HTML \ CSS \ JavaScript
二、HTML页面的文档结构
| ID | 标签及代码 | 描述说明 |
|---|---|---|
| 1 | ！DOCTYPE html | 文档体； |
| 2 | <html>…</html> | 根标签； |
| 3 | <head>…</head> | 头元素; |
| 4 | 标签meta | 元数据标签; |
| 5 | meta charset=”UTF-8”/ | 网站编码； |
| 6 | meta charset=”viewport”/ | 视口； |
| 7 | <title>…</title> | 网页标题； |
| 8 | <body>…</body> | 主体元素；非空元素，双标签 |
| 9 | <p>…</p> | 段落标签； |
| 10 | h1-h6 | 1级标题-6级标题 |
| 11 | img | 引入图片 vidio 引入视频，单标签，空元素 |
| 12 | src | 引入一个外部链接 图片或者视频；单标签，空元素 |
| 13 | <br> | 换行 |
| 14 | ul | 无序列表； |
| 15 | ol | 有序列表 |
| 16 | dd dt dl | 自定义的列表； |
| 17 | span | 都是常用标签； |
| 18 | a | a标签； |
| 19 | <!—注释内容-> | 注释内容 |
| 20 | <script>…</script> | JS标签 |
| 21 | <style>…</style> | 样式标签 |
| 22 | <?php … ?> | php标签 |
三、元素的三大通用属性
1.id属性 获取当前元素，具有唯一性；
2.class类属性 获取一类元素，可以用到很多标签上面；
3.style属性 行内元素；
四、优先级对比
根元素 < class属性 < id属性 < style属性
五、学习体会
1.了解学习前端三宝HTML\CSS\JavaScript，为PHP开发打下夯实的基础；
2.糅合前端三宝学习提升自我对前端开发的认知和能力；
3.了解浏览器创建网页的过程：HTML->DOM->WINDOW；
4.在VSCode编辑器下安装Live Server插件（插件功能：浏览器页面自动刷新），启动及使用；
5.在VSCode编辑器下安装prettier-code form插件（插件功能：保存文件自动进行格式化），启动及使用；
6.理解对象的概念，认识对象；
（1）window （大BOSS）浏览器的全局对象
（2）location
（3）document 代表当前正在显示的html文档
7.console控制台的查看与使用；
在<script></script>脚本代码中使用console.log()指令将代码执行结果发送到浏览器控制台显示:
| ID | 代码 | 描述 |
|---|---|---|
| （1） | console.log(window); | 描述 |
| （2） | console.log(window.document); | |
| （3） | console.log(document.URL); | |
| （4） | console.log(document.doctype); | |
| （5） | console.log(document.documentElement); | |
| （6） | console.log(document.head); | 头 |
| （7） | console.log(document.charset); | 编码 |
| （8） | console.log(document.title); | 标题 |
| document.title = “**“; | 修改标题 | |
| （9） | console.log(document.body); | |
| document.body.style.backgoundColor = “wheat”; | 更换颜色 | |
| （10） | console.log(document.styleSheets); | |
| （11） | console.log(document.styleSheets[0]); | |
| （12） | console.log(document.scripts); | |
| （13） | console.log(document.scripts[0]) | |
| （14） | console.log(document.scripts[3]) | 第四个脚本 |
| （15） | console.log(document.currentscript); | 获取当前正在被执行的JS脚本 |
8.顺利安装小皮面板并熟悉功能界面及使用，上传起点小说网并预览效果；
9.多看多查多问多练，反复练习不懂多请教老师；
