前端与 HTML｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 1 天第一天学习了前端HTML的概念，

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

第一天学习了前端HTML的概念，以及各种标签。

什么是前端？

前端工程师使用web技术栈解决GUI人机交互问题

前端要求：美观、功能齐全、无障碍使用、性能好、安全、兼容性好

前端工作

前端工程师是使用Web技术栈解决多端的图形界面交互问题的工程师。专注于人机交互，能够实现的跨终端有PC/移动浏览器、客户端/小程序、VR/AR等。

前端应该关注功能、美观、性能、安全、兼容、体验、无障碍。

前端技术栈

主要包含HTML(内容)、CSS(样式)、Javascript(行为)+网络协议(HTTP/Web Socket)

使用Node.js开发服务端；
使用Electron开发客户端；
使用WebRTC实现P2P在线传输（例：多人会议）；
使用WebGL实现3D场景可视化；
使用WebAssembly使得C++编写的代码可以高效的运行在浏览器上。

开发环境

浏览器 + 编辑器

什么是HTML？

HTML 被称为超文本标记语言，英文全称Hyper Text Markup Language，标准通用标记语言下的一个应用，不是一种编程语言。
Hyper Text：（超文本）图片、标题、链接、表格
Markup Language：（标记语言）开始标签、结束标签 :< h1>文章标题< /h1>

注： < img src='photo.jpg' /> 属性：src,属性值：photo.jpg,且标签之间无参数或文本，结束标签则可省略

DOM树

浏览器拿到HTM之后会进行解析，解析成DOM树:

document

html

head

body

HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以省略、比如required、readonly

1、标题h1·h6

h1~h6字体大小依次减小，h1字体最大，h6最小

2、有序列表

用来规定一些顺序重要，不能随意调整的项，比如排行榜

<ol><br>
  <li>阿凡达</li>
  <li>阿凡达</li>
  < li>阿凡达</li>
  <li>阿凡达</li>
</ol>
复制代码
复制代码

效果：

阿凡达
阿凡达
阿凡达
阿凡达

3、无序列表

用来定义一些顺序不重要的项目，比如商品列表，导航

<ul>
  <li>阿凡达</li>
  <li>阿凡达</li>
  <li>阿凡达</li>
  <li>阿凡达</li>
</ul>
复制代码
复制代码

效果：
阿凡达
阿凡达
阿凡达
阿凡达

4、定义列表

用来解释一些专有名词或者术语的定义

<dl>
 <dt>导演:</dt>
 <dd>陈凯歌</dd>
 <dt>主演:</dt>
 <dd>张国荣</dd>
 <dd>张丰毅</dd>
 <dd>巩俐</dd>
</dl>
复制代码
复制代码

效果
导演：
陈凯歌
主演：
张国荣
张丰毅
巩俐

5、链接

< a>标签主要有两种用法
（1）当作超链接使用
（2）当作锚点使用

<a href="https://www.baidu.com/"/>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>

<p id="T1">第一题：选择正确的答案： A B C D</p>
<a href="#T1">第一题</a>
复制代码
复制代码

注：当target="_blank"，就跳出当前页面，打开新的页面；当target="_self",跳转页面跳转到当前页面.

前端与 HTML｜ 青训营笔记