1、超文本标记语言
（1）超文本：比普通文本功能更加强大；
（2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！
2、HTML语法和规范
（1）所有的html文件后缀名都是以.html或者.htm结尾的，建议使用.html结尾；
（2）整个html文件分别由头部分<head></head>和体部分<body></body>组成；
（3）Html标签都是由开始标签和结束标签组成，单标签除外（<br />）；
（4）html不区分大小写，建议使用小写。
3、标题标签
（1）标题标签使用<hn></hn>，n从1到6逐渐变小，超过6的按照6进行显示；
（2）代码演示：
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>标题标签</title> 7 ????</head> 8 ?9 ????<body>10 ????????<!--标题标签 ????-->11 ????????<h1>我是标题1</h1>12 ????????<h2>我是标题2</h2>13 ????????<h3>我是标题3</h3>15 ????????<h4>我是标题4</h4>18 ????????<h5>我是标题5</h5>21 ????????<h6>我是标题6</h6>22 ????</body>23 24 </html>
运行结果：
4、注释标签
<!--注释-->
快捷键是Ctrl+/
<!--标题标签 ????-->
5、水平线标签
（1）水平线标签<hr /> ；
（2）size属性：水平线的高度，单位像素；
（3）noshade属性：没有阴影，取值noshade，表示显示纯色。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>标题标签</title> 7 ????</head> 8 ?9 ????<body>10 ????????<!--标题标签 ????-->11 ????????<h1>我是标题1</h1>12 ????????<h2>我是标题2</h2>13 ????????<h3>我是标题3</h3>14 ????????<hr />15 ????????<h4>我是标题4</h4>16 ????????<!--描述：size属性：水平线的高度，单位像素-->17 ????????<hr size="5" />18 ????????<h5>我是标题5</h5>19 ????????<!--noshade属性：没有阴影，取值noshade，表示显示纯色-->20 ????????<hr noshade="noshade" />21 ????????<h6>我是标题6</h6>22 ????</body>23 24 </html>
运行结果：
6、段落标签<p></p>
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>段落标签</title> 7 ????</head> 8 ?9 ????<body>10 ????????<p>1、超文本标记语言</p>11 ????????<p> （1）超文本：比普通文本功能更加强大；</p>12 ????????<p> （2）标记语言：使用一组标签对内容进行描述的一门语言，它不是编程语言！</p>13 ????</body>14 15 </html>
运行结果：
7、字体标签
（1）字体标签<font></font>，必须结合其属性才能具备一定的样式效果 ；
（2）color：指定内容的颜色，可以死英文单词，也可以是十六进制；
（3）size：指定内容的大小；
（4）face：指定内容的字体；
（5）<b<</b>：加粗；
（6）<i></i>：斜体；
（7）<u></u>：下划线。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title></title> 7 ????</head> 8 ????<font color="red" size="1">我是字体标签</font><br /> 9 ????<font color="red" size="2">我是字体标签</font><br />10 ????<font color="red" size="3">我是字体标签</font><br />11 ????<font color="red" size="4">我是字体标签</font><br />12 ????<font color="red" size="5">我是字体标签</font><br />13 ????<font color="red" size="6">我是字体标签</font><br />14 ????<font color="red" size="7">我是字体标签</font><br />15 16 ????<body>17 ????</body>18 19 </html>
运行结果：
8、图片标签
（1）图片标签：<img /> ；
（2）图片的位置属性：src；
（3）绝对路径：带有盘符的；
（4）相对路径：
①同一级的，直接写文件名或者./文件名称；
②上一级：../文件名称（如果是多层，那么多写几个../）；
③下一级，写目录名称/文件名称。
（5）width：设置图片的高度，取值可以是像素值，也可以是百分比；
（6）height：设置图片的高度，取值可以是像素值，也可以是百分比；
（7）alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>图片标签</title> 7 ????</head> 8 ????<!--alt是当图片无法正常显示出现的提示--> 9 ????<!--关于src路径的问题：10 ????不写或者./是当前目录;11 ????../当前文件的上一级;12 ????上上一级是../../13 ????-->14 ????<img src="../googlelogo.png" width="272px" height="92" alt="logo图标" />15 16 ????<body>17 ????</body>18 19 </html>
运行结果：
9、列表标签
（1）无序标签
<ul type="">
<li></li>
</ul>
属性：有三个取值。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>无序列表</title> 7 ????</head> 8 ?9 ????<body>10 ????????<!--默认是disc,实心圆；circle是空心圆；square是实心方框-->11 ????????<ul type="square">12 ????????????<li>google</li>13 ????????????<li>百度</li>14 ????????????<li>搜狗</li>15 ????????</ul>16 ????</body>17 18 </html>
运行结果：
（2）有序列表
<ol type="I" start="" reversed="reversed">
<li></li>
</ol>
属性：有5个取值；start是开始的序数；reverse是倒序。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>有序列表</title> 7 ????</head> 8 ?9 ????<body>10 ????????<!--默认是数字1、2、3；start是开始的序数；reversed是倒序；type是数字或者英文等类型-->11 ????????<ol start="6" reversed="reversed" type="a">12 ????????????<li>google</li>13 ????????????<li>百度</li>14 ????????????<li>搜狗</li>15 ????????</ol>16 ????</body>17 18 </html>
运行结果：
10、超链接标签
<a href=“” target="">超链接</a>
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>超链接标签</title> 7 ????</head> 8 ?9 ????<body>10 ????????<!--_self是在来的窗口打开超链接，_blank在一个新的窗口打开超链接-->11 ????????<a href="http://www.cnblogs.com/gzdlh/" target="_blank">gzdlh博客园</a>12 ????</body>13 14 </html>
运行结果：
11、表格标签
<table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
属性：
①边框：border；
②宽度：width；
③高度：height；
④背景颜色：bgcolor；
⑤边框与边框：cellspacing；
⑥边框与内容：cellpadding；
⑦居中显示align 。
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>表格标签</title> 7 ????</head> 8 ?9 ????<body>10 ????????<table border="1px">11 ????????????<tr >12 ????????????????<td>11</td>13 ????????????????<td>12</td>14 ????????????????<td>13</td>15 ????????????</tr>16 ????????????17 ????????????<tr>18 ????????????????<td>21</td>19 ????????????????<td>22</td>20 ????????????????<td>23</td>21 ????????????</tr>22 ????????????23 ????????????<tr>24 ????????????????<td>31</td>25 ????????????????<td>32</td>26 ????????????????<td>33</td>27 ????????????</tr>28 ????????</table>29 ????</body>30 31 </html>
运行结果：
12、跨行跨列操作
跨行：rowspan；
跨列：colspan。
13、框架集结构标签
（1） <frameset rows="" cols="">
<frame src=""/>
<frame name=""/>
</frameset>
属性：
①cols：进行垂直切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；
②rows：进行水平和切割划分，可以切割为任一快（参数的值相加=100%，其中一块可以使用*表示）；
（2）一旦划分区域后，我们需要对具体的区域进行内容的填充，此时需要使用<frame></frame>:；
属性：
①src：指定区域显示的文件（路径）；
②name：它通常会结合超链接的target属性使用，来定义最终的显示位置。
（3）代码演示：
①左侧内容
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title></title> 7 ????</head> 8 ?9 ????<body>10 ????????左侧内容11 ????</body>12 13 </html>
②右侧内容
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title></title> 7 ????</head> 8 ?9 ????<body>10 ????????右侧内容11 ????</body>12 13 </html>
③框架集标签
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title>框架集标签</title> 7 ????</head> 8 ????<!--不需要body--> 9 ????<frameset cols="25%,*">10 ????????<frame src="left.html" />11 ????????<frame src="right.html" />12 ????</frameset>13 14 </html>
运行结果：
14、参考文档：W3CSchool全套Web开发手册链接： W3CSchool全套Web开发手册密码：z99r
04001_HTML简单介绍
原文地址：https://www.cnblogs.com/gzdlh/p/8126745.html