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

前端简述

前端解决什么问题

利用Web技术栈（HTML、CSS、JS、HTTP）解决多端（PC/移动浏览器、客户端/小程序、VR/AR等）图形界面下人机交互的问题

前端应该关注哪些方面

功能，解决什么问题，满足需求
美观，界面是否好看
无障碍，是否对于所有人都可以用（如色盲症）
安全，保证用户数据安全，是否存在漏洞可能被利用
性能，网站速度快，动画流畅，用户体验好
兼容，网页是否能在各种各样的设备上使用，如电脑和手机
体验，用户对产品的直观感受取决于前端

前端的边界

前端能做的东西远远超出于页面的范畴

Node.js能开发服务端的应用
Electron、React Native能开发客户端的应用
Web RTC进行P2P的在线传输，实现多人会议
WebGL开发3D游戏
WebASSEMBLY可以把C++或Rust编写的代码编译成可以运行在浏览器的代码

HTML

什么是HTML

HTML，超文本标记语言(HyperText Markup Language, HTML) ，超文本包括图片、标题、链接、表格等，标记语言即用标签来表示某个类型内容，例如用<h1>一级标题</h1>来表示一级标题。

常见标签

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题 </h1>
        <p>段落内容</p>
    </body>
</html>

<!doctype html> 表示当前使用的html代码是哪一个版本，浏览器会据此决定使用哪一种浏览模式，如果不写，浏览器会以一种比较老旧的模式即怪异模式去渲染页面，造成页面展示效果和实际不太符合。

<html></html> 文档的根标签，所有其它标签都写在这里面。

<head></head> 里面放一些页面的原数据，即页面需要、但不需要直接呈现给用户的信息，如页面的标题 <title></title> 、编码格式 <meta charset="UTF-8"> 。

<body></body> 里面放需要真正呈现给用户的信息。

解析HTML

浏览器获取HTML代码后，会将其解析为DOM树，document为根节点，html为其直接子节点，html有head和body的直接子节点，以此类推。每个节点称为DOM节点。

HTML语法

规范

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

标题

h1~h6，共六级标题

列表

有序列表，ol -li
无序列表，ul-li

dl-dt-dd，dt为key，dd为value，一个dt可对应多个dd

<dl>
    <dt>水果：</dt>
    <dd>西瓜</dd>
    <dd>苹果</dd>
    <dt>动物：</dt>
    <dd>兔子</dd>
    <dd>牛</dd>
</dl>

链接

<a href="http://www.baidu.com"></a>

多媒体

img 图片
audio 视频
video 音频

输入

input 输入框、范围、日期选择框、复选框等
textarea 多行输入框

语义化

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

语义化的好处：

代码可读性
可维护性
搜索引擎优化
提升无障碍性

应注重传达内容而不是样式。

前端与 HTML | 青训营笔记