这是我参与⌈第四届青训营⌋笔记创作活动的第1天

一、什么是前端？

前：代表与人直接打交道的这部分，包括界面、交互，其肉眼所至皆前端。端：代表输出终端，例如一些浏览器，甚至APP的界面。综上，PC浏览器、APP、应用程序的界面展现以及用户交互就是前端。

1、前端内容

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

前端工程师就是使用Web技术栈解决多端图形用户页面交互的工程师

2、前端技术栈：

graph TD
服务器端 -->协议 -->HTML-内容-负责页面结构和内容\CSS-样式-设置页面样式位置大小和颜色\JavaScript-行为-页面如何响应

3、前端关注问题

功能、美观、无障碍（是不是对于所有人都能用）、安全（用户数据的安全）、性能（速度动画足够快）、兼容性（PC/移动端）

二、HTML-HyperText Markup Language

1、开发环境

浏览器：IE/Edge Chrome Firefox Safari
编辑器：Vscode Vim WebStorm

2、DOM树

3、文本标签

代码：

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。</p>
<h2>应用</h2>

运行：

字体排印学

历史

活字的雏形或可追溯至公元前两千年前后美索不达米亚文明的乌鲁克和拉尔萨，砖块上面不均匀的印花被视作有可能是活字思想雏形。

印刷体源流

中国在唐代就已经出现雕版印刷术，公元868年的《金刚经》是现存最古老的印刷品之一，使用的技术即是木雕版印刷。

应用

4、列表标签

有序列表代码：

   <ol>
    <li>阿里巴巴</li>
    <li>字节跳动</li>
    <li>腾讯</li>
   </ol>

运行：

阿里巴巴
字节跳动
腾讯

无序列表代码：

<h2>购物清单</h2>
<ul>
   <li>阿里巴巴</li>
   <li>字节跳动</li>
   <li>腾讯</li>
</ul>
<h2>霸王别姬</h2>
<dl>
    <dt>导演：</dt>
    <dd>陈凯歌</dd>
    <dt>主演：</dt>
    <dd>张国荣</dd>
    <dd>张丰毅</dd>
    <dd>巩俐</dd>
</dl>

运行：

购物清单

阿里巴巴
字节跳动
腾讯

霸王别姬

导演：: 陈凯歌
主演：: 张国荣; 张丰毅; 巩俐

5、连接

代码：

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

运行：字节跳动官网

百度官网

6、语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言

前端与HTML|青训营笔记