HTML常用标签
来源：互联网 发布：windows打补丁 编辑：程序博客网 时间：2024/05/04 10:34
常用Html标签表
html 定义html文档
body 定义文档体body
head 定义文档头信息
title 定义文档的标题title
a html链接标签
img html图像标签img
div html层div
table 定义html表格table
tr 定义表格行
td 定义表格列
form html表单标签
input定义表单的输入域input
hr 水平分割线
br 换行
font 字体
h1~h6 标题
标签可以有属性，它包含了额外的信息，属性的值一定要在双引号中。（属性由属性名和值成对出现。）
语法格式<标签名 属性名1="属性值" 属性名2="属性值" ... ">…..</标签名>
注：标签由<>来表现，因此<>属于特殊符号，需要进行转译后才能使用。
< 代表 < > 代表 >
除此之外，还有一些特殊符号需要进行转译后才能使用，如下：
代表空格
& 代表符号&
" 代表双引号"
© 代表版权符号©
® 代表注册商标符号®
× 代表乘号x
÷ 代表除号÷
1.列表标签——dl，ol，ul
列表标签：dl·
上层项目：dt
下层项目：dd ——封装的内容是会被缩进的。有自动缩进的效果。
有序：ol
无序：ul
无论有序和无序，条目的封装用的都是<li>，而且它们都有缩进效果。
无序列表<ul>
基本语法：
<ul>
<li> 项目1</li>
<li> 项目2</li>
<li> 项目3</li>
</ul>
无序列表type属性的三个数值：
disc：实心圆（默认） circle：空心圆 square：小方块
有序列表<ol>
基本语法：
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
有序列表的属性:<type>、<start>
基本语法：
<ol type=value1 start=value2>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
value1表示有序列表项目符号的类型（如数字、大小写字母、大小写罗马数字）,
value2表示项目开始的数值。
（注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项， 编号会自动调整。）
start是编号开始的数字，属性值只能是数字；如start=2则编号从2开始，如果从1开始可以省略，
或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。
type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。
使用这些属性，把它们放在<ol>或<li>的的初始标签中。
2.插入图片——img
网页中常用的图片格式有：jpg、gif、png等。
HTML中插入图片使用<img>标签
基本语法：
<img src=“图片路径” width=宽度 height=高度>
语法解释：宽度和高度的单位都是像素，<img>是插入图片的HTML标签，src 是描述图片路径的属性,它的值表示图片的路径。
<img>标签除了src属性外还包括的属性有:
alt： 设定图像的提示文字属性(alt属性是指鼠标放在网页的图片上弹出一行提示性的文字)
border：设定图片的边框
align： 设定图像的排列属性
width、height：设定图像的宽度和高度
vspace：设定图像的垂直间距
hspace：设定图像的水平间距
lowsrc：设定分辩率比较低的图片
3.创建表格——table
所有的表格都包括3个基本标签，即表格标签<table>...</table>、行标签<tr>...</tr>和单元格标签<td>...</td>。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。
创建表格的基本语法：
<table border=1 bordercolor="#000000" cellpadding=10 cellspacing=0 width=500>
<tbody> ------表格的下一级标签tbody，不定义也存在。
<caption>表格标题</caption>
<tr>
<td> -----<th>
单元格内容 换成th单元格内容则会居中
</td> -----<th>
</tr>
<tbody>
</table>
(1)表格是可以分体的：
<thead></thead>表格头
<tbody></tbody>表格体
<tfoot></tfoot>表格尾
(2)表格也可跨行跨列
跨多行的表格 例：<td rowspan="n">...</td>
跨多列的表格 例：<td colspan="n">...</td>
(3)表格的美化修饰：
边框（的厚度）：border （表格的背景）颜色：bordercolor 文字居中：align
(4)填充属性和间距属性
cellpadding：单元格填充（单元格内部数据与单元格的间距）
cellspacing：单元格间距（单元格与单元格之间的间距）
4.文章标题——h1~h6<!-- title标签 是定义文档标题 -->
H标签在<body>体内， title是头部标签，在<head>体内。
h标签有6种：<h1> - <h6> ,字体从大到小。
注：默认状态下，h标签是由字体加粗的。5.段落标记——p
浏览器解析HTML文档会忽略空白符，因此要正常的分段换行就要用到标签<p>。<p>标签式段落标记,浏览器会自动地在段落的前后添加空行。<p></p> 和 <br/> 的区别：使用<p></p>标签换行上下文有间距(浏览器会自动地在段落的前后添加空行),而<br>标签换行是软换行,上下文没有间距.
6.水平线标记——hr
<hr />标签在HTML页面中创建水平线，hr元素可用于分隔内容。它的属性有：width（水平线的宽度标记） size（水平线的高度） color（水平线的颜色）noshade（水平线去掉阴影属性标记）align（水平线对齐属性）
7.超链接——a
特点：上下有一个外边距，都为8px。作用：链接资源当有了href属性才有了点击效果。href属性的值的不同，解析的方式也不一样。如果在该值中没有指定过任何协议。解析时，是按照默认的协议来解析该值的。默认协议是file协议。
如何取消超链接的默认效果？<a href="javascript:void(0)" onclick="alert('我弹')">这是一个超链接</a>
定位标记专业术语：锚<a name="超链接名字">我在网页顶部</a><a href="#超链接名字">点我即可回到网页顶部</a>
（1）图片的超链接图片的超链接就是在图片上建立链接。和文字的链接相同，就是点击过链接的图片或文字后就会跳到对应的目标地址上。图片的超链接与文字相同都是<a>标记。基本语法：<a href=”目标地址”><img src=”图片路径” /> </a>a标签的属性包括：href: 链接地址target： 指定链接的目标窗口name : 给链接命名(title属性和alt的用法相似)title： 给链接提示文字accesskey：链接热键设定链接的目标窗口（target属性）基本语法：<a href =”文件名” target =”属性值”> 链接文字</a>target属性用来定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口打开).默认的被链接文档是在原有的窗口中打开的。如果将target属性设为"_blank"文档就会在新窗口打开.
target属性的值及含义：_parent ：在上一级窗口中打开。_blank： 在新窗口中打开。(最常用)_self： 在同一窗口中打开。（默认）_top ： 在浏览器的整个窗口中打开，忽略任何框架。
（2）书签链接(name属性)1. 建立书签基本语法：<a name=”书签名” >文字</a>2.建立指向该锚的链接基本语法：<a href=“#书签名”>文字</a>3.链接到其他页面中的书签基本语法：<a href=“文件名#书签名”>文字</a>4.下载文件基本语法：<a href=” file_url”>链接文字</a>”file_url”表示文件所在的路径。（3）空链接空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。这个主要是网页前端开发布局时，临时加的空链接，主要为了能更好的看到最终的效果。基本语法：<a href=“ # ”>链接文字</a>其中“ # ”表示空链接。
链接文字的颜色属性link： 设定链接文字默认的颜色alink：设定激活链接时文字的颜色vlink：设定访问过的链接文字的颜色基本语法：< body link =”颜色的值” alink =”color_value” vlink=”color_value” >
8.表单标签——form
表单标签是最常用的标签，用于与服务器端的交互。<input>:输入标签，接收用户输入信息。其中的type属性指定输入标签的类型。
若想要给服务器端提交数据，表单中的组件必须要有name和value这两个属性，用于给服务端获取数据方便，否则服务器端将无法识别解析表单数据。
（1）表单标签<form>……</form>语法：<formname="form_name"action="url"method="get|post">…</form>placeHolder:请填写你的姓名Name ：定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
get提交和post提交的区别：1)get提交，提交的信息都显示在地址栏中；post提交，提交的信息不显示在地址栏中。2)get提交，对于敏感的数据信息不安全；post提交，对于敏感信息安全。3)get提交，对于大数据不行，因为地址栏存储体积有限；post提交，可以提交大体积数据。4)get提交，将信息封装到了请求消息的请求行中；post提交，将信息封装到了请求体中。
（2）文本框（text）是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式：＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞
type=“text” 定义单行 文本输入框；name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size 属性定义文本框的宽度，单位是单个字符宽度；maxlength 属性定义最多输入的字符数。value 属性定义文本框的初始值
（3）密码框（password）密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。代码格式：<inputtype=“password”name=“...”size=“...”maxlength=“...”>
（4） 按钮类型：普通按钮、提交按钮、重置按钮。1)普通按钮（button）----很常用，可以自定义点击事件。 当type 的类型为button 时，表示该输入项输入的是普通按钮。语法格式：<inputtype="button"value="…"name="..."onclick="alert('提示语')"/>Value: 表示显示在按钮上面的文字。 普通按钮经常和脚本一起使用。2)提交按钮（submit）通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。示例：<inputtype="submit"value="提交"/>3)重置按钮（reset）当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息 而恢复到默认的表单内容设定。语法格式：<inputtype="reset"value="..."name="..."/>4)图片按钮（image） -----具有提交效果的图片按钮语法格式：<inputtype="image"src="图片url"/>
（5）单选框和复选框单选框（radio）格式：<input type=“radio”name=“组名” value=“...” checked=“checked” />给单选框起名name即给单选框分组，要想多个单选框一次只能选中一个，必须将这些单选框分在同一组里面，即name 的值必须相同。Checked: 表示此项默认选中 --标记属性，属性名与属性值相同。Value :表示选中后传送到服务器端的值。Name: 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。复选框（checkbox）语法格式：<inputtype="checkbox"name=“组名”value=“…”checked=“checked”（）/>Checked: 表示此项默认选中Value 表示选中后传送到服务器端的值。Name: 表示复选框的名称，如果是一组单选项，name 属性的值相同亦不会有互斥效果。
（6） 文件输入框（file）当type=“file”时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。语法格式：<inputtype=“file”name=“…”/>隐藏组件(hidden)：数据不需要客户端知道，但是可以将其提交服务端。<inputtype="hidden"name="...."value="...."/>
（7）下拉框 (Select) 既可以用做单选，也可以用做复选。selected:和checked一样，都表示此项默认选中。 --标记属性，属性名与属性值相同。如果要变成复选，加multiple即可 。用户用Ctrl来实现多选。<select name="fruit" multiple>，用户还可以用size 属性来改变下拉框的大小。
（8）多行输入框(textarea)多行输入框(textarea)主要用于输入较长的文本信息。例句如下<textareaname="yoursuggest"cols ="50"rows = "3"></textarea>其中cols 表示textarea 的宽度，rows 表示textarea 的高度。
6.水平线标记——hr
<hr />标签在HTML页面中创建水平线，hr元素可用于分隔内容。它的属性有：
width（水平线的宽度标记）
size（水平线的高度）
color（水平线的颜色）
noshade（水平线去掉阴影属性标记）
align（水平线对齐属性）
7.超链接——a
特点：上下有一个外边距，都为8px。
作用：链接资源
当有了href属性才有了点击效果。
href属性的值的不同，解析的方式也不一样。
如果在该值中没有指定过任何协议。
解析时，是按照默认的协议来解析该值的。默认协议是file协议。
如何取消超链接的默认效果？
<a href="javascript:void(0)" onclick="alert('我弹')">这是一个超链接</a>
定位标记
专业术语：锚
<a name="超链接名字">我在网页顶部</a>
<a href="#超链接名字">点我即可回到网页顶部</a>
（1）图片的超链接
图片的超链接就是在图片上建立链接。和文字的链接相同，就是点击过链接的图片或文字后就会跳到对应的目标地址上。
图片的超链接与文字相同都是<a>标记。
基本语法：
<a href=”目标地址”><img src=”图片路径” /> </a>
a标签的属性包括：
href: 链接地址
target： 指定链接的目标窗口
name : 给链接命名(title属性和alt的用法相似)
title： 给链接提示文字
accesskey：链接热键
设定链接的目标窗口（target属性）
基本语法：
<a href =”文件名” target =”属性值”> 链接文字</a>
target属性用来定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口打开).默认的被链接文档是在原有的窗口中打开的。如果将target属性设为"_blank"文档就会在新窗口打开.
target属性的值及含义：
_parent ：在上一级窗口中打开。
_blank： 在新窗口中打开。(最常用)
_self： 在同一窗口中打开。（默认）
_top ： 在浏览器的整个窗口中打开，忽略任何框架。
（2）书签链接(name属性)
1. 建立书签
基本语法：
<a name=”书签名” >文字</a>
2.建立指向该锚的链接
基本语法：
<a href=“#书签名”>文字</a>
3.链接到其他页面中的书签
基本语法：
<a href=“文件名#书签名”>文字</a>
4.下载文件
基本语法：
<a href=” file_url”>链接文字</a>
”file_url”表示文件所在的路径。
（3）空链接
空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。这个主要是网页前端开发布局时，临时加的空链接，主要为了能更好的看到最终的效果。
基本语法：
<a href=“ # ”>链接文字</a>
其中“ # ”表示空链接。
链接文字的颜色属性
link： 设定链接文字默认的颜色
alink：设定激活链接时文字的颜色
vlink：设定访问过的链接文字的颜色
基本语法：
< body link =”颜色的值” alink =”color_value” vlink=”color_value” >
8.表单标签——form
表单标签是最常用的标签，用于与服务器端的交互。
<input>:输入标签，接收用户输入信息。
其中的type属性指定输入标签的类型。
若想要给服务器端提交数据，表单中的组件必须要有name和value这两个属性，用于给服务端获取数据方便，否则服务器端将无法识别解析表单数据。
（1）表单标签<form>……</form>
语法：<formname="form_name"action="url"method="get|post">…</form>
placeHolder:请填写你的姓名
Name ：定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
get提交和post提交的区别：
1)get提交，提交的信息都显示在地址栏中；
post提交，提交的信息不显示在地址栏中。
2)get提交，对于敏感的数据信息不安全；
post提交，对于敏感信息安全。
3)get提交，对于大数据不行，因为地址栏存储体积有限；
post提交，可以提交大体积数据。
4)get提交，将信息封装到了请求消息的请求行中；
post提交，将信息封装到了请求体中。
（2）文本框（text）
是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：
＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞
type=“text” 定义单行 文本输入框；
name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size 属性定义文本框的宽度，单位是单个字符宽度；
maxlength 属性定义最多输入的字符数。
value 属性定义文本框的初始值
（3）密码框（password）
密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。
代码格式：
<inputtype=“password”name=“...”size=“...”maxlength=“...”>
（4） 按钮类型：普通按钮、提交按钮、重置按钮。
1)普通按钮（button）
----很常用，可以自定义点击事件。 当type 的类型为button 时，表示该输入项输入的是普通按钮。
语法格式：<inputtype="button"value="…"name="..."onclick="alert('提示语')"/>
Value: 表示显示在按钮上面的文字。 普通按钮经常和脚本一起使用。
2)提交按钮（submit）
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。
示例：<inputtype="submit"value="提交"/>
3)重置按钮（reset）
当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息 而恢复到默认的表单内容设定。
语法格式：
<inputtype="reset"value="..."name="..."/>
4)图片按钮（image） -----具有提交效果的图片按钮
语法格式：
<inputtype="image"src="图片url"/>
（5）单选框和复选框
单选框（radio）
格式：<input type=“radio”name=“组名” value=“...” checked=“checked” />
给单选框起名name即给单选框分组，要想多个单选框一次只能选中一个，必须将这些单选框分在同一组里面，即name 的值必须相同。
Checked: 表示此项默认选中 --标记属性，属性名与属性值相同。
Value :表示选中后传送到服务器端的值。
Name: 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。
复选框（checkbox）
语法格式：
<inputtype="checkbox"name=“组名”value=“…”checked=“checked”（）/>
Checked: 表示此项默认选中Value 表示选中后传送到服务器端的值。
Name: 表示复选框的名称，如果是一组单选项，name 属性的值相同亦不会有互斥效果。
（6） 文件输入框（file）
当type=“file”时，表示该输入项是一个文件输入框，用户可以在文件输入框的内部填写自己硬盘中的文件路径，然后通过表单上传。
语法格式：
<inputtype=“file”name=“…”/>
隐藏组件(hidden)：数据不需要客户端知道，但是可以将其提交服务端。
<inputtype="hidden"name="...."value="...."/>
（7）下拉框 (Select)
既可以用做单选，也可以用做复选。
selected:和checked一样，都表示此项默认选中。 --标记属性，属性名与属性值相同。
如果要变成复选，加multiple即可 。用户用Ctrl来实现多选。
<select name="fruit" multiple>，用户还可以用size 属性来改变下拉框的大小。
（8）多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。
例句如下<textareaname="yoursuggest"cols ="50"rows = "3"></textarea>
其中cols 表示textarea 的宽度，rows 表示textarea 的高度。
0 0
- HTML标签常用标签
- Html标签2---常用标签
- HTML常用标签说明
- 常用HTML标签.备查
- HTML常用标签整理
- 常用HTML标签
- html的常用标签
- HTML 常用标签
- HTML常用标签
- Html中的常用标签
- html常用标签
- HTML常用标签
- html常用标签
- html常用标签
- html常用标签备忘
- chapter1 HTML常用标签
- html 常用标签
- HTML 常用标签
- Qt-QML-Slider-滑块-Style
- POJ 2533 Longest Ordered Subsequence（最长上升子序列DP）
- 【LeetCode】字符串系列（子串）
- HDU 4770 Lights Against Dudely 【状态压缩+暴力枚举】
- 栈的使用-迷宫算法实现代码-摘自数据结构实现java版本（个人笔记整理）
- HTML常用标签
- 【源码剖析】MemoryPool —— 简单高效的内存池 allocator 实现
- Java异常类（Throwable）
- Oracle EBS 应用实例管理
- Volley学习
- Android插件化开发原理
- spring mvc 配合ajax进行表单提交(有文件上传)并且提醒用户提交成功
- 当你选择编程语言时你在选择什么
- run: read failed, socket might closed or timeout, read ret: -1
