这是我参与⌈第五届青训营⌋伴学笔记创作活动的第1天

什么是前端

解决GUI人机交互问题
跨终端 PC/移动浏览器、客户端小程序、VR/AR
Web技术栈

DOM树

一些之前没掌握的知识点...

1.当某些属性值为true，可以把值省略。例如：输入框内容必填，可以用required属性表示，不需要加值。
2.dl表示定义列表，dt表示描述列表的标题，dd表示具体描述
3.target="_blank"新窗口打开
4.img中alt属性表示替代性文本。例如：当图片加载失败时，显示替代文字
5.插入音频的<audio>标签中controls表示此音频需要默认显示浏览器播放控件
6.插入视频的<video>标签,input中placeholder属性表示占位符（用户未输入时显示placeholder的属性值,当用户输入时，placeholder被切换掉）
7.表单中range属性值可以让用户输入范围
8.number、date等属性值可设置最大值和最小值，例如：<input type="date" min="2018-02-10">
9.radio属性值可单选，checkbox属性值可多选。一定要加name属性
10.下拉选择<select>，选项写在<option>标签中.<input>中list属性，表示提示选项，方便用户输入，但并不限制自由输入。

11.表示引用的标签

<blockquote>标签，块级引用，表示较长的引用，也叫长引用，一般用于直接引用别人的一段话，cite属性表示这一段引用来源于此属性值。
<cite>标签，短引用，用短短的几个字，表示引用别人作品的名字或章节。
<q>标签，短引用，表示具体引用内容

12.<code>标签，表示代码，可长可短。

13.表示强调的标签

<strong>标签，更突出事物重要紧急。
<em>标签，更突出语气上的强调。（可用于警告等）

内容划分

语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

如何做到语义化

了解每个标签的属性和含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码

总结

通过此课程，我夯实了html的基础，发现了之前没有注意到的问题，没有学过的知识，更深入了解html，今后还需要查阅资料，了解每一个标签的属性含义，不断学习。

前端与HTML | 青训营笔记