html文档基本格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
html注释：
<!--注释-->
常用标签：
<h1></h1> <!--h系列标签，标题-->
<p></p> <!--段落-->
<hr /> <!--水平分隔线-->
<sup></sup> <!--上标-->
<sub></sub> <!--下标-->
<del></del> <!--删除线-->
<ins></ins> <!--下划线-->
<em></em> <!--强调(斜体)-->
<i></i> <!--斜体-->
<b></b> <!--粗体-->
<strong></strong> <!--重要的文本（粗体）-->
<code></code> <!--代码-->
<pre></pre> <!--预格式化文本-->
<small></small> <!--更小的字号-->
<q></q> <!--短引用,自动给文本加双引号-->
<blockquote></blockquote> <!--块引用，左右自动缩进，上下自动加外边距-->
<abbr title=""></abbr> <!--缩写，title指定全称-->
<address></address> <!--联系信息，不仅仅指地址，还可以是email、tel等。斜体显示-->
<cite></cite> <!--定义作品名称（比如书籍、歌曲、电影、电视节目、绘画、雕塑等的名称），斜体显示-->
超链接：
<!--target指定打开方式，_self是在当前标签页中打开，_blank是在新标签页中打开-->
<a href="http://www.baidu.com" target="_blank">百度
</a>
使用<a>链接跳转到页面的指定部分：
<a href="#part2">查看part2
</a>
<!--
在当前页面中，可直接使用#id调转到当前页面的指定位置
也可使用 xxx.html#id 跳转到指定页面的指定位置
-->
<h2>part1
</h2>
<p style="height: 1000px"></p>
<h2 id="part2">part2
</h2> <!--给目标位置加id，必须是id，name无效-->
<p style="height: 1000px"></p>
图片：
<!--无法显示图片时，就显示alt指定的说明文字-->
<img src="image/1.jpg" alt="荷花" width="200" height="100" />
列表：
<ul> <!--无序列表-->
<li></li>
<li></li>
</ul>
<ol> <!--有序列表-->
<li></li>
<li></li>
</ol>
表格：
<table>
<caption></caption> <!--表格标题，表格上方居中显示-->
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
布局标签:
<div> <!--块级-->
<span></span> <!--行内-->
</div>
<nav></nav> <!--导航部分-->
<article></article> <!--文章-->
<section></section> <!--小节、一节内容-->
<header></header> <!--文档或文章的页眉-->
<footer></footer> <!--文档或文章的底部-->
<address></address> <!--文档或文章作者的联系信息-->
<aside></aside> <!--侧边栏-->
这几个标签都是语义标签，和<div>的效果完全相同，需要自己写css样式来实现对应的效果。均为块级元素，可以内嵌其他标签。
内联框架：
<!--iframe可以在网页中内嵌另一个网页,src指定另一个页面的url，width、height指定框架尺寸-->
<iframe src="demo.html" width="60000" height="500">
您的浏览器不支持 iframe 标签
</iframe>
独立的内容：
<figure> <!--figure可以表示独立的内容（图像、图表、照片、代码等等）-->
<img src="image/1.jpg" alt="荷花">
<figcaption>荷花是......
</figcaption> <!--figcaption会显示在图片下方，与图片构成一个整体-->
</figure>
<fieldset> <!--fieldset可以给内容加上边框(包裹起来)-->
<p></p>
</fieldset>
<fieldset>
<caption></caption> <!--caption可以在边框中的左上角部分加一个标题-->
<p></p>
</fieldset>
<fieldset>
<caption></caption>
<form></form> <常见的用法是配合表单使用，给表单加一个边框、标题-->
</fieldset>
使用浏览器插件来加载资源：
<object data="image/1.jpg"></object> <!--显示图片-->
<object data="1.mp3"></object> <!--播放音频-->
<object data="1.mp4"></object> <!--播放视频-->
<embed src="image/1.jpg" /> <!--显示图片-->
<embed src="1.mp3" /> <!--播放音频-->
<embed src="1.mp4" /> <!--播放视频-->
<object>、<embed>作用相同，只不过设置资源的属性名不同。
<object>、<embed>相当于一个容器，用来盛放资源，资源可以是图片、动画、音频、视频、java小程序等，浏览器会使用自带的插件来加载、运行资源。
<object>、<embed>可以设置width、height，如果不设置，则默认为资源的宽、高。
音频、视频：
<audio src="1.mp3" controls="controls" /> <!--音频-->
<video src="1.mp4" controls="controls" /> <!--视频-->
<audio>、<video>的常用属性：
src 设置播放源controls="controls" 是否显示播放控件（暂停/播放按钮、进度条、音量调节），若不设置此属性，则不显示播放控件autoplay="autoplay" 音频文件加载完成后自动播放muted="muted" 禁音loop="loop" z循环播放preload="auto|none" 网页加载完成后，自否自动加载音频文件（只是从网络获取音频文件，并不是自动播放）。auto是自动加载，none是不自动加载。width、height 设置播放器的宽、高
在html中，如果是属性值和属性名相同，可以缺省属性值，比如controls="controls" 可以简写为controls。
不支持<audio>、<video>标签的浏览器：
<audio src="1.mp3" controls>您的浏览器不支持audio标签。
</audio>
<video src="1.mp4" controls>您的浏览器不支持video标签。
</video>
可以在子元素<source>中设置播放源：
<video width="320" height="240" controls>
<source src="1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
不支持音频|视频文件格式：
<video width="320" height="240" controls>
<source src="1.mp4" type="video/mp4"> <!--先尝试播放mp4格式-->
<source src="1.ogg" type="video/ogg"> <!--如果不支持mp4格式，再尝试播放ogg格式-->
<embed width="320" height="240" src="1.mp3"> <!--如果前2种都不行，就尝试使用浏览器的插件来加载-->
</video>
颜色值的3种表示方式：
英文单词，red十六进制，#FF0000，前2位表示r（red），中间2位表示g（green），后2位表示b（blue）。0表示颜色最浅，F颜色最深。rgb，rgb(255,0,0)，数值依次表示r、g、b，取值范围[0,255]，0表示颜色最浅，255表示颜色最深。
rgba是rgb的扩充，a即alpha（透明度），rgba(255, 0, 0, 0.5)，透明度的取值范围是[0,1]上的小数，0表示完全透明（不可见），1表示完全不透明（最清晰）。
当页面中有特殊字符时，要使用字符实体代替。常用的字符实体：
显示结果
描述
字符实体
空格 <小于号<>大于号>&和号&"英文双引"'英文单引' ¥人民币/日元¥©版权©®注册商标® ×乘号×÷除号÷
说明
html的标签名、属性名不区分大小写，但建议都使用小写。
html尽量只用来布局，样式用css来控制。
能使用css样式代替的标签、属性，尽量使用css样式代替。
html的发展史：
html发展到4时，html代码没有统一的规范，写得比较混乱。你这样写<h1></h1>，我这样写<h1 />，她这样写<H1>，他连<html>、<head>、<body>这些标签都没有，反正效果都一样。后期十分不好修改、维护。w3c看不下去了，制定了html的规范：xhtml，xhtml要求十分严格。必须这样写<h1></h1>，其他的都不得行。一下子变得这么严格，大家适应不了，于是w3c折中推出了html5，html5代码规范比html4要严格，但比xhtml要宽松很多。
转载于:https://www.cnblogs.com/chy18883701161/p/11320698.html
