2023年11月29日发(作者:)
html标签及属性⼤全(⽹页制作必备)
总类(所有html⽂件都有的)
--------------------------------------------------------------------------------
⽂件类型 (放在档案的开头与结尾)
⽂件主题
⽂头 (描述性资料,像是「主题」)
⽂体 (⽂件本体)
结构性定义(由浏览器控制的显⽰风格)
--------------------------------------------------------------------------------
标题
标题对齐
区分
区分对齐 左对齐、右对齐、居中对齐、两端对齐
引⽂区块 (通常会内缩)
斜体
加粗
引⽂ (通常会以斜体显⽰)
码 (显⽰原始码之⽤)
样本
表⽰⼀段⽤户应该对其没有什么其他解释的⽂本。要从正常的上下⽂抽取这些字符时,通常要⽤到这个标签。
并不经常使⽤,只在要从正常上下⽂中将某些短字符序列提取出来,对其加以强调,才使⽤这个标签
与外观相关的标签(作者⾃订的表现⽅式)
--------------------------------------------------------------------------------
加粗
斜体
3.0 底线 (尚有些浏览器不提供)
3.0 删除线 (尚有些浏览器不提供)
3.0 下标
3.0 上标
打字机体 (⽤单空格字型显⽰)
预定格式 (保留⽂件中空格的⼤⼩)
预定格式的宽度 (以字元计算)
n1.0+ 向中看齐 (⽂字与图⽚都可以)
n1.0 闪耀 (有史以来最被嘲弄的标签)
n1.0 字体⼤⼩ (从1到7)
n1.0 改变字体⼤⼩
n1.0 基本字体⼤⼩
n2.0 字体颜⾊
连结与图形
n2.0 连结到⽬的视框 < href="url" target="***">
图形
图形看齐⽅式
n1.0 图形看齐⽅式
取代⽂字 (如果没有办法显⽰图形则显⽰此⽂字)
点选图
n2.0 点选图
n2.0 地图 < name="***">(描述地图)
n2.0 段落
3.0 ⼤⼩ (以pixels为单位:px)
n1.0 图形边缘 (以pixels为单位)
n1.0 图形边缘空间 (以pixels为单位)
n1.0 低解析度图形
n1.1 ⽤户端拉 < http-equiv="refresh" content="?; url=url">(使⽤端⾃动更新 )
n2.0 内嵌物件
n2.0 内嵌物件⼤⼩
3.0 段落
(新定义成容器型标签)
3.0 ⽂字看齐⽅式
换⾏ (⼀个return)
n1.0 ⽂字部份看齐⽅式
(与图形合⽤时)
横线
n1.0 横线对齐
n1.0 横线厚度
(以pixels为单位)
n1.0 横线宽度
(以pixels为单位)
n1.0 横线⽐率宽度
(以页宽为100%)
n1.0 实线
(没有⽴体效果)
n1.0 不可换⾏
n1.0 可换⾏处 (如果需要,可在此断⾏)
列举 (可以巢状列举)
--------------------------------------------------------------------------------
⽆次序式列举 (
n1.0 公布式列举 (定义全部的列举项)
(定义这个及其後的列举项)
有次序式列举
n1.0 数标型态
(定义全部的列举项)
定义式列举 (项⽬, 定义)
表单式列举 (
⽬录式列举
背景与颜⾊
--------------------------------------------------------------------------------
3.0 重复排列的背景
n1.1+ 背景颜⾊ $$"> (依序为红、绿、蓝) n1.1+ ⽂字颜⾊ n1.1+ 连结颜⾊ n1.1+ 看过的连结 $$"> n1.1 使⽤中的连结 n2.0 上传档案 < enctype="multipart/form-data> 输⼊栏位 < ="text|password|checkbox|radio|image|hidden|submit|reset"> 栏位名称 栏位内定值 已选定 (适⽤於checkboxes与 radio boxes) 栏位宽度 (以字元数为单位) 最长字数 (以字元数为单位) 下拉式选单 3.0 定义表格 3.0 表格框线 n1.1 表格框线 n1.1 储存格左右留⽩ n1.1 储存格上下留⽩ n1.1 表格宽度 < width=?> (以pixels为单位) n1.1 宽度⽐率 3.0 表格列 3.0 表格列内容看齐 3.0 储存格 (须与列并⽤) 3.0 储存格内容看齐 3.0 不换⾏ n3.0 储存格背景颜⾊ $$> 3.0 储存格横向连接 3.0 表格标题不换⾏ 3.0 表格标题占⼏栏 3.0 表格标题占⼏列 n1.1 表格标题宽度 n1.1 表格标题⽐率宽度 3.0 表格抬头 3.0 表格抬头看齐 视框 (定义与控制萤幕上的特定区域) -------------------------------------------------------------------------------- n2.0 视框格式总定义 (取代) n2.0 视框⾏长度分配 (pixels 或 %) n2.0 视框⾏长度分配 (* = 相对⼤⼩) n2.0 视框栏宽度分配 (pixels 或 %) n2.0 视框栏宽度分配 (* =相对⼤⼩) n2.0 定义个别视框 (定义个别视框) n2.0 个别视框内容 n2.0 个别视框名称 n2.0 边缘宽度 (「左」与「右」边界) n2.0 边缘⾼度 (「天顶」与「地底」边界) n2.0 卷动条 n2.0 不可改变⼤⼩ n2.0 ⽆视框时的内容 杂项 -------------------------------------------------------------------------------- (浏览器不会显⽰) 档案型态声明 3.0 档案型态声明 可搜寻 n1.0 提⽰ 基本档案的url n2.0 基本视窗名称 相关性 (必须放在「⽂头」区段内) 背景资讯 (必须放在「⽂头」区段内) html标签 html标签通常是英⽂词汇的全称(如块引⽤:blockquote)或缩略语(如“p”代表paragragh),但它们的与⼀般⽂本有区别,因为它们放在单 书名号⾥。故paragragh标签是 , 明这些词如何显⽰(使⽂字变粗)还有⼀些其他标签提供在页⾯上不显⽰的信息--例如标题。 关于标签,需要记住的是,它们是成双出现的。每当使⽤⼀个标签--如,则必须以另⼀个标签将它关闭。注意“blockquote”前 的斜杠,那就是关闭标签与打开标签的区别。 基本html页⾯以标签开始,以结束。在它们之间,整个页⾯有两部分--标题和正⽂。 标题词--夹在和标签之间--这个词语在打开页⾯时出现在屏幕底部最⼩化的窗⼝。正⽂则夹在和之间--即所 有页⾯的内容所在。页⾯上显⽰的任何东西都包含在这两个标签之中。 那么让我们建⽴⼀个简单的范例吧,⾮常容易的。第⼀步,当然是要建⽴⼀个新的⽂本⽂件(记住,如果你在使⽤⽐较复杂的⽂字处理器, 就应该⽤“纯⽂本”或“普通⽂本”来保存),将它命名为“”。(随便你起⼀个什么名字,但记住,要⽤英⽂) 然后你可以⽤浏览器将它打开,你会看见最简单的⾃⼰做的页⾯。 . 2. 3. 4. html是英⽂ hypertext markup language 的缩写,中⽂意思是“超⽂本标志语⾔”,⽤它编写的⽂件(⽂档)的扩展名是.html或.htm,它们是可供 浏览器解释浏览的⽂件格式。您可以使⽤记事本、写字板或 frontpage editor 等编辑⼯具来编写html⽂件。html语⾔使⽤标志对的⽅法编写⽂ 件,既简单⼜⽅便,它通常使⽤<标志名>标志名>来表⽰标志的开始和结束(例如标志对),因此在html⽂档中这样的标志对都 必须是成对使⽤的。在此教程中,我先讲⼀下html的基本标志: 1. 标志⽤于html⽂档的最前边,⽤来标识html⽂档的开始。⽽标志恰恰相反,它放在html⽂档的最后边,⽤来标识html⽂档的结 束,两个标志必须⼀块使⽤。 2. 和构成html⽂档的开头部分,在此标志对之间可以使⽤ html⽂档相关信息的标志对,标志对之间的内容是不会在浏览器的框内显⽰出来的。两个标志必须⼀块使⽤。 3. 是html⽂档的主体部分,在此标志对之间可包含、 本、图像等将会在浏览器的框内显⽰出来。两个标志必须⼀块使⽤。标志中还可以有以下属性:属性 ⽤途 ⽰例 设置背景颜⾊。 红⾊背景 设置⽂本颜⾊。 蓝⾊⽂本 设置链接颜⾊。 < "blue">链接为蓝⾊ 设置已使⽤的链接的颜⾊。 设置正在被击中的链接的颜⾊。 说明:以上各个属性可以结合使⽤,如。引号内的rrggbb是⽤六个⼗六进制数表⽰的rgb(即红、绿、蓝三 ⾊的组合)颜⾊,如#ff0000对应的是红⾊。此外,还可以使⽤html语⾔所给定的常量名来表⽰颜⾊:black、white、green、maroon、 olive、navy、purple、gray、yellow、lime、agua、fuchsia、silver、red、blue和teal,如表⽰标志对中 的⽂本使⽤蓝⾊显⽰在浏览器的框内。 4. 使⽤过浏览器的⼈可能都会注意到浏览器窗⼝最上边蓝⾊部分显⽰的⽂本信息,那些信息⼀般是⽹页的“主题”,要将您的⽹页的主题显⽰到 浏览器的顶部其实很简单,只要在 志对之间。 下⾯是⼀个综合的例⼦,仔细阅读,您便可以了解以上各个标志对在⼀个html⽂档中的布局或所使⽤的位置。 例1 html⽂档中基本标志的使⽤ 红⾊背景、蓝⾊⽂本 1. 2. 3. 4. 5. 6. 上⼀个教程中我们讲了html⽂档的基本标志,但我们还不知道怎样在浏览器中显⽰⽂本之类的东西,这正是我们在教程⼆中将要谈到的。在 学习之前,必须强调⼀下,我们这个教程中所讲的格式标志统统都是⽤于标志对之间的。 1. 标志对是⽤来创建⼀个段落,在此标志对之间加⼊的⽂本将按照段落的格式显⽰在浏览器上。另外,标志还可以使⽤align属性,它 ⽤来说明对齐⽅式,语法是:。align可以是left(左对齐)、center(居中)和right(右对齐)三个值中的任何⼀个。如 align="center"> 2. 巧,如果您把 的⾥边则 3. 在标志对之间加⼊的⽂本将会在浏览器中按两边缩进的⽅式显⽰出来。 4. ⽤来创建⼀个普通的列表,⽤来创建列表中的上层项⽬,⽤来创建列表中最下层项⽬,和都必须放 在 例2 创建⼀个普通列表 中国城市 北京 上海 ⼴州 美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显⽰如下: 中国城市 北京 上海 ⼴州 美国城市 华盛顿 芝加哥 纽约 5. 北京 上海 ⼴州 美国城市 华盛顿 芝加哥 纽约 此例在浏览器中的显⽰如下: 中国城市 北京 三、的⼀些属性: 什么是属性: text:设定整个⽹页中⽂字的⾊彩 link:⽤于设定⼀般超链接⽂本的显⽰⾊彩 alink:⽤于设定⿏标移动到超链接上并按下⿏标是超⽂本的显⽰⾊彩 vlink:设置访问过的超链接的⾊彩 background:设定背景图⽚,可以是绝对路径也可以是相对路径。 bgcolor:⽤户设定背景⾊,当已设定background时这个属性会失去作⽤ leftmargin:左边距 topmargin:上边距 四、注释与特殊字符: 注释的内容不会被显⽰出来 注释不能被嵌套。 < < > > & & " ' 注册符号 版权符号 " tm 空格 五、格式标签 :⽤来创建⼀个段落,可以⽤align属⽣来设置段落的对齐⽅式 :移动图⽚或⽂本。direction属性:内容的移动⽅向(left,right,down,up);behavior:指定内容的移动⾏为 (scroll,alternate,slide) 间使⽤,表⽰列表项 :对⽂本进⾏预格式处理 六、⽂本标签: ......:把⽂本以标题⽅式显⽰。 :分别对应粗体,斜体,下划线 :分别对应下上标的显⽰ :引⽤⽅式的字体,通常是斜体 :显⽰需要强调的⽂本,通常是斜体加粗 :⽤来显⽰加重⽂本,通常是加粗显⽰ :对字体、字号、颜⾊进⾏改变。face属性:字体;size属⽣:⼤⼩; color属⽣:⾊彩 七、图像标签: src属性:必不可少,⽤来设置图像⽂件所在位置。 alt属性:当⿏标移到图像上显⽰的提⽰⽂本,当图像⽆法显⽰时,所显⽰的代替⽂字 align属性:设置图像与周围⽂本的对齐⽅式。top,bottom,left,right border属性:设置图像的边框宽度 width和height:设置图像的长宽⾼ size:线的粗细 color:线的⾊彩 width:线的长度 noshade:阴影显⽰ ⼋、超链接标签: 通⼀资源定位符:url; http:所使⽤的协议;:要访问的主机名;80:端⼝号 :把中间标记的内容作为超链接显⽰,href的内容作为超连接点击后转向的页⾯。 mailto:打开电⼦邮件: 九、:图像地图将⼀个图像分成多个部分,各部分分别指向不同的链接。 < shape="形状" coords="坐标" href="url">:给图像分块 shape属性可以是以下⼏种形状: rect:矩形,此时的coords为矩形的左上⾓个右下⾓的坐标 poly:多边形,此时的coords为多边形的各个顶点 circle:圆,此时coords为圆习坐标及半径 如: ⼗、表格标签: 这三个标签的层次结构: bgcolor:设置表格的背景⾊彩 border:设置表格的边框的宽度 bordercolor:设置表格边框⾊彩 bordercolorlight:设置表格边框明亮部分的⾊彩 bordercolordark:设置表格边框昏暗部分的⾊彩 cellspacing:设置单元格之间的间隔 cellpadding:设置单元格内部的内容与边框的间隔 width:表格的宽度 height:表格的⾼度 align:整⾏单元格的内容⽔平对齐⽅式left,center,right。 valign:整⾏单元格的内容竖直对齐⽅式top middle,bottom bgcolor:设置这⼀⾏的⾊彩 width:单元格的宽度(⼤⼩) height:单元格的⾼度 align:单元格内部内容的⽔平对齐⽅式 valign:单元格内部内容的竖直对齐⽅式 colspan:设置⼀个单元格跨占的列数 rowspan:设置⼀个单元格跨占的⾏数 nowrap:禁⽌单元格内的内容⾃动换⾏ ⼗⼀、框架标签: 什么是框架:将⼀个窗⼝分割成多部分,每⼀部分显⽰⼀个独⽴的页⾯。 框架只是分割窗⼝。 定义⼀个框架集: rows:将窗⼝竖直拆分时窗⼝的⼤⼩⽐例 noresize:禁⽌⽤户拖动分隔线来调整框架的⼤⼩,直接将该属⽣放⼊就可以了。 在⼀个⽹上插⼊⼀个简单的框架窗⼝,这个窗⼝⽤来显⽰另⼀个⽂件。 name:框架窗⼝的名⼦ src:框架窗⼝中所显⽰的新的⽹页 ⼗⼆、表单标签: 什么时表单? :定义表单的开始和结束位置<略讲> action:处理表单内容的服务器程序的url method:提交给服务器处理表单信息的⽅式 get:将表单信息以url参数的形式附在action的url后⾯ set:将表单信息以http消息实体发送给web服务器 target:设置服务器返回结果显⽰的窗⼝ title:当⿏标放在表单上的时候以黄⾊的泡泡进⾏提⽰ :定义⼀个提交按钮 action:指定url所指定的服务器程序 value:按钮上的⽂字 :定义⼀个重新填写的按钮。 value:按钮上的⽂字 :定义⼀个单⾏⽂本框 size:输⼊区域的宽度,以字符个数为单位 value:⽂本框的内容 maxlength:⽤户能够输⼊的最⼤字符串长度 readonly:属性存在时,⽂本框可以获得焦点,但⽤户不能更改⾥⾯的内容。 disable:属性存在时,⽂本框不能获得焦点,也不能更改⾥⾯的内容。 :定义⼀个复选框 name:复选框的名,同⼀组复选框⽤同⼀个名⼦ checked:该复选框是否被选中 value:指定复选框被选中时,这个复选框的后台值 :定义⼀个单选按钮 name:单选按钮的名,同⼀组单选按钮⽤同⼀个名⼦ value:指定单选按钮被选中时,这个单选按钮的后台值 :在表单上添加⼀个隐式的字段的元素,浏览器不会显⽰这个字段 name:名⼦ 图像的源⽂件由src属性来指定,它没有value属性。 图像元素在某些情况下可以代替submit按钮来使⽤ 单击图像元时就会将表单信息和单击处的x,y值⼀起发送到服务器 创建⼀个下拉列表框或可以复选的列表框。 size:设置列表框中可见选项的数⽬。默认值是1,这时显⽰的是下拉列表框。 mutiple属性:这是⼀个不且赋值的属性,定义列表框是否可以多选。 在列表框中定义各项是⽤来实现的。 为列表框中添加项⽬ value:项⽬的后台值 selected:指定项⽬是否被选定 创建⼀个可输⼊多⾏⽂本的⽂本框 cols:⽂本框的列数 rows:⽂本框的列数 ⼗三、分区标签: :区域标签,层 :区域标签 ⼗四、头元素: 标签:⽤于指定⽹页中超链接的基准地址。⽹页中所有超链接的相对地址都以该地址为基准地址。 该标签只能放在标签之间。 如: 标签:通常⽤于⽂件的之间。主要有两种类型的,它们⽤不同的属性名(name,http-equiv)来划分。 name属性主要⽤于在⽹页中加⼊⼀些关于⽹页的描述信息,例如,⽹页的关键字,⽹页的描述信息等 http-equiv属性主要⽤于在html⽂档中模拟http头。 什么是http头? 通过访问⽹页时,服务器除了返回⽹页⽂件本⾝的内容(也就是在浏览器中⽤查看源⽂件能看到的东西)之外,它还在返回⽹页⽂件内容之 前,传送⼀部分被称为http头的内容给浏览器,这部分⾁容是在浏览器的查看源⽂件中看不到的。http头的内容相当于服务器发送给浏览器的 ⼀些暗号指令,通知浏览器查看该⽹页时应使⽤的字符编码、是否本地缓存、⽹页的到期时间、是否间隔⼀定时间以后刷新页⾯或跳到其它 页⾯等。 name属性的设置: keywords:⽹页的关键字,以便于在搜索引擎中进⾏收集信息。 description:⽹页描述信,以便于搜索。 generator:⽤于编辑此页所⽤的⼯具名,content中填⼊所⽤的⽹页编辑软件。 author:⽤于说明⽹页的作者,content中填⼊作者的姓名。 copyright:⽤于版权声明,content中填⼊你的版权声明。 http-equiv属性设置: content-type:⽤于说明⽹页内容的类型以及⽂本内容所使⽤的字符集编码。 refresh:告诉浏览器定时⾃动刷新⽹页 通知浏览器过⼀秒后跳转到新浪⽹上去。 expires:⽤于设定⽹页的到期时间。为了提⾼效率,浏览器可以被设置成缓存以前访问的页⾯,当再次访问该页⾯时,浏览器不会再去服务 器上访问,⽽是直接在本地缓存中读到。如果将其content设为0则禁⽌浏览器使⽤缓存页⾯。 windows-target:强制页⾯在某个窗⼝显⽰。例如要防⽌别⼈把你的⽹页作为frame页⾯调⽤: (有或没有)
(可以设定数值)
(页宽为100%)
(以pixels为单位) (页宽为100%)
、
等等众多的标志,它们所定义的⽂
是⼀个很简单的标志,它没有结束标志,因为它⽤来创建⼀个回车换⾏,这么⼀说我想您该会使⽤了吧。在
的使⽤上还有⼀定的技
加在标志对的外边,将创建⼀个⼤的回车换⾏,即
前边和后边的⽂本的⾏与⾏之间的距离⽐较⼤,若放在
前边和后边的⽂本的⾏与⾏之间的距离将⽐较⼩,您不妨试试看。标志对之间。看⼀下下边的例⼦您就会明⽩了:
:单标记直接在“>“前加⼀个“/ ”表⽰结束标记,显⽰⼀个换⾏:⽤来创建⼀个普通列表。
:
创建⼀个标有数字的列表;
对创建的列表标有⼀个圆点;只能在
或
之
/>:在html⽂档中加⼊⼀条⽔平线。:定义⼀个表格的开始和结束
:定义⼀⾏的开始和结束 :定义⼀个单元格的开始和结束 的属性:
与 类似只不过⾥⾯显⽰的内容是⿊体居中的
发布评论