基本HTML结构
配置：在vs code中声明页面为html，然后添加open in browser，view in browser插件通过快捷键alt+b实现在浏览器中查看编写好的html界面
基本成分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
1.编写HTML5页面开头的步骤
- 输入<!DOCTYPE html>，声明页面为HTML5文档
- 输入<html lang=" ">声明页面默认使用的语言
- 输入<head>开始网页文档的头部
- 输入meta元素声明字符编码
- <title></title> 包含页面的标题
- 输入</head>，结束页面文档的头部
- 输入<body>,开始页面的主体
- 为页面预留一些空行
- 输入</body>,结束主体
- 输入</html>,结束页面
2.创建分级标题
HTML提供了六级标题用于创建页面信息的层次关系：
h1,h2,h3,h4,h5,h6 级别由高到低
注意：
- 创建分级标题时，要避免跳过某些级别，如从3到5，不过允许从低级别跳到高级别
- 不要使用h1~6标记副标题，标语以及无法成为独立标题的子标题
使用header创建页眉——包括网站标志，主导航和其他全站链接，甚至搜索框
<body> <header role="banner"> <nav> <ul> <li><a href="#gaudi">Barcelona‘s Architect</a></li> <li lang="es"><a href="#sagrada familia">La Sagrada Familia</a></li> <li><a href="#park-guell">Park Guell</a></li> </ul> </nav> </header> </body>
注意：
- 只在必要时使用header
- header与h1~h6元素中的标题是不能互换的，它们都有各自的语义目的
- 不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header
3.标记导航
对页面中的重要链接群使用nav：
- 输入<nav>
- 输入一组链接并将其标记为ul（无序列表），ol（有序列表）结构
- 输入</nav>
4.标记页面的主要区域
一个页面只有一个部分代表其主要内容，可以将这样的内容包在main元素中，该元素在一个页面仅使用一次，最后在main开始标签加上role=“main”
注意：
- 如果创建的是Web应用，则使用main包围其主要的功能
- 不能将main放置在article，aside，footer，header，nav元素中
5.创建文章
article元素表示文档，页面，应用或网站中一个独立的容器，原则上是可独立分配或可再用的
步骤：
- 输入<article>
- 输入内容，可以包含任意数量的元素，类型包括段落，列表，音频，视频，图像，图形等
- 输入</article>
注意：
- article可以嵌套使用
- 一个页面可以有0或多个article
- 一个article可以包含一个或多个section元素
6.定义区块
section元素：“通用的”区块，标记页面中的特定区域
定义区块的步骤：
- 输入<section>
- 输入区块的内容
- 输入</section>
注意：
如果只是出于添加样式的原因要对内容添加一个容器，应使用div而不是section
7.指定附注栏
aside元素
注意：
- 在HTML中，应该将附注栏内容放在main的内容之后，通过CSS改变它们在浏览器中的显示顺序
- 对于与内容有关的图像（如图表，图形或带有说明文字的插图），使用figure而非aside
- HTML5不允许将aside嵌套在address元素内
8.创建页脚
footer元素
注意：不能在footer里嵌套header或另一个footer。同时，也不能将footer嵌套在header或address元素里。
只能对页面级的footer使用role="contentinfo",且一个页面只能使用一次
9.创建通用容器div
10.使用ARIA改善可访问性
一些可用的地标角色：
- role="banner"(横幅):添加到页面级的header元素，每个页面只用一次
- role="navigation"(导航):与nav元素是对应关系，将其添加到每个nav元素，或其他包含导航性链接的容器
- role="main"(主体）:最好添加到main，也可以添加到其他表示主体的元素
- role="complementary"(补充性内容):添加到aside或div元素（前提是仅包含补充性内容）
- role="conteninfo"(内容信息):添加至整个页面的页脚（footer），每个页面仅使用一次
11.为元素指定类别或ID名称
可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别
（1）为元素添加唯一的ID
id=“name”
（2）为元素指定类别的方法
class=“name”或class=“name anothername”（可以指定两个以上的类别名称）
12.为元素添加title属性
使用title属性为网站上任何部分加上提示标签，用的最多的是链接
13.添加注释
步骤：
- 输入<!--
- 输入注释
- 输入-->结束注释文本
原文：https://www.cnblogs.com/wtblogwt/p/10699799.html