- “这是我参与「第四届青训营 」笔记创作活动的的第1天”
HTML是什么
HyperText Markup Language
- HyperText 超文本
- Markup Language 标记语言
完整HTML文件解读
<!doctype html>- 指明文件使用的HTML版本，决定浏览器的渲染方式<html></html>- 根标签，其他所有标签都写在根标签中<head></head>- 存放网页的元数据（那些用户不需要看到的，但是有助于浏览器/搜索引擎识别的数据）<body></body>- 存放用户可见的内容
DOM树
浏览器解析HTML的结果
查看DMO树
浏览器打开开发者工具
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly（布尔属性，不写默认为true）
标题
h1~h6：字体依次缩小
列表
有序列表
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
无序列表
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
定义列表
用于表述键值
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
链接
href是目标链接
<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>- 网页链接；target表示是否在当前页面打开（默认在当前页面打开，_blank在新页面打开）
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" alt="Metal movable type" width="400"/>- 图片链接<audio src="/assets/music.ogg" controls></audio>- 音频链接<video src="/assets/video.mp4" controls></video>- 视频链接
输入
-
<input placeholder="请输入用户名">- 文本框输入type属性取值
默认 - 单行文本框
range - 滑块
number - 数字
date - 日历
checkbox - 多选
radio - 单选
-
<textarea>Hey</textarea>- 文本域输入 -
<select><option>🥑</option><option>🥩</option><option>🥓</option></select>- 选择表单
文字展示
引用
<blockquote cite="http://t.cn/RfjKO0F"></blockquote>- 块引用cite>第一章</cite>- 短引用<q>字符串是不可变量</q>- 前文引用
强调
<strong>一定要做风险评估</strong>- 加粗<em>are</em>- 倾斜
其他
<code>const</code>- 代码<pre></pre>- 预格式化（保留空格、换行）
内容划分
- header - 页面头部
- nav - 导航
- main - 主体
- article - 内容
- aside - 侧边栏
- footer - 底部
语义化
什么是语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML（有序列表用 ol；无序列表用 ul；lang 属性表示内容所使用的语言
等等）
语义化好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而不是样式
对于不同语义的内容使用不同的标签，而不是通过样式进行区分
