这是我参与「第四届青训营」笔记创作活动的的第一天

1. 进一步认识前端

1.1 前端的一些技术栈

html（内容）
css（样式）
javascript（行为）
网路协议（http等）

1.2 前端可以做的东西

node.js（服务端）
electron（客户端）
react native（p2p 多人会议在线传输）
web rtc（3d游戏）
总之前端能做的东西早就已近不只是做网页这么简单了，能做的东西非常多！

2. 今天学到的一些小知识

2.1 html标签的简写

对于像img这样标签内不需要嵌套其它内容的标签，可以进行简写

就好像下面这样

 <img src=""></img> 
 
 <img src="" />

其实不闭合也可以，比如input,meta

2.2 比较少用到的列表类型（key：value）

是一个多对多的关系

 <dl>
     <dt>霸王别姬</dt>
     <dd>导演：</dd>
     <dt>主演</dt>
     <dd>嘎</dd>
     <dd>嘎嘎</dd>
     <dd>嘎嘎嘎</dd>
     <dt>上映日期</dt>
     <dd>1993-01-01</dd>
 </dl>

2.3 a标签的target=“_blank”

a标签默认是直接跳转到目表网页，加上target=“_blank”属性之后会在新标签中打开目标网页

2.4 img的alt属性

用来展示当图片加载失败时显示的图片信息内容

2.5 input标签没见过的属性

这个可以为input提供一个建议输入

 <input list="countries"/>
 <datalist id="countries">
     <option>china</option>
     <option>japan</option>
     <option>greece</option>
 </datalist>

2.5 html文本的一些相关标签

blockquote 块级引用

blockquote 表示引用一个长文档，可以设置cite属性表示引用来源

 <blockquote cite=“aaa.xxx”>
     <p>
         你好呀，这里是一个快级引用哦
     </p>
 </blockquote>

cite 短引用

cite是一个短引用，比如书名、章节等，会用斜体显示

 <cite>小王子</cite>

code,pre标签

code,pre通测组合使用用来展示代码片段

 <pre><code>
     console.log("Hello,World!")
 </code></pre>

3. 一个经典的面试题：语义化标签

语义化标签是h5的一个新特性，即标签的作用就是其本身的含义，有利于SEO，具有以下的优点

代码可读性
可维护性
搜索引擎优化（seo）
提示无障碍性

比如header表示头部，body表示主题区域，footer表示尾部等等

当然,H5的新特性可乐团不止这些，比如svg绘图，拖放api等，可以在网上多进行一些了解

4. 学习HTML的一些建议。

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

再次认识HTML | 青训营笔记