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

前端与HTML

什么是前端

前端工程师是使用web技术栈来解决多端图形用户界面交互问题的工程师

前端技术栈

浏览器可以通过http协议和服务器进行通信，浏览器通过http协议从服务器上拿到这些前端代码，然后渲染成我们看到的页面，浏览器也可以把用户填写的内容或者一些行为通过http协议发送到服务器端。

http与https的区别

Http是明文传输的，Https协议是在Http协议上添加了SSL的加密协议，可以进行加密传输和身份验证。其实就是说Http对网络传输完全是裸奔状态，也就没办法防范中间人攻击，因为根本没有加解密措施。不过Https相比Http也只是添加了SSL加密层，所以它仍然是一种特殊的Http，仍然是无状态的。

HTML（HyperText Markup Language）

什么是？

超文本标记语言

HTML语法

·标签和属性不区分大小写，推荐小写

·空标签可以不闭合，比如input、meta

·属性值推荐用双引号包裹

·某些属性值可以省略，比如required、readonly

列表

<ol>
  有序列表
  <li>1111</li>
  <li>22222</li>
  <li>33333</li>
</ol>

<ul>
  无序列表
  <li>1</li>
  <li>2</li>
</ul>

<dl>
  key-value
  <dt>性别：</dt>
  <dd>女</dd>
  <dt>年龄:</dt>
  <dd>18</dd>
</dl>

运行结果：

链接

<a href="" target=""></a>

href的位置表示替换当前页面的跳转

target属性

控制跳转形式

"_self"————内容在当前页面显示
"_blank"————内容在新页面显示
"three"————内容在对应窗口显示（新页面，运行出来好像和_blank区别不大，看不出其区别）
"_top"————在当前窗口打开链接，并替换当前的整个窗体，清除所有包含的框架
"_parent"————（新页面,进去页面显示很快）

img图片

alt属性

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。如果图像仅做装饰作用，使用alt=""

audio视频

标签属性

src:String型，所播放音频的 url
autoplay:值为autoplay，如果出现该属性，则音频在就绪后马上播放。
值为controls，如果出现该属性，则向用户显示控件，比如播放按钮。
"_top"————在当前窗口打开链接，并替换当前的整个窗体，清除所有包含的框架
值为loop，如果出现该属性，则每当音频结束时重新开始播放。

audio事件

onended:当媒介已抵达结尾时运行脚本，也就是当前歌曲播放完了，这里的“媒介”是指audio标签。
onloadstart:当浏览器开始加载媒介数据时运行脚本。
onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
onplaying:当媒介数据已开始播放时运行脚本。
onpause:当媒介数据暂停时运行脚本。
onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)

input标签

<input type="" />

input属性

input的type总结_

一些文本类标签

一些文本标签总结

pre表示多行代码的意思,如果不加，回车是不生效的，被包裹的文字都会在一行里面显示

内容划分

总结

总的来说今天的内容较为基础，主要是对于标签的一些扩充，关于a标签的target属性的区分会需要特别注意，这部分的知识点很小，但是很容易弄混。明天也要认真学习！

前端与HTML | 青训营笔记