根据W3C标准，一个网页主要分为三部分组成：结构（HTML）、表现（CSS）、行为（JS）
<!-- -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!doctype html>
文档声明：告诉浏览器当前的网页版本为html5
meta标签
设置网页的字符集，避免乱码问题
html页面的根标签（元素），网页中所有的内容都要写入根元素的里边
表示这个是个中文网站
<html lang="zh">
lang="en"表示这是个英文网站
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
keywords :表示网站的关键字,用于搜索引擎的推荐识别，可以同时使用多个关键字，关键字之间用逗号隔开
description:用于指定网站的描述，会显示在搜索引擎的搜索结果中
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
打开此网页后，过三秒会跳转到目标网页
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<p>今天<em>天气</em>真不错</p>表示强调，重要的内容
用于引用别人的话
鲁迅说，
<blockquote>
这句话我是没说过的！
</blockquote>
带有双引号的引用
子曰：<q>学而时习之，乐呵乐呵</q>
表示页面中的换行
header和footer可以表示某一部分的底部和头部，但是main在一个页面只能有一个
表示网页的头部
表示网页的主体部分（一个页面中只会有一个main）
和主体相关的其他内容，侧边栏
上边的标签都不能表示时使用section
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
html中的列表其实有三种
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<dl>
<dt>结构</dt>
<dd>结构表示一个物体的大概组成</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
</ul>
</li>
</ul>
超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置
<a href="https://www.baidu.com">超链接</a>
<a href="" target="_self"></a>
使用超链接进行html页面的区域跳转
（一篇文章，控制移动到哪段，顶部或底部等）
跳转到顶部
<a href="#">回到顶部</a>
为标签设置id,跳转到 指定id位置
<a href="#bottom">去底部</a>
<p id="bottom‘>底部<p>
<a href="javascript:;">这是一个新的链接</a>
相对于当前路径
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
编码
将字符转换为二进制的过程
解码
将二进制码转换为字符的过程
字符集
编码和解码所采用的的规则称为字符集
乱码问题
如果编码和解码所采用的的字符集不同就会出现乱码问题
utf-8（万国码）
在开发时使用的字符集编码都是utf-8
可以在meta标签来设置网页的字符集，避免乱码
在网页中一般通过元素来对页面进行宏观布局
主要用来包裹文字
用于向当前页面引入一个外部图片
效果一样用小的，效果不一样用适合的
用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" frameborder="0"></iframe>
和图片的引入一样
音视频文件引入时默认情况下是不允许用户自己控制播放停止
<audio src="./source/audio.mp3" controls loop></audio>
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
<audio>
对不起！您的浏览器不支持，请升级浏览器
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300px">
</audio>
- 这样写的好处是，当浏览器不支持时就不能识别audio和source，就会识别提示语，而当浏览器支持是就不会显示提示语
- 并且有多个格式类型，可以进行兼容处理
- embed是为了兼容ie8进行的优化
当前两个source都不支持时就会跳到<embed>
使用方式基本上和audio是一样的
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./souce/flower.mp4" type="video/mp4">
</video>
原文：https://www.cnblogs.com/psyduck/p/14283778.html