前端与HTML ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
一、了解前端与HTML
前端解决的问题： 使用Web技术栈解决多端的图形界面下的人机交互。
浏览器通过HTTP协议和服务器进行通信，从服务器端获取前端代码随后渲染成页面，浏览器也可以把用户填写的一些内容，比如表单输入通过HTTP协议提交给服务器。
前端开发需求： 功能需求、美观、无障碍、安全、性能。
HTML(Hyper Text Markup Language): 是超文本标记语言，它不是一种编程语言，HTML使用标记标签来描述网页。 超文本有两层含义:
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
二、HTML骨架
1. 文档类型声明
<!DOCTYPE>，位于标签之前。用于告诉浏览器此文档的类型是什么。<!DOCTYPE html>，表示声明一个 HTML5 文档。<!DOCTYPE > 声明对大小写不敏感。
标准模式和怪异模式
现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。当浏览器遇到正确的文档声明时，浏览器就会启动标准模式，按照制定的文档类型标准解析和渲染文档。而对于旧有的网页，由于网页编写的当时标准还没有确定，所以一般是不会有文档类型声明的。所以，对于没有文档类型声明或者文档类型声明不正确的文档，浏览器就会认为它是一个旧的HTML文档，就会使用怪异模式解析和渲染该文档。
2. 网页的组成
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
3. 文档结构标签
<html>标签：根标签。除了声明文档类型的代码，其他的所有内容都存放在 html 标签对中。
<head>标签：定义文档的头部，用来包含网页的配置（例如网页的标题 title，网页的基础配置 meta 都放在 head 中）。
<title>标签：定义网页的标题，标题内容会显示在浏览器的标签栏上。
<body>标签：定义网页的主体，例如：网页中的图片、文字等。
4. 元标签
<meta>元标签，用来表示网页的基础配置。
三. HTML常用标签
<h1></h1>~<h6></h6>：一级标题 ~ 六级标题。<p></p>标签表示段落标签。任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在<p></p>中。*<p></p>标签中不能嵌套块级元素，如 h 标签 和 其他 p 标签，只能嵌套内联元素。<div></div>标签 是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰比如：一般网页布局 头部，内容区，底部 都会通过 div 进行分隔。<ul></ul>无序列表，<ul></ul>标签包裹列表项<li></li>构成。<ol></ol>有序列表，<ol></ol>标签包裹列表项<li></li>构成的。<dl></dl>定义列表使用<dl></dl>标签。与<dt></dt>``<dd></dd>标签配合使用。<dd></dd>标签内容是对<dt></dt>标签的解释说明。<img>标签用来在网页中插入图片。<a></a>插入超链接。<audio></audio>标签可直接在网页中插入音频，并自动生成默认的编辑器。<video></video>标签可直接在网页中插入音频，并自动生成默认的编辑器。<input>通过type属性可以设置输入内容的属性，如文本、密码、选择、日期等。<textarea></textarea>多行文本输入。
四. HTML标签扩展
1. 引用标签
<blockquote></blockquote>块级引用，通常用来引用别人说的一段话。
<cite></cite>短引用，一边用于引用章节。
<q></q>短引用，具体的引用内容。
<code></code>引用代码。
2、强调标签
<strong></strong>突出表示严重紧急的内容。
<em></em>突出语气，重点在哪个词上。
五. 页面划分标签
<header></header>页头，可以放导航。
<nav></nav>导航。
<main></main>页面主体，重点内容。
<article></article>放在<main></main>中，可以没有也可以有多个。
<aside></aside>一些扩展热点内容，一般位于侧边。
<footer></footer>放在页面尾部，可以放版权，备案信息。
六. HTML语义化
开发者需要遵循HTML语义编写网页。这会使代码便于维护、便于浏览器解析、便于搜索引擎搜索。
