这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天，接下来是一些学习笔记以及我个人的思考和总结。
什么是前端
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
- Web技术栈
前端技术栈
前端应该关注哪些方面
- 美观
- 功能
- 性能
- 无障碍
- 安全
- 兼容
HTML是什么
HyperText(图片、标题、链接、表格等) Markup Language，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
html的语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、 readonly
浏览器在拿到html之后会把html代码进行解析，解析出一个DOM树。
什么是DOM树？
把html的代码转化成对应的树形结构，里面对应的每个节点称之为DOM节点。
html的常用标签
标题： h1></h1> ~ <h6></h6>,用于表示文档的各级标题，级数越大字体大小越小。
列表：<ol><li>...</li></ol>，有序列表。 <ul><li>...</li></ul>，无序列表。 <dl><dt>...</dt><dd>...</dd></dl>，描述列表。
链接：<a></a>，href属性：链接到的地址；target属性：跳转页面的方式。
图片：<img>，src属性：图片的地址，alt属性：当图片未正常加载时显示的文本。该标签可以不闭合。
音频：<audio></audio>，src属性：音频地址，controls属性：是否显示浏览器默认的音频控件。
视频：<video></video>，src属性：视频地址，controls属性：是否显示浏览器默认的视频控件。
输入框：<input>，type属性：输入框的类型
数据列表：<datalist><option>...</option></datalist>，一般通过id属性绑定拥有list属性的input输入框使用
文本框：<textarea></textarea>,允许调整大小并输入多行文字的输入框。
下拉选项框：<select><option>...</option></select>，option为下拉框的选项内容。
引用：
<cite></cite>，短引用。<q></q>，短引用。q区别于cite，会将包裹的文本用双引号引用，而cite则是显示成斜体。<code></code>，将文本以代码的样式引用。<blockquote></blockquote>，块级引用，可以引用多行文本。cite属性：引用文本的地址。<pre></pre>，包裹的文本将保留空白符，并用源格式在浏览器页面中显示出来。<strong></strong>，加粗包裹的文本，强调文本重要性。<em></em>，将包裹的文本变成斜体，表示强调。
内容划分
语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol：无序列表用ul
- lang 属性表示内容所使用的语言
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
个人思考与总结
通过这节课的学习，对于前端的认识更近一步，同时也对HTML的知识和HTML的语义化也有了更深的理解，html是向用户传达内容而不是样式，是一种结构层；同时也明白了，日后我们在进行软件开发时，语义化的重要性，使得我的基础更加牢固了，收益颇丰！
