这是我参与「第五届青训营 」伴学笔记创作活动的第1天
首先，我们要知道什么是前端，前端包括：
1、解决GUI人机交互问题；
2、跨终端：PC/移动浏览器、客户端/小程序、VR/AR等；
3、Web技术栈
其次是HTML的语法：1、标签和属性不区分大小写，推荐小写；
2、空标签可以不闭合，比如 input、meta
3、属性值推荐使用双引号包裹
4、某些属性值可以省略，比如required、readonly
以下是在前端入门-基础语言篇的第一章节前端与HTML的学习中总结的学习笔记：
一、列表
- 有序列表
例<ol><li>阿凡达</li></ol>
输出结果为：1.阿凡达
例<ul><li>草莓</li></ul>表示
输出结果为：草莓
例<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
</dl>
## 输出结果为：霸王别姬
导演：
陈凯歌
主演：
张国荣
张丰毅
二、链接：在HTML中加入链接，一般使用标签a
例<a href="<https://www.bytedance.com>/" target="_blank" > #href表示超链接的引用地址，
字节跳动官网 #target=”_blank”表示打开新窗口
</a>
三、插入
- 插入图片
例<img src=”” alt=”” width=”” /> #alt表示图片加载不出时替代的文本
例<audio src=”” controls> </audio> #controls表示默认显示
例<video src=”” controls> </video>
四、输入
- 普通输入
- 用户可以选择的输入
- 限制用户只能选择一个
- 下拉选择：比较适用于选项比较多的情况
- 提示用户输入内容，不限制用户输入内容，只是提供一种快捷的输入
例<input placeholder=”请输入用户名”> #placeholder表示占位符，用户输入之前的显示
<input type=”range”> #可以输入的范围，结果会出现一个滑动块
<input type=”number” min=”1” max=”10”>
<input type=”date” min=”2018-02-10”>
<textarea>Hey</textarea> #多行输入
例<label><input type=”checkbox” />苹果</label>
<label><input type=”checkbox” checked /> 梨子</label>
例<label><input type=”radio” name=”sport” />足球</label>
<label><input type=”radio” name=”sport”/>篮球</label>
#互斥关系是利用name来实现的
例 <select>
<option>火龙果</option>
<option>牛油果</option>
<option>橙子</option>
</select>
例<input list=”countries” />
<datalist id=”countries”>
<option>Greece</option>
<option>UK</option>
</datalist>
五、引用
- 长引用，一般是直接引用别人的一段话
例<blockquote cite="..."> <p>啦啦啦啦啦......</p></ blockquote >
#cite属性表示引用的文字来自哪里
-
<cite>凉凉</cite> #表示引用较短的词或句 -
<q>梦</q> 输出结果：“梦” 。输出的结果会带引号
例<code></code>
引用多行代码时：<pre><code>const …</code></pre>
- 加粗
strong
例<strong>梦</strong> - 语气强调
em
例<em>梦</em>
下面说一说标签语义化，所谓标签语义化，就是指标签的含义。那么为什么要有标签的语义化呢？
- 方便代码的阅读和维护；
- 同时让浏览器或者网络爬虫更好的解析，从而更好的分析其中的内容；
- 使用语义化标签会具有更好的搜索引擎优化
最后，总的一句话是前端应该关注的是美观、安全、兼容、功能、体验、性能、无障碍。
