这是我参与「 第五届青训营 」笔记创作活动的第 1 天。
今天是 2023 年 1 月 15 日，星期日，也是青训营正式上课的第一天。在这第一堂课里面，我跟随赵文博讲师学习了《前端与 HTML 》，学到了一些基础的 HTML 知识。
一个 HTML 示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>青训营网页</h1>
</body>
</html>
HTML的常见元素分为两类：head区域的元素和body区域的元素。
head区域的HTML元素，并不会在页面上直接留下内容。包括meta、title、style、link、script、base等等。
body区域的元素，则会在页面中显示出来。
- div、section、article、aside、header、footer
- p
- a
- span、em、strong
- 表格元素：table、thead、tbody、tr、td
- 列表元素：ul、ol、dl、dt、dd
- 表单元素：form、input、select、textarea、button
其中，div是最常见的元素，在几乎所有的网页中都用到了div。
这些标签也拥有一些重要的属性
- a[href, target]
- img[src, alt]
- table td[colspan, rowspan]
- form[action, method, enctype]
- input[type, value]
- button[type]
- selection>option[value]
- label[for]
html 元素之间具有一定的嵌套关系。
- 块级元素可以包含行内元素。
- 块级元素未必能相互包含。比如 div 中可以包含 div，但 p 标签中不能包含 div。
- 行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。
在 HTML 的开头，会有 doctype ，它的意义在于让浏览器以标准模式渲染，以及让浏览器知道元素的合法性。
下面列出了一些可以自闭合的元素。需要注意的是，自闭合的元素中不能再嵌入别的元素。且 HTML5 中要求加上斜杠。
- 表单元素 input
- 图片 img
- br、hr
- meta、link
form 表单的作用有：
- 直接提交表单
- 使用 submit / reset 按钮
- 便于浏览器保存表单
- 第三方库（比如 jQuery）可以整体获取值
- 第三方库可以进行表单验证
今天结束了 HTML 基础的学习，很期待明天的 CSS 学习之旅。
日拱一卒，水滴石穿。
