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

什么是前端：

1.解决GUI人机交互问题

2.跨终端

3. web技术栈

具体解释：无论是什么设备如vr app pc都是用html css javascript，用web技术栈实现多端人机交互问题

前端技术栈：

1. html--页面结构和内容

2. css--样式

3. javascript--行为

4. 服务器端（网络协议）

三者运行在浏览器里，而浏览器通过http协议和服务器通信，浏览器通过http把代码传到服务器，服务器渲染成为可视页面，同样浏览器也可以把用户的填写内容来传递到服务器，实现最基本的交互功能

换句话说，我个人认为其实html就是骨架，css就是填充的血肉，而js则是实现功能的灵魂

笔记图片.png (本图片生动形象的阐述了三者关系，摘自pink老师)

前端应该关注什么：

功能（核心）

美观（给用户最佳的体验）

无障碍（Accessibility）

安全（保护用户的数据安全）

性能（实现性能的最优化）

兼容性（各个客户端浏览器都可以兼容）

前端的边界:

nodejs 服务器端

electron 客户端应用

web rtc p to p在线传输

web gl 3d游戏

web assembly 把c++等变成浏览器语言

笔记图片二.png

编辑器：

vscode
vim
webstorm

浏览器

ie/edge
chrome
firefox
safari

HTMl是什么

HyperText(超文本--图片，标题，链接，表格)

Markup Language（标记语言）

example:

<h1>文章标题</h1>

<img src(属性名)="photo.jpg（属性值）"/>（img里面没有内容，所以这是简写写法）

代码解释

<!DOCTYPE html>（标记当前html文件是什么版本，使得浏览器决定渲染模式）

<html lang="en">（根标签）

<head>（源数据）

<meta charset="UTF-8">（页面编码）

<title>Document</title>（页面标题）

</head>

<body>（呈现给用户的内容）

<p>try</p>

</body>

</html>

通过浏览可以形成DOM树

笔记3.png

html语法

标签和属性不区分大小写,推荐小写（自定义组件用大写，原生标签小写）
空标签可以不闭合，比如input,meta
属性值用双引号包裹
某些属性值可以忽略,比如required,readonly
举例:<input required>
表示在表单提交以前必须填写，ture or false,无属性值

标题标签

h1-h6 不同大小（h1最大）

我很大

具体效果如上()

列表标签

有序列表

ol(ordered list)下属li(list)

无序列表

ul(unordered list)下属li(list)

定义列表

dl(definition list)下属dt(definition title)dd(definition description)

举例；

笔记4.png

链接标签

a(anchor)

href(Hypertext Reference)

 <a href="https://www.bytedance.com/">
 字节跳动官网 </a>`

（属性名target="_blankl"新打开页面）

视频标签

属性名alt为替代性文本
属性名width为图片宽度
audio（音频）
video (视频)
controls属性名是使用浏览器默认播放控件

输入控件

 <input placeholder="请输入用户名">

（用户没有输入的时候显示什么）

<input type="range">

(输入一个范围）

<input type="number" min="1" max="10">

（输入数字并限制数值范围）

<input type="date" min="2018-02-10">

（输入年月日）

<textarea>Hey</textarea>

（输入多行文字）

笔记五.png

选择控件

 <label><input type="checkbox" checked />

 <label><input type="checkbox" />

（两个都可以选，多选，checked是默认选项）

  <input type="radio" name="sport" /> 

  <input type="radio" name="sport" />

(只能选一个，用name限制）

<select>

<option>1</option>

<option>2</option>

</select>

（提供多个可选择选项,也是辅助提示选项）

<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>

文本类标签

blockquote块级引用（引用别人一段话，cite属性表示来源与哪里）
cite短引用
q也是短引用
（cite表示作品名字或章节，q是具体内容）
code代码引用
strong加粗
em斜体

笔记6.png

内容划分

header是页头（呈现内容，log导航）
nav是导航
main (主题内容)
article (文章)
aside（内容相关）
footer (参考链接，版权，备案信息)

前端与 HTML 青训营笔记

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