常用HTML标签详细介绍
常用的html标签
1，超链接
从一个web资源到另外一个web资源的连接
绝对路径：
每个网页都有一个唯一的地址，称为URI 统一资源定位符，也称为该网页的绝对路径。
http://ip:port/目录/文件名
相对路径：
相对于当前文档所在的路径
../imgs/a.jpg
./imgs/a.jpg
imgs/a.jpg
本地连接
file:///d:/html/index.html (windows系统中使用这种方法，在linux系统中直接使用路径就行，如：/home/suwu/Web_test/index.html)
超链接中不允许写本地连接
服务器路径
http://localhost:8888/test/index.html
1）a 超链接
连接状态：
未访问:和用户没有任何交互
已选择 ：当鼠标放在上面时就算是选中
已访问 ：点击后的状态
<a href="">内容显示</a>
属性：
href 定义连接的目标URI
绝对路径：http://www.baidu.com
相对路径：b.html
邮件地址：mailto:suwu150@foxmail.com
锚点 ：#mao
空连接 ：javascript:void(0);
target 定义连接的目标窗口
_blank
_parent
_self
_top
自定义目标名:在拥有属性的框架页中使用
title 定义连接的提示信息
type 连接到任何类型的文件以供下载
<a href="../docs/myWord.doc" type="application/msword">报名表</a>
锚点：
锚点可以让用户在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些锚点的连接，指向网页中的特点位置。
例如：
<h2 id="section1">1,什么是万维网</h2>
<p>万维网，是基于Internet的信息服务系统，官方定义为"WWW is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents",简而言之，WWW是一个以Internet为基础的计算机网络，它允许用户在一台计算机上通过Internet访问另一台计算机上的信...</p>
<a href="#section1">查看第一部分内容</a>
2）link 文档关系连接
只能出现在head标签中，定义了当前文档和另一个资源之间的联系。
通常用于链接到外部样式表
<link rel="stylesheet" href="style.css" type="text/css">
属性：
href： 定义关系链接地址
rel: 定义当前文档与所连接文档之间的关系。
type: 文档类型
3）base 基准链接地址
设置页面中所有文档相对路径相对的基准URI。如果设定了基准链接地址，当前页面中的所有相对路径都基于该路径
<base href="http://localhost:8888/test/">
4）图片
1，图片类型
适合在网站上进行快速查看的图片格式
GIF （graphics interchange format,图形交换格式）
可以将背景设置为透明的，图片最多使用256中颜色，最适合显示色调不连续或具有大面积单一颜色的图片，如导航条，按钮，图标等。由于GIF图片中存储的颜色信息较少，因此占用空间极小，使用起来更方便。
JPEG（joint photographic experts group,联合图像专家组）
最适合摄影或连续色调图像的彩色照片，jpeg文件可以包含数百万种颜色，保证图片不失真。JPEG图片无法拥有透明的背景
PNG（portable network graphics,可移植网络图形）
PNG可以包含256种以上的颜色，并可以具有透明的背景。PNG文件可保留所有原始层，矢量，灰度，颜色和效果信息，并且在任何时候所有元素都是可以编辑的。
2，链入图片文字
<img src="" alt="">
属性：
src : 图片的源地址
title : 对图片的文字说明，当用户把鼠标放在图片上稍作停留，alt属性的值就会以浮动的形式显示出来。
width : 图片的宽度
height : 图片的高度
alt : 当图片文件找不到的时候显示的文本信息
border ：图片的边框
align ：图片和文字的对齐
当align值为left时，图片靠在最左方，周围的文字显示在右侧上方
当align值为right时，图片靠在最右方，周围的文字显示在左侧上方
当align值为top时，图片靠在最上方，周围的文字显示在上方
当align值为bottom时，图片靠在最上方，周围的文字显示在下方
hspace ：图片的水平间距
vspace ：图片的垂直间距
为图片添加链接
<a href=""><img src="" alt=""></a>
2，表格
1）table
定义表格
属性：
border: 设置表格边框线条宽度
align: 表格在页面中对齐
width: 设置表格宽度
bgcolor:表格背景色
cellspacing: 单元格之间的间距
cellpadding: 单元格边沿与其内容之间的距离
frame: 表格中边框线的显示
void 不显示边框
above 上边框
below 下边框
hsides 上下边框
vsides 左右边框
lhs 左边框
rhs 右边框
box 四个边框
border 四个边框
rules: 表格中分割线的显示
none 无分割线显示
groups 仅在列分组间和行分组间显示分割线
rows 仅在行间显示分割线
cols 仅在列间显示分割线
all 在所有行列间显示分割线
2）tr
定义表格行
3）th/td
th 定义单元格
td 定义内容单元格
属性：
colspan 跨列(合并列)----colspan='2'就是将2列数列进行合并起来
rowspan 跨行(合并行) ---rowspan="3"就是将3行进行合并起来
align 单元格内容水平对齐
left,center,right, justify 两端对齐
valign 单元格内容垂直对齐
top,middle,bottom, baseline 基准
对齐的继承
1）内容自身的设置具有最高优先级
2）th,td元素的对齐设置
3）tr,thead,tfoot,tbody元素的对齐设置
4）table元素的对齐设置具有全局性
5）默认的设置
4）caption
表格的标题
5）表格的分组显示
thead 表格头
tbody 表格主体
tfoot 表格尾
3，框架文档
一个框架文档由四部分组成，文档声明，html元素，head元素，frameset元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
1）frameset 框架集
rows
用来定义将框架水平分隔为子框架的数量和这些子框架的宽度
cols
用来定义将框架垂直分隔为子框架的数量和这些子框架的高度。
<frameset rows="10%,90%"><frame src=""><frameset cols="15%,85%"><frame src=""><frame src=""></frameset></frameset>2）frame 框架窗口
属性
src: 设置框架的初始内容
frameborder: 框架窗口边框线
marginwidth: 在框架的边缘和边框的内容之间可以出现的空白（左右边）
marginheight: 在框架的边缘和边框的内容之间可以出现的空白（上下边）
srolling: 框架视图的滚动条设置
auto 必要时提供，默认值
yes 始终提供滚动条
no 不提供滚动条
noresize: 改变框架窗口大小
name: 框架名称，作为该框架的标识
注意之前说的超链接<a>的target属性
target: 框架目标
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应frame名称 -- 在对应框架页中打开
注意 一般_parent和_top在iframe的嵌套中才会起作用
3）iframe 内联框架
iframe允许用户在一个文本中插入一个框架，iframe元素可以使用frame元素的所有属性，实现功能也相同。
<body><iframe src="" frameborder="0"></iframe></body>
1.body元素中不能出现frameSet元素
2.frame不能脱离frameSet单独使用
3.iframe基本上放在页面的任何地方都行
一般frame和frameSet都是配合使用的,而iframe则是会单独使用
4，表单
主要用于收集来自用户的信息，并将收集的信息发送给服务器端处理程序处理。表单是客户端和服务器端传递数据的桥梁，是实现用于与服务器互动的最主要方式。
1）form
表单控件的容器
<form action="">
</form>
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
编码方式：
1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = & 等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换，
2）控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割，两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
数据分成多个部分，每个部分代表一个结构良好的控件，作为文档数据流的一部分，每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端，并且，每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头，它的值的格式是：
Content-Disposition:form-data;name="myControl"
text/plain 空格转换为 "+" 加号，但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2）input 基本表单控件
<input type="text">
属性：
type 控件类型
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name
控件名称，这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value
用于设定初始化，可选。
checked
单选框，复选框默认选中属性
size
当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text,password，这时宽度是整数值，表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。
3）button 按钮控件
<button></button>
属性
name 控件名称
value 控件初始值
type 控件类型
区分以下三种:
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮
<button><img src="" alt=""></button>
4）select 下拉列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
selected: 默认选中
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时，表单类型显示为菜单
如果使用了属性size和属性multiple中的任意一个，则表单类型显示为列表框,如果有multiple的话,就表示可以多选（按住ctrl可以多选）
option 下拉列表选项
属性：
value: 定义控件的初始值。提交表单时，初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4）textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行，换行元素一同被传送到服务器中
soft自动软回车换行，换行元素不会传到服务器中
5）label 为表单控件定义标签
一些表单控件内建有标签，当内建有标签时，一般使用value属性的值作为标签，而另外一些表单控件没有标签，则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名：</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6）fieldset 为表单添加结构
一般与legend元素配合使用，fieldset元素可以包含其他的表单控件，在这些表单控件周围画一个方框，而legend元素可以显示一个标签说明被包含的这些表单控件。
7）其他控件特性
disabled 禁用
支持该属性的控件：button,input,optgroup,option,select,textarea
1）禁止的元素不接受节点
2）禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件：input,textarea
1）可以接受焦点，但是不能被用户修改
2）只读元素的值可以与表单一起被提交。
常用HTML标签详细介绍相关推荐
- Android manifest文件中的标签详细介绍
Android manifest文件中的标签详细介绍 概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如: ...
- 常用HTML标签元素介绍,常用的HTML标签元素总结简介
给大家收集整理了一些最常用的HTML标签元素,有需要的朋友可以保存一下,这些都是最常用的,几乎每一份网页都用得到的标签.标签是提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的 ...
- 常用知识图谱详细介绍
常见知识图谱详细介绍 **# 因为任务的需要,所以最近总结了一下目前常见的几个知识图谱,比较详细,例如:Freebase.wikiData.Schema.org.DBPEDIA.YAGO.Wordne ...
- Spring常用注解的详细介绍（包你学明白）
目录 1. 为什么要使用注解? 2. 什么是注解? 3. 在Spring中使用注解的前期准备 4. @Component注解的详细介绍 5. @Value注解的详解介绍 6. @Autowired ...
- 常用设计模式大全-详细介绍
设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- HTML学习2之常用标签详细介绍
hx标签 内容标题 <!DOCTYPE html> <html> <head><title>网站的标题</title> </head& ...
- lodop的基本使用和常用API的详细介绍
lodop的介绍 功能丰富:LODOP 允许网页中进行高度自定义的打印操作,包括添加文本.图像.表格等内容,设置纸张尺寸和方向,调整对象的风格和布局,控制打印机的设置等 HTML 内容支持:LODOP ...
- Tiered ImageNet（few-shot learning最近很常用）的详细介绍及python处理方法
最近在读few-shot Learning 的论文,这个Tiered ImageNet可以说是很多期刊论文的few-shot learning文章都喜欢用来做实验对比了,所以我也很好奇这个Tiered ...
- html中＜button＞按钮标签详细介绍
在html中,标签也是很常用的,经常用来在页面中添加按钮."button"作为英文单词就有"按钮"的意思,接下我们就一起来看看它的具体用法吧! 一.标签定义及用 ...
最新文章
- html src 图片不显示图片,css中不用src也让图片显示的方法是什么？
- SaltStack 学习笔记 - 第六篇： 详解Pillar
- SpringBoot2.0 基础案例(11)：配置AOP切面编程，解决日志记录业务
- js 控制滚动条位置
- eTerm指令、民航指令大全、黑屏指令
- 积少成多Flash(4) - ActionScript 3.0 实例之Hello World, 时钟, 计时器
- 单片机ADC分压电阻测量直流电压
- Adjoin the Networks Gym - 100781A
- 网站建设流程-面向公司
- IPV4与IPV6练习
- [计算机组成原理]定点数运算及溢出检测
- c语言 结构体 ppt,第8章C语言的结构体和共同体.ppt
- 计算机上的游戏怎么不见了怎么办,电脑自带小游戏消失怎么找回？高手教你找回电脑自带小游戏...
- android弹出对话框
- debian 安装声卡驱动(Realtek alc887_vd)
- 墨子号量子计算机原型时间,【科技日报】“墨子号”首次实现量子安全时间传递...
- C# DataTable 与 Json 互转
- fastadmin常见操作
- HTB打靶(Active Directory 101 Sizzle)
- redis基础教程 --发布与订阅