HTML的英文全称Hyper Text Markup Language，网页超文本标记语言。HTML并不是什么编程语言，而是一款描述性的标记语言。也是全球广域网上描述网页内容和外观的标准。
作为标记语言，本身不能显示在浏览器中。主要应用于描述超文本中内容的显示方式。
HTML的基本结构
完整的HTML文件包括标题、 段落、 列表、 表格以及各种嵌入对象， 这些对象统称为HTML元素。
一个HTML文件的基本结构如下：
<html>文件开始标记
<head>文件头开始的标记
...文件头部的内容
</head>
<body>文件主体开始的标记
......文件主体的内容
</body>文件主体结束的标记
</html>文件结束的标记
在html文件中，所有的标记都是成对出现，而且都是相对应的，开头标记为<>,结束标记为</>,内容就在两个标记中间进行添加。
写HTML文件方式有很多种，使用记事本，notepad++、Dreamweaver、sublime Text等等。这些都是可以编写HTML文件的工具。
HTML的基本标记
一个完整的HTML文档必须包含3个部分： 一个由元素定义的文档版本信息， 一个由定义各项声明的文档头部和一个由定义的文档主体部分。作为各种声明信息的包含元素出现在文档的顶端， 并且要先于出现。而用来显示文档主体内容。
HTML的头部标记head
在HTML语言的头部元素中， 一般需要包括标题、 基础信息和元信息等。 HTML的头部元素是以为开始标记， 以为结束标记的。
含义：元素的作用范围是整篇文档。 元素中可以有元信息定义、文档样式表定义和脚本等信息， 定义在HTML语言头部的内容往往不会在网页上直接显示。
语法格式：
<head>......</head>
HTML标题标记title
HTML页面的标题一般是用来说明页面的用途， 它显示在浏览器的标题栏中。在HTML文档中， 标题信息设置在与之间。 标题标记以
开始， 以结束。语法格式：
<title>......</title>
HTML元信息标记meta
meta元素提供的信息不显示在页面中， 一般用来定义页面信息的说明、 关键字、 刷新等。
在HTML中， meta标记不需要设置结束标记， 在一个尖括号内就是一个meta内容。 在一个HTML页面中可以有多个meta元素。
meta元素的属性有name和httpequiv， 其中name属性主要用于描述网页， 以便于搜索引擎查找、 分类。
设置页面关键字
在页面中设置关键字问题上，搜索引擎方面，检索信息都是通过输入关键字来实现的。
关键字在网页中也是非常重要的，是整个网站登陆过程中最基本的也是非常重要的部分，也是网页优化的基础。
关键字在浏览网页时时看不到的，仅仅只是提供搜索引擎的使用。
语法格式：
<meta name = "keywords" content="输入具体的关键字">
设置页面说明问题、定义编辑工具、设置作者的信息，只要在meta的声明里面更改就可以。
语法格式：
<meta name = "description" content="设置页面说明">
<meta name = "generator" content="编辑软件的名称">
<meta name = "author" content="输入作者的名字">
设置网页文字及语言
在网页中还是要设置语言的编码形式，这样子浏览器才可以正确的选择语言。而不需要人工选取语言。
语法格式：
<meta http-equiv="content-type" content = "text/html; charset=字符集类型"/>
http-equiv用于传送HTTP通信协议的标头， 而在content中才是具体的属性值。 charset用于设置网页的内码语系， 也就是字符集的类型， 国内常用的是GB码， charset往往设置为gb2312， 即简体中文。 英文是ISO-8859-1字符集， 另外还有其他的字符集。
设置网页的定时跳转
在中设置定时跳转，即可实现网页的自动刷新。可以通过http-equiv设置为refresh来实现。content中的属性值为设置的时间。
语法格式：
<meta http-equiv="refresh" content="跳转的时间;URL=跳转的地址">
跳转的时间主要以秒为单位。
###网页的主题标记body
网页的主题部分要在浏览器中显示处理的所有的信息。在网页的主题部分也可以设置很多的属性。
（一）、网页的背景色bgcolor
网页的背景，大多数浏览器都是默认白色或者是灰白色。
语法格式：
<body bgcolor="背景颜色">
此处的背景颜色可以是已经命名的颜色，也可以是十六进制的颜色值。
（二）、网页的背景图片background
语法格式：
<body background="图片的地址">
图片的地址可以是相对的地址，也可以是绝对的地址。
（三）、文字的颜色text
通过text标记来设置文字的颜色。
语法格式：
<body text="文字的颜色">
文字颜色的属性值与设置页面背景色的相同。
（四）、链接文字的属性link
超链接时网页中重要的而且也是根本的元素之一。网站的每一个网页都是通过超链接的形式关联在一起的。
在默认情况下，浏览器以蓝色作为超链接文字的颜色， 访问过的文字则颜色变为暗红色。 可以通过link参数修改链接文字的颜色。
语法格式：
<body link="颜色">
a.使用alink可以设置正在访问的文字颜色。
b.使用vlink可以设置访问后链接文字的颜色。
（五）、边距margin
设置边距是因为在网页中页面与浏览器之间的距离。
语法格式：
<body topmargin=上边距的值 leftmargin=左边距的值>
在默认的情况下，边距的值以像素为单位。
一般网站的页面左边距和上边距都设置为0， 这样看起来页面不会有太多的空白。
网页的注释问题
注释是在HTML代码中插入的描述性文本， 用来解释该代码或提示其他信息。注释只出现在代码中， 在浏览器的页面中不显示。
作用：
便于设计者后续的代码修改、维护工作有帮助。也方便设计者能够迅速读懂前者所写的内容。
语法格式：
<! --注释的内容 -->
如果存在嵌套的注释， 则在两个标记结束符号之间的文件将会显示出来。
###文字与段落标记
标题字
HTML文档中包含各种级别的标题，各种级别的标题由
到
元素来定义。
时最高级别的标题，
级别是最低的。
标题字对齐方式align
在默认情况下，标题文字都是左对齐格式。当然了，为了切合网页的效果，也有不同的对齐方式。
语法格式：
<align=对齐方式>
对齐方式有三种格式：
|属性值| |含义|
| left | |左对齐|
|right| |右对齐|
|center| |居中对齐|
###文字的基本标记
标记用来控制字体、字号和颜色等属性，它是HTML中最基本的标记方式之一。
（一）字体属性face
字体的face属性设置不同的字体，设置的字体效果必须在浏览器中安装相应的字体后才可以浏览。
语法格式：
<font face="字体样式">文字的内容</font>
（二）字号属性size
文字的属性也是字体的重要的属性之一。除了标题文字标记是设置为固定大小的字号之外，使用标记的size属性来设置普通文字的字号。
语法格式：
<font size="文字字号">文字的内容</font>
设置size属性时有绝对和相对两种属性。从1到7的整数， 代表字体大小的绝对字号。 从-4到+4的整数， 字体相对于3号放大和缩小字号。
注意：标记和它的属性可影响周围的文字， 该标记可应用于文本段落、 句子和单词， 甚至单个字母。
（三）颜色属性color
语法格式：
<font color="字体颜色">文字的内容</font>
color属性用来定义文字的颜色， 它可以和<font>元素的其他属性一起配合定义字体的各种样式， 各个属性之间没有先后次序.
###文本格式化标记
（一）、粗体标记b、strong
<b>和<strong>是HTML中格式化粗体文本的最基本元素。 在<b>和</b>之间的文字或在<strong>和</strong>之间的文字， 在浏览器中都会以粗体字体显示。 该元素的首尾部分都是必须的， 如果没有结尾标记， 则浏览器会认为从<b>开始的所有文字都是粗体。
语法格式：
<b>文字内容</b>
<strong>文字的内容</strong>
<b>和<strong>是行内元素， 它可以插入到一段文本的任何部分。
代码示例：
<p><b>文字内容</b></p>
<p><strong>文字的内容</strong></p>
（二）、斜体标记i、em、cite
、 和是HTML中格式化斜体文本的最基本元素。 在和之间的文字、 在和之间的文字或在和之间的文字， 在浏览器中都会以斜体字体显示。
语法格式：
<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>
代码示例:
<p>这是我的<em>工作室</em></p>
（三）上标标记sup
上标字体的英文原名为superscript， 在各种数学公式、 日常计算应用、 书籍文章注解甚至某些外语脚本里都有广泛的运用。
元素也是行内元素， 它可以成对出现在一段文字的任何地方， 并且允许嵌套使用。 因此如果在里再使用则会变成“上标的上标”。
语法格式：
<sup>上标的内容</sup>
例如:
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab
（四）下标标记sub
下标字体的英文原名为subscript， 在各种数学公式、 化学方程式中， 下标字体有着广泛的应用。
元素是行内元素， 它可以成对地出现在一段文字的任何地方， 并且可以将多个元素作用于同一段文字。
如果在元素里继续使用， 那么被作用的文字将成为“下标的下标”。
语法格式：
<sub>下标的内容<sub>
例如：
H<sub>2</sub>O 化学方程式中的水
（五）大字号标记big和小字号标记small
语法格式：
<big>大字号的内容</big> 大字号标记
<small>小字号的内容</small> 小字号标记
（六）下划线标记u
标记的使用与粗体和斜体的标记是类似的。主要作用于需加下划线的文字。语法与粗体和斜体的基本相同。
##段落标记
###段落标记p
语法格式：
<p>段落文字</p>
段落标记可以没有结束标记</p>,每一个新的段落标记开始的同时也意味着上一个段落的结束。
换行标记br和不换行标记nobr
换行标记<br>的作用是在不另起一段的情况下将当前文本强制换行。一个<br>标记代表一个换行， 连续的多个标记可以实现多次换行。
是惟一可以为文字分行的方法。 其他标记如
， 可以为文字分段。
不换行标记nobr
语法格式：
<nobr>不换行的内容<nobr>
###水平线
插入水平线hr
水平线的作用就是起到水平分割的作用，并且会在浏览器中显示一条线。
水平线也是有属性值的，例如宽度width、高度size等。
宽度width
语法格式：
<hr width="宽度">
水平线的宽度值可以是确定的像素值， 也可以是窗口的百分比。
高度size
语法格式：
<hr size="高度">
水平线的高度值只能是像素值。
去掉阴影noshade
语法格式：
<hr noshade>
noshade是布尔值的属性,它没有属性值,如果在<hr>元素中写上了这个属性,则浏览器不会显示立体形状的水平线,反之则无需设置该属性,浏览器默认显示一条立体形状带有阴影的水平线。
水平线的颜色color
语法格式：
<hr color="颜色">
这里的颜色代码是十六进制的数值。
水平线的排列方式align
水平线在默认情况下是居中对齐的，如果想让水平线左对齐或右对齐，就需要设置对齐方式。
语法格式：
<hr align="对齐方式">
语法中对齐方式可以有3种，包括center、left和right，其中center的效果与默认的效果相同。
其他的标记
在网页中除了可以输入汉字、英文和其他的语言之外，还可以输入一些空格和特殊的字符，如￥、$、#等。
插入空格：
语法格式：
 
在网页中可以有多个空格， 一个 代表一个半角空格， 多个空格则可以多次使用这一符号。
###网页中的图像问题
（一）图像的源文件src
src属性用于图像文件所在的路径，它是图像必不可少的属性。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址">
src参数用来设置图像源文件所在的路径，此路径可以是相对路径，也可以是绝对路径。
图像的地址可以使用文件和http://关键字作为图像的地址，并且能够用于在网页上载入图像。
（二）图像的提示文字alt
提示文字对的作用，是为了说明或者是描述图像。
这种情况，相信很多人都不陌生。就是把鼠标放在图像上，就会有一些就是说明性的文字，这就是使用alt标记实现的。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址"alt="提示文字的内容">
提示的文字内容既可以是中文，也可以英文，语言形式不做规定。
（三）图像的宽度width和高度height
width和height属性用来定义图片的高度和宽度， 如果<img>元素不定义高度和宽度， 图片就会按照它的原始尺寸显示。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址" width="图像的宽度" height="图像的高度">
图像的宽度和高度的单位是像素。
（四）图像的边框border
默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。
当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址" border="图像边框的宽度">
边框的宽度border的单位是像素， 值越大边框越宽。
（五）图像的垂直边距vspace
垂直边距vspace用来调整图像与文字的垂直边距。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址" vspace="垂直边距">
垂直边距vspace属性的单位是像素。
（六）图像的水平间距hspace
图像与文字之间的水平距离可以通过hspace参数进行调整。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址" hspace="水平边距">
水平边距hspace属性的单位是像素。
（七）图像的排列align
图像和文字之间的对齐是通过align属性来设定的，align的对齐方式有两种： 即绝对对齐和相对对齐。
绝对对齐方式的效果和文字一样， 只有3种： 居中（middle）、居左（left）、居右（right）。
相对对齐方式是指图像与一行文字的相对位置。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址" align="文字的对齐方式">
属性 描述
bottom 图片的底部和当前行的文字底部对齐
top 图片的顶端和当前行的文字顶端对齐
middle 图片水平中线和当前行的文字中线对齐
left 图片左对齐
center 图片水平中线和当前行的文字中线对齐
right 图片右对齐
图像的超链接
除了对文字可以添加超链接之外，图像也是可以设置超链接属性的。
同一个图像的不同部分也可以链接到不同的文档，这就是热区链接。
图像的链接和文字的链接方法是一样的，都是用标签来完成，只要将标签放在和之间。
语法格式：
<a href="链接地址"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像文件的地址"></a>
href参数用来设置图像的链接地址。
使用<a>标记， 图像链接和文字链接相同。
创建E-mail链接需要将mailto://添加到E-mail地址的前面。
链接到一个HTTP站点， 需要在网址前使用http://协议。
图像热区链接
在HTML中是可以把图片划分成多个热点区域，每一个热点区域链都是链接到不同的网页。
语法格式：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="图像地址" usemap="映像图像名称">
首先需要在图像文件中设置映像图像名，在图像的属性中使用<usemap>标记添加图像要引用的映像图像的名称.
需要定义热区图像以及热区的链接属性如下：
语法格式：
<map name = "映像图像名称">
<area shape "热区形状" coords="热区坐标" href="链接地址">
</map>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
