这是我参与「第五届青训营 」笔记创作活动的第1天
一、本堂课重点内容：
- 前端是什么？
- HTML以及一些常用标签
- 语义化是什么？
二、详细知识点介绍：
- 前端是什么？
前端是来解决GUI人机交互问题而出现的，有着跨终端的要求（如PC/移动浏览器/客户端/小程序/VR/AR等），而前端工程师就是使用web技术栈解决多端图形交互界面功能的工程师。
前端技术栈：HTML(内容)，CSS(样式)，JavaScript(行为)
前端应该关注哪些方面？
- 功能、性能、安全、无障碍、美观、兼容、体验
前端的边界：node搭建服务端，electron制作客户端、react native、webRTC多人协同，WebGL开发游戏，webASSEMBLY开发浏览器可以直接运行的代码
前端的开发环境：浏览器:IE/Edge、Chrome、Firefox、Safari；编辑器:VSCode、Vim、WebStorm
- HTML以及一些常用标签
HTML是什么：是HyperText Markup languange(超文本标签语言)的缩写
标签内可以加入属性名和属性值
HTML的语法相当于一个可以形成一个一级级展开的DOM树
HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，比如required、readonly
一些常用HTML标签介绍
标题：h1~h6（从大到小）
列表：有序列表：<ol><li></li></ol>
无序列表:<ul><li></li></ul>
定义列表:<dl><dt><dd></dd></dt></dl>（dt可对应多个dd）
链接：<a href="www.baidu.com"></a> (href叫超链接)
图片：<img src=""></img>
音频：<audio src=""></audio>
视频：<video src=""></video>
输入：<input a="请输入信息" type="种类" min="" max=""></input>,type定义输入数据类型，min和max定义最小值和最大值
文字：
<blockquote></blockquote>(快捷引用)
<cite></cite>(短引用)
<q></q>(双引号)
<code></code代码)
<pre></pre>(包裹代码标签可以多行引用代码)
<strong></strong> 加粗
<em></em> 斜体
语义化是什么？
-
HTML中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
要注意是传递内容，而不是样式
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合表述这个内容
- 不使用可视化工具生成代码
三、课后个人总结：
- 前端工程师就是使用web技术栈解决多端图形交互界面功能的工程师，学好三大件才是成为优秀前端工程师的第一步。
- 即使是HTML，也有很多要注意的东西。
