HTML 基本认识
一、简介
1.HTML是超文本标记语言，标准通用标记语言下的一个应用，解释性语言。
2.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
3.超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
二、语言特点（内容摘抄自--百度百科）
1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行原因之一。
4.通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
三、整体结构
HTML标准文件结构有一个基本的整体结构，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
1.文件代码整体
标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,是超文本标记语言文件的开始标记和结尾标记。
2.头部内容
；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，
其中标题标记符用于定义网页的标题，它的内容显示在网页窗口栏中，网页标题可被浏览器用作书签和收藏清单。
HTML head 元素：
HTML当中的meta标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的meta标签</title> 5 6 <!--设置网页的编码--> 7 <meta charset="utf-8"/> 8 9 <!--设置网页的关键字-->10 <meta name="keywords" content="页面关键字"/>11 12 <!--设置网页的描述-->13 <meta name="description" content="网页相关描述信息" />14 15 <!--设置网页的更新信息-->16 <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>17 18 <!--设置网页刷新频率以及跳转地址-->19 <meta http-equiv="refresh" content="3," />20 21 <!--设置标题处的ico小图标-->22 <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>23 24 <!--引入一个外部的css层叠样式表-->25 <link rel="stylesheet" href="./css.css?1.1.11" type="text/css"/>26 </head>27 <body>28 </body>29 </html>
head标签中的Script标签和Style标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>head标签中的Script标签和Style标签</title> 5 <meta charset="utf-8"/> 6 7 <!--通常是写js用的标签--> 8 <script> 9 //在网页打开的同时弹出了一个对话框10 //alert('弹框内容');11 </script>12 13 <!--引入一个外部的js文件-->14 <script src="1.js?1.1.11"></script>15 16 <!--在当前页面来添加css样式-->17 <style>18 font{19 color:red;20 }21 </style>22 </head>23 <body>24 25 </body>26 </html>3.主体内容
；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
HTML当中的文本标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--标题标签--> 9 <h1>让我们来看一下，<u>字体</u>字体的大小变化</h1>10 <h2>让我们来看一下，字体的大小变化</h2>11 <h3>让我们来看一下，字体的大小变化</h3>12 <h4>让我们来看一下，字体的大小变化</h4>13 <h5>让我们来看一下，字体的大小变化</h5>14 <h6>让我们来看一下，字体的大小变化</h6>15 16 <!--水平线标签-->17 <hr/>18 19 <!--b标签：普通的加粗标签-->20 <b>文字加粗</b><br/>21 22 <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->23 <strong>文字加粗（强调）</strong><br/>24 25 <!--斜体、强调标签-->26 <em>斜体（强调）</em><br/>27 28 <!--普通的斜体标签-->29 <i>让你随时<u>脉动</u>回来！</i><br/>30 31 <!--普通的斜体标签-->32 <cite>让你随时脉动回来！</cite><br/>33 34 <!--下标标签-->35 H<sub>2</sub>0<br/>36 37 <!--上标标签-->38 2<sup>2</sup>=439 40 <!--段落标签-->41 <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42 43 </body>44 </html>
文本标签页面展示效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的文本标签</h1> 9 10 <!--定义文档的输出方向-->11 <bdo dir="ltr">正大光明</bdo><br/>12 <bdo dir="rtl">正大光明</bdo><br/>13 14 <!--定义一个短的引用-->15 沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/>16 17 <!--表示一个缩写的形式-->18 <abbr title="United States">US</abbr><br/>19 20 <!--删除线标签-->21 测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/>22 23 <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24 <details>25 <summary>鬼吹灯系列丛书</summary>26 鬼吹灯之精绝古城<br/>27 鬼吹灯之黄皮子坟<br/>28 鬼吹灯之云南虫谷<br/>29 </details>30 31 <!--对话标签-->32 <dialog open>33 <dt>男：</dt><dd>我们分手吧~~</dd>34 <dt>女：</dt><dd>为什么？</dd>35 <dt>男：</dt><dd>我怀孕了~~</dd>36 <dt>女：</dt><dd>不，不可能，我不相信……</dd>37 <dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>38 <dt>女：</dt><dd>…………</dd>39 </dialog>40 </body>41 </html>
HTML当中的列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的列表标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的列表标签</h1> 9 <!--有序列表-->10 <ol type="A">11 <li>有序列表1</li>12 <li>有序列表2</li>13 <li>有序列表3</li>14 </ol>15 16 <!--无序列表-->17 <ul type="circle">18 <li>无序列表1</li>19 <li>无序列表2</li>20 <li>无序列表3</li>21 </ul>22 23 <!--格式化输出标签-->24 <pre class="brush:php;toolbar:false">25 *26 * *27 * * *28 * * * *2930 31