html标签参考手册

合集下载

HTML教程(最全的图文并茂教程)

小结
请说出实际开发常用的4种块状结构是什么？ 1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单
行级标签—图像标签
提供搜索关键字和内容描述信息，方便搜索引擎的搜索
HTML页面中的块和行
HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行行级标签：按行逐一显示分类好处：方便后续的布局设计
行级：包括文字、图片等
块级：块内包含多行
块级标签
根据使用场合，块级标签又细分为：
ቤተ መጻሕፍቲ ባይዱ
W3C
制定统一的web标准
Netscape 的图标
W3C提倡的Web结构
不规范的示例
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3 存在问题： 1、内容和表现没分离，后期很难维护和修改 2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索
W3C提倡的Web结构
规范的示例
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul>

HTML标记总结(word版)

HTML标记总结<html> //文件开始标记<head> //文件的头部开始标记<title> HTML总体结构</title>//头部</head> //头部结束标记<body> //文件的主体开始标记hello!</body> //主体结束标记</html>//文件结束标记编写时的注意事项（1）元素的标记都要用尖括号< >括起来，成对使用的标记的结束标记是在开始标记之前加一反斜杠，如<html>与</html>。

（2）代码不分大小写，如<boDY>与<BODy>都是正确的，但是所有符号如< > 、“”都必须是英文输入法。

（3）标记表示其中的内容是注释语句，在浏览器中不会显示出来。

4、页面的头部标记和主体标记（1）页面的头部标记<head>HTML文档的头部内容</head>一般来说位于头部的内容都不会在网页上显示，而是通过别的方式体现。

常用的头部标记有以下几个：<base>当前文档的URL全称（基底网址）<basefont> 设定基准的文字字体，字号和颜色<title> 设定显示在浏览器左上方的标题内容<isindex> 表示该文档是一个可用于检索的网关脚本，由服务器自动建立。

HTML标记

HTML标记的组成HTML语言规范标记符：1、单标记：< 标记名称／>2、双标记：<标记名称>内容<／标记名称>3、属性 < 标记属性1="属性值" 属性2="属性值" 属性3="属性值" … ><元素属性='属性值'...>内容</元素>如果没有内容，可以这样写：<元素属性='属性值'.../>--注：<>中的都是标记，标记是要成对出现如:<html>内容</html>；元素也叫标记HTML文档的结构主要包括：1、HTML部分2、HEAD部分3、BODY部分DOCTYPE声明部分：DOCTYPE声明部分是网页中重要的一部分，但不在HTML文档范围内。

Html的基本结构<html><head><元素属性1=”值” …./></head><body><元素属性1=”属性值”属性2=“属性值”…>内容</元素><元素属性=”属性值”/></body></html>说明1. 标记通常是成对出现 <head></head>2. 单标记 <br/>案例:Demo1.htm<html><head></head><body><b>横看成林</b><br/><br/><font color="red">远近高低各不同</font><br/><font style="font-size:30px;">不知庐山真面目</font><br/></body></html>请问后缀 html 和 htm 有什么区别?如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html；htm 后缀是为了兼容以前的dos 系统 8.3的命名规范。

网页设计之HTML标签

target
专门用于控制如何跳转控制鼠标悬停时显示的提示文本的。
title
提示文本
举例：文字连接图片链接
A标签其他属性
注意点： a标签不仅可以让文字点击，还可以让图片点击。一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方。如果通过a标签的href属性指定一个URL地址，那么必须在地址前面加上http：//或者https://。
路径问题
问题：为什么<img src=“图片名称”> 标签中，只使用图片名称，图片就可以在页面中显示出来呢？
想给src属性赋值有两种方法： 1、通过相对路径赋值相对路径就是每次都从.html文件所在的文件夹开始查找，我们称之为相对路径。 2、通过绝对路径赋值每次都从指定的盘符开始查找
相对路径的三种情况
什么是a标签?
a标签的作用：
就是用于控制页面页面与页面之间跳转的。 a标签的格式： <a href=“指定需要跳转的目标界面”>需要给用户查看的内容</a>。
属性作用值 _self 用于在当前选项卡中跳转，也就是不新建界面跳转，默认就是_self。 _blank 用于在新的选项卡中跳转，也就是新建界面跳转。
p标签 h系列标签 hr标签
img标签
image的缩写
<img src=“ ” > 注意点：img不会独占一行属性：
属性 width height 关于 width和 height的注释 title alt 含义宽度。高度。如果img没有指定需要显示的图片的宽高，那么按默认的宽度和高度。如果修改了宽度或者高度，图片有可能产生变形。如果相等比例改变图片大小，可以只指定宽度或者高度鼠标悬停在图片上的时候，显示的描述图片的字符当需要显示的图片无法显示时，显示的文字解释

html格式化标签

html格式化标签
⽂本格式化标签
定义粗体⽂本
定义着重⽂字
定义斜体字
定义⼩号字
定义加重语⽓
定义下标字
定义上标字
定义插⼊字
定义删除字

计算机输出标签
定义计算机代码
定义键盘码
定义计算机代码样本
定义变量
定义预格式⽂本

⽂本引⽤标签及定义
定义缩写
定义地址
定义⽂字⽅向
定义长的引⽤
定义短的引⽤语
定义引⽤、引证
定义⼀个定义项⽬。

例

My favorite color is ~~blue~~ red!

输出 My favorite color is blue red! 有化过的标记。

This paragraph will go left-to-right.

This paragraph will go right-to-left.

可看出输出语句为镜像分布。

输出
This paragraph will go left-to-right.
This paragraph will go right-to-left.

html-知识

<head>
<title> </title>
头
<base> </ base >
标
<link> </ link>
记
<meta> </ meta>
<style> </ style >
</head>
<body>
正文
</body>
</html>
主体标 HTML文件标记记
第3页，共100页。
HTML标记分类
页面元素 </body>
第13页，共100页。
Body 部分
属性： bgcolor background text link
alink
vlink
leftmargin topmargin
背景色背景图案一般文本颜色链接文字颜色
活动链接文字颜色
已访问链接文字颜色
页面左侧的留白距离页面顶部的留白距离
第6页，共100页。
Head 部分
元素 title
meta
link
script
style
HEAD部分包含的主要元素描述
文档标题
描述HTML元信息
描述当前文档与其它文档之间的链接关系
脚本程序内容
指定CSS样式表
第7页，共100页。
Head 部分
title元素
语法格式：<title>文档标题</title> 如：<title>温州大学首页</title>
图片文件的地址图片的说明文字

HTML基本标签

★1. “<“、“>”与标签名之间不能有空格或其它字符。 2. 有的标签没有属性。
XHTML代码规范
（1）所有标签和属性的名字都必须使用小写；（2）所有标签都有一个相应的结束标签；（3）属性值必须加双引号；（4）显式定义属性值；（5）标签合理嵌套；
文本相关标签
文本相关标签
标题文字缩进
字体标签
字体标签
…… <h2 align="center">如何加入“消费者保障服务”？差点忘了，缩进还 </h2> 字体加了颜色没实现呢？ <p><font face=“宋体" size="2" color="#ff8424"> 您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请加入。</font> </p> 字体名称 …… 字体尾标签
为什么要使用段落标签和换行标签
<html> 小新写的代码 <head> <title>淘宝网</title> </head> <body> <h2 align="center">如何加入“消费者保障服务”？</h2> 您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请加入。在申请加入之前请先确认自己是否符合加入消费者保障服务的条文字缩进我也换行了件，如果符合申请要求，您可以点击“申请加入”按钮提交申请。然后进入“选择服务”页面，选择服务后点击“下一步”：进入“阅读协议”页面，阅读后点击“同意以上协议，申请加入”，即可看到申请成功，等待审核通知页面。 ………… </body> 我分段换行了哟天啊！不是在HTML文档里排版分 </html> 段换行了吗，结果怎么都走了样？

一、HTML中常用标签及属性

⼀、HTML中常⽤标签及属性⼀、HTML基础语法 ---> 单标签、双标签、块级元素、⾏内元素单双标签其实就是HTML⽂档中标签书写的格式，页⾯中最常见的是双标签；单标签就是只有⼀个标签，也就是⼀个空元素：meta、img、hr、br 双标签有开始标签和结束标签块级元素：独占⼀⾏，对宽⾼的属性值⽣效，如果不给宽度，块级元素就默认浏览器的宽度，（即就是100%宽）例如：div p ul h1~h6 ..... ⾏内元素：对宽⾼属性值不⽣效，完全靠内容撑开宽⾼，可以跟其他标签存在⼀⾏例如：span b strong em a img input ...... ⾏内块元素：结合⾏内和块级元素的特点，不仅对宽⾼的属性值⽣效，还可以跟多个标签存在⼀⾏例如：input img⼆、HTML中常⽤标签 ---> ⽂档头部<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="shortcut icon" type="image/x-icon" href=""><link rel="stylesheet" type="text/css" href=""></head><body></body></html>三、HTML中常⽤标签 ---> ⽂本标签级属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p style="text-indent: 2em;font-size:15px;color: red;font-weight: bold;font-family: monospace;"></p><em></em><i></i><del></del><span></span><br><pre></pre><h1 style="text-align: center;"></h1><h2 style="background: pink;height: 50px;line-height: ;"></h2><h3></h3><h4></h4><h5></h5><h6></h6></body></html>四、HTML中常⽤标签 ---> 超链接<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 去掉a链接下划线 */a{text-decoration: none;}/* 伪属性，⿏标移上字体变红,下划线显⽰ */a:hover{color: red;text-decoration: underline;}div{height: 1000px;background: pink;width:400px;}</style></head><body><a href="#">我是⼀个链接</a><a href=""><img src="" alt=""></a><a href="top">页⾯顶部</a><div></div><a href="" id="top">回到顶部</a></body></html>五、HTML中常⽤标签 ---> 列表标签<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title><style type="text/css">/* 清空li样式；⽂化素质宽⾼；设置边框线 */ul li{list-style: none;height: 40px;width: 200px;border: 1px solid #ccc;margin: 5px 0px;text-align:center;line-height: 40px;} /* 设置前⾯样式为图⽚，但是⽆法调整图⽚与⽂字的间距 */ul li{list-style: url(图⽚地址);}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::before{content: url(图⽚地址);margin-right: 30px;}/* 伪元素；在⽂字前⾯设置图⽚与⽂字的间距 */ul li::after{content: url(图⽚地址);}</style></head><body><ol><li>web前端</li><li>JavaScript</li><li>jQuery</li></ol><ul><li>西⽠<ul><li>有籽西⽠</li><li>⽆籽西⽠</li></ul></li><li>苹果</li><li>西柚</li></ul></body></html>六、HTML中常⽤标签 ---> form表单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>form表单</title><style type="text/css">/* padding内边距 */input{height: 8px;width: 258px;border: 1px solid #ccc;margin-top: 20px;padding: 20px;} /* border: none去掉按钮⾃带的边框线 */button{height: 50px;width: 300px;margin-top: 20px;background: #FF6A00;border: none;color: #fff;} </style></head><body><form method="" action=""><input type="text" name="username" placeholder="请输⼊⽤户名"><br><input type="password" name="pwd" placeholder="请输⼊⽤密码"><br><button>登陆</button></form></body></html>七、HTML中常⽤标签 ---> 表格（table）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格</title><style type="text/css">/* 清除默认样式 */*{margin: 0px;padding: 0px;}/* border-collapse: collapse;合并多余的边框线 */table{border: 1px solid #ccc;border-collapse: collapse;}tr th{height: 200px;border: 1px solid #ccc;width: 100px;}tr td{height: 200px;border: 1px solid #ccc;width: 100px;}</style></head><body><table><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr><tr><td colspan="5"></td></tr><tr><td rowspan="2"></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body></html>。

HTML标签

HTML语言基础：1）HTML网页在本质上是由HTML(超文本标记语言）代码构成的。

HTML代码由一系列的标签组成，这些标签是对页面的元素如文字、图片、声音、动画、超链接等进行描述、说明。

HTML标签的结构：头部、主体。

<html>....<./html>是告诉浏览器该文件是一个html 文件；文件头部：<head>.......<./head>是用来说明整个文件的标题或公共属性，不出现在浏览器的正文中。

<title>......</title>不出现在浏览器的正文中，会出现在浏览器的标题栏中，是文档的主题。

<body>......</body>是在浏览器中主要显示的，也是HTML主要的标签所在。

HTML标签的分类：单表签和多标签。

单表签只需单独使用就可表达完整的意思，其语法结构是<标签属性 1 属性 2 属性3.....>...内容..如<p>；多标签必须同时使用始标签和尾标签才能表达完整的意思，其语法结构是<始标签属性1 属性2 属性3.....>....内容....</尾标签>,是告诉浏览器从始标签处开始执行该标签代表的功能，并且在尾标签时结束，如<b>......</b>。

标签属性指的是在始标签内对表签添加的一些属性，其语法结构是<标签属性1 属性2 属性3.....>...内容...内容指的是对表签施加的作用。

注释内容指的是在文档的代码中对某段代码的文字说明，注释内容只会在查看源代码时才会被显示，而在浏览器运行HTML文档时会被忽略，其语法结构是或2）HTML头部标签中的标签<title>标签：不出现在浏览器的正文中，会出现在浏览器的标题栏中，是文档的主题。

HTML基本标签及语法

HTML基本标签及语法HTML简介什么是HTML本⽂素材来源于⿊马程序员Pink⽼师HTML 指的是超⽂本标记语⾔(Hyper Text Markup Language) ，它是⽤来描述⽹页的⼀种语⾔。

HTML 不是⼀种编程语⾔，⽽是⼀种标记语⾔(markup language)。

标记语⾔是⼀套标记标签(markup tag)。

Web 标准的构成主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。

结构 --> 结构⽤于对⽹页元素进⾏整理和分类，现阶段主要学的是HTML表现 --> 表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS⾏为 --> ⾏为是指⽹页模型的定义及交互的编写，现阶段主要学的是JavascriptWeb 标准提出的最佳体验⽅案：结构、样式、⾏为相分离。

简单理解：结构写到HTML ⽂件中，表现写到CSS ⽂件中，⾏为写到JavaScript ⽂件中。

HTML基本语法HTML基本⾻架标签名定义说明<html><\html>HTML标签页⾯中最⼤的标签，所有内容都包含在该标签内<body><\body>⽂档头部设置⼀些属性，以及引进⽂件样式<title><\title>⽂档标题浏览器所显⽰的⽹页标题<body><\body>⽂档主题基本上⼀个⽹页的所有页⾯元素都放进该标签内⼀个基本的⽹页⾻架<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div>我的第⼀个⽹页</div></body></html>基本语法概述1. HTML 标签是由尖括号包围的关键词，例如<html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

html标签参考手册
表示超链接的起始或目的位置。
acronym 表示取首字母的缩写词。
address 表示特定信息，如地址、签名、作者、文档信息。
Applet 在页面上放置可执行内容。
Area 定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。
b 指定文本应以粗体显示。（不建议使用）
base
指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。
basefont
设置显示文本时作为默认字体的基础字体值。（不建议使用）
bdo
允许作者为选定文本片断禁用双向法则。
bgsound
使页面能够带有背景声音或配音。
big
指定所含文本要以比当前字体稍大的字体显示。
blockquote
表示文本中的一段引用语。
body
指明文档主体的开始和结束。
br
插入一个换行符。
button
指定一个容器，其中所含的 HTML 会被显示为一个按钮。
caption
表格的标题，对表格的简单描述。
center
将指定文本和图像居中显示。（不建议使用）
cite
用斜体显示标明引文。（不建议使用）
code
表示代码范例。
col
说明基于列的表格缺省属性。
colgroup
说明表格中一列或一组列的缺省属性。
comment
表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。
dd
在定义列表中表示定义。定义通常在定义列表中缩进显示。
del
表示文本已经从文档中删除。
dfn
表示术语的定义。（不建议使用）
dir
表示目录列表。（不建议使用）
div
表示一块可显示 HTML 的区域
dl
表示定义列表。
dt
在定义列表中表示定义术语。
em
强调文本，通常以斜体显示。
embed
允许嵌入任何类型的文档。
fieldset
在字段集包含的文本和其它元素外面画一个方框。
font
用于说明所包含文本的新字体、大小和颜色。
form
说明所包含的控件是某个表单的组成部分。
frame
在 FRAMESET 元素内表示单个框架。
frameset
表示一个框架集，用于组织多个框架和嵌套框架集。
head
提供了关于文档的无序信息集合。
h1-h6
这实际上是6个标签，他们以标题样式显示文本，h1最大，h6最小。
hr
水平线。
html
表明文档包含 HTML 元素。
i
指定文本应以斜体显示。（不建议使用）
iframe
创建内嵌漂浮框架。
img
在文档中嵌入图像或视频片断。
input
创建各种表单输入控件。
input
创建按钮控件。
input
创建复选框控件。
input
创建文件上载控件，该控件带有一个文本框和一个浏览按钮。
input
传输关于客户/服务器交互的状态信息。
input
创建一个图像控件，该控件被点击后将导致表单立即被提交。
input
创建与 INPUT 控件类似的单行文本输入控件，不过并不显示用户输入的内容。
input
创建单选钮控件。
input
创建一个按钮，点击该按钮后，将重置表单控件回其初始值。
input
创建一个按钮，点击该按钮后，即提交表单。
input
创建一个单行的文本输入控件。
ins
表示插入到文档中的文本。
isindex
使浏览器显示一个对话框，提示用户输入单行文本。（不建议使用）
kbd
以定宽字体显示文本。（不建议使用）
label
为页面上的其它元素指定标签。
legend
在 fieldSet 对象绘制的方框内插入一个标题。
li
表示列表中的一个项目。
link
允许当前文档和外部文档建立连接。
listing
以固定宽度的字体显示文本。
map
包含客户端图像映射的坐标数据。
marqueee
创建一个滚动的文本字幕。（不建议使用）
menu
创建一个无序列表。
meta
向服务器和客户端传达关于文档的隐藏信息。
nobr
不换行显示文本。
noframes
包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。
noscript
指定在不支持脚本的浏览器中显示的 HTML。
object
在 HTML 页面中插入对象。
ol
编制排序列表。
optgroup
允许作者对 select 元素中的选项进行逻辑分组。
option
表示 SELECT 元素中的一个选项。
p
表示一段。
param
设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。
pre
以固定宽度字体显示文本。
q
分离文本中的引语。
s
带删除线方式显示文本。（不建议使用）
samp
表示代码范例。
script
指定由脚本引擎解释的页面中的脚本。
select
表示一个列表框或者一个下拉框。
small
指定内含文本要以比当前字体稍小的字体显示。
span
指定内嵌文本容器。
strike
带删除线显示文本。（不建议使用）
strong
以粗体显示文本。
style
指定页面的样式表。
sub
说明内含文本要以下标的形式显示，比当前字体稍小。
sup
说明内含文本要以上标的形式显示，比当前字体稍小。
table
说明所含内容组织成含有行和列的表格形式。
tbody
指明哪些行作为表格的主体。
td
指定表格中的单元格。
textarea
多行文本输入控件。
tfoot
指明哪些行作为表尾。
th
指定标题列。标题列将在单元格中居中并以粗体显示。
thead
指定哪些行作为表头。
title
文档的标题。
tr
指定表格中的一行。
tt
以固定宽度字体显示文本。（不建议使用）
u
带下划线显示文本。（不建议使用）
ul
表示不排序的项目列表。
var
定义程序变量，通常以斜体显示。
wbr
向一块 NOBR 文本中插入软换行。