这是我参与「第四届青训营 」笔记创作活动的的第1天
前端与HTML
前端是什么
- 总的来讲就是使用web技术栈解决多端下面的GUI人机交互的问题（GUI就是图形用户界面）
前端技术栈
-
前端技术栈主要是分为三层
- HTML(内容)——————HTML负责页面结构以及内容
- CSS(样式)————————在页面中使用CSS来设置样式
- JavaScript(行为)——————使用JavaScript来定义网页的行为
-
浏览器通过网络协议如HTTP协议与服务器端进行通信，然后从服务器获取前端的代码（HTML、CSS、JavaScript）对页面进行渲染
前端应该关注什么
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性
- 体验
前端的边界？
前端技术的发展速度和更新迭代的速度很快，我们必须要不断地学习才能跟上时代。
HTML
1. HTML的定义
定义： HTML --> 超文本标记语言（Hyper Text Markup Language）
超文本：指超越文本，也就是指图片、链接、标题、表格等。
标记语言：使用标签表示各种各样的元素。HTML的标签一般是成对出现的，如：<h1></h1>等。也有不成对的标签，如<img src="photo.jpg" />，其中，src是属性名，"photo.jpg"表示属性值。
2. DOM树
DOM的全名是文档对象模型（Document Object Model）
DOM树就是一个树形结构的文档，树的每个节点都表示一个html标签
3. HTML语法
- 标签和属性不区分大小写，推荐使用小写
- 空标签可以不闭合，如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
4. HTML标签
标题
<h1>~<h6>标题字体从大到小
列表
有序：<ol>
无需：<ul>
有序和无序列表中的每一项为<li>
自定义列表：<dl>><dt>(标题)><dd>(内容)
链接
<a>标签，<a>标签中有两个属性，分别为href和target。
href属性规定链接指向的页面URL。target属性规定在何处打开链接文档。
target的属性值如下：
_blank：在新窗口中载入目标文档；_self（默认值）：响应显示在当前窗口中；_parent：响应显示在父框架中；_top：响应在当前窗口打开并替换当前的整个框架页
多媒体
<img>图片
<audio>音频
<video>视频
其中src表示url地址,control显示播放控件,alt表示替换文本属性，用于在图片加载失败的时候显示。
输入
<input>输入
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
列表
- 选项列表
<select>
<option value ="1">1</option>
<option value ="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
- 表单
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<datalist>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
文本类标签
块级引用：<blockquote>
短引用：<cite>、<q>，<cite>一般表示引用作品名字，<q>表示引用作品内容。
代码：<code>,可以输入短代码，也可以输入长代码。使用多行代码时需在前面配合<pre>使用。
强调：<strong>、<em>，<strong>强调含义，<em>强调语气。
内容划分
5. 代码规范思想
我们使用HTML标签一般遵循语义化原则来进行编写
语义化是什么
-
HTML 中的
元素、属性及属性值都拥有某些含义 -
开发者应该遵循
语义来编写HTML- 有序列表用
ol；无序列表用ul lang属性表示内容所使用的语言
- 有序列表用
-
谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键字、排序
- 屏幕阅读器：给盲人读页面
内容
-
语义化有什么好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而非样式
-
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
