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 ...

随机推荐

java容器类
一. 容器类: 下图摘自<Java编程思想>,很好地展示了整个容器类的结构. 由上图可知,容器类库可分为两大类,各自实现了Collection接口和Map接口,下面就常见的类进行一下分类 ...
NancyFx 2.0的开源框架的使用-ModelBinding(实现绑定)
NancyFx框架中使用绑定模型新建一个空的Web程序然后安装Nuget库里面的包 Nancy Nancy.Hosting.Aspnet Nancy.ViewEnglines.Spark 并在We ...
Struts2入门(一)
今天学习Struts2首先struts是一个成熟的框架.Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Cont ...
jQuery选择器中的空格问题
前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...
IIS的安装与设置（windows版本）
IIS,全英文名称:Internet Information Services(互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.IIS的功能很多,如编辑 ...
kafka 0.10.2 部署失败后,重新部署
删除kafka各个节点log目录删除zookeeper上kafka相关的目录 [root@m1 ~]# zkCli.sh Connecting to localhost: -- ::, [myid: ...
centos6.5 修改java环境变量
[root@m1 ~]# cat /etc/profile export JAVA_HOME=/usr/local/soft/jdkexport PATH=$JAVA_HOME/bin:$PATH e ...
CTF 和 PHP ，数据库
引言接触CTF 差不多一个月了,网上题目刷得也差不多,做了不少笔记,老想总结一下.当然,这种文章网上多得是. 正文笔记少不了弱类型,松散比较,放一张图 2. mysql_real_escape_ ...
Zxing 的集成 ---- Maven 对应 Gradle 的写法
Zxing 的集成 ---- Maven 对应 Gradle 的写法刚刚想耍耍二维码,想到了zxing和zbar,又想到zxing是Google老爹的,想想就算了吧,虽然zbar快但是识别错误率也高 ...
同步中的四种锁synchronized、ReentrantLock、ReadWriteLock、StampedLock
目录 1.synchronized同步锁 2.ReentrantLock重入锁 3.ReadWriteLock读写锁 4.StampedLock戳锁(目前没找到合适的名字,先这么叫吧...) 5.总结 ...

html标签及用法小结

html标签小结

常用基础标签

带有一定样式的标签

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

输出标签

功能类标签

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

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

iframe标签：页面嵌套

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

img：图片

table标签：表格

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

form标签：表单

输入域

textarea：文本输入区

button

select标签：下拉菜单

label：表单中的标记

fieldset：表单中相关元素分组

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

随机推荐

热门专题