详解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 标签(~)括起来，其中要按照 head 标签(~~)的顺序进行排列在 head 标签中填写与该文件相关的信息，body 标签中填写世纪要在浏览器上显示的内容另外，在 head 标签中，只能有一个代表文件标题的 title 标签设置页面的文字颜色~设置页面的背景颜色~设置页面的背景图像~按照目的设定范围~~插入注释3、设置文件信息添加标题~title 标签用来给 HTML 文件添加标题这个标签一定要位于~ 圈定的范围内在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题显示文件编码meta 标签的 charset 属性表示该 HTML 文件是用什么文字编码编写的注意，该标签一定要位于~ 范围内添加关键字、内容介绍及作者姓名这些信息都不会在画面上显示出来，但是搜索引擎在收集信息时要用到注意，该标签一定要位于~ 范围内设置样式表和脚本语言的种类在 HTML 文件内可以设置样式表和脚本的默认语言注意，该标签一定要位于~ 范围内设置进入网页rel：在本页看到的，与 URL 标明的网页之间的关系rev：在 URL 标明的网页中看到的，与本页之间的关系link 标签表示的是该文件和与其相关的其他文件之间的关系注意，该标签一定要位于~ 范围内设置标准 URLbase 标签用来设置将该页中使用的相对 URL 的标准指向成绝对 URL，指定了这个标签之后，在该页指定的相对 URL 就会全部认定为已在这里指定的绝对 URL。

如果不进行这项设置，就以当前页的位置为标准，如果指定了 Target 属性，就可以指定打开链接地址网页的默认框架和窗口注意，该标签一定要位于~ 范围内设置自动倒入网页功能在经过数秒后，自动开始导入网页如果指定了要移动到的 URL，就会导入 URL 指定的网页如果没有指定，就会再次导入相同的页注意，该标签一定要位于~ 范围内4、设置文本类型设置各级标题~…设置段落~p 标签表示的是该部分为一个段落设置联系地址~address 标签表示的内容是该网页制作者的联系地址和有关网页内容的咨询地址等信息设置强调内容~~这两个标签所圈内容表示该部分是强调的内容设置较短的引用文字~~q 标签代表的意思是该部分为较短的引用文，在引用段落的某一部分的时候使用，如果使用 cite 属性，还能够把引用页的 URL 显示出来设置较长的引用文章~~设置文字内容的出处~设置缩略语~~title：不处于省略状态下的词汇（字符串）设置添加的内容~设置需要删除的内容~突出显示段落中的术语~表示与程序关联的文本~：输入文本~：输出样本~：源代码~：变量显示特殊符号<： "：”&： &5、设置显示方式设置文字的换行添加了 br 标签之后，文本就会再该处换行。

即使在 HTML 代码中已经换行了，在浏览器上显示的时候却反映不出来，因此如果想在浏览器上换行的话，就要使用 br 标签添加不同横线效果加入了 hr 标签后，就可以在其标注的地方显示横线设置文本格式~：黑体字~：斜体字~：等大字体~：上标~：下标~：下划线~：删除线设置空格和换行~标签可以保留文字在源代码中的格式，使得页面中显示的内容和源代中的格式完全一致设置居中效果~center 标签用于将指定范围内的内容设置为居中设置行对齐方式~~~使用 align 属性可以设置标题、段落以及指定范围内的行对齐方式设置文字颜色~设置字体类型字体名”>~设置字体字号~相对改变字体大小~：增大~：减小：增大 n 号：减小 n 号设置字号的基本大小size：1~76、设置链接相关的属性链接到其他页面~a 标签的 href 属性能把指定的范围链接到其他页面上，链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容另外，在链接图像的时候，一定要插入替代的文字（alt=”~”）使用户能够很明确的了解到链接的目标链接到当前页的特定位置~：指定链接文件（从什么位置开始链接）~：指定链接的地址（要链接的位置）如果一页上的内容非常多，可以在一个网页中给特定的位置命名，然后再链接到该位置（跳转）。

在给链接对象位置命名的时候要使用 name 属性然后，在链接的时候，要用href 属性在链接地址名称的前面加上# 号设置链接到其他页面的特定位置~：指定链接源（从什么位置开始链接）~：指定链接的地址（要链接的位置）在链接到其他网页上的时候，可以先给那一页上特定的位置命名，然后链接到该位置在给链接对象位置命名的时候要使用 name 属性然后，在链接的时候，要用 href 属性设置成”URL+#+位置名”这样一种格式设置链接文字的颜色~link：还没有看见的链接部分的文字颜色vlink：已经看见的链接部分的文字颜色alink：鼠标单击链接部分的文字颜色body 标签用于设置网页整体链接部分的文字颜色在新窗口中打开链接网页~利用 target 属性可以设置打开链接窗口的方式通过设置链接来启动邮箱~7、制作不同类型的列表为列表添加不同类型的标记列表项目 1列表项目 2…ul 标签的作用是将列表（条款形式）加上圆点或方括号的标记列表的整体要在~标签范围内，在这之间的各个项目要在~标签之内更改列表标记~~标记的种类包括 disc、cicle 和 square制作带序号的列表列表项目 1列表项目 2…改变序号的样式~~改变序号的顺序~~制作包含专用语和解释的列表专用语对其解释…8、设置表格表格的基本形式~：整个表格~：单独一行~：单元格：标题用~：单元格：数据用表格的整体要圈在~之间显示，表格当中某一个单元格用~表示或者~表示。

每个单元格都在表的单独以行，放置在~中也就是说，table 标签的内容是由 tr 标签构成的各个 tr 标签的内容是由表示单元格的 th或者 td 标签构成的th 标签代表这个单元格的内容是标题td 标签代表这个单元格的内容是数据为表格添加标题~~caption 标签用来给表格添加标题该标签一定要放在 table 标签的紧后面标题的显示位置（即对齐方式）可以指定在表格的上部，或者表格的下部指定表格的大小~宽度：针对像素或者窗口的百分比指定单元格大小~~合并单元格~~~~垂直方向的合并数：从当前单元格开始向下合并的单元格数水平方向的合并数：从当前单元格开始向右合并的单元格数设置单元格之间的距离~设置单元格边框与内容之间的距离~设置单元格中的行对齐方式和列对齐方式align 属性用于设置单元格内的行对齐方式，valign 属性用来设置单元格内的列对齐方式禁止在单元格内换行~~设置表格和单元格的背景颜色bgcolor 属性用于指定表格和单元格中的背景颜色设置表格和单元格的背景图像background 属性用于指定表格和单元格中的背景图像设置表格外框的宽度~设置表格外框的显示形式~设置表格内补边框线的显示形式~定义表格中的横行~：表头部分~：表体部分~：表底部分thead 标签、 tbody 标签和 tfoot 标签都是用来定义表格的横行（tr 标签）的这样组合之后，就可以针对该组合的整体来应用属性和样式表。

使用这些标签的时候，一定要以 thead 标签、tfoot 标签和 tbody 标签的顺序进行排列在一个表格里，只能放置一个 thead 标签和一个 tfoot 标签，而 tbody 标签可以根据需要放置多个利用纵列设置表格属性和样式表col 标签不仅可以用来改变表格的纵列结构，还可以用来根据纵列，来综合指定宽和行对齐方式等属性以及样式表该标签放置的位置要在 caption 标签的紧后面（如果没有 caption 标签，就放在 table 标签的开始标签的紧后面），以及 thead 标签和 tr 标签的前面设置表格居中~将表格嵌入到文本中~位置：left,right将 table 标签的 align 属性指定为 left 或者 right 后，就可以将表格以居左或居右的方式嵌入到文字中间如果想要解除嵌入状态，可以使用 标签的 clear 属性解除表格的嵌套left：解除左侧表格的嵌套right：解除右侧表格的嵌套all：解除两侧表格的嵌套设置表格与嵌套文字之间的距离~垂直距离：表格的上下框与文字间的距离水平距离：表格的左右框与文字间的距离9、设置图像与多媒体插入图像使用 img 标签，可以把图像插入到 HTML 文件中图像的格式一般可以使用 GIF 格式、JPEG 格式和 PNG 格式不管图像实际的大小如何，都会按照在这里所指定的宽度和高度来显示alt 属性是在不能显示图像的情况下，指定替代图像所使用的文字设置图像的边框设置图像与文字的垂直位置关系在同一行中，如果有图像和文字，那么就可以用 align 属性来设置图像和文字的垂直位置关系制作图像热区~在 map 标签中，用来设置实际单击的区域和链接地址的是 area 标签在 area 标签中，一定要指定表示链接地址的替代文字，之后要用 image 标签的 usemap属性指定定义后的 image map 的名称（名称前面要加#），这样图像就可以作为 image map 产生相应的效果将图像嵌套在文本中位置：left,right解除图像的嵌套设置图像与周围文字之间的距离放置 Java 小程序~applet 标签是嵌入 Java 小程序时要使用的标签如果使用 param 标签，在执行 java 小程序时，需事先指定一些必要值。

这时，param标签要位于~范围的最开始部分10、制作不同类型的表单制作填写表单~URL：用来处理发送后表格的程序的 URL发送形式：get,postMIME 类型：以 post 方式发送内容时的 MIME 类型窗口名称：先是发送结果的窗口或框架名form 标签表示在表单中填写的内容是可以发送的制作发送按钮标签：在按钮上显示的文字名称：按钮的名称将 input 标签的 type 属性设置为 submit，再根据 form 标签的设置，可以制作发送填写在表单中数据的按钮制作重置按钮@n。