HTML学习｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第1天，本堂课重点内容：前端基础介绍前端开发

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

一、本堂课重点内容：

前端基础介绍
前端开发环境
HTML基础介绍
DOM树
HTML标签
语义化标签

二、详细知识点介绍：

HTML标签

<h1>-<h6>标签
列表
- 有序列表 <ol>
- 无序列表 <ul>
- 定义列表由<dl>包裹，<dt>是定义的标题，<dd>是定义的描述，一个<dt>可以对应多个<dd>
链接<a>，可以使用target="_blank"来用新标签页打开
多媒体
- <img>,alt可以用来表示替代性的文本
- <audio>音频，controls属性表示播放控件
- <video>视频
input
- placeholder：输入框中显示的提示信息
- type="range"：可以输入一个范围
- type="number"：输入数字，可以用min,max指定最小最大值
- type="date"：输入日期
- <textarea>：文本域,默认可以调整大小
- type="checkbox"：多选框，用户可以选多个
- type="radio"：单选框，只能选一个
- <select>包裹<option>：下拉选择
- 提示输入：有提示，可以自由输入
```
<input list="countries">
<datalist id="countries">
    <option>Greece</option>
</datalist>
```
<blockquote>：长引用，cite指定引用地址
<cite>: 短引用，作品的名字或者章节
<q>：具体的名字或者内容
<code>：表示代码
强调：<strong>重要，<em>一段话里需要重读的那种

语义化标签

header：页面头部
- nav：用于导航
main：一般只有一个，重点
- article：文章
aside：相关内容
footer：页面尾部
lang属性表示内容所使用的语言

语义化标签的好处 代码可读性、可维护性、搜索引擎强化、提升无障碍性

三、实践练习例子：

对语义化标签进行了简单的尝试

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <head>
        <nav><a href=" https://juejin.cn/">掘金</a></nav>
    </head>
    <main>
        <article>文章</article>
    </main>
    <aside>
        侧边栏
    </aside>
    <footer>
        底边栏
    </footer>
</body>
</html>

四、课后个人总结：

自己可以继续深入搜索学习。

五、引用参考：

暂无

HTML学习 ｜ 青训营笔记

HTML学习｜青训营笔记