常用的HTML标签介绍

一、基础标签

1.<!DOCTYPE>定义文档类型
2.<html> 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
3.<head>代表关于文档元数据的一个集合,包括脚本或样式表的链接或内容。
4.<title>定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。
5.<body>定义文档的主体
6.<h1>~<h6>标题,h1字体最大最醒目,h6为最小标题。
7.<br>折行符号,空标签。
8.<hr>水平线。
9.<link>用于链接外部的 CSS 到该文档。
10.<style>用于内联CSS样式。

二、表单

1.<form>定义html表单,常用于用户输入HTML表单。
<form action="form_action.asp" method="get">
action:表明提交数据的路径。
method:规定提交数据的方式。
2.<input>标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
常用的有如下几种:
(1)输入文本域:

<form>
姓名:
<input type="text" name="fullname">
</form>

(2)输入密码:
举例:

<form>
密码:
<input type="password" name="password">
</form>

效果:


输入密码

(3)复选框
举例:

<form>
我喜欢自行车:
<input type="checkbox" name="Bike">
<br />
我喜欢汽车:
<input type="checkbox" name="Car">
</form>

效果如下:


复选框

(4)单选按钮
需要注意的是只有在两个input标签中设置name为相同名称时,才能达到复选效果。
举例:

<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性:
<input type="radio" name="Sex" value="female" />
</form>

效果:


单选框

(5)文本域
举例:

<textarea rows="10" cols="30">

rows表示行数,cols表示列数。
效果:


文本域

(6)按钮
举例:

<input type="button" value="爱改什么改什么">

效果:


按钮

三、框架

1.<frame>定义框架集的窗口或框架。
2.<frameset>定于框架集。
3.·<noframes>定义针对不支持框架的用户的替代内容。
4.<iframe>定义内联框架。
举例:

<iframe src="https://www.qq.com" frameborder=0 >QQ</iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>

效果:


用iframe标签打开腾讯网

四、列表

  1. <ol>定义一个有序列表。
  2. <ul>定义一个无序列表。
  3. <li>定义列表中的列表项。
  4. <dl>定义一个定义列表(一系列术语和其定义)。
  5. <dt>代表一个由下一个 <dd> 定义的术语。
  6. <dd>代表出现在它之前术语的定义。

五、表格

  1. <table>定义多维数据。
    2.<caption>表格标题
    3.<colgroup>代表表格中一组单列或多列。
    4.<col>代表表格中的列。
  2. <tbody>代表表格中的一块具体数据(表格主体)
  3. <thead>表头
    7.<tfoot>表格中的列摘要(表尾)。
  4. <tr>代表表格中的行。
    9.<td>表格中单元格。
    10.<th>表格中头部的单元格。

以上信息参考MDN中的html文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容