这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
课程重点内容
一 什么是HTML
HTML全称为HyperText Markup Language,中文名叫做超文本标记语言，其是用来设计和编辑网页的内容和结构。HTML不是编程语言，不能生成动态内容，只能静态地展示网页内容。从HTML的中文名称可以知道
- 超文本，这意味着HTML文档不仅能包含纯文本，还能包含图片、音频、视频、链接、表格、列表、按钮、输入框等
- 标记语言，HTML是一种计算机语言，其不能编程，只能通过不同的标签来标记不同的内容。
二 前端工作的定义
前端工程师使用web技术栈，解决多端图形用户交互问题。
其中跨终端有以下类型：
- PC/移动浏览器
- 客户端小程序
- VR/AR等
三 前端技术栈拆解与分析
主要技术有三层：HTML、CSS、JavaScript。HTML负责内容和结构，CSS负责样式，JavaScript负责行为，这些都是运行在浏览器里面，浏览器通过HTTP网络协议与服务器通信。
四 HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如required、readonly
五 HTML语义化
HTML中的元素、属性及属性值都拥有某些含义。
1、开发者应遵循语义来编写HTML，例如：
- 有序列表用ol，无序列表用ul
- lang属性表示内容所使用的语言
2、语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
3、如何做到语义化
- 了解每一个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
六 基础标签
参考此链接，里面包含了每个标签和属性的详细说明 [HTML: HyperText Markup Language | MDN (mozilla.org)]
1、标题 h1~h6
从大到小为h1~h6,其是双标签形式，例如：
<h1>一号标题</h1>
2、列表
- 有序列表
- 无序列表
- 自定义列表
3、链接
其标签为：<a></a>
属性有：
- href="链接地址" ，其表示跳转到这个链接地址的网页
- target="属性值"，表示跳转的新窗口如何打开。其属性值包括：
- "_blank"：在新窗口中打开被链接文档。
- "_self"：默认。在相同的框架中打开被链接文档。
- "_parent"：在父框架中打开被链接文档。
- "_top"：在整个窗口中打开被链接文档。
- "framename"：被指定的框架中打开被链接文档
例子如下：
4、图片
其标签为：<img/>
属性有：
- src="图片地址"：其属性值填图片地址，让其在网页中得到显示
- alt=""：其表示当图片加载不出来时，在图片位置出现该属性值的内容。
5、音频
其标签为：<audio></audio>
属性有：
- src="音频地址"
6、视频
其标签为：<video></video>
其属性为：
- src="视频地址"
7、输入
其标签为：<input></input>
属性为：
- type=""：其表示输入的方式为哪种方式，其属性值为：
- "range"：表示输入的为范围
- "number"：表示输入的是数字
- "date"：表示输入的是时间
- "checkbox"：表示输入为多选框
- "radio"：表示输入的为单选框
- placeholder=""：其表示输入框
- list=""：若希望用户自由输入一些值，当输入时可以给用户一些提示，辅助用户快速进行输入。
例子如下：
8、文本样式
关于引用的标签
<blockquote></blockquote>：长引用，直接引用别人的一段话。<cite></cite>：短引用，一般是引用别人作品名字或章节。<q></q>：短引用，一般引用具体的哪些内容
关于代码的标签
<code></code>
关于字体样式的标签
<strong></strong>：表示非常重要的文本，以字体加黑的方式显示<em></em>：其有强调文本的作用，以斜体的方式显示
七 内容划分
内容划分主要分为页头header、页面主体main、与内容相关的内容aside、页尾footer。一般按上图来划分其位置。
课后个人总结
通过这次课程，重新重温了前端与HTML的内容，包括什么是前端、HTML、HTML语法、标签等等，主要把精力用在html的标签和属性上，尤其是跟着这个链接[HTML: HyperText Markup Language | MDN (mozilla.org)]，重温一下html的标签和属性。
