html标签及用法小结
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 ...
随机推荐
- 【WPF MaterialDesign 示例开源项目】 Work Time Manager
转岗写了将近一年的 PHP 最近因为 工作太多太杂, 在汇报工作的时候经常会忘记自己做了些什么,本来想只是使用excel来记录,但是发现了excel的很多局限性,光是无法共享就郁闷死了,习惯了下班不带 ...
- One day one cf,Keep Wa away from me.
Codeforces Round #379 (Div. 2) A水,算字符个数 B水,贪心优先组成后者 C贪心尺取,以消耗排序change那个,然后贪心另一个 D对角线就是x0+y0 == x1+y1 ...
- PHP开发微信模版消息换行的问题
微信是个坑!微信是个坑!微信是个坑!重要的时间说三遍 关键的地方是空白换行符到底是什么也不说,百度说是"\n":但是在发送消息的时候发现原样输出,发现json_encode对\n进 ...
- Reinforcement Learning in R
Reinforcement learning has gained considerable traction as it mines real experiences with the help o ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- Libsvm使用资料
原理: 1. pluskid(张弛原)的支持向量机教程(人家现在都是大牛了) http://blog.pluskid.org/?page_id=683 2. JerryLead机器学习教程 http: ...
- ActiveMQ 学习第二弹
经历了昨天的初识 ActiveMQ,正好今天下班有点事耽搁了还没法回家,那就再学习会 ActiveMQ 吧!现在官网的文档没啥好看的了,毕竟是入门学习,太深奥的东西也理解不了.然后看官网上有推荐书籍& ...
- [python]-数据科学库Numpy学习
一.Numpy简介: Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[1,2,3],需要有3 ...
- if中可以使用那些作为判断条件呢?
在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 ? 1 2 3 4 5 6 7 8 ...
- github--hello,world(参考官网)
官网:https://guides.github.com/activities/hello-world/ 一共分为5步. 1.为你的项目新建仓库(repository): 2.新建分支(branch) ...