详解HTML标签和属性.docx

上传人:b****4 文档编号:6774726 上传时间:2023-05-10 格式:DOCX 页数:17 大小:24.26KB
下载 相关 举报
详解HTML标签和属性.docx_第1页
第1页 / 共17页
详解HTML标签和属性.docx_第2页
第2页 / 共17页
详解HTML标签和属性.docx_第3页
第3页 / 共17页
详解HTML标签和属性.docx_第4页
第4页 / 共17页
详解HTML标签和属性.docx_第5页
第5页 / 共17页
详解HTML标签和属性.docx_第6页
第6页 / 共17页
详解HTML标签和属性.docx_第7页
第7页 / 共17页
详解HTML标签和属性.docx_第8页
第8页 / 共17页
详解HTML标签和属性.docx_第9页
第9页 / 共17页
详解HTML标签和属性.docx_第10页
第10页 / 共17页
详解HTML标签和属性.docx_第11页
第11页 / 共17页
详解HTML标签和属性.docx_第12页
第12页 / 共17页
详解HTML标签和属性.docx_第13页
第13页 / 共17页
详解HTML标签和属性.docx_第14页
第14页 / 共17页
详解HTML标签和属性.docx_第15页
第15页 / 共17页
详解HTML标签和属性.docx_第16页
第16页 / 共17页
详解HTML标签和属性.docx_第17页
第17页 / 共17页
亲,该文档总共17页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

详解HTML标签和属性.docx

《详解HTML标签和属性.docx》由会员分享,可在线阅读,更多相关《详解HTML标签和属性.docx(17页珍藏版)》请在冰点文库上搜索。

详解HTML标签和属性.docx

详解HTML标签和属性

详解HTML标签和属性

1.详解HTML

标签和属性

在HTML中,通常标签都是由开始标签和结束标签组成的,开始标签用“<标签名>”表示,结束标签用“”表示。

元素指的是包含标签在内的整体,除去标签的部分叫做内容。

属性要在开始标签中指定,用来表示该标签的性质和特性。

通常都是以“属性名=”值””的形式来表示,用空格隔开后,还可以指定多个属性。

指定多个属性时不用区分顺序

颜色的指定方法

用HTML指定颜色有两种方法

1、用16进制数值来指定:

在#号的后面,把RGB的各个选项用十六进制的数值来表示,数值保持两位数。

2、指定颜色的名称:

可以对基本的16色用名称来指定其颜色

指定文件的位置

在对某部分设置链接的时候,需要指定链接端HTML文件的位置;同样,如果想在该处显示图像也需要指定图像的位置。

在HTML中,这个位置用URL来表示,有以下两种表示方法:

1、绝对URL:

绝对URL就是用Web浏览器查看网页时,地址栏中显示的以http:

//开头的路径

2、相对URL:

相对URL是在同一站点内进行设置,类似于在同一磁盘上管理文件的形式。

这种方法是以当前文件的位置为基准。

使用相对URL时,如果要指定的文件在当前文件的下级,就从目录名开始一直写到要指定的文件名,中间用“/”符号隔开。

如果在当前文件的上级,每上一级就加一个“../”符号

2、基本内容

显示HTML的版本

DOCTYPE~>

HTML的版本表明HTML文件是按照哪个版本进行编写的(标明该HTML文件遵循的DTD文件),不同的版本和种类都有固定的书写格式,要按照固定的格式输入文件开头,然后在文件开头处写明版本,按照这种版本的规定格式进行编写

必须使用的标签

~

~

~

~

HTML文件的开头写有

DOCTYPE~>的部分,代表HTML的版本,其后是必须存在的四种标签

首先,

DOCTYPE~>后面的整个都要用html标签(~)括起来,其中要按照head标签(~~)的顺序进行排列。

在head标签中填写与该文件相关的信息,body标签中填写世纪要在浏览器上显示的内容。

另外,在head标签中,只能有一个代表文件标题的title标签

设置页面的文字颜色

~

设置页面的背景颜色

~

background-color

属性为元素定义了背景颜色:

yellow">

red">Thisisaheading

green">Thisisaparagraph.

设置页面的背景图像

~

按照目的设定范围

~

~

插入注释

—注释语句-->

3、设置文件信息

添加标题

~

title标签用来给HTML文件添加标题

这个标签一定要位于~圈定的范围内。

在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外,还可以作为加入收藏夹时的标题

显示文件编码

meta标签的charset属性表示该HTML文件是用什么文字编码编写的

注意,该标签一定要位于~范围内

添加关键字、内容介绍及作者姓名

这些信息都不会在画面上显示出来,但是搜索引擎在收集信息时要用到

注意,该标签一定要位于~范围内

设置样式表和脚本语言的种类

在HTML文件内可以设置样式表和脚本的默认语言

注意,该标签一定要位于~范围内

设置进入网页

rel:

在本页看到的,与URL标明的网页之间的关系

rev:

在URL标明的网页中看到的,与本页之间的关系

link标签表示的是该文件和与其相关的其他文件之间的关系

注意,该标签一定要位于~范围内

设置标准URL

base标签用来设置将该页中使用的相对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~7

6、设置链接相关的属性

链接到其他页面

~

a标签的href属性能把指定的范围链接到其他页面上,链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容

另外,在链接图像的时候,一定要插入替代的文字(alt=”~”)使用户能够很明确的了解到链接的目标

链接到当前页的特定位置

~:

指定链接文件(从什么位置开始链接)

~:

指定链接的地址(要链接的位置)

如果一页上的内容非常多,可以在一个网页中给特定的位置命名,然后再链接到该位置(跳转)。

在给链接对象位置命名的时候要使用name属性。

然后,在链接的时候,要用href属性在链接地址名称的前面加上#号

设置链接到其他页面的特定位置

~:

指定链接源(从什么位置开始链接)

~:

指定链接的地址(要链接的位置)

在链接到其他网页上的时候,可以先给那一页上特定的位置命名,然后链接到该位置。

在给链接对象位置命名的时候要使用name属性。

然后,在链接的时候,要用href属性设置成”URL+#+位置名”这样一种格式

设置链接文字的颜色

~

link:

还没有看见的链接部分的文字颜色

vlink:

已经看见的链接部分的文字颜色

alink:

鼠标单击链接部分的文字颜色

body标签用于设置网页整体链接部分的文字颜色

在新窗口中打开链接网页

~

利用target属性可以设置打开链接窗口的方式

通过设置链接来启动邮箱

邮箱地址”>~

7、制作不同类型的列表

为列表添加不同类型的标记

  • 列表项目1
  • <>
  • 列表项目2
    • ul标签的作用是将列表(条款形式)加上圆点或方括号的标记。

      列表的整体要在

        ~
      标签范围内,在这之间的各个项目要在
    • ~
    • 标签之内

      更改列表标记

      ~

    ~

    标记的种类包括disc、cicle和square

    制作带序号的列表

    1. 列表项目1
    2. <>
    3. 列表项目2
      1. 改变序号的样式

        ~

      ~

      改变序号的顺序

      ~

    ~

    制作包含专用语和解释的列表

    专用语
    对其解释

    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属性指定定义后的imagemap的名称(名称前面要加#),这样图像就可以作为imagemap产生相应的效果

    将图像嵌套在文本中

    位置:

    left,right

    解除图像的嵌套

    设置图像与周围文字之间的距离

    放置Java小程序

    ~

    applet标签是嵌入Java小程序时要使用的标签

    如果使用param标签,在执行java小程序时,需事先指定一些必要值。

    这时,param标签要位于~范围的最开始部分

    10、制作不同类型的表单

    制作填写表单

    ~

    URL:

    用来处理发送后表格的程序的URL

    发送形式:

    get,post

    MIME类型:

    以post方式发送内容时的MIME类型

    窗口名称:

    先是发送结果的窗口或框架名

    form标签表示在表单中填写的内容是可以发送的

    制作发送按钮

    标签:

    在按钮上显示的文字

    名称:

    按钮的名称

    将input标签的type属性设置为submit,再根据form标签的设置,可以制作发送填写在表单中数据的按钮

    制作重置按钮

    制作通用按钮

    通用按钮通常与JavaScript等脚本语言组合使用

    利用图像来制作发送按钮

    通常,发送按钮都使用inputtype=”submit”代码,不过图像也可以作为发送按钮,具有发送功能。

    这时,图像被单击的位置将和表单的内容一起被发送

    制作不同功能的发送按钮

    ~

    类型:

    submit,reset,button

    button标签是用来制作按钮专用的

    通过指定type属性值,就可以产生具有不同功能的按钮,包括发送按钮、重置按钮和通用按钮。

    另外,在中放置相应的内容,可以作为按钮的标签显示出来。

    在需要进行其他处理并设置多个发送按钮的情况下,根据name属性和value属性所显示的值,接受方就可以分辨出单击的是哪一个发送按钮

    制作单行文本框

    制作多行文本框

    ~

    制作输入密码的文本框

    插入隐藏域

    制作单选按钮

    将input标签的type属性设置为radio,可以用来制作单选按钮。

    单选按钮是多个选项当中只能选择其一的按钮。

    作为公共项目的选项而使用的单选按钮,要把它们都指定为同一名称。

    另外,发送数据的时候,为了识别所选的是哪一项,要用value属性来指定相应的值

    制作复选框

展开阅读全文

相关搜索
资源标签

当前位置:首页 > 工程科技

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2