下载文档原格式
HTML5的标记在HTML5的页⾯中，带有“<>”符号的元素被称为HTML标记，如上⾯提到的<html><body>都是HTML标记。
所谓标记就是放在“<>”标记符中表⽰某个功能的编码命令，也称标签或 HTML元素，本书统⼀称作HTML标记。
1.双标记和单标记为了⽅便学习和理解，通常将 HTML 标记分为两⼤类，分别是“双标记”与“单标记的具体介绍如下。
(1)双标记双标记是指由开始和结束 2个标记符组成的标记。
其基本语法格式为：<标记名>内容</标记名>该语法中“<标记名>”表⽰该标记的作⽤开始，⼀般称为“开始标记”；“</标记名>”表记的作⽤结束，⼀般称为“结束标记”。
和开始标记相⽐，结束标记只是在前⾯加了⼀个关闭例如：<h2>传智播客⽹页平⾯设计免费公开课</h2>其中<n2>表⽰⼀个标题标记的开始，⽽<In2>表⽰⼀个标题标记的结束，在它们之间是标题内容。
(2)单标记单标记也称空标记，是指⽤⼀个标记符号即可完整地描述某个功能的标记。
其基本语法格<标记名/>例如：<hr />其中<hr/>为单标记，⽤于定义⼀条⽔平线。
下⾯通过⼀个案例进⼀步演⽰HTML5中双标记与单标记的使⽤，如以下代码所⽰。
<!doctype html><html><head><meta charset="utf-8"><title>传智博客云课堂</title></head><body><h2>传智博客云课堂上线了</h2><p>更新时间：2022年03⽉20⽇11时22分来源：传智播客</p><hr/><p>传智云课堂是传智博客在线教育平台，可以实现晚上在家学习，在线直播教学、实时互动辅导等多种功能，专注于⽹页、平⾯、UI设计以及Web前端的培训。
HTML标记总结<html> //文件开始标记<head> //文件的头部开始标记<title> HTML总体结构</title>//头部</head> //头部结束标记<body> //文件的主体开始标记hello!</body> //主体结束标记</html>//文件结束标记编写时的注意事项（1）元素的标记都要用尖括号< >括起来，成对使用的标记的结束标记是在开始标记之前加一反斜杠，如<html>与</html>。
（2）代码不分大小写，如<boDY>与<BODy>都是正确的，但是所有符号如< > 、“”都必须是英文输入法。
（3）标记<!--……-->表示其中的内容是注释语句，在浏览器中不会显示出来。
4、页面的头部标记和主体标记（1）页面的头部标记<head>HTML文档的头部内容</head>一般来说位于头部的内容都不会在网页上显示，而是通过别的方式体现。
常用的头部标记有以下几个：<base>当前文档的URL全称（基底网址）<basefont> 设定基准的文字字体，字号和颜色<title> 设定显示在浏览器左上方的标题内容<isindex> 表示该文档是一个可用于检索的网关脚本，由服务器自动建立。
<meta> 是有关文档本身的元信息，如用于查询的关键词，用于获取该文档的有效期等。
<style>设定CSS层叠样式表的内容<link> 设定外部文件的链接<script>设定页面中程序脚本的内容（1）<title>标题标记<title>W eb页面的标题</title>在HTML 里<title>和</title>是位于html文档头部的，即<head>和</head>之间。
HTML标记的组成HTML语言规范标记符：1、单标记：< 标记名称／>2、双标记：<标记名称>内容<／标记名称>3、属性 < 标记属性1="属性值" 属性2="属性值" 属性3="属性值" … ><元素属性='属性值'...>内容</元素>如果没有内容，可以这样写：<元素属性='属性值'.../>--注：<>中的都是标记，标记是要成对出现如:<html>内容</html>；元素也叫标记HTML文档的结构主要包括：1、HTML部分2、HEAD部分3、BODY部分DOCTYPE声明部分：DOCTYPE声明部分是网页中重要的一部分，但不在HTML文档范围内。
Html的基本结构<html><head><元素属性1=”值” …./></head><body><元素属性1=”属性值”属性2=“属性值”…>内容</元素><元素属性=”属性值”/></body></html>说明1. 标记通常是成对出现 <head></head>2. 单标记 <br/>案例:Demo1.htm<html><head></head><body><b>横看成林</b><br/><br/><font color="red">远近高低各不同</font><br/><!--size 值可以取 1..7 --><font style="font-size:30px;">不知庐山真面目</font><br/></body></html>请问后缀 html 和 htm 有什么区别?如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html；htm 后缀是为了兼容以前的dos 系统 8.3的命名规范。
HTML超文本标记语言，一种规范预定义,已经定义好的各种标记，只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点）标记的使用1、标记一般成对出现，包含开始标记和结束标记2、标记可以嵌套使用，但是不能交叉使用3、标记不区分大小写属性的使用（属性控制内容的格式,额外的格式）1、书写位置在开始标记中2、格式：属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时，效果叠加，属性冲突时，就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体，网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示，带有自动换行属性:align控制标题的对齐方式，取值left（左对齐，默认值）|center(居中）｜right （右对齐）2、段落标记<p〉效果:把内容分段展示，自动换行属性:align，控制段落内容的对齐方式,取值left（左对齐，默认值）|center（居中）｜right(右对齐）3、换行符〈br /〉，单标记，不需要结束标记，换行但不分段空格符号: 表示一个空格强制换行符：<br /〉4、水平线标记<HR />，单标记效果：水平线,默认是一个粗细为2px（像素）的线条属性：size 控制水平线的粗细，取值为整数，单位为像素（px）width 控制水平线的长度,取值可以是像素单位,也可以是百分数（相对于浏览器窗口百分比)noshade设置水平线不带有阴影，该属性不需要取值color 设置水平线的颜色，取值可以是英文的颜色值，也可以是十六进制的颜色代码align 控制水平线的对齐方式，取值left(左对齐）｜center(居中，默认值）|right(右对齐）5、分节标记<div〉效果：把内容设置为一节，前后带有自动换行属性：align控制div中内容的对齐方式,取值left（左对齐，默认值）｜center（居中）|right（右对齐）6、居中标记符<center>效果：把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性：size 控制字体的大小，取值为绝对值时，1--7，数字越大字体越大，取相对值时,参考的是默认字体（3号），取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体，取值可以是多个值，多个值之间使用逗号分割,取值时从左往右依次取值，找到合适的值为止，假如都不支持，使用默认格式显示8、字体的物理样式加粗：<b>斜体：〈i>下划线:〈u〉删除线：<s〉上标:<sup〉下标：〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语，通常显示为黑体或斜体〈EM> 强调某些字词，通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词，通常显示为粗体<VAR> 表示变量，通常显示为斜体2、列表标记1、有序列表,〈ol〉，需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性：type 控制列表的符号样式，取值1|A|a｜i|I，默认是1start 控制列表的起始值，取值为任意的整数li的属性:type控制选项自身的符号样式，取值1|A｜a|i|Ivalue控制选项本身的起始值，取值为任意整数，但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表，<ul>，配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式，取值disc(实心圆，默认值）｜circle（空心圆）｜square（方块）li的属性：type控制选项本身的符号样式li标记用在ol中，type属性的取值跟ol的type属性取值走，用在ul中，跟着ul的type属性取值走3、定义列表，<dl〉，完成对定义列表的声明<dt>，术语标记，可以理解为类似于列表选项的标题使用〈dd>,描述标记，可以理解为类似于列表的选项使用三. 在网页中使用图片标记：〈img>,单标记，不需要结束标记属性: src 引入图片资源的路径绝对路径：资源在服务器上的位置，该位置是从盘符出发相对路径：资源在服务器上的相对位置，从网页本身出发.。
HTML学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。
HTML标记语言也不例外，同样需要遵从一定的规范。
接下来将具体讲解HTML文档的基本格式。
HTML文档的基本格式主要包括<!DOCTYPE>文档类型声明、<html〉根标记、<head〉头部标记、<body〉主体标记,具体介绍如下：(1）<！DOCTYPE>标记<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML 或XHTML（可扩展超文本标记语言）标准规范，必需在开头处使用<！DOCTYPE〉标记为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档,并按指定的文档类型进行解析。
（2)〈html〉〈/html〉标记〈html>标记位于〈!DOCTYPE〉标记之后，也称为根标记，用于告知浏览器其自身是一个HTML 文档，<html>标记标志着HTML文档的开始，〈/html>标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
在〈html>之后有一串代码“xmlns=”/1999/xhtml"”用于声明XHTML统一的默认命名空间.（3）<head〉</head〉标记<head〉标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html〉标记之后，主要用来封装其他位于文档头部的标记，例如〈title〉、<meta>、〈link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
（4)〈body>〈/body〉标记<body〉标记用于定义HTML文档所要显示的内容，也称为主体标记.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于〈body>标记内，<body>标记中的信息才是最终展示给用户看的.一个HTML文档只能含有一对<body>标记，且〈body>标记必须在〈html〉标记内，位于<head>头部标记之后，与〈head>标记是并列关系.在HTML页面中，带有“〈〉”符号的元素被称为HTML标记，如上面提到的〈html〉、〈head〉、<body〉都是HTML标记。
一、HTML标记注释：红色字体为标记和其必不可少的属性；绿色字体为标记中的属性，可任意选取所需要的属性；天蓝色字体为自由填充的属性值；黑色字体为补充内容及对标识和描述内容的注解1、HTML标记语法：<标记名称属性1名=属性1值属性2名=属性2值…>标记在表示HTML文档内容结构和含义的时候，通常有两种方式，我们分别称单标记和双标记。
表1：2、<BODY>的属性BGCOLOR="颜色" (设置背景颜色)BACKGROUND="图片名" (设置背景图片)BGPROPERTIES="FIXED" (设置背景图片固定不变)TEXT="颜色" (设置文本颜色)LINK="颜色" (默认链接)VLINK="颜色" (当鼠标按下时的链接)ALINK="链接按钮" (当鼠标松开后的链接)TOPMARGIN=距离(文本距顶部的距离)LEFTMARGIN=距离(文本距左边的距离)3、设置播放器，必须在BODY的双标记中存在设置背景音乐：<BGSOUND SRC="地址"(歌名或视频名) LOOP=“循环次数”>插入视频音频文件：（FLASH等）<EMBED SRC="地址"(歌名或视频名)WIDTH=宽度HEIGHT=高度(调整播放器的宽度和高度)HIDDEN="TRUE"(隐藏播放器) LOOP=”循环次数”>4、如何使网页在网站的排名靠前，其必须在HEAD中存在<META NAME="K EYWORD"CONTENT="描述网站内容">(用于标记搜索引擎在搜索该页面时所取出的关键词)<META NAME="DESCRIPTION" COUNT="描述网页内容" >（用来标记描述内容）<META NAME="AUTHOR" CONTENT="作者名称" >（用来标记文档的作者）<META HTTP-EQUIV="CONTENT-TYPE" CONTENT= "TEXT/HTML;CHARSET =GB2312">（用来标记你的页面的解码方式）<META HTTP-EQUIV="REFRESH" CONTENT="5;URL= Http:// .com">(用来自动刷新网页)5、标题字体表2：6、文章字体表3：7、物理字体表4：8、字符实体在往HTML文档中写入特殊字符，如“〈”、“〉”、“&”、“ ”等要使用特殊的代码，浏览器会用HTML命令对这些特殊代码进行翻译。
1:HTML文档格式处理1.1<BODY>属性Background = URL 设置网页的背景图片，默认为无背景图片。
bgcolor = colorvalue 设置网页的背景颜色，默认为白色。
text = colorvalue 设置网页的文本颜色，默认为黑色。
link = colorvalue 设置尚未被访问的超链接的颜色，默认为蓝色。
alink = colorvalue 设置超链接被访问瞬间的颜色，默认为红色。
vlink = colorvalue 设置访问过的超链接的颜色，默认为紫色。
bgproperties = fixed 设置背景是否随滚动条滚动，默认为随条滚动。
leftmagin = size 设置网页左边的空白，单位是像素。
topmagin =size设置网页上边的空白，单位是像素。
maginwidth = size设置网页空白的宽度，单位是像素。
maginheight = size设置网页空白的高度，单位是像素。
2.文本风格处理2.1段落的格式化<BR>强制换行标记符，其后面的内容在下行显示，行与行之间不产生空行。
<P> … </P>段落标记符，能强制换行，还使两段间多一个空行。
<PRE>….</PRE>预定义格式符，按照预定格式输出文本。
<Hn>….</Hn>用于设置字体的大小，n取值（1-6），6最小字；使用是自动成一段，不必使用<p>来加以限制；<HR>水平线标记符{ align = alignstyle 设置水平线对其方式，left. Right. Center,默认center.Size = size 设置水平线的大小，默认值2.Width = size 设置水平线的长度，单位像素或者百分百，默认值100%。
color 设置水平线的颜色，默认透明。
noshade 设置水平线是否有阴影，默认有阴影。
}<DIV>…</DIV>分区显示标记符，把文档分为多个区域，并对每个区域做统一格式处理。
<CENTER>….</CENTER>居中对其标记符，将其包含的内容强制居中显示。
<!--…-->注释标记符，其包含的内容不会再浏览器中显示出来。
实例：附件.JPG2.2字符的格式化<FONT>…</FONT>字体设置标记符{ face = fontstyle 设置字体的类型，默认为宋体；Size = size; 设置字体的大小，取值的范围是1-7，默认3号。
Color = colorvalue 设置字体的颜色，默认值为<BODY>的text属性所设置的字体颜色。
} Face可以取多个值“face =”fontstyle1, fontstyle2, fontstyle3….””首先会以fontstyle1设置字体，如果没有就依次设置后面的字体，直到设置成功。
2.2.2物理字体<B>…</B> 将字体设置为粗体<TT>…</TT> 将字符设置为打字机字体<I>…</I> 将字体设置为斜体<SUP>…</SUP> 将字体设置为上标字体<U>…</U> 给字体加下滑线<SUB>…</SUB> 将字体设置为下标字体<S>…</S> 给字符添加删除线2.2.3逻辑字体<EM>…</EM>起强调作用<VAR>…</VAR>起定义变量或值的作用<STRONG>…</STRONG>起加重作用<DFN>…</DFN>起定义文字的作用<CODE>…</CODE>起显示编程代码作用<CITE>…</CITE>起引用文字的作用<SAMP>…</SAMP>起显示示例文字作用<SMALL>…</SMALL>起缩小文字的作用<KBD>…</KBD>起显示键盘按键文字的作用<BIG>…</BIG>起放大文字的作用示例：3列表处理3.1定义列表<DL><DT>…</DT> 注释：{<DL>…</DL>用于指定一个定义列表；<DD>…</DD> <DT>…</DT>用于指定一个需要指定的名词或术语；<DT>…</DT> <DD>…</DD>用于指定名词或术语的解释；}<DD>…</DD> …….. </DL>3.2有序列表<OL type=”符号类型”> 注释：<OL>…</OL>定义一个有序列表；<LI type=”符号类型”>…</LI> <LI>…</LI>用于定义一个列表项；<LI type=”符号类型”>…</LI> <OL>和<LI>都具有type属性，用于指定….. 列表项着重符号的类型。
</OL>{ [1]type=1 以阿拉伯数字1.2.3….进行编号。
[2]type=I 以小写罗马数字i.ii.iii…..进行编号。
[3]type=I 以大写罗马数字I.II.III….编号。
[4]type=a 以小写字母进行编号。
[5]type=A 以大写字母进行编号。
}3.3无序列表<UL type=”符号类型”><LI type=”符号类型”>…</LI> 注释：<UL>…</UL>用于定义一个无序列表；<LI type=”符号类型”>…</LI> <LI>…</LI>用于定义一个列表项；………<UL><LI>都具有type属性。
</UL> 用于指定列表项着重符号的类型。
示例：附件.html4加入多媒体与超级链接4.1加入多媒体4.1.1加入图片，通过<IMG>加入图片Src=URL设置图片插入路径和名词，该属性不能省略。
border=size设置图像的边框，单位是像素，颜色为黑色，默认值0，即无边框。
Width=size设置图像宽度，单位像素或百分比。
align=alignstyle设置图像对其方式，取值top,middle,bottom,left,right,默认left.Height=size设置图片高度，单位像素或百分比。
hspace=size设置图像的左右边沿空白，单位为像素，默认值为0。
Alt=text设置图像的替代文字，默认为空。
vspace=size设置图像的上下边沿空白，单位为像素，默认值为0。
注释：alt取值通常是图像的说明信息，如果由于图片过大或者网速过低导致图片下载过慢甚至无法下载，该说明信息就会显示在图片的位子，即使图片正常下载，也可以把鼠标移到图片位子，1秒钟后也会显示该信息。
Align属性在图文混排是很有用，通过取不同的值，可以得到不同的混排效果。
Hspase,vspace属性的默认值均为0；在进行图文混排时，图像的边沿和文字之间没有空隙，影响排版效果，使浏览者产生拥挤狭窄的感觉，此时就建议取适当的值，使图文之间有一定的空隙。
4.2加入背景音乐4.2.1在HTML代码中的<HEAD>…</HEAD>之间加入背景音乐标记符<BGSOUND>；此方法最简单，属性也最少；Src=URL 设置加入背景音乐的路径和名称，该属性不能少。
Loop=looptimes 设置背景音乐的循环播放次数，默认值1，即只播放一次；要无限播放，取值为-1；4.2.2在HTML代码中的<BODY>…</BODY>之间加入嵌入标记<EMBED>…</EMBED>。
此方法较复杂，属性也最多，但控制更灵活。
Src=URL设置背景音乐的路径和名称，该属性不能省略Autostart=isautostart设置背景音乐是否自动播放，取true为自动播放，false为不自动播放，默认falseendtime=time设置背景音乐结束播放的时间，格式“mm:ss”starttime=time设置背景音乐开始播放的时间，格式“mm:ss”Loop=looptimes设置背景音乐的循环播放次数，true为一直播放，false为仅播放一次，默认false。
width=sizei设置背景音乐播放时控制面板的宽度，单位为像素或者百分比，默认为0；Volume=volume设置背景音乐的音量，0-100，默认值操作系统当前音量height=size设置背景音乐播放时控制面板的高度，单位为像素或者百分比，默认为0；Hidden=ishidden设置背景音乐播放时控制面板是否显示，取值为false为显示，取值true为隐藏，默认值为false，即显示播放面板。
注释：“width=0 heigth=0”和“hidden=true”都可以实现隐藏播放器控制面板的效果，但是hidden要比width和heigth的级别更高，以hidden优先。
4.3加入视频4.3.1通过<IMG>标记Dynsrc=URL设置视频文件的路径和名称，该属性不能省略。
Src=URL设置视频文件的替代图片的路径和名称。
Start=value设置视频的开始播放方式，fileopen为打开网页时就播放，mouseover为将光标移动到播放区才播放，默认为fileopen；Controls该属性没有取值，用于设置播放区下方是否显示播放控制条，默认为不显示。
Loop=looptimes设置视频播放次数，infinite为无限制循环，任意整数是播放指定的次数，默认值为1.Loopdelay=delaytime设置视频的播放延迟时间，单位为毫秒，默认值为0；4.3.2在HTML的代码中的<BODY>…</BODY>之间加入嵌入标记符<EMBED>…</EMBED>属性和取值基本一样，只要将src属性的取值设置为视频文件的路径和名称即可。
