详解HTML标签和属性.docx

详解HTML标签和属性
1. 详解HTML
标签和属性
在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“”表示。
元素指的是包含标签在内的整体，除去标签的部分叫做内容。
属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序
颜色的指定方法
用HTML指定颜色有两种方法
1、用16进制数值来指定：在#号的后面，把RGB的各个选项用十六进制的数值来表示，数值保持两位数。
2、指定颜色的名称：可以对基本的16色用名称来指定其颜色
指定文件的位置
在对某部分设置链接的时候，需要指定链接端HTML文件的位置；同样，如果想在该处显示图像也需要指定图像的位置。在HTML中，这个位置用URL来表示，有以下两种表示方法：
1、绝对URL：绝对URL就是用Web浏览器查看网页时，地址栏中显示的以http://开头的路径
2、相对URL：相对URL是在同一站点内进行设置，类似于在同一磁盘上管理文件的形式。这种方法是以当前文件的位置为基准。使用相对URL时，如果要指定的文件在当前文件的下级，就从目录名开始一直写到要指定的文件名，中间用“/”符号隔开。如果在当前文件的上级，每上一级就加一个“../”符号
2、基本内容
显示HTML的版本

HTML的版本表明HTML文件是按照哪个版本进行编写的（标明该HTML文件遵循的DTD文件），不同的版本和种类都有固定的书写格式，要按照固定的格式输入文件开头，然后在文件开头处写明版本，按照这种版本的规定格式进行编写
必须使用的标签
~
~
~
~
HTML文件的开头写有的部分，代表HTML的版本，其后是必须存在的四种标签
首先，后面的整个都要用html标签(~l>)括起来，其中要按照head标签(~~)的顺序进行排列。
在head标签中填写与该文件相关的信息，body标签中填写世纪要在浏览器上显示的内容。另外，在head标签中，只能有一个代表文件标题的title标签
设置页面的文字颜色
~
设置页面的背景颜色
~
设置页面的背景图像
~
按照目的设定范围
an>~
插入注释

3、设置文件信息
添加标题
~
title标签用来给HTML文件添加标题
这个标签一定要位于~圈定的范围内。在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题
显示文件编码

meta标签的charset属性表示该HTML文件是用什么文字编码编写的
注意，该标签一定要位于~head>范围内
添加关键字、内容介绍及作者姓名

这些信息都不会在画面上显示出来，但是搜索引擎在收集信息时要用到
注意，该标签一定要位于~范围内
设置样式表和脚本语言的种类

http-equiv="Content-Script-Type" content="脚本的种类" />
在HTML文件内可以设置样式表和脚本的默认语言
注意，该标签一定要位于~范围内
设置进入网页

rel：在本页看到的，与URL标明的网页之间的关系
rev：在URL标明的网页中看到的，与本页之间的关系
link标签表示的是该文件和与其相关的其他文件之间的关系
注意，该标签一定要位于~范围内
设置标准URL
se href=”绝对URL”>

base标签用来设置将该页中使用的相对URL的标准指向成绝对URL，指定了这个标签之后，在该页指定的相对URL就会全部认定为已在这里指定的绝对URL。如果不进行这项设置，就以当前页的位置为标准，如果指定了Target属性，就可以指定打开链接地址网页的默认框架和窗口
注意，该标签一定要位于~范围内
设置自动倒入网页功能

ontent="秒数"；URL=要移动到的URL />
在经过数秒后，自动开始导入网页。如果指定了要移动到的URL，就会导入URL指定的网页。如果没有指定，就会再次导入相同的页
注意，该标签一定要位于~范围内
4、设置文本类型
设置各级标题
两个标签所圈内容表示该部分是强调的内容
设置较短的引用文字
~
~
q标签代表的意思是该部分为较短的引用文，在引用段落的某一部分的时候使用，如果使用cite属性，还能够把引用页的URL显示出来
设置较长的引用文章
cronym>
title：不处于省略状态下的词汇（字符串）
设置添加的内容
~
设置需要删除的内容
~
突出显示段落中的术语
~
表示与程序关联的文本
~：输入文本
~：输出样本
~：源代码
~：变量
显示特殊符号
<：<
>：>
"：”
&：&
5、设置显示方式
设置文字的换行

添加了br标签之后，文本就会再该处换行。即使在HTML代码中已经换行了，在浏览器上显示的时候却反映不出来，因此如果想在浏览器上换行的话，就要使用br标签
添加不同横线效果
置空格和换行
t>
设置字体字号
~
相对改变字体大小
~：增大
~：减小
：增大n号
：减小n号
设置字号的基本大小

size：1~7
6、设置链接相关的属性
链接到其他页面
~
a标签的href属性能把指定的范围链接到其他页面上，链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容
另外，在链接图像的时候，一定要插入替代的文字（alt=”~”）使用户能够很明确的了解到链接的目标
链接到当前页的特定位置
~：指定链接文件（从什么位置开始链接）
~：指定链接的地址（要链接的位置）
如果一页上的内容非常多，可以在一个网页中给特定的位置命名，然后再链接到该位置（跳转）。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性在链接地址名称的前面加上#号
设置链接到其他页面的特定位置
~：指定链接源（从什么位置开始链接）
~>：指定链接的地址（要链接的位置）
在链接到其他网页上的时候，可以先给那一页上特定的位置命名，然后链接到该位置。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性设置成”URL+#+位置名”这样一种格式
设置链接文字的颜色
~
link：还没有看见的链接部分的文字颜色
vlink：已经看见的链接部分的文字颜色
alink：鼠标单击链接部分的文字颜色
body标签用于设置网页整体链接部分的文字颜色
在新窗口中打开链接网页
target=”窗口名”>~
利用target属性可以设置打开链接窗口的方式
通过设置链接来启动邮箱
~
7、制作不同类型的列表
为列表添加不同类型的标记
isc、cicle和square
制作带序号的列表
单独一行
~：单元格：标题用
~：单元格：数据用
表格的整体要圈在caption标签用来给表格添加标题
该标签一定要放在table标签的紧后面。标题的显示位置（即对齐方式）可以指定在表格的上部，或者表格的下部
指定表格的大小
~
~
垂直方向的合并数：从当前单元格开始向下合并的单元格数
水平方向的合并数：从当前单元格开始向右合并的单元格数
设置单元格之间的距离
th>
~
设置表格和单元格的背景颜色
bgcolor属性用于指定表格和单元格中的背景颜色
设置表格和单元格的背景图像
background属性用于指定表格和单元格中的背景图像
设置表格外框的宽度
ody>：表体部分
~：表底部分
thead标签、tbody标签和tfoot标签都是用来定义表格的横行（tr标签）的
这样组合之后，就可以针对该组合的整体来应用属性和样式表。
使用这些标签的时候，一定要以thead标签、tfoot标签和tbody标签的顺序进行排列。在一个表格里，只能放置一个thead标签和一个tfoot标签，而tbody标签可以根据需要放置多个
利用纵列设置表格属性和样式表

col标签不仅可以用来改变表格的纵列结构，还可以用来根据纵列，来综合指定宽和行对齐方式等属性以及样式表
该标签放置的位置要在caption标签的紧后面（如果没有caption标签，就放在table标签的开始标签的紧后面），以及thead标签和tr标签的前面
设置表格居中
解除表格那一侧的嵌套”>
left：解除左侧表格的嵌套
right：解除右侧表格的嵌套
all：解除两侧表格的嵌套
设置表格与嵌套文字之间的距离
何，都会按照在这里所指定的宽度和高度来显示
alt属性是在不能显示图像的情况下，指定替代图像所使用的文字
设置图像的边框

设置图像与文字的垂直位置关系

在同一行中，如果有图像和文字，那么就可以用align属性来设置图像和文字的垂直位置关系
制作图像热区

~
状” cords=”坐标” href=”URL” alt=”替代文字”>
在map标签中，用来设置实际单击的区域和链接地址的是area标签
在area标签中，一定要指定表示链接地址的替代文字，之后要用image标签的usemap属性指定定义后的image map的名称（名称前面要加#），这样图像就可以作为image map产生相应的效果
将图像嵌套在文本中

位置：left,right
解除图像的嵌套

设置图像与周围文字之间的距离
URL” alt=”替代文字” vspace=”垂直距离” hspace=”水平距离”>
放置Java小程序
~

applet标签是嵌入Java小程序时要使用的标签
如果使用param标签，在执行java小程序时，需事先指定一些必要值。这时，param标签要位于~范围的最开始部分
10、制作不同类型的表单
制作填写表单
式” enctype=”MIME类型” target=”窗口名称”>~t type=”reset” value=”标签”>
制作通用按钮

通用按钮通常与JavaScript等脚本语言组合使用
利用图像来制作发送按钮

通常，发送按钮都使用input type=”submit”代码，不过图像也可以作为发送按钮，具有发送功能。这时，图像被单击的位置将和表单的内容一起被发送
制作不同功能的发送按钮
31、名称” value=”发送值”>~
类型：submit,reset,button
button标签是用来制作按钮专用的
通过指定type属性值，就可以产生具有不同功能的按钮，包括发送按钮、重置按钮和通用按钮。另外，在~中放置相应的内容，可以作为按钮的标签显示出来。在需要进行其他处理并设置多个发送按钮的情况下，根据name属性和value属性所显示的值，接受方就可以分辨出单击的是哪一个发送按钮
制作单行文本框
名称” value=”发送值”>~字符的最大输入数量”>
制作多行文本框
~
制作输入密码的文本框

插入隐藏域

制作单选按钮

e=”名称” value=”发送文字” checked>
将input标签的type属性设置为radio，可以用来制作单选按钮。单选按钮是多个选项当中只能选择其一的按钮。作为公共项目的选项而使用的单选按钮，要把它们都指定为同一名称。另外，发送数据的时候，为了识别所选的是哪一项，要用value属性来指定相应的值
制作复选框

将input标签的type属性设置为checkbox，可以用来制作复选框。复选框可以在多个选项当中进行多项选择。作为公共项目的选项而使用的复选框，要把它们都指定为同一名称。另外，发送数据的时候，为了识别所选的是哪一项，要用value属性来指定相应的值
制作菜单
~：菜单整体
~：菜单项
~：菜单项
select标签用来制作菜单
菜单的整体要在~范围之内显示，然后按需要的数量在其中放置表示选项的~。>~范围之内要写上实际菜单要显示的选项的名称。另外，如果省略了value属性，在这里记录的文字本身就会作为所选值发送
组合菜单选项
~：制作组合菜单
~：组合内的选项
组合名称：第一级显示的组合标题
次选项：对应组合名称下面的在第二级显示出来的选项
制作的菜单选项可以利用~标签组合起来
制作下拉列表
~：下拉列表框
~：菜单项
~：菜单项
在用于制作菜单的select标签中指定了size属性后，就可以显示下拉列表框
添加选择文件的功能

将input标签的type属性设置为file，可以自动做成能够选择发送表单数据的文件按钮和文本框
综合利用菜单选项
标签用来把填写在表单中需要包含的输入内容和选项组合起来
在框架名称”>
高度：在垂直方向上分布的多个框架的高度，按从上到下的顺序依次用逗号隔开来指定
宽度：在水平方向上分布的多个框架的宽度，按从左到右的顺序依次用逗号隔开来指定
URL：作为框架内容显示的HTML文件的URL
框架名称：在指定链接等显示目标的时候使用的名称
使用框架功能可以把窗口横竖切割开，然后在不同的块区域中显示其他的HTML文件。在指定了框架的文件中，原来body标签所在的位置，要放置frameset标签，这主要是由于在框架页面中不能使用body标签
在~的范围中要按照顺序填入分割后框架内要填写的内容。如果不需要再分割，就用frame标签指定要导入的HTML文件，如果还要继续分割的话，就需要放置frameset标签（作为嵌套放置在里面，并且指定盖框架如何分割）
设置框架的显示方法

设置是否显示边框

frameborder属性用来设置分割开相邻框架的边框是否显示
去除分割框架的边框
0”>
在不支持框架的环境中显示所需内容
~
这个标签要在~范围的最开始或者最后处放置一个。在~范围内要首先放置body标签，并在其中填写所要显示的内容。
指定链接目标在哪一个框架内显示
~
如果对框架内的文件中指定的链接不进行设置的话，就会在原来的相同框架中显示链接目标，如果想使这个链接目标在其他框架中显示的话，就需要指定target属性值，用想要显示（frame标签）的那个框架的name属性来指定框架名称
插入内嵌框架
~
iframe标签不仅可以放置分割窗口形式的框架，还可以在窗口中放置独立显示的内嵌框架。在框架内还可以显示src属性所指定的内容
如果浏览器不支持这种框架，要在~之间指定要显示的内容
12、关于脚本
在HTML中插入脚本
~
~
在HTML文件中编写脚本的时候要用到script标签，脚本语言要写在这个标签的范围内
这时，在不支持这个标签的浏览器上会在画面上显示出脚本的部分，为了避免这种现象，通常把脚本整体作为HTML的注释。这个标签可以放在~和~范围内的任意位置上
在不能执行脚本的环境中添加所需的内容
~
在脚本不能运行的时候，可以使用noscript标签来指定替代显示的内容
这个标签要放置在~的范围内

关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2026 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：