HTML学习课堂笔记 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天。
前端
运用Web技术栈解决GUI人机交互问题，具有跨终端、跨平台的特性。网页内容可以在任意现代浏览器上显示，也可以封装为各个平台的应用程序。
前端技术栈
HTML负责内容，CSS负责样式，JavaScript负责交互。一般的他们三者各司其职。
HTML：HTML（Hypertext Markup Language，超文本标记语言），用于组织网站内容，并表明语义。比如告诉浏览器这里是一组段落还是一个要点列表，这里插入的图片是什么等等。
CSS：CSS（Cascading Style Sheet，层叠样式表），用于设置样式。例如将文本设置为红色居中，或者为网站添加背景颜色或背景图片。
JavaScript：JavaScript 是一种编程语言，用于为网站添加交互功能。例如按钮被按下或数据被输入时发生的事情、动画等。
前端关注的方面
功能、美观、无障碍、安全、性能、兼容性、用户体验
初识HTML
HTML不是一门编程语言，而是标记语言，作用是标记内容让浏览器能正确的识别和渲染内容。可以在VSCode或记事本中粘贴这段代码，并另存为index.html，然后在浏览器中打开index.html文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Page.</title>
</head>
<body>
<p>Cats are cute animals.</p>
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg" width="400">
</body>
</html>
在浏览器打开后我们会看到一段文字和一张图片，文字的内容与代码中<p></p>之间那段文字相同。
这里<p></p>的作用便是告诉浏览器这里放了一段文本，内容是“Cats are cute animals.”，其中<p>是开始标签，表示元素从这里开始，</p>前面多了一个斜杠，是结束标签，表示元素在这里结束。元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次，让浏览器去猜测HTML应该怎么显示往往等不到我们所期望的效果。
那往网页上放图片又是怎么操作呢？这里我们使用了<img>标签，但是我们会发现<img>标签没有内容也没有结束标签，但是里面包含了src和width两个属性。通过src属性我们定义了要显示的图片的位置，通过width属性我们限制了图片的宽度。不包含任何内容的元素称为空元素，例如<img> 元素和用于换行的
元素。
再来看看其他元素：<!DOCTYPE html>指明了文档类型。
<html>元素包含了整个页面的内容。
<head>元素包含了不显示在页面中的内容，如面向搜索引擎的搜索关键字、页面描述、CSS和字符编码声明等。
<meta charset="utf-8">指定文档使用 UTF-8 字符编码，这个编码应与文件编码相同，否则可能会显示乱码。
<title>元素用于设置标题，此处的标题不显示在页面中，一般会显示在浏览器的标签栏上。
<body>元素包含页面显示的内容，包括文本、图像、视频等。
常用的HTML元素
文字
<h1>一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>
<p>正文</p>
列表
有序列表和无序列表
<h2>世界电影票房排行榜</h2>
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
<h2>购物清单</h2>
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
超链接
通过title中的内容会在鼠标悬停时显示，通过添加target="_blank"来在新标签页中打开
<a href="https://www.bytedance.com/" title="在当前页面打开">字节跳动官网</a>
<a href="https://www.bytedance.com/" title="在新标签页打开" target="_blank">字节跳动官网</a>
表单内容
<input placeholder="请输入用户名">
<input type="number" min="1" max="10">
<textarea>Hey</textarea>
小结
HTML应当用来表明内容和目的，这能方便搜索引擎和屏幕阅读器去理解网页内容。样式应当使用CSS设定，各司其职也能让代码更清晰。
