html:超文本标记语言
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
<!--这是一段注释。注释不会在浏览器中显示。--><!DOCTYPE html> 开头部分
head标签下主要用
meta标签 meta标签下常用
name 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
http-equiv 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
非meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com/"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
</body>
</html>
块级标签 内联标签
body标签
基础标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="梦山哥"> <meta name="descripthion" content="梦山哥哥帅"> <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面--> <title>梦山网</title> <link rel="icon" href="http://www.bitauto.com/favicon.ico"> </head> <body> <h1>hello</h1> <!--取值范围1-6 字体从大到小 块级标签--> <b>hello</b> <!--加粗 内联标签--> <em>hello</em> <!--斜体 内联标签--> <sub>4</sub> <!--下角标 内联标签--> <sup>5</sup> <!--上角标 内联标签--> <hr> <!--下划线 块级标签--> <br> <!--换行 块级标签--> <p>hello</p> <!--段落，包裹的内容被换行.并且也上下内容之间有一行空白. 块级标签--> <strike>hello</strike><!--为文字加上一条中线 内联标签--> </body> </html>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
图形标签: <img>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="梦山哥"> <meta name="descripthion" content="梦山哥哥帅"> <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面--> <title>梦山网</title> <link rel="icon" href="http://www.bitauto.com/favicon.ico"> </head> <body> <img src="1.jpg" width="200" height="300"title="美女" alt="图片跑掉了"> <img src="0.jpg" width="200" height="300"title="美女" alt="图片跑掉了"> </body> </html>
超链接标签(锚标签): <a> </a>
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="" target="_blank" >click</a>
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.baidu.com/" title="这是什么网页？点开看看">**</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="梦山哥"> <meta name="descripthion" content="梦山哥哥帅"> <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面--> <title>梦山网</title> <link rel="icon" href="http://www.bitauto.com/favicon.ico"> </head> <body> <a href="https://www.baidu.com/">点我</a> <!--可接网址--> <a href="1.html">点我1</a> <!--文件地址--> <a href="#abc">点我2</a> <!--跳转到索引地址--> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <div id="abc"></div> </body> </html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="梦山哥">
<meta name="descripthion" content="梦山哥哥帅">
<meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面-->
<title>梦山网</title>
<link rel="icon" href="http://www.bitauto.com/favicon.ico">
</head>
<body>
<ol> <!--有序标签-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul> <!--无序标签-->
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl> <!--定义标签-->
<dt>安徽省</dt>
<dd>合肥市</dd>
<dd>六安市</dd>
</dl>
</body>
</html>
表格标签 table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="梦山哥"> <meta name="descripthion" content="梦山哥哥帅"> <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面--> <title>梦山网</title> <link rel="icon" href="http://www.bitauto.com/favicon.ico"> </head> <body> <table border="1" cellpadding="100"><!--border 表格边框，cellpadding内边距，--> <thead> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </thead> <tbody> <tr> <td colspan="2">1,2</td> <!--横向合并单元格--> <td rowspan="2">3,6</td> <!--纵向合并单元格--> </tr> <tr> <td>4</td> <td>5</td> </tr> </tbody> </table> </body> </html>
星期一菜谱作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="梦山哥"> <meta name="descripthion" content="梦山哥哥帅"> <meta http-equiv="Refresh" content="2"><!--2秒后自动跳转网页，注意后面的引号，分别在秒数的前面和网址的后面--> <title>梦山网</title> <link rel="icon" href="http://www.bitauto.com/favicon.ico"> </head> <body> <table border="1"> <tr> <td colspan="7">星期一菜谱</td> </tr> <tr> <td rowspan="2">素菜</td> <td colspan="4">青草茄子</td> <td colspan="3">花椒扁豆</td> </tr> <tr> <td colspan="4">小葱豆腐</td> <td colspan="3">炒白菜</td> </tr> <tr> <td rowspan="7">荤菜</td> <td colspan="4">油焖大虾</td> <td colspan="3">海参鲍鱼</td> </tr> <tr> <td colspan="4">红烧肉</td> <td colspan="3">烤全羊</td> </tr> </table> </body> </html>