目录
一，什么是HTML
? ? HTML(英文Hyper Text Markup Language的缩写)是网页制作的标准语言,中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。
网页：可以看做承载各种网站应用和信息的容器，所有可视化的内容都会通过网页展示给用户。主要由文字、图像和超链接（超链接为单击可以跳转的网页元素）等元素构成，还可以包含音频、视频以及动画等。
（1）静态网页：用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。 静态网页更新不方便，但是访问速度快。
（2）动态网页：显示的内容则会随着用户操作和时间的不同而变化。 动态网页可以和服务器数据库进行实时的数据交换。
（3）常见网页名词：
| 名词 | 名词释义 |
| Internet网络 | 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。 |
| WWW | WWW（英文World?Wide?Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。 |
| URL | URL（英文Uniform?Resource?Locator的缩写）中文译为“统一资源定位符”?URL其实就是Web地址，俗称“网址”。 |
| DNS | DNS?（英文Domain?Name?System的缩写）是域名解析系统。 |
| HTTP和HTTPS | HTTP?(英文Hypertext?transfer?protocol的缩写)?中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。 通信的规则。 |
| Web | Web通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。 |
| W3C组织 | W3C（英文World?Wide?Web?Consortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。 |
?二，HTML基本结构
（主要讲述HTML5,更加兼容，合理，易用）
1，HTML的标签解释
（1）什么是标签：在HTML页面中，所谓标签就是放在“< >”符号中表示某个功能的编码命令，也称为HTML标签或HTML元素,统一称作HTML标签。
（2）标签的分类：
? ? ? ? ?双标签：也称体标签，是指由开始和结束两个标签符组成的标签。<标签名>内容</标签名>
? ? ? ? ?单标签：也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。< 标签名 />
? ? ? ? ?HTML标签的作用原理就是选择网页内容，从而进行描述，也就是说需要描述哪个元素，就选择哪个元素，所以才会有双标签的出现，用于定义标签作用的开始与结束。而单标签本身就可以描述一个功能，不需要选择。例如，水平线标签<hr />,按照双标签的语法，它应该写成“<hr></hr>”，但是水平线标签不需要选择，本身就代表一条水平线，此时写成双标签就显得有点多余，但是又不能没有结束符号，所以在标签名称后面加一个关闭符，即<标签名 />。
（3）标签的关系：嵌套关系与并列关系。
2，HTML的基本结构
<!DOCTYPE html> -->表示当前的网页支持html5标准
<html lang="en"> -->语言为英文
<head>
<meta charset="UTF-8"> -->指定页面的编码格式(字符集)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->自适应终端的窗口
<title>Document</title> -->网页标题
</head>
<body>
</body>
</html><head>标签：定义HTML文档的头部信息，也称为头部标签，紧跟在<html>标签之后，主要用来封装其他位于文档头部的标签。
<body>标签：定义HTML文档所要显示的内容，也称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标签内。
<meta />标签：用于定义页面的元信息，可重复出现在<head>头部标签中。
<title>标签：用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标签之内。且一个HTML文档只能含有一对<title></title>标签，<title></title>之间的内容将显示在浏览器窗口的标题栏中。
3，HTML的常用标签
（1）文本控制标签
? ? ? ? A,、标题标签：HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>第一行</h1>
<h2>第二行</h2>
<h3>第三行</h3>
<h4>第四行</h4>
<h5>第五行</h5>
<h6>第六行</h6>
</body>
</html>? ? ?
?
? B、段落标签：在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
? ? ? ? ?<p align="对齐方式">段落文本</p>
? ?未使用<p>标签前：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>世上无难事只怕有心人</h1>
</body>
</html>??
?使用<p>标签后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>
<p>世上无难事</p>
<p>只怕有心人</p>
</h1>
</body>
</html>
? C、水平线标签：在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过<hr />标签来定义。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<hr 属性="属性值" />? ? ? ??
| 属性名 | 含义 | 属性值 |
| align | 设置水平线的对齐方式 | 可选择left、right、center三种值，默认为center，居中对齐显示。 |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素。 |
| color | 设置水平线的颜色 | 可用颜色名称、十六进制#RGB、rgb(r,g,b)。 |
| width | 设置水平线的宽度 | 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>
世上无难事，只怕有心人
<hr align="center" size="3" color="red" width="1000"/>
</h1>
</body>
</html>
? ? ? ? ?D、换行标签：在网页中，如果想要将某段文本强制换行显示，需要使用换行标签<br />。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>
世上无难事<br/><br/><br/>只怕有心人
</h1>
</body>
</html>
? ? ? ? ?E、显示文本：<span>内容</span>,不会自动换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>
<span>世上无难事，只怕有心人</span>
</h1>
</body>
</html>
?? ??? ?(2)文本样式标签
用来控制网页中文本的字体、字号和颜色。
?<font face='字体' color='文字颜色' size='字号'></font>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<p>
<font color="blue" face="隶书" size="20">
世上无难事，只怕有心人
</font>
</p>
</body>
</html>
?? ??? ? ??
?? ??? ?(3)文本格式标签
?? ??? ?
?? ??? ? ? A、文字加粗:<b></b> 或 <strong></strong>
?? ??? ? ??
?? ??? ? ? B、斜体：<i></i> 或 <em></em>
?? ??? ? ??
?? ??? ? ? C、删除线：<s></s> 或 <del></del>
?? ??? ? ??
?? ??? ? ? D、下划线：<u></u> 或 <ins></ins>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<font size="20" color="purple" face="隶书">
<p>
<b>世上无难事</b> <strong>只怕有心人</strong>
</p>
<p>
<i>世上无难事</i> <em>只怕有心人</em>
</p>
<p>
<s>世上无难事</s> <del>只怕有心人</del>
</p>
<p>
<u>世上无难事</u> <ins>只怕有心人</ins>
</p>
</font>
</body>
</html>
?? ??? ? ??
?? ?(4)语义标签
? ? ?只表示某种特定的含义
?? ??? ?
?? ??? A、mark：主要功能是在文本中高亮显示某些字符；
?? ??? B、cite：cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<font size="20" color="purple" face="隶书">
<p>
世上<mark>无难事</mark>，只怕有心人
</p>
<p>
俱往矣，数风流人物，还看今朝。<cite>--《沁园春·雪》</cite>
</p>
</body>
</html>
?? ??? ?(5)特殊字符
?? ??? ?
?? ??? ? ? A、空格：
?? ??? ? ??
?? ??? ? ? B、上标：<sup></sup>
?? ??? ? ??
?? ??? ? ? C、下标：<sub></sub>
?? ??? ? ??
?? ??? ? ? D、版权符号: ©
?? ??? ? ??
?? ??? ? ? E、注册商标：®
?? ??? ? ??
?? ??? ? ? F、摄氏度：°
?? ??? ? ??
?? ??? ? ? G、正负号：±
?? ??? ? ??
?? ??? ? ? H、除号：÷
?? ??? ? ??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<h1>世上 无难事</h1><br/>
x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup><br/>
co<sub>2</sub><br/>
©<br/>
®<br/>
30°<br/>
±2<br/>
20÷2=10<br/>
</body>
</html>
?(6)图像标签
?? ??? ?
?? A、常见的图像格式：
?? ??? ??? ?
??GIF：GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式，也就是说修改图片之后，图片质量几乎没有损失。再加上GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。常用于Logo、小图标及其他色彩相对单一的图像。
?? ??? ??? ??? ?
?? PNG：包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。
?? ??? ??? ??? ?
?? JPG(JPEG)：JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，这就意味着每修改一次图片都会造成一些图像数据的丢失。
? ?所以，小图片考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。??? ??? ??? ?
?? B、图像标签：
?? 基本语法格式：<img src="图像URL" />，src属性用于指定图像文件的路径和文件名??? ??? ?
? ? ? ? ? ? ? ?
路径：插入图像时需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。
a、绝对路径：一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
b、相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
实际应用路径时一般有三种情况：
a、图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
b、图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
c、图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。
图像标签属性：
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） |
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） |
| align | left | 将图像对齐到左边 |
| right | 将图像对齐到右边 | |
| top | 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 | |
| middle | 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一块石头</title>
</head>
<body>
<img src="../images/001.png" alt="..图片加载中" title="cheer" width="700"
height="500" border="2" vspace="20" hspace="20" align="left">
</body>
</html>?
? ? ? ? ? ?