这是我参与「第四届青训营」笔记创作活动的的第1天。

一、本堂课重点内容：

DOM树的介绍
HTML标签的介绍
标签的语义化

二、详细知识点介绍：

DOM树

首先我们要认识HTML就不得不提一下DOM树了，DOM(Document Object Model)即文档对象模型，它提供了对整个文档的访问模型，同时也将文档作为一个树形结构来解析，文档中的HTML标签或其中的文本项都被作为DOM树中的节点，所以DOM树精确的描述了HTML文档中个节点的紧密联系。当HTML文档被解析为DOM树的时候，我们要操作文档就可以通过对DOM树的操作实现。DOM模型不仅仅描述了文档的结构，还定义了节点对象的行为，我们可以利用对象的方法和属性对节点进行增删查改。

微信截图_20220710125931.png

HTML标签

规范

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以忽略，比如 required、readonly

单双标签的介绍

我们主要的HTML标签都是双标签，双标签的使用<html><html/>

<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>

也有少不分的单标签，单标签的使用<br/>或者直接<br>

<br><hr><img><input><param><meta><link>

标题标签

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

h1标签最大，h6标签最小

列表标签

有序列表

<ol>
    <li>列表一</li>
    <li>列表二</li>
</ol>

无序列表

<ul>
    <li>列表一</li>
    <li>列表二</li>
</ul>

自定义列表

<dl>
    <dt>列表一</dt>
        <dd>子列表一<dd>
        <dd>子列表二<dd>
    <dt>列表二</dt>
        <dd>子列表一<dd>
        <dd>子列表二<dd>
</dl>

链接标签

<a href="https://www.baidu.com" target="_blank">百度</a>

href 跳转地址 target 在何处打开跳转地址

多媒体标签

图片

<img src="D:\Desktop\juejin.png" alt="掘金LOGO">

音频

<audio src="D:\Desktop\juejin.ogg" controls></audio>

视频

<video src="D:\Desktop\juejin.mp4" controls></video>

表单标签

<input type="text" placeholder="请输入用户名">   <!-- 文本 -->
<input type="range">   <!-- 滑动条 -->
<input type="number" min="1" max="10">   <!-- 数字 -->
<input type="date" min="2022-07-25">   <!-- 日期 -->
<textarea></textarea>   <!-- 文本域 -->
<input type="checkbox">   <!-- 多选 -->
<input type="radio">   <!-- 单选 -->

标签的语义化

以下是我们语义化的一些标签：

微信截图_20220710125931.png

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

三、课后个人总结：

这是我在青训营的第一节课，课程内容比较基础，非常方便食用。最主要的还是让我重新认识DOM树，更佳清晰的认识到了的DOM结构。希望可以在后面的课程中获得更多收获！

四、引用参考：

菜鸟教程：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

前端与HTML ｜ 青训营笔记