前端与HTML | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天。作为一个前端新手，在学习了HTML相关的课程之后，仍然较多疑问，多学习几次后方才写下这一篇总结笔记。
一、课程内容总结
课程介绍了前端的主要概念，要解决的问题和技术栈，讲解主要的HTML标签和使用，相关的语义化和内容。
二、课程要点
前端介绍
前端主要是通过WEB技术栈解决多端图形界面下人机交互问题。
classDiagram
前端技术 <|-- HTML
前端技术 <|-- CSS
前端技术 <|-- JavaScript
class HTML{
负责页面结构和内容
}
class CSS{
设置页面样式
}
class JavaScript{
定义用户的行为
}
前端评价：
- 功能
- 性能
- 美观
- 体验
- 安全
- 兼容
- 无障碍 前端技术扩展：
- NodeJs：开发后端服务器应用
- ELECTRON、React Native：开发客户端，
- WebRtc：开发在线交互，实现P2P传输
- WebGL：开发3D游戏
- WebAssembly：其他语言代码移植到浏览器运行
HTML介绍
HTML：全称HyperText Markup Language，翻译为超文本标记语言。
-
HyperText：超文本就是不同于一般的文本内容，包括更丰富的表现形式，包括图片，链接，表格等。 -
Markup Language：对于超文本利用成对标签来表现内容。
HTML标签介绍
完整的HTML例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
<!DOCTYPE html>：当前HTML文件的类型
<html></html：文档的根标签
<head></head>：该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等
<meta charset="utf-8"> ：指定文档使用 UTF-8 字符编码
<title></title>：设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字
<body></body>：页面的主体
HTML语法：
- 标签和属性不区分大小写，推荐小写，常用框架中自定义组件使用大写。
- 空标签可以不闭合。
- 属性值推荐双引号包裹，某些属性的值可以省略。
常见HTML标签：
可供查询的HTML参考，包含每个标签和属性的详细说明
语义化：
语义化定义：HTML中的元素、属性和属性值均有对应的语义，要遵守对应的语义编程，而非仅仅完成对应的样式。 语义化的好处：
- 代码可读性提高：使用对应语义标签能够更加清晰展示DOM结构。
- 可维护性：更加清晰的结构便于维护。
- 搜索引擎优化：关键词提取通常依赖对应的语义标签。
- 无障碍性：语音阅读页面也依赖对应的语义标签。 需要传递内容而非样式。避免使用可视化工具生成代码。
三、个人总结
通过学习，更加深入理解了HTML。对于HTML，需要掌握常用标签的格式和属性，在编写HTML代码时需要考虑到对应的语义。虽然纯HTML较为简单，仍需多加练习。编写HTML的时候需要考虑语义而非样式,即在去掉任何样式修饰的时候也可以生成正确的DOM树结构和页面层级结构。
