HTML常用标签.docx

HTML常用标签.docx

《HTML常用标签.docx》由会员分享，可在线阅读，更多相关《HTML常用标签.docx（18页珍藏版）》请在冰豆网上搜索。

HTML常用标签

HTML

1标签

标签指示浏览器该如何解读信息

标签可以有属性，属性由属性名和值组成，为了避免解释错误，值要用双引号引起

若本身就想显示双引号，则需要在外面再用单引号引起

属性之间要用空格隔开，顺序和大小写无关

2常用标签

2.1HTML固有标签

定义HTML网页，所有内容要在这两个标签之中

定义文件头，不显示在网页内容中，定义格式、脚本等

定义文件体，网页的主题部分

2.2meta标签

定义文件信息，使用手工写，使用dreamweaverHTML选项可以选择添加。

2.3标题标签title

用来定义网页名字，将来会显示在网页标题栏

eg：

属性：

2.4段落标签p

……本段文字……

在body中使用

eg

thisisaparagraph

2.5换行br

：

紧凑换行

在显示上段和段之间差着两行，在设计区直接按Enter相当于制造了两段

之间的行紧挨着，在设计区用shift+enter实现

制造空的一行

2.6水平线hr

属性：

颜色

eg：

color=”reg”

2.7注释

--…………-->

2.8超链接

2.8.1文间链接

创建超链接：

文本或图片等

效果：

将以蓝色显示并链接到网址

eg：

绝对地址page

相对地址page

page

TIPS：

添加googlemaps显示当先地址

2.8.2文内链接

创建锚点进行文内链接，不能用数字开头的字符串作为锚点

定义锚点

引用锚点……

引用其他文章的锚点……

创建电子邮件

kangde@”>kangde@

防止垃圾邮件

a在ASCII中编码为a；用它替换原来的字符。

2.9定义列表

2.9.1定义有序列表

有序列表，每个表项有数字号

：

表示有序列表

1. ：

   表示表项

   1. …………
   2. …………

   2.9.2定义无序列表

   无序列表，每个表项有个点号

   ：

   表示有序列表

   • ：

     表示表项

     • …………
     • …………

     2.9.3定义定义列表

     定义列表：

     定义无缩进，术语缩进两格

     ：

     表示有序列表

     ：

     表示表项

     定义

     定义内容

     定义

     …………

     2.9.4列表嵌套

     列表可以嵌套

     基本格式，以无序列表为例

     • ……

     • ……

     2.9.5列表标签属性

     无序列表

     disc”>

     circle或者square

     或者

     disc”>……

     有序列表

     upper-roman”>

     upper-alpha或者lower-alpha或者lower-roman

     2.10格式化标签

     2.10.1文本格式化

     加粗：

     ……

     斜体：

     ……

     上标：

     ^……

     下标：

     _……

     保持空格：

     2.10.2文本和背景颜色
     背景颜色：
     style=”backgroung-color:
     blue”
     背景图像：
     style=”background-image:
     url（image.gif）”
     文本颜色：
     color:
     blue
     同时使用
     url（image.gif）”;color:
     blue>
     注意：
     使用分号
     属性：
     background-repeat:
     指定背景图像平铺方式repeat、repeat-x、repeat-y、no-repeat
     2.11插入图片
     web支持文间格式为GIF、JPEG、JPG、PNG
     插入图片格式：
     src：
     图片文件名
     alt：
     用户无法下载图片时显示的文本，若不需要，alt=“”
     缩略图超链接图片
     none”/>
     属性
     1、style=”border-style:
     none”：
     去掉超链接图像的边框
     2、title=””：
     指定鼠标指向图像时显示的文字
     3、style=”float:
     ”参数：
     left、right指定文字环绕模式
     4、style=”vertical-align:
     ”参数text-top（同一行内容顶部对齐）、text-bottom（同一行内容底部对齐）、middle（同一行内容中心对齐）、baseline（同一行文本基线对齐）
     5、width=”200px”height=”100px”设定图像大小，防止浏览器拉伸大小
     2.12创建表格
     、用于创建表格
     用于创建一行，包括一个或多个单元格
     用于创建表头
     用于创建单元格
     注意：
     对表格进行修饰的CSS不能出现在
     中，其对表格不会产生影响，需要出现在中。
     eg：
     表项1
     表项2
     内容1
     内容2
     属性：
     style=”width:
     500px”指定表格宽度用于table标签
     style=”height:
     400px”指定表格长度用于table标签
     style=“width：
     20%”指定单元格百分比，用于th/td标签，也可指定像素等
     style=“vertical-align：
     ”参数：
     top、middle、bottom、text-top、text-bottom和baseline指定表格中数据垂直对齐方式
     colspan=“2”指定单元格跨越两列，不使用style
     rowspan=“2”指定单元格跨越两行，不使用style
     style=“background-color：
     red”
     style=“background-image：
     image.gif”指定使用的背景，可以再table、tr、td、th中使用
     cellpadding=“2”（单位默认为像素）指定表格边框之间和表格单元格之间的间距
     cellspacing=“2”（单位默认为像素）指定单元格中的信息四周的间距
     border=1表示边框可见
     表格可以嵌套，表格嵌套可以用来布局
     2.13创建框架
     2.13.1定义框架集
     rows或者cols必须指定
     rows用来指定分为上下两部分的框架的大小
     cols用来指定分为左右两部分的框架的大小
     eg:
     rows=“80,*”上边为80像素，下边为剩下所有
     rows=“20%，*”上边为20%，下边为剩下所有
     rows=“30%，*，*”上边为30%，剩下两个框架平分剩余空间
     注意:
     不能在head或者body中设置，在它们之外之中设置
     2.13.2定义框架
     指定框架中填充的网页并提供框架区域应用名称
     eg
     该框架指示建立一个有两个内容的框架，各占20%和80%，其中上边框架默认引用daohang.html网页，上边框架名称为top，下面框架默认引用index.html网页，下面框架名称为name
     其他属性，以下属性用于frame标签
     marginwidth指定框架的左右边距，单位：
     像素
     marginheight指定框架的上下边距，单位：
     像素
     scrolling：
     是否显示滚动条yes或no
     frameborder：
     是否显示该框架与相邻框架之间的分割线，1：
     是，0：
     否
     noresize：
     是否允许用户调整框架大小直接noresize
     2.13.3引用框架
     超链接中添加target属性
     点击该超链接，内容都将出现在main框架中，若想其用一个网页单独显示，需要设置target为_blank
     2.14创建表单
     2.14.1声明表单
     指定创建表单
     eg：
     me@”>表单内容
     action有两种处理方法：
     1、引用web服务器中脚本；2、mailto引用电子邮件地址。
     2.14.2创建文本信息
     文本
     表示在提示信息“文本”后出现一个框，该框长20像素，最大能接受30个字符，maxlength值超过size，会向做滚屏
     type属性值为text表示表单元素为文本
     其他参数加密显示
     type=”password”
     2.14.3创建复选框
     选项文本
     name属性必须要有
     checked表示默认选项
     tips文本imput标签末尾加空格可以扩大选项到文本的距离
     2.14.4创建单选框
     选项文本
     value属性可以是任何名称或编码
     2.14.5创建滚动列表
     选项文本
     AM/FMRadio
     …………
     size属性表示同时显示多少项，若少于实际选项，则将显示滚动条
     multiple属性表示可以同时选中多项
     selected属性指定默认选项
     2.14.6创建多行文本
     提示文本
     rows属性指定行数
     cols属性指定列数
     2.14.7创建按钮
     创建默认提交按钮
     value指定按钮的内容
     创建图像提交按钮
     重置按钮
     创建图像重置按钮
     2.15插入视频音频
     简单格式
     文本或图片
     强制用mediaplayer播放视频同时指定大小
     6BF52A52-394A-11d3-B153-00C04F79FAA6”width=”320”height=”305”>
     播放该视频
     表示视频在页面打开后会自动播放
     随页面打开自动播放
     realplayer编码
     CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
     MIME格式：
     3样式表CSS
     CSS是一种将文本和格式分离的布局，格式化方案。
     在head中引用样式表：
     3.1布局属性
     一、布局属性display
     3.2格式化属性
     3.2.1创造边框border
     在元素四周建立一个课件的方框
     border-width：
     5px指定边框宽度，单位像素
     border-color：
     指定边框颜色
     border-style：
     指定边框样式，参数solid（单实线）、double（双实线）、dashed（虚线）、dotted（点线）、groove（沟线）、ridge（脊线）、inset（内线边框）、outset（外凸边框），none（无边框）
     border-left：
     指定边框左边
     border-right：
     指定边框右边
     border-top：
     指定边框顶部
     border-bottom：
     指定边框底部
     border：
     指定边框的所有边
     color：
     边框内部文字颜色
     background-color：
     边框内部文字背景颜色
     3.2.2文本处理
     统一用style=引用
     对齐
     text-ailgn:
     参数：
     center、left、right
     缩进
     text-indent:
     参数XXpx/XXpt
     字体集
     font-family:
     参数：
     timesnewroman、arial……备选项用逗号隔开
     字体大小
     font-size:
     参数：
     XXpt或px
     斜体
     font-style:
     参数：
     normal、italic、oblique
     加粗
     font-weight:
     参数：
     normal、bold、bolder、lighter
     颜色
     color:
     参数：
     ……
     文本行高度
     line-height：
     删除链接下划线
     text_decoration:
     参数：
     none、underline、italic和line-through
     设置左右边距
     margin-left:
     margin-right:
     字母间距单位：
     像素
     letter-spacing
     词间距单位：
     像素
     word-spacing
     小型大写字母
     font-variant:
     small-caps
     自动转换段落文本大小写
     text-transform:
     参数:
     none、uppercase（大写）、lowercase（小写）、capitalize（首字母大写）
     3.3修改超链接外观
     Link：
     链接尚未访问过
     Hover：
     鼠标指向链接
     Active：
     链接被激活
     Visited：
     链接被访问过
     先设置后引用
     设置：
     a:
     link{
     CSS}
     引用：
     link……>……
     对多个类指定统一格式，用逗号分隔
     a:
     link,a:
     visited,a:
     active{
     CSS}
     a.1:
     link,a.2:
     visited,a.3:
     active{
     CSS}
     3.4注释
     /*…………*/
     3.5通用类
     可以用于任何样式
     eg：
     .bold{font-weight:
     bold
     }
     3.6应用样式
     3.6.1样式类
     定义样式类：
     样式名：
     类名
     样式之间用分号隔开，最后一个样式也要加分号
     样式类应用于整个站点
     eg
     p.aa{font-size:
     12pt;color=red;}
     …………
     3.6.2内部样式表
     应用于单个网页
     必须在head中定义样式表
     不需要link标签引用样式表
     在其他网页中不能引用该样式表除非将其复制过去
     eg：
     div.footnote{
     font-size:
     9pt;
     line-height:
     12pt;
     text-align:
     center;}
     ……
     3.6.3内联样式表
     将样式应用于单个元素
     一行：
     XXX
     一块：
     XXX