html标签小结

这几天学习了html，才发现各种标签真是多的不行，所以打算把一些个常用的标签拿出来稍微说一下。

常用基础标签

大体上分了三类：

带有语义的标签
带有一定样式的标签（此类标签页同时带有语义）
输出标签

带有一定样式的标签

em:强调
strong:强调，但比em强调级别更高
abbr：定义缩写，与title属性相互搭配使用
address：定义地址元素
blockquote：定义块引用，通常情况下会产生缩进
cite：通常情况下，某段话引自某本书，用cite进行说明
ins：定义被插入文本

del：定义被删除文本

 <em>我是em，表示强调</em>

 <strong>我是strong强调，比em强调级别更高</strong>

 <abbr title="万维网">w3c</abbr>

 <address>

 	Email:123456789@qq.com <br>

 	Phone:12345678909 <br>

 	WeChat:123456789 <br>

 	Address:xx省xx市xx区

 </address>

 <blockquote>

 	美猴王领一群猿猴、猕猴、马猴等，分派了君臣佐使，朝游花果山，暮宿水帘洞，合契同情，不入飞鸟之丛，不从走兽之类，独自为王，不胜欢乐。是以春采百花为饮食，夏寻诸果作生涯。秋收芋栗延时节，冬觅黄精度岁华。 ----《西游记》

 </blockquote>

 <cite>希望本是无所谓有,无所谓无的.这正如地上的路,其实地上本没有路,走的人多了,也变成了路。</cite>

 <ins>我是被插入的文字</ins>

 <del>我是被删除的文字</del>

带有一定样式的标签（此类标签页同时带有语义）

b：定义粗体文字
i：定义斜体文字
big：定义大号文字
small：定义小号文字
sup:上标文字
sub：下标文字

bdo：定义文本显示方向（属性：dir，属性值:ltr,rtl）

 <b>我是b标签，变粗体</b>

 <i>我是i标签，变斜体</i>

 <big>我是big标签，变大号</big>

 <small>我是small标签，变小号</small>

 <sup>我是sup，变上标文字</sup>

 <sub>我是sub，变下标文字</sub>

 <bdo dir=ltr>我是bdo标签，从左往右显示</bdo>

 <bdo dir=rtl>我是也bdo标签，从右往左显示</bdo>

输出标签

pre:代码中样式原样输出
code:定义计算机代码文本
kbd：定义键盘文本

var：定义变量

 <pre>我是pre标签，表示代码中样式原样输出</pre>

 <code>

 	function show () {

 		alert('hello,world')

 	}

 	show()

 </code>

 <kbd>键盘输入</kbd>

 <var>

 	var <var>a</var> = 10;

 	var b = 20;

 </var>

功能类标签

a标签：定义超链接实现页面跳转；定义锚点实现书签功能

	<--超链接-->

	<a href="http://www.baidu.com">百度一下，你就知道</a>

	<!-- 锚点 -->

	<a href="#bottom">点击跳转到网页的底部</a>

	<!-- div标签，这个标签没有语义，就是一个简单的标签 -->

	<div style="height: 2000px;"></div>

	<a href="" name="bottom">这里是底部</a>

列表：ul：无序列表；ol：有序列表

	<!-- 无序列表 -->

	<ul>

		<li>a标签</li>

		<li>b标签</li>

		<li>i标签</li>

	</ul>

	<!-- 有序列表 -->

	广场舞音乐排行榜

	<ol>

		<li>最炫民族风</li>

		<li>小苹果</li>

		<li>自由飞翔</li>

	</ol>

	<hr>

iframe标签：页面嵌套

	<iframe src="http://www.baidu.com" scrolling="auto" width="600px" height="400px">

	</iframe>

	<iframe src="http://www.sina.com" scrolling="auto" width="600px" height="400px">

	</iframe>

项目列表描述：dl，dt，dd

	<dl>

		<dt>四大名著</dt>

		<dd>《西游记》</dd>

		<dd>《水浒传》</dd>

		<dd>《三国演义》</dd>

		<dd>《红楼梦》</dd>

	</dl>

img：图片

	<!-- alt 当图片加载失败的时候，会出现alt属性值 -->

	<img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">

	<--图片映射-->

	<map name="test-demo" id="test-demo">

	<!-- shape 形状   coords 坐标  href 链接  -->

		<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">

		<area shape="circle" coords="200,200,100" href="http://www.baidu.com" alt="">

	</map>

table标签：表格

	<--border值为表格边框大小，frame为表格外边框-->

	<table border="1" frame="void">

	<!-- tr标签：行

		td：表格的单元格

		th：表格页眉

		thead：表格头部

		tbody：表格主干

		tfoot：表格尾部

	-->

		<thead>

			<tr>

			<th>Name:</th>

			<th>Age:</th>

			<th>Sex:</th>

			<th>Hobby:</th>

		</tr>

		</thead>

		<tbody>

			<tr>

			<td>小红</td>

			<td>20</td>

			<td>男</td>

			<td>玩</td>

		</tr>

		<tr>

			<td>小兰</td>

			<td>20</td>

			<td>女</td>

			<td>玩</td>

		</tr>

		</tbody>

		<tfoot>

			<tr>

			<td>小白</td>

			<td>20</td>

			<td>男</td>

			<td>玩</td>

		</tr>

		</tfoot>

	</table>

base标签：页面所有连接的基连接，位于head标签内部

	<head>

		<meta charset="UTF-8">

		<title>base</title>

		<!-- 基础链接，页面跳转失败则跳转到base标签所指向的网页-->

		<base href="http://www.sina.com">

	</head>

form标签：表单

输入域

type属性：定义文本类型

button：按钮
file：文件
hidden：隐藏类型
text：文本
password：密码
radio：单选类型
checkbox：
image：图片
reset：重置
submit：提交

alt：定义当按钮为图片时，图片的代替文字
src：定义当按钮为图片时，图片的链接地址
checked：定义默认选项
maxlength：可输入文本的最大长度
readonly：对当前输入域只读
value：定义当前输入域的默认值
disabled：禁用当前输入域
name：定义当前输入域的名字

textarea：文本输入区

cols：规定可见列数
rows：规定可见行数
disabled
readonly
name

button

	<button type="button" disabled>点击</button>

	<button type="reset">重置</button>

select标签：下拉菜单

disabled：禁用该菜单
multipe：规定可同时选中多项
name：下拉列表的名字
size：菜单中可见项目的列数
optgroup：定义下拉列表选项分组，其中label属性定义选项组的标记

option：定义下拉列表中的选项

  <form action="">

  	<select size="2">

  		<optgroup label="汽车" >

  			<option value="001">宝马</option>

  			<option value="002">奥迪</option>

  			<option value="003">桑塔纳</option>

  			<option value="004">奇瑞qq</option>

  		</optgroup>

  		<optgroup label="城市">

  			<option value="001">上海</option>

  			<option value="002">北京</option>

  			<option value="003">广州</option>

  			<option value="004">深圳</option>

  		</optgroup>

  </form>

label：表单中的标记

<form action="">

<!-- id这个全局属性尽量少用 -->

<label for="testUser">userName:</label>

<input type="text" id="testUser"> <br>

<label>

	Password: <input type="password">

</label>

<br>

<input type="submit">

</form>

fieldset：表单中相关元素分组

legend：定义分组标题

  	<form>

  		 <fieldset>

  		   <legend>个人信息:</legend>

  		   姓名: <input type="text"><br>

  		   邮箱: <input type="text"><br>

  		   生日: <input type="text">

  		 </fieldset>

  	</form>

测试：

<form action="01.php">

<!-- id 全局属性 所有的标签都可以使用 所有的id值必须唯一 -->

<textarea name="" id="aa" cols="30" rows="10"></textarea>

最大长度：<input type="text"  maxlength="10"> <br>

只读文本：<input type="text" value="默认值" readonly><br>

UserName: <input type="text" name="user" disabled> <br>

Password: <input type="password" name="pwd"> <br>

文件: <input type="file"> <br>

此处隐藏： <input type="hidden" > <br>

请选择你的性别: <br>

	男: <input type="radio" name="sex" disabled>

	女: <input type="radio" name="sex" checked> <br>

请选择你的爱好：<br>

	吃: <input type="checkbox" name="hobby">

	喝: <input type="checkbox" name="hobby">

	玩: <input type="checkbox" name="hobby">

	乐: <input type="checkbox" name="hobby"> <br>

重置: <input type="reset"><br>

<input type="image" src="Penguins.jpg" alt="企鹅" width="200" height="200"><br>

<!-- value属性此时表示当前input的默认值 -->

<input type="submit" value="提交">

</form>

以上就是一些常用的html标签的定义及用法，有兴趣的话可以自己试一试。

html标签及用法小结的更多相关文章

1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结第二篇文章:@media用法第一篇文章:@用法小结这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结表达式目录树 “村长”教你测试用例引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
转载：Hadoop排序工具用法小结
本文转载自Silhouette的文章,原文地址:http://www.dreamingfish123.info/?p=1102 Hadoop排序工具用法小结发表于 2014 年 8 月 25 日由 ...
第五节：表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
[No000010]Ruby 中一些百分号（%）的用法小结
#Ruby 中一些百分号(%)的用法小结 #这篇文章主要介绍了Ruby 中一些百分号(%)的用法小结,需要的朋友可以参考下 what_frank_said = "Hello!"#% ...
C++ typedef用法小结（※不能不看※）
C++ typedef用法小结 (※不能不看※) 第一.四个用途用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不 ...
函数fgets和fputs、fread和fwrite、fscanf和fprintf用法小结（转）
函数fgets和fputs.fread和fwrite.fscanf和fprintf用法小结字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符 ...
HTML ---滚动条样式代码及<marquee>标签的用法;
html中滚动条属性设置 scrollbar属性.样式详解 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overfl ...

随机推荐

导入csv文件到数据库
csv:逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本意味着该文件是一个字符 ...
hive、impala集成ldap
1.概要 1.1 环境信息 hadoop:cdh5.10 os:centos6.7 user:root hive.impala已集成sentry 1.2 访问控制权限这里通过使用openldap来控 ...
关于ONION/Wncry勒索病毒
1.通告 2017年5月12日起,在国内外网络中发现爆发基于Windows网络共享协议进行攻击传播的蠕虫恶意代码,这是不法分子通过改造之前泄露的NSA黑客武器库中“永恒之蓝”攻击程序发起的网络攻击事件 ...
VR全景是继互联网后的第二王朝吗？
VR虚拟现实.VR全景广泛用于游戏中,带上VR眼镜,有身临其境般的感觉.于是近些年围绕着 "下一代计算平台",国内外兴起一股虚拟现实热,在这样的形势下,VR眼镜在国内打的十分火热. ...
java面向对象--继承与多态
可以为一个变异单元中的每个类创建一个main方法,只有命令行所调用的那个类的main方法才会被调用,这样方便进行单元测试.继承时,一般将所有的数据成员都指定为private,将所有的方法指定为publ ...
前端工程之node基础
Node.exe是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Nodejs定义了一个构造函数 Module,所有的模块(Node中一个文件即一个模块)都是 Module 的 ...
PHP中array_merge函数与array+array的区别
在PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,下面为大家介绍两者具体的使用区别. 区别如下: 当下标为数值时,array_me ...
mongodb 创建LBS位置索引
<dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java-driver< ...
ATmega8仿真——外部中断的学习
前面我们学习了ATmega8的I/O口作为通用数字输入/输出口来用时对LED数码管控制和扫描按键的应用: 但ATmega8多数的I/O口都是复用口,除了作为通用数字I/O使用,还有其第二功能,这里我们 ...
makefile介绍1.0
1.gcc参数 -o指定生成文件名 -c只编译不链接 2.makefile标准格式 CC=gcc #编译器变量,#代表注释 SRCS=main.cpp\#源文件变量 a.cpp\ b.cpp\ c.c ...

html标签及用法小结

html标签小结

常用基础标签

带有一定样式的标签

带有一定样式的标签（此类标签页同时带有语义）

输出标签

功能类标签

a标签：定义超链接实现页面跳转；定义锚点实现书签功能

列表：ul：无序列表；ol：有序列表

iframe标签：页面嵌套

项目列表描述：dl，dt，dd

img：图片

table标签：表格

base标签：页面所有连接的基连接，位于head标签内部

form标签：表单

输入域

textarea：文本输入区

button

select标签：下拉菜单

label：表单中的标记

fieldset：表单中相关元素分组

html标签及用法小结的更多相关文章

随机推荐

热门专题