这是我参与「第五届青训营 」笔记创作活动的第1天
一、本堂课重点内容：
前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化
二、详细知识点介绍：
什么是前端?
使用web技术栈，解决多端GUI(图形界面)下的人机交互问题
前端技术栈
HTML（内容）、CSS（样式）、JavaScript（行为）与网络协议构成前端技术栈
HTML是什么？
HyperText Markup Language（超文本标记语言）
html结构
<!doctype html><!-- 标记当前使用的html文件是什么版本,决定浏览器的渲染模式 -->
<html><!--文档的根标签 -->
<head><!-- 页面的元数据 -->
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body><!-- 呈现给用户的内容 -->
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
html语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly
html标签
标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
有序列表
<ol>
<li>1</li>
<li>2</li>
</ol>
无序列表
<ul>
<li>1</li>
<li>2</li>
</ul>
自定义列表
多对多的关系
<dl>
<dt>导演</dt>
<dd>导演1</dd>
<dt>主演</dt>
<dd>主演1</dd>
<dd>主演2</dd>
</dl>
链接
<a href="https://www.baidu.com/">
百度
</a>
<a href="https://www.baidu.com/" target="_blank">
新窗口打开百度
</a>
多媒体（图片、视频、音频）
alt属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，显示alt的属性值
controls属性规定浏览器应该为视频或音频提供播放控件。
<img
src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
alt="替换文字"
width="400"
/>
<audio
src="/assets/music.ogg"
controls
></audio>
<video
src="/assets/video.mp4"
controls
></video>
输入
placeholder占位符，用户没有输入的时候显示
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10"
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
多选
<p>
<label><input type="checkbox" />1</label>
<label><input type="checkbox" checked />2</label>
</p>
单选
相同的name实现互斥
<p>
<label><input type="radio" name="sport" />篮球</label>
<label><input type="radio" name="sport" />足球</label>
</p>
下拉列表
<p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
提示选择
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
长引用
<blockquote cite="这里放文章链接">
<p>引用内容</p>
</blockquote>
短引用
<cite>引用内容</cite>
代码引用（单行和多行）
<code>const</code>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
强调
<strong>强调重要</strong>
<em>语气上重音</em>
内容划分
html的语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义编写HTML
html的使用
开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容
语义化的好处
代码可读性、可维护性、搜索引擎优化、提升无障碍性
三、课后个人总结：
本节课程主要了解了html的相关知识，对已掌握的html标签进行了复习，同时学习到了一些以前没有见过的标签，如blockquote、cite、code等，html标签种类繁多，各种属性都有不同的效果，在实际的开发过程中，需要选择合适的来使用。
