这是我参与【第五届青训营】笔记创作活动的第一天
一、重点内容
- 前端的定义
- 前端技术栈拆解与分析
- HTML简介
- HTML语义化
二、知识点介绍
1.1 什么是前端
- 前端工程师使用web技术栈解决多端图形界面人机交互的问题
1.2 前端的范畴
- HTML - 内容
- CSS - 样式
- JavaScript - 行为
1.3前端技术栈
- 服务器端与前端通过网络协议构成前端最基础的技术栈
1.4 前端关注的问题
- 美观、功能、无障碍、安全、性能、兼容性
1.5 前端的边界
- nodejs开发服务器端应用
- electron开发客户端应用
- react native实现在线传输
- ......
1.6 开发环境
- 浏览器:IE/Edge、Chrome、Firefox、Safari
- 编译器：VSCode、Vim、WebStorm
2.1 HTML是什么
- HyperText Markup Language（超文本标记语言）
2.2 HTML语法
- 标签和属性不区分大小写，推荐小写；
- 空标签可以不闭合，比如input,meta；
- 属性值推荐使用双引号包裹；
- 某些属性值可以省略，比如 required,readonly
2.3 内容划分
<header></header>头标签，主要包括导航<main></main>主体标签，主要包括主体内容<aside></aside>与主体标签平行但不在主体标签中<footer></footer>尾部标签
2.4 语义化是什么
- HTML中的元素、属性及属性值都拥有某种含义
- 开发者应该遵循语言来编写HTML
2.5 谁使用我们写的HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
2.6 语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
2.7 HTML原则
- 传达内容，而不是样式
2.8 如何做到语义化
- W3C中HTML5语法规范，了解每个标签和属性的含义
- 不使用可视化工具生成代码
三、具体案例
1. HTML标题
- HTML标题通过
<h1> ~ <h6>标签来定义的
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
2. HTML段落
- HTML段落通过
<p>标签来定义的
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
3. HTML有序列表
- HTML有序列始于
<ol>标签，每个列表项始于<li>标签，列表项目使用数字进行标记
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
4. HTML无序列表
- HTML无序列表通过
<ul>标签来定义的，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
5. HTML自定义列表
- HTML自定义列表以
<dl>开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
6. HTML链接
- HTML链接通过
<a>标签来定义的 - 在 href 属性中指定链接的地址
- 在target属性中指定是否在另一个页面打开指定链接，默认在原页面打开，可以将值设置为_blank，在新页面打开
<a href="https://www.bytedance.com/">字节跳动官网</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.bytedance.com/" target="_blank">字节跳动官网</a>
<a href="https://www.baidu.com" target="_blank">百度</a>
7. HTML图像
- HTML图像通过
<img>标签来定义的
<img
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ubqnuhbnuho/movable_type.jpg"
alt="Metal movable type"
width="400"
/>
8. HTML音频
- HTML音频通过
<audio>标签来定义的
<audio src="/assets/music.ogg" controls></audio>
9. HTML视频
- HTML视频通过
<video>标签来定义的
<video src="/assets/video.mp4" controls></video>
10. HTML输入
- HTML输入通过
<input>标签来定义的 - 输入类型是由 type 属性定义
输入类型：text
- 文本域
<input type="text" placeholder="请输入用户名">
输入类型：range
- 定义用于精确值不重要的输入数字的控件
<input type="range">
输入类型：number
- 定于输入数字的字段
- max 规定允许的最大值。
- min 规定允许的最小值。
数量 ( 1 到 10 之间)：<input type="number" min="1" max="10">
输入类型：date
- 定义date控件
日期：<input type="date" min="2018-02-10">
一个多行的文本输入控件
<textarea>Hey，我是一个文本框。</textarea>
11. 单选框
- 单选框通过
<input type="radio">标签来定义的
性别：<label><input type="checkbox" name="sex">Male</label>
<label><input type="checkbox" name="sex">Female</label>
12. 复选框
- 复选框通过
<input type="checkbox">标签来定义的
爱好：<label><input type="checkbox" name="hobby">画画</label>
<label><input type="checkbox" name="hobby">听音乐</label>
13. 下拉选择
<select>元素用来创建下拉列表。<select>元素中的<option>标签定义了列表中的可用选项。
<select>
<option>🥑</option>
<option>🥩</option>
<option>🥓</option>
</select>
14. 引用标签
<blockquote>标签定义摘自另一个源的块引用。- cite属性规定引用的来源。
<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是自生自长在深林荒野里的怪物， 是由可以使天才生长的民众产生、长育出来的，所以没有 这种民众，就没有天才。</p>
</blockquote>
15. 文本格式化
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>
16. 完整页面
<!DOCTYPE html>声明为 HTML5 文档<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容<h1>元素定义一个大标题<p>元素定义一个段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
四、个人总结
通过本章的学习，我掌握了前端与HTML的基础知识，在其中，因HTML输入类型较多，掌握不是很好，比较容易混淆。对此，会通过练习来加强弥补。
