「第四届青训营 -前端基础场」笔记创作活动的的第1篇笔记（一切内容仅供参考）

一、基础介绍

1.什么是前端？

分为以下几个部分：1.解决GUI人机交互问题;
$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ 2.跨终端（PC/移动端浏览器、客户端/小程序、VR/AR等技术）
$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ 3.Web技术栈

我理解的前端是：即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

2.前端技术栈

$\color{red} {HTML(内容)、CSS(样式)、JavaScript(行为)}$

3.前端应该关注的方面

$\color{#008000}{功能、美观、无障碍、兼容、性能、安全}$

4.前端的边界

5.开发环境

二、HTML

1.HTML是什么？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

2.代码示例

<!DOCTYPE html> 
<html> <head> <meta charset="utf-8"> 
<title>字节青训营</title> 
</head> 
<body> 
<h1>h1标题</h1> 
<h2>h2标题</h2> 
<h3>h3标题</h3> 
<p>段落</p> 
</body> 
</html>

运行结果

3.DOM树

4.HTML语法

a.基本语法

$\color{#008000}{(1).标签和属性不区分大小写，推荐小写}$
$\color{#008000}{(2).空标签可以不闭合，比如 input、meta}$
$\color{#008000}{(3).属性值推荐用双引号包裹}$
$\color{#008000}{(4).某些属性值可以省略，例如：required、readonly}$

b.标题h1~h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

c.链接

<link href="/media/examples/link-element-example.css" rel="stylesheet">

d.输入

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

e.内容划分

5.语义化是什么？

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

6.语义化的好处

$\color{blue} {代码可读性、可维护性、搜索引引擎优化、提升无障碍}$

7.如何做到语义化？

$\color{pink} {(1).了解每个标签的属性含义}$
$\color{pink} {(2).思考什么标签最适合描述这个内容}$
$\color{pink} {(3).不使用可视化工具生成代码}$

前端&&HTML|青训营笔记