整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Dreamweaver/Html常用标签(代码)含义汇总

本标签: 32

  1. <html></html>,创建一个HTML文档;
  2. <head></head>,设置文档标题和其它在网页中不显示的信息;
  3. <title></title>,设置文档的标题;
  4. <h1></h1>,最大的标题;
  5. <pre></pre>,预先格式化文本;
  6. <u></u>,下划线
  7. <b></b>,黑体字;
  8. <i></i>,斜体字;
  9. <tt></tt>,打字机风格的字体;
  10. <cite></cite>,引用,通常是斜体;
  11. <em></em>,强调文本(通常是斜体加黑体);
  12. <strong></strong>,加重文本(通常是斜体加黑体);
  13. <font,size="",color=""></font>,设置字体大小从1到7,颜色使用名字或RGB的十六进制值;
  14. <BASEFONT></BASEFONT>,基准字体标记;
  15. <big></big>,字体加大;
  16. <SMALL></SMALL>,字体缩小;
  17. <STRIKE></STRIKE>,加删除线;
  18. <CODE></CODE>,程式码;
  19. <KBD></KBD>,键盘字;
  20. <SAMP></SAMP>,范例;
  21. <VAR></VAR>,变量;
  22. <BLOCKQUOTE></BLOCKQUOTE>,向右缩排;
  23. <DFN></DFN>,述语定义;
  24. <ADDRESS></ADDRESS>,地址标记;
  25. <sup></SUP>,上标字;
  26. <SUB></SUB>,下标字;
  27. <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
  28. <plaintext>...</plaintext>固定宽度字体(不执行标记符号);
  29. <listing>...</listing>,固定宽度小字体;
  30. <font,color=00ff00>...</font>字体颜色;
  31. <font,size=1>...</font>最小字体;
  32. <font,style,='font-size:100,px'>...</font>无限增大.

格式标签: 16

  1. <p></p>,创建一个段落;
  2. <p,align="">,将段落按左、中、右对齐;
  3. <br>,换行,插入一个回车换行符;
  4. <blockquote></blockquote>,从两边缩进文本;
  5. <dl></dl>,列表标签,定义列表;
  6. <dt>,定义列表标题;
  7. <dd>,定义列表内容;

例:

<dl>

<dt>标题1</dt>

<dd>内容11</dd>

<dd>内容12</dd>

<dt>标题2</dt>

<dd>内容21</dd>

<dd>内容22</dd>

</dl>

  1. <ol></ol>,列表标签,定义一个标有数字的列表;
  2. <ul></ul>,列表标签,定义一个标有圆点的列表;
  3. <li>,放在每个列表项之前; 放在<ol></ol>之间则每个列表项加上一个数字,放在<ul></ul>之间则每个列表项加上一个圆点;
  4. <div,align=""></div>,分区标签,用来排版大块HTML段落,也用于格式化表;
  5. <MENU>,选项清单;
  6. <DIR>,目录清单;
  7. <nobr></nobr>,强行不换行;
  8. <hr,size='9',width='80%',color='ff0000'>水平线(设定宽度);
  9. <center></center>,水平居中.

链接标签: 7

  1. <a,href="URL"></a>,创建超文本链接;
  2. <a,href="mailtEMAIL">
  3. </a>,创建自动发送电子邮件的链接;
  4. <a,name="name"></a>,创建位于文档内部的书签;
  5. <a,href="#name"></a>,创建指向位于文档内部书签的链接;
  6. <BASE>,文档中不能被该站点辨识的其它所有链接源的URL;
  7. <LINK>,定义一个链接和源之间的相互关系;

链接标签注解:

target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);

rel="...",发送链接的类型;

rev="...",保存链接的类型;

accesskey="...",指定该元素的热键;

shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);

coord="...",使用像素或者长度百分比来定义形状的尺寸;

tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).

表格标签: 21

  1. <table></table>,创建一个表格;
  2. <tr></tr>,表格中的每一行;
  3. <td></td>,表格中一行中的每一个格子;
  4. <th></th>,设置表格头:通常是黑体居中文字;
  5. <table,cellspacing="">,设置表格格子之间空间的大小;
  6. <table,border="">,设置边框的宽度;
  7. <table,cellpadding="">,设置表格格子边框与其内部内容之间空间的大小;
  8. <table,width="">,设置表格的宽度.用绝对像素值或总宽度的百分比;
  9. <table,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
  10. <tr,align="">,设置表格格子的水平对齐方式(left,center,right,justify);
  11. <tr,valign="">,设置表格格子的垂直对齐方式(baseline,bottom,middle,top);
  12. <td,colspan="">,设置一个表格格子跨占的列数(缺省值为1);
  13. <td,rowspan="">,设置一个表格格子跨占的行数(缺省值为1);
  14. <td,nowrap>,禁止表格格子内的内容自动断行;
  15. <CAPTION></CAPTION>,表格的标题;
  16. <COLGROUP></COLGROUP>,定义多个列为一组列;
  17. <TABLE></TABLE>,创建一个表格;
  18. <THEAD></THEAD>,定义表格的页眉;
  19. <COL>,定义一个列组中的列,以便对它们能够同时设置有关属性;
  20. <TBODY></TBODY>,定义一个表格的实体;
  21. <TFOOT></TFOOT>,定义一个表格的页脚;

表单标签: 18

  1. <form></form>,创建表单;

action="...",接收数据的服务器的URL;

method="...",HTTP的方法(get,,post),其中get是被反对使用的;

enctype="...",指定MIME(Internet媒体类型);

onsubmit="...",当提交表单时发生的内部事件;

noreset="...",在重新设置表单时发生的内部事件;

target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)

  1. <select,multiple,name="name",size=""></select>,创建滚动菜单,size设置在需要滚动前可以看到的表单项数目;
  2. <option>,设置每个表单项的内容;
  3. <select,name="name"></select>,创建下拉菜单;
  4. <textarea,name="name",cols=40,rows=8></textarea>,创建一个文本框区域,列的数目设置宽度,行的数目设置高度;
  5. <input,type="checkbox",name="name">,创建一个复选框,文字在标签后面;
  6. <input,type="radio",name="name",value="">,创建一个单选框,文字在标志后面;
  7. <input,type=text,name="foo",size=20>,创建一个单行文本输入区域,size设置以字符串的宽度;
  8. <input,type="submit",value="name">,创建提交(submit)按钮;
  9. <input,type="image",border=0,name="name",src="name.gif">,创建一个使用图象的提交(submit)按钮;
  10. <input,type="reset">,创建重置(reset)按钮;
  11. <BUTTON></BUTTON>,创建一个按钮;

disabled="...",把按钮的状态设置为不能;

name="...",按钮的控制名,value="...",按钮的值;

type="...",按钮的类型(button,,submit,,reset);

  1. <FIELDSET></FIELDSET>,把相互关联的控件组合成一组;
  2. <ISINDEX>,提示用户输入;
  3. <LABEL></LABEL>,为一个控件提供标签;
  4. <LEGEND></LEGEND>,为FIELDSET元素指定一标题;
  5. <SELECT></SELECT>,为用户做选择创建各个选项;
  6. <TEXTAREA></TEXTAREA>,创建一个允许用户多行输入的区域.

表单标签注解:

type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);

name="...",控件的控制名(要求是除了submit和reset之外的任何名字);

value="...",控件的初始值;

checked="...",把一个单选钮设置为选中的状态;

disabled="...",把控件的状态设置为不能使用;

readonly="...",只对输入密码的文本框使用;

size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;

src="...",一个图像控件的URL;

maxlength="...",指定可以输入的最多的字符数目;

alt="...",另外一种文本描述;

usemap="...",到客户端图形镜像的URL;

align="...",被反对.控制对齐方式(left,,center,,right,,justify);

tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;

onfocus="...",当元素获得焦点时发生的事件;

onblur="...",当元素失去焦点时发生的事件;

onselect="...",当元素被选中时发生的事件;

onchang="...",当元素状态被改变时发生的事件;

accept="...",允许上载的文件类型.

帧标签(框架标签): 27

  1. <frameset></frameset>,放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中;
  2. <frameset,rows="value,value">,定义一个帧内的行数,可用像素值或高度百分比;
  3. <frameset,cols="value,value">,定义一个帧内的列数,可用像素值或宽度百分比;
  4. <frame>,定义一个帧内的单一窗或窗区域;
  5. <noframes></noframes>,定义在不支持帧的浏览器中显示什么提示;
  6. <frame,src="URL">,规定帧内显示的HTML文档;
  7. <frame,name="name">,命名帧或区域以便别的帧可以指向它;
  8. <frame,marginwidth="">,定义帧左右边缘的空白大小,必须大于等于1;
  9. <frame,marginheight="">,定义帧上下边缘的空白大小,必须大于等于1;
  10. <frame,scrolling="">,设置帧是否有滚动栏,其值可以是"yes","no",或"auto";
  11. <frame,noresize>,禁止用户调整一个帧的大小;
  12. <IFRAME></IFRAME>,创建一个内联的帧;

scr="...",定义在帧中显示的内容的来源;

frameborder="...",定义帧之间的边界(0或1);

align="...",被反对,控制对齐方式(left,,center,,right,,justify);

height="...",帧的高度,width="..."帧的宽度;

  1. <marquee>...</marquee>,普通卷动;
  2. <marquee,behavior=slide>...</marquee>,滑动;
  3. <marquee,behavior=scroll>...</marquee>,预设卷动;
  4. <marquee,behavior=alternate>...</marquee>,来回卷动;
  5. <marquee,direction=down>...</marquee>,向下卷动;
  6. <marquee,direction=up>...</marquee>,向上卷动;
  7. <marquee,direction=right></marquee>,向右卷动;
  8. <marquee,direction='left'></marquee>,向左卷动;
  9. <marquee,loop=2>...</marquee>,卷动次数;
  10. <marquee,width=180>...</marquee>,设定宽度;
  11. <marquee,height=30>...</marquee>,设定高度;
  12. <marquee,bgcolor=FF0000>...</marquee>,设定背景颜色;
  13. <marquee,scrollamount=30>...</marquee>,设定卷动距离;
  14. <marquee,scrolldelay=300>...</marquee>,设定卷动时间;
  15. <img,src="">,插入图片,参数有:width="宽",alt="说明文字",height="高",boder="边框".

文档整体属性标签: 10

  1. <body,bgcolor="">,设置背景颜色.使用名字或RGB的十六进制值;
  2. <body,background="">,设置背景图片;
  3. <body,bgsound="">,设置背景音乐;
  4. <body,bgproperties="fixed">,固定背景图片(IE适用);
  5. <body,text="">,设置文本颜色.使用名字或RGB的十六进制值;
  6. <body,link="">,设置链接颜色.使用名,字或RGB的十六进制值;
  7. <body,vlink="">,设置已使用的链接的颜色.使用名字或RGB的十六进制值;
  8. <body,alink="">,设置正在被击中的链接的颜色.使用名字或RGB的十六进制值;
  9. <body,topmargin="">,设置页面的上边距;
  10. <body,leftmargin="">,设置页面的左边距.

文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如<html>),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素。

历史

W3C制作的早期HTML标志

发展

蒂姆·伯纳斯-李

1980年,物理学家蒂姆·伯纳斯-李在欧洲核子研究中心(CERN)在承包工程期间,为使CERN的研究人员使用并共享文档,他提出并创建原型系统ENQUIRE。1989年,伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年,伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助,但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”,并把百科全书列为首位。

HTML的首个公开描述出现于一个名为“HTML标签”的文件中,由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素,包括HTML初始的、相对简单的设计。除了超链接标签外,其他设计都深受CERN内部一个以标准通用标记语言(SGML)为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。

伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组(IETF)发布首个HTML规范的提案:“超文本标记语言(HTML)”互联网草案,由伯纳斯-李与丹·康纳利(英语:Dan Connolly (computer scientist))撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期,不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可,这反映IETF把标准立足于成功原型的理念。同样,戴夫·拉格特(英语:Dave Raggett)在1993年末提出的与之竞争的互联网草案“HTML+(超文本标记格式)”建议规范已经实现的功能,如表格与填写表单。

在HTML和HTML+的草案于1994年初到期后,IETF创建一个HTML工作组,并在1995年完成"HTML 2.0",这是第一个旨在成为对其后续实现标准的依据的HTML规范。

在IETF的主持下,HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起,HTML规范一直由万维网联盟(W3C)维护,并由商业软件厂商出资。不过在2000年,HTML也成为国际标准(ISO/ IEC15445:2000)。HTML 4.01于1999年末发布,进一步的勘误版本于2001年发布。2004年,网页超文本应用技术工作小组(WHATWG)开始开发HTML5,并在2008年与W3C共同交付,2014年10月28日完成标准化。

版本时间线

1995年11月24日

HTML 2.0作为IETF RFC 1866发布。追加RFC的附加功能:

1995年11月25日:RFC 1867(基于表单的文件上传)

1996年5月:RFC 1942(表格)

1996年8月:RFC 1980(客户端图像映射)

1997年1月:RFC 2070(国际化)

1997年1月14日

HTML 3.2作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本,因IETF于1996年9月12日关闭它的HTML工作组。

最初代号为“威尔伯”(Wilbur),HTML 3.2完全去除数学公式,协调各种专有扩展,并采用网景设计的大多数视觉标记标签。由于两家公司达成了协议,网景的闪烁元素(英语:blink element)和微软的滚动元素(英语:marquee element)被移除。HTML对数学公式的支持最后成为另外一种被称为MathML的标准。

1997年12月18日

HTML 4.0作为W3C推荐标准发布。它提供三种变化:

严格,过时的元素被禁止。

过渡,过时的元素被允许。

框架集,大多只与框架相关的元素被允许。

最初代号“美洲狮”(Cougar), HTML 4.0采用许多特定浏览器的元素类型和属性,并试图淘汰网景的视觉标记功能,将其标记为不赞成使用。HTML 4是遵循ISO 8879 - SGML的SGML应用程序。

1998年4月24日

HTML 4.0进行微调,不增加版本号。

1999年12月24日

HTML 4.01作为W3C推荐标准发布。它同样提供三种变化,最终勘误版于2001年5月12日发布。

2000年5月

ISO/IEC 15445:2000("ISO HTML",基于HTML 4.01严格版)作为ISO/IEC国际标准发布。在ISO中这一标准位于ISO/IEC JTC 1/SC 34(英语:ISO/IEC JTC 1/SC 34)域(ISO/IEC联合技术委员会1、小组委员会34 – 文档描述与处理语言)。

2014年10月28日

HTML 5作为W3C推荐标准发布。

草案时间线

HTML5的Logo

1991年10月

HTML标签,一个非正式CERN文件首次公开18个HTML标签。

1992年6月

HTML DTD的首个非正式草案, 后续有七个修订版(7月15日,8月6日,8月18日,11月17日,11月19日,11月20日,11月22日)。

1992年11月

HTML DTD 1.1(首个版本号,基于RCS修订版,版本号从1.1开始而非1.0),非正式草案。

1993年6月

超文本标记语言由IETF IIIR工作小组作为互联网草案(一个粗略的建议标准)。在被第二版代一个月后,IETF又发布6个草案,最终在RFC1866中发布HTML 2.0。

1993年11月

HTML+由IETF作为互联网草案发布,是超文本标记语言草案的一个竞争性提案。它于1994年5月到期。

1995年4月 (1995年3月编写)

HTML 3.0[33]被提议作为IETF的标准,但直到提案在五个月过期后(1995年9月28日)仍没有进一步的行动。它包含许多拉格特HTML+提案的功能,如对表格的支持、围绕数据的文本流和复杂的数学公式的显示。W3C开始开发自己的Arena浏览器作为HTML 3和层叠样式表的试验台(英语:Test bed),但HTML 3.0并没有获得成功。浏览器厂商,包括微软和网景,选择实现HTML3草案功能的不同子集并引入它们自己的插件(见浏览器大战)。

2008年1月

HTML5由W3C作为工作草案(链接)发布。虽然HTML5的语法非常类似于SGML,但它已经放弃任何成为SGML应用程序的尝试,除了一种替代的基于XML的HTML5序列,它已明确定义自己的“HTML”序列。

2011年 HTML5 – 最终征求

2011年5月,工作小组将HTML5推进至“最终征求”(Last Call)阶段,邀请W3C社区内外人士以确认本规范的技术可靠性。W3C开发一套综合性测试套件来实现完整规范的广泛交互操作性,完整规范的目标日期为2014年。2011年1月,WHATWG将其“HTML5”活动标准重命名为“HTML”。W3C仍然继续其发布HTML5的项目。

2012年 HTML5 – 候选推荐

2012年7月,WHATWG和W3C的工作产生一定程度的分离。W3C继续HTML5规范工作,重点放在单一明确的标准上,这被WHATWG称为“快照”。WHATWG组织则将HTML5作为一个“活动标准”(Living Standard)。活动标准的概念是从未完成但永远保持更新与改进,可以添加新特性,但功能点不会被删除。

2012年12月,W3C指定HTML5作为候选推荐阶段。 该阶段的标准为“两个100%完成,完全实现交互操作”。

2014年 HTML5 – 提案推荐与推荐

2014年9月,HTML5进入提案推荐阶段。

2014年10月28日,HTML5作为稳定W3C推荐标准发布,这意味着HTML5的标准化已经完成。

XHTML版本

XHTML是使用XML 1.0改写自HTML 4.01的独立语言。它不再被作为单独标准开发。

XHTML 1.0, 2000年1月26日作为W3C推荐标准发布。修订版于2002年8月1日发布,它提供与HTML 4.0和4.01相同的三个变化,这些变化被重新在XML中制定。

XHTML 1.1,基于XHTML 1.0 严格版,2001年5月31日 作为W3C推荐标准发布。修订版可使用模块化XHTML的模块,2001年4月10日作为W3C推荐标准发布。

XHTML 2.0为工作草案,但为支持HTML5与XHTML5的工作,此草案被放弃。 XHTML 2.0与XHTML 1.x不兼容,因此更确切的说这是一个XHTML风格的新语言而不是XHTML 1.x的更新。

在HTML5草案中规定一个XHTML语法,称为“XHTML5.1”。

标记

HTML标记包含标签(及其属性)、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的,通常成对出现,比如<h1>与</h1>。这些成对出现的标签中,第一个标签是开始标签,第二个标签是结束标签。两个标签之间为元素的内容,有些标签没有内容,为空元素,如<img>。

HTML另一个重要组成部分为文档类型声明(英语:document type declaration),这会触发标准模式渲染。

以下是一个经典的Hello World程序的例子:

<!DOCTYPE html>

<html>

<head>

<title>This is a title</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

<html>和</html>之间的文本描述网页,<body>和</body>之间的文本为可视页面内容。标记文本<title>This is a title</title>定义了浏览器的页面标题。

文档标记类型<!DOCTYPE html>用于HTML5。 如果未进行声明,浏览器会使用“怪异模式”进行渲染。

元素

HTML文档由嵌套的HTML元素构成。它们用HTML标签表示,包含于尖括号中,如<p>

在一般情况下,一个元素由一对标签表示:“开始标签”<p>与“结束标签”</p>。元素如果含有文本内容,就被放置在这些标签之间。

在开始与结束标签之间也可以封装另外的标签,包括标签与文本的混合。这些嵌套元素是父元素的子元素。

开始标签也可包含标签属性。这些属性有诸如标识文档区段、将样式信息绑定到文档演示和为一些如<img>等的标签嵌入图像、引用图像来源等作用。

一些元素如换行符<br>,不允许嵌入任何内容,无论是文字或其他标签。这些元素只需一个单一的空标签(类似于一个开始标签),无需结束标签。

许多标签是可选的,尤其是那些很常用的段落元素<p>的闭合端标签。HTML浏览器或其他媒介可以从上下文识别出元素的闭合端以及由HTML标准所定义的结构规则。这些规则非常复杂,不是大多数HTML编码人员可以完全理解的。

因此,一个HTML元素的一般形式为:<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定义为空元素,其形式为<tag attribute1="value1" attribute2="value2">。空元素不能封装任何内容。例如<br>标签或内联标签<img>。一个HTML元素的名称即为标签使用的名称。注意,结束标签的名称前面有一个斜杠“/”,空元素不需要也不允许结束标签。如果元素属性未标明,则使用其默认值。

例子

HTML文档的页眉:<head>...</head>。标题被包含在头部,例如:

<head>

<title>The Title</title>

</head>

标题:HTML标题由<h1>到<h6>六个标签构成,字体由大到小递减:

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

段落:

<p>第一段</p> <p>第二段</p>

换行:<br>。<br>与<p>之间的差异是br换行但不改变页面的语义结构,而p部分的页面成段。

<p>這是<br>一個<br>使用換行<br>段落</p>

链接:使用<a>标签来创建链接。href属性包含链接的URL地址。

<a href="https://zh.wikipedia.org/">中文維基百科的連結!</a>

注释:

<!-- This is a comment -->

注释有助于理解标记,但它不会在网页上显示。

HTML中存在以下几种类型的标记元素:

用于文本的结构式标记

例如,<h2>羽毛球</h2>将“羽毛球”定义为二级标题。结构式标记不指示任何特定的渲染,但大多数网页浏览器都会采用元素格式的默认样式。要在内容上实现进一步的风格可以使用层叠样式表(CSS)。

用于文本外观的表现式标记,不论其目的

例如,<b>粗体</b>表示视觉输出设备应将文本“粗体”加粗,但如果设备无法做到这一点(如朗读文本的听觉设备),就不会发生什么现象。在这种情况下,<b>粗体</b>与''斜体''也可能有相同的视觉效果,但在本质上它们更加语义化。如同<strong>加强文字</strong>与<em>强调文字</em>的区别。为支持CSS的使用,大多数表现式标记在HTML 4.0规范中不再被推荐使用。

超文本标记使文档的一部分链接到其他文档

锚元素在文档中创建超链接,其href属性设置链接的目标URL。例如:HTML标记<a href="https://zh.wikipedia.org/">中文维基百科</a>会将文字"中文维基百科"渲染为超链接。要将图片渲染为超链接,img元素要作为内容插入到a元素中:<a href="https://example.org"><img src="image.gif" alt="说明文字" width="50" height="50" border="0"></a>。

属性

大多数元素的属性以“名称-值”的形式成对出现,由“=”分离并写在开始标签元素名之后。值一般由单引号或双引号包围,有些值的内容包含特定字符,在HTML中可以去掉引号(XHTML不行)。不加引号的属性值被认为是不安全的[58]。有些属性无需成对出现,仅存在于开始标签中即可影响元素[6],如img 元素的ismap 属性。

许多元素存在一些共通的属性:

id属性为元素提供了在全文档内的唯一标识。它用于识别元素,以便样式表可以改变其表现属性,脚本可以改变、显示或删除其内容或格式化。对于添加到页面的URL,它为元素提供了一个全局唯一标识,通常为页面的子章节。例如,ID "属性"对于https://zh.wikipedia.org/wiki/HTML#属性

class属性提供一种将类似元素分类的方式。常被用于语义化或格式化。例如,一个HTML文档可指定类<class="标记">来表明所有具有这一类值的元素都从属于文档的主文本。格式化后,这样的元素可能会聚集在一起,并作为页面脚注而不会出现在HTML代码中。类属性也被用于微格式的语义化。类值也可进行多声明。如<class="标记 重要">将元素同时放入標記与重要两类中。

style属性可以将表现性质赋予一个特定元素。比起使用id或class 属性从样式表中选择元素,“style”被认为是一个更好的做法,尽管有时这对一个简单、专用或特别的样式显得太繁琐。

title属性用于给元素一个附加的说明。 大多数浏览器中这一属性显示为工具提示(英语:Tooltip)。

lang属性用于识别元素内容的语言,它可能与文档的主要语言不同。例如,在中文文档中:

<p>法语<span lang="fr">c'est la vie</span>在法国的应用很普遍,意为“这就是生活” 。<p>

缩写元素abbr可用于说明一些属性:

<abbr id="ID" class="术语" style="color:purple;" title="超文本标记语言">HTML</abbr>

这个例子显示为HTML; 在大多数浏览器中,光标指向缩写时会显示标题文字“超文本标记语言”。

大多数元素采用与语言相关的属性dir 来指定文字方向,如 "rtl"采用从右到左的文本,比如阿拉伯语、波斯语以及希伯来语。

字符与实体引用

参见:XML与HTML字符实体引用列表和Unicode与HTML

在4.0版本中,HTML定义了一系列共252个字符实体引用和1,114,050个字元值参考。二者都支持单个字符通过简单的标记写入。文字字符与其对应的标记渲染的效果相同。

用这种方式“转义”字符的能力允许字符<与&(当分别被写作<和&时)被理解为字符数据而不是标记。例如<通常为标签的开头,&通常为字符实体引用与数字字符引用的开头;&或&或&将&作为元素的内容或属性的值。双引号字符"在不被用于属性值的标示时必须转义为"或"或";相等地,当于单引号字符'不被用于属性值的标示时,也必须转义为'或'(或HTML5与XHTML文档中的')。

如果文档作者忽略了转义这样的字符,一些浏览器会尝试通过上下文猜测他们的意图。如果结果仍为无效标记,这会使其他浏览器或用户代理难以访问到该文档,并使它们尝试使用搜索和索引来解析该文档。

那些难以输入或不在该文档字符编码中的字符也可通过转义来实现。例如通常只在西欧或南美的键盘出现的重音符e(é),可以在HTML文档中用作实体引用é 或数字引用é或é。 诸如UTF-8的Unicode字符编码与所有的现代浏览器兼容并允许直接访问全球书写系统几乎所有的字符 。

数据类型

HTML为元素内容定义了多种数据类型,如脚本数据、样式表数据以及许多属性值的类型,包括ID、名称、URI、数字长度单位、语言、媒体描述符颜色、字符编码、日期和时间等等。所有这些数据类型都是字符数据的特殊化。

文档类型声明

HTML文档需要以文档类型声明(英语:document type declaration)(英语非正式说法“doctype”)开头。在浏览器中,文档类型声明有助于确定渲染模式——特别是是否使用怪异模式。

文档类型声明的初衷是通过基于文档类型定义(DTD)的SGML工具来解析并验证HTML文档。

HTML5未定义DTD,所以在HTML5中文档类型声明更为简短:

<!DOCTYPE html>

HTML 4文档类型声明举例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该声明引用HTML 4.01“严格”版的DTD。基于SGML的验证器可读取DTD,正确解析这些文档并执行验证。在现代浏览器中,一个有效的文档类型激活标准模式有别于怪异模式。

另外,HTML 4.01提供过渡型与框架集型的DTD。过渡型涵盖最广,它可整合当前以及老旧或“过时”的标签,而严格型DTD排除了过时的标签。框架集拥有所有构建框架所需的标签以及过渡型的标签。

语义化HTML

语义化HTML是一种编写HTML的方式,它强调编码信息的含义在其格式(样子)之上。HTML从创立之初就包括语义化标记,但也包括标识性标记如<font>、<i>和<center>标签。也存在一些语义上中立的span与div标签。自1990年代末层叠样式表开始应用于大多数浏览器,网页制作者就被鼓励使用CSS以便呈现与内容分离。

在2001年一次对语义网的讨论中,蒂姆·伯纳斯-李等人给出了一种的方法,使智能软件“代理人”可能有一天会自动抓取网页进行查找、过滤并将之前不相关的联系起来。这种代理甚至在现在也不普遍,但一些Web 2.0、混搭和价格比较网站的想法可能会结束。这些网页应用程序的混合与伯纳斯-李的语义代理人的之间主要区别基于以下事实:当前的聚合与信息混合通常由网页开发者设计,他们早已知道网络位置和他们希望混搭、比较与结合的特定数据的API语义。

网页代理的一个重要类型是网络爬虫或搜索引擎蜘蛛。这些软件代理依赖于它们发现的网页的语义清晰度,因为它们一天要使用各种技术与算法来读取和索引数百万个网页并给网页用户提供搜索工具,没有这些万维网的有效性就会大大降低。

为使搜索引擎蜘蛛评估它们在HTML文档中发现的文本片段的重要性,也为那些创建标记等混合的人与更多的自动化代理工具,HTML中的语义结构需要广泛一致地应用从而将文本的含义呈现给浏览者。

表示性标记在当前的HTML和XHTML推荐中不被鼓励使用,HTML5中则被视为非法。

好的语义化HTML也改善了网页文档的可访问性。例如,当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时,视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。

分发

HTML文档分发的方法和其他计算机文件相同。不过,它们最常通过网页服务器的超文本传输协议或电子邮件传输。

HTTP

万维网主要由从服务器通过HTTP协议向浏览器发送的HTML文档组成。但是,HTTP也可以被用于传输HTML之外的数据,例如图像、声音和其他内容。为使浏览器了解如何处理接收到的文档,在传输文档时必须同时传递文件类型。这种元数据包含MIME类型(对于HTML 4.01或更早版本是text/html,而对于XHTML 1.0或之后的版本是application/xhtml+xml),以及字符编码(参见HTML字符编码方式)。

在现在的浏览器中,和HTML文档一起发送的MIME类型影响文档的解读方式。和XHTML MIME类型一起发送的文档被认为是良构的XML,而语法错误会导致浏览器无法呈现文档。完全相同的文档如果和HTML MIME类型一起发送,则可能被正常显示,因为浏览器对HTML的语法检查更加松懈些。

W3C的推荐指出,遵循规定的推荐指引的XHTML 1.0文档可标记二者任一的MIME类型。XHTML 1.1还指出,XHTML 1.1文档应标有两种MIME类型。

HTML邮件

大多数图形电子邮件客户端允许使用HTML的子集(经常界限不清)提供格式化和无法使用纯文本的语义标记。这可能包括印刷信息,如彩色标题、强调和引用文本、内嵌图片和图表等。许多这样的客户包含一个编写HTML电子邮件消息的图形用户界面编辑器和一个用于显示的渲染引擎。在邮件中使用HTML受到了一些兼容性的批评,由于一些盲人或具有视觉障碍的人的访问问题,这种方式有利于伪装的钓鱼攻击。因其消息大小超过明文,所以它可混淆垃圾邮件过滤器。

命名规则

最常用的计算机文件扩展名为.html,通用缩写为.htm。它起源于某些早期操作系统与文件系统,如DOS以及FAT数据结构的局限性,它将文件扩展名限制为3个字母。

HTML应用程序

HTML应用程序(HTA;文件扩展名".hta")是一个Microsoft Windows应用程序,它在浏览器中使用HTML和动态HTML提供应用程序图形界面。正规HTML文件被限制在浏览器的安全模型中,只能分别通过网页服务器和网页对象与站点Cookie进行通信和操作。HTA作为完全受信任的应用程序运行,因此拥有更多的权限,如创建/编辑/删除文件与注册表项。因为它们在浏览器安全模式之外操作,所以HTA不能通过HTTP执行,必须下载(就像EXE文件)并在本地文件系统执行。

所见即所得编辑器

所见即所得编辑器使用图形用户界面(GUI)显示HTML文档,常常类似于文字处理器,所以用户可以设计一切。编者面对的是文档,而不是代码,所以作者并不需要太多的HTML知识。这种所见即所得的编辑模式一直受到诟病,主要因为它生成的代码质量不高;也有人主张将其改变至WYSIWYM模型(所见即所指)。

着互联网的不断发展与前端开发技术的不断进步,越来越多的人想在前端开发市场中分一杯羹,而HTML语言凭着它简单易懂的特性成为了不少计算机萌新的入门语言。那么什么是HTML呢?

什么是HTML

HTML,即超文本标记语言,是一种标识性的语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。而HTML标签是HTML语言中最基本的单位,是HTML最重要的组成部分。

什么是HTML标签

  • HTML标签是由一对尖括号括起来的关键词,像<html>、<body>等。
  • HTML标签通常是成对出现的,第一个标签是开始标签,第二个标签是结束标签。
  • 标签不区分大小写,最好用小写。
  • 标签可以嵌套,但是不可以交叉嵌套,如<a><b></a></b>。
  • 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭合标签.如<br/> <hr/> <img />等。

标签分类

标签一般分为两种:

1. 块级标签

占一整行的标签。如<h>、<p>、<div>、<form>等

2. 行内标签

可以多个标签共同占用一行的标签。比如:<span>,<a>,<input>,<img>,<label>等

3. 块级标签特点

  • 总是在新行上开始
  • 宽度缺省是它的容器的100%,除非设定一个宽度
  • 它可以容纳内联元素和其他块元素

4. 行内标签特点

  • 和其他元素都在一行上
  • 宽度就是它的文字或图片的宽度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

HTML特殊字符

平时写代码很少用到HTML的特殊字符,最常用的可能是 (空格)了,但有时在移动端为了节省时间,可能会用这些字符实现某种特殊效果。

使用方法:

  • 这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8;
  • 编号用在HTML中时,需要在前面加上&#符号;
  • 用于CSS文件中,但是需要用反斜杠\转义;
  • 用于JavaScript,和CSS用法一样,不过要用\u来转义。

常用HTML特殊字符

HTML基本标签简介

  1. <!DOCTYPE html>标签

作用:声明文档的解析类型(document .compatMode),避免浏览器的怪异模式。

浏览器有怪异模式(BackCompat)和标准模式(CSS1Compat)两种模式,那么何为怪异模式和标准模式呢?

  • BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
  • CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,,如果是这样的话那就很麻烦了-------浏览器按照自己的方式解析渲染页面,即在不同的浏览器显示不同的样式。

但是如果你的页面添加了<!DOCTYPE html>,那么就等同于开启了标准模式,浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

  1. <meta>标签

<meta>标签用于提供关于 HTML 文档的元数据(元数据是关于数据的信息),元数据不会显示在页面上,但是对于机器是可读的。例如meta被用于设置关键字设置页面描述设置作者设置字符集设置页面定时跳转等等。meta标签放置在head标签中,对meta的设置对搜索引擎注册、搜索引擎优化排名等有至关重要的作用。

<meta>有两个属性,分别是http-equiv属性和name属性,不同属性有不同的参数,这些不同的参数使得名,meta标签有不同的功能:

http-equiv属性

顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

  • 页面编码:

  • 页面刷新和跳转

  • 解决IE浏览器兼容性问题

name属性

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

  • 供搜索引擎使用(关键词)


  • 网站信息描述

  1. <title>标签
  • title标签写网站头部信息,即网页标签的名称:

<title>开云见日</title>

  1. <link>标签

link标签有两个作用:

1.设置标签页图标:


2.外联CSS文件:


  1. <style>标签

用于存放或编写css文件:

<style type="text/css"></style>

  1. <script>标签

1.引进文件

<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

2.写js代码

<script type="text/javascript">...</script>

  1. 常用标签
  • <hn>:n的取值范围是1~6; 从大到小. 用来表示标题.
  • <p>:段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
  • <b> <strong>:加粗标签.
  • <strike>:为文字加上一条中线.
  • <em>:文字变成斜体.
  • <sup>和<sub>:上角标 和 下角表.
  • <br>:换行.
  • <hr>:水平线
  • <div>:白板,本身没有特性,块级标签。
  • <span>:白板,本身没有特性,行内标签。

<sup>和<sub>的使用

  • <p>这个文本包含 <sub>下标</sub>文本。</p>
  • <p>这个文本包含 <sup>上标</sup> 文本。</p>
    1. <a>标签
    • 作超链接:跳转到指定url

    • 作锚点:条转到指定id

    1. <img>标签

    属性如下:

  • src: 要显示图片的路径.
  • alt: 图片没有加载成功时的提示.
  • title: 鼠标悬浮时的提示信息.
  • width: 图片的宽
  • height:图片的高 (宽高两个属性只用一个会自动等比缩放
  • HTML还有很多标签,像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移动应用开发大潮下,使用web技术进行移动应用开发正变得越来越流行,慢慢会变成以HTML为核心的技术栈配合数据库的天下。让我们找准时代发展方向,努力学习,成为时代的弄潮儿吧!