这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西，包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
- 解决GUI人机交互问题
- 跨终端
- Web技术栈
前端大致包含三部分
- HTML（内容）
- CSS（样式）
- JavaScript（行为）
前端要关注的几个方面
- 功能
- 美观
- 安全
- 性能
- 兼容
- 体验
- 无障碍
什么是HTML
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML使用标记标签来描述网页
HTML标签
- HTML标签是由尖括号包围起来的关键词，比如
<head></head> <title></title>- HTML标签通常是成对出现的，比如
<p></p>，但也有极少数单标签，如<br> <hr>
基础标签【每个页面都有的标签】
- 根标签
<html> - 头部标签
<head>，对网页进行整体的设置 - 标题标签
<title>，不同于<h1>...<h6>，<title>标签是网页标题，不是文本内容的标题 - 标签身体
<body>，是HTML的正文标签，我们在网页上所看到的内容都写在<body>标签里面
常用基本标签，
- 标题标签
<h1>...<h6>,依次为一级标题、二级标题......六级标题，其中一级标题最大，六级标题最小 - 段落标签
<p>,将一段内容包裹起来，形成一个段落 - 换行标签
<br/> - ......(还有许多控制样式的标签，之后在CSS章节里面再去书写)
DOM树
HTML书写规范【结构优化以及语义化】
- 必须声明文档的编码charset，且与文件本身编码保持一致，如
<meta charset="UTF-8">
结构优化
- 尽量遵循HTML标准与语义
- 结构、表现、行为三者分离，避免内联
- 每一个块级元素都另起一行，每一行都使用tab缩进对齐
语义化
- 在语义不明显，即既可以使用p又可以使用div的地方，尽量用p
- 在既可以使用div又可以使用section的地方，尽量使用section
- 有序列表用ol，无序列表用ul
- lang属性表示内容所使用的语言
