这是我参与「第四届青训营 」笔记创作活动的的第2天
前言
上文提到了HTML的相关概念，本文具体介绍HTML的基础用法。希望能对你学习前端有所帮助：）
2 HTML的用法
2.1 DOM树
DOM即document object model文档对象模型，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。
DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。
以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。
（图片来源：iOS-图解HTML DOM树 - 简书 (jianshu.com)）
2.2 HTML的语法
2.2.1 HTML标签
HTML标签是HTML的一个重要组成部分，是由尖括号所包围的关键词，比如<html>。
标签分类：
- 单标签：独自使用即可表达（格式：<标签名 属性名1=“ ” 属性名2=" " >）
<img src="logo.jpg" title="HTML" alt="HTML" /> //图片标签
<br/> //换行标签
<hr/> //水平线标签
2. 双标签：成对使用，有开始和结束（格式：<首标签名 属性名1=" " 属性名2=" " ></尾标签名>
<p>我的第一个段落</p> //段落标签（上下自动生成空白行）
<h1><h1/> //标题标签（取值h1~h6,一个页面只能有一个h1）
注意：
- 标签只能嵌套使用，不能交叉使用。
- 各种属性值用" "括起来
- 标签名和属性建议都用小写字母
- 注重标签间的缩进（一次缩进两个空格），有层次。偏于检查和改编。
2.2.2 绝对路径和相对路径
- 相对路径：相对于文件自身出发
- 文件(html文档)和图片在同一个目录(文件夹)，直接写文件名；
- 如果图片在下一级目录里，src就为
文件夹名+/+图片名称； - 如果图片在上一级目录里，scr就是
../ + 图片名；
- 绝对路径
- 电脑上绝对路径：从电脑盘符开始，如
C:\Documents\学习\前端学习\logo.png； - 互联网上绝对路径：
http://...；
- 电脑上绝对路径：从电脑盘符开始，如
2.3 HTML为谁服务
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
结束语
HTML的知识点虽然简单但是琐碎，需要日积月累、多写多练。只要基础牢固，学前端一定得心应手。我们一起加油吧！
