大约 6 分钟
html基础标签
<!-- 告诉浏览器，请以HTML5的格式来解析当前文件 -->
<!DOCTYPE html>
<!-- 该标签用于存放html的所有内容 -->
<html>
<!-- head标签当中的内容通常不会再浏览器显示，多用于存放描述当前网站的关键字、描述、修饰等内容 -->
<head>
</head>
<!-- body标签当中的内容，通常会在浏览器中显示，我们所看的任何网站只要显示的内容，都是在body当中的 -->
<body>
</body>
</html>
<!-- 在html当中任何被大于号和小于号括起来的内容，都会被浏览器认为是html标签，因此不会显示 -->
<!-- <haha>可以随便自定义</haha> -->center和 空格是重点
提示
只需要记住center和center和 实体标签是重点,其他了解即可
<!DOCTYPE html>
<html>
<head>
<!-- 修改网页标题(选项卡的标题) -->
<title>标题</title>
<!--当浏览器解析该文档时，会选择一下标签设置的编码类型-->
<meta charset="utf-8"/>
</head>
<body bgcolor='pink'>
<center><!-- 居中标签 -->
<!-- font字体标签 -->
<font face="楷体" color='red' size='7'>你内心现在的颜色，是什么颜色？</font><br/>
<font face="黑体" color='orange' size='6'>你内心现在的颜色，是什么颜色？</font><br/>
<font face="宋体" color='yellow' size='5'>你内心现在的颜色，是什么颜色？</font><br/>
<font face="仿宋" color='green' size='4'>你内心现在的颜色，是什么颜色？</font><br/>
<font color='cyan' size='3'>你内心现在的颜色，是什么颜色？</font><br/>
<font color='blue' size='2'>你内心现在的颜色，是什么颜色？</font><br/>
<font color='purple' size='1'>你内心现在的颜色，是什么颜色？</font><br/>
<!-- 十进制：0123456789 -->
<!-- 十六进制：0123456789abcdef -->
<!-- #000000 0-255,0-255,0-255 -->
<!-- #D550DC 213,80,220 -->
<!-- 前两位：红色通道 -->
<!-- 中两位：绿色通道 -->
<!-- 后两位：蓝色通道 -->
<!-- html当中的实体字符 -->
<font color="#D550DC">我爱你， 你爱我吗？</font>
</center>
</body>
</html>head标签中的内容
<!DOCTYPE html>
<html>
<head>
<title>head标签中的内容</title>
<meta charset="utf-8" />
<!--给当前网站页面添加关键字-->
<meta name="keywords" content="二手手机,二手航母,二手导弹,二手网站" />
<!--给当前网站页面添加描述信息-->
<meta name="description" content="本网站，专业回收二手手机，二手航母，二手导弹，专业为小学生写作业，五年级以后另算！" />
<!--给当前网站页面添加更新人信息-->
<meta name="revised" content="隔壁老王,2017-7-14 10:21:37"/>
<!-- 让当前网页定制一个刷新频率 -->
<meta http-equiv="refresh" content="3,http://www.baidu.com"/>
</head>
<body>
<!--
SEO搜索引擎优化：
爬虫、蜘蛛类型的软件：百度、搜狗、谷歌等搜索引擎网站专有
利用这些工具，不定期抓取网站head头中的关键字、描述、连接等内容，存放到
自己的数据库中，之后开始进行百度推广，给你打电话，是否需要推广，是，掏钱，
不是，一边呆着去！掏钱，就给你做推广，让你的排名往前走！
-->
</body>
</html>link标签、script标签
<!DOCTYPE html>
<html>
<head>
<title>link标签、script标签</title>
<meta charset="utf-8"/>
<!-- link标签用于链接一个外部的文档，而该被引入文档与当前页面具有一定关系 -->
<link href="./test.css" type="text/css" rel="stylesheet"/>
<!-- script标签用于书写一段js代码，或引入一个js文件 -->
<script type="text/javascript">
alert('周六日你们有什么打算？');
</script>
<!--引入一个js文件-->
<script type="text/javascript" src="./test.js"></script>
<!--在当前页面书写css代码-->
<style type="text/css">
h1{
color:blue;
}
</style>
</head>
<body>
<!--
link标签：
属性名： 属性值：
href： 某个文件的路径、位置、地址
相对路径：
. 当前目录
.. 上一级目录
绝对路径：
file:///D:\www\test.css
type： 所引入文件的类型，常用text/css
rel： 用于定义被引入文件与当前网页文件之间的关系，stylesheet样式表
-->
<h1>昨天是个下雨天，今天天气好凉爽！</h1>
</body>
</html>- 引入的test.css
h1{
color:red;
}- 引入的test.js
alert('周六日打算踢踢球，做做大宝剑！');html当中的文本标签
<!DOCTYPE html>
<html>
<head>
<title>html当中的文本标签</title>
<meta charset="utf-8"/>
</head>
<body>
<!--标题标签：hn 1~6-->
<h1>让你变得越来越小！</h1>
<h2>让你变得越来越小！</h2>
<h3>让你变得越来越小！</h3>
<h4>让你变得越来越小！</h4>
<h5>让你变得越来越小！</h5>
<h6>让你变得越来越小！</h6>
<!--段落标签：p-->
<p>
<bdo dir="rtl">肖申克的救赎！讲述了一个被陷害的大银行家被抓入肖申克监狱，与监狱狱友之间发送的基情！
最终无法忍受监狱生活，而照壁越狱！最终获得自由的一个故事！</bdo>
</p>
<!--斜体标签：i、cite、em-->
来到兄弟连，我让你<i>变弯</i><br/>
来到兄弟连，我让你<cite>变弯</cite><br/>
来到兄弟连，我让你<em>变弯</em><br/>
<!--水平线标签：hr-->
<hr/>
<!--加粗标签：b、strong-->
每天锻炼身体，可以使你更<b>强壮！</b><br/>
每天锻炼身体，可以使你更<strong>强壮！</strong>
<hr/>
<!-- 上标和下标标签：sub、sup -->
水的化学分子式：H<sub>2</sub>O<br/>
计算数学公式：2<sup>2</sup> = 4<br/>
<!--下划线标签：u-->
苍老师、波多老师、志龙老师、<u>杨思涵老师</u>、<u>饭岛老师</u>、建华老师<br/>
<!--修改文字顺序：bdo-->
<bdo dir="rtl">正大光明</bdo><br/>
<!--引用标签：q-->
沙僧说：<q cite="西游记">大师兄，师傅和二师兄被妖怪抓走啦~~ 大师兄，我们全被妖怪抓走啦~~ </q>
<!--定义缩写：abbr-->
<abbr title='USA'>United States</abbr><br/>
<!--删除线标签：del-->
苍老师、波多老实、吉泽老师、<del>饭岛老师</del><br/>
<!--定义时间标签：time-->
<time datetime="2017-7-14 11:43:15">美国总统特朗普和安倍握手视频亮了！</time><br/>
<!-- 注意:用datalist的id 绑定 list 值即可 所有主流浏览器都支持 <datalist> 标签，除了Safari未测试。
-->
请填写你喜欢的汽车:<input type="text" id='likeCar' list='cars'/>
<datalist id='cars'>
<option value="86"></option>
<option value="FC"></option>
<option value="FD"></option>
<option value="R32"></option>
</datalist>
<!--隐藏菜单标签：details--目前只有 Chrome 和 Safari 6 和360浏览器 支持 <details> 标签 兼容性不好 火狐不支持 Ie不支持
>
<details>
<summary>鬼吹灯之牧野鬼事</summary>
<h1>鬼吹灯</h1>
<h4>鬼吹灯之精绝古城</h4>
<h4>鬼吹灯之牧野鬼事</h4>
<h4>鬼吹灯之黄皮子坟</h4>
<h4>鬼吹灯之龙岭谜窟</h4>
</details>
<!--对话标签：-->
<dialog style="display:block">
<dt>男：</dt><dd>我们分手吧！</dd>
<dt>女：</dt><dd>为什么？为什么分手！</dd>
<dt>男：</dt><dd>我怀孕了！</dd>
<dt>女：</dt><dd>不……不可能，我不相信！</dd>
<dt>男：</dt><dd>你看，我们连最起码的信任都没啦，还在一起干啥？</dd>
<dt>女：</dt><dd>………</dd>
</dialog>
</body>
</html>列表标签
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
<meta charset="utf-8"/>
</head>
<body>
<!--无序列表：ul-->
<h1>无序列表</h1>
<ul type="square">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
<!--有序列表：ol-->
<h1>有序列表</h1>
<ol type="1">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ol>
<!--格式化标签：pre-->
<pre>
*
* *
* * *
* * * *
* * * * *
</pre>
</body>
</html>