常用的HTML标签

HTML了解常用的标签,就可以写出大部分HTML页面,即使需要用到使用量较少的标签也可以Google或者MDN搜索。接下来介绍一下HTML常用的标签有哪些:

div

div标签用于组合其他HTML元素,本身无实在意义。常用于页面的布局,比如一个展开式的广告页面框架大致,如下:

<body>
    <div id="wrap-container">
        <div id="collapsed-container"></div>
        <div id="expanded-container"></div>
    </div>
</body>

h1~h6

标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。

p

表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。<p>是块级元素

span

<span> 元素是短语内容的通用行内容器,并没有任何特殊语义。<span>与<div>元素很相似,但<span>元素是行内元素。

strong

Strong 元素 (strong)表示文本十分重要,一般用粗体显示。

em

着重元素 (<em>) 标记出需要用户着重阅读的内容, <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。通常的,该元素会被浏览器展示为斜体文本。

ul ol li

ol 元素 表示多个有序列表项,通常渲染为有带编号的列表; ul 元素 ( 或 HTML 无序列表元素 ) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的;举例如下:

<ul class="nav-tools-list">
    <li>
        <div>
            <img src="shoppingtools-icon-1.png" alt="">
            <span>Build & Price</span>
        </div>
    </li>
</ul>

dl dt dd

dl是一个包含术语定义以及描述的列表;dt 元素用于在一个定义列表中声明一个术语,通常在该元素后面会跟着 dd 元素。使用方法与ol类似。

form表单相关

HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

重点介绍两个属性:

1.action:一个处理这个form信息的程序所在的URL。
2.method:浏览器使用HTTP 方式来提交 form. 可能的值有:get,post。

form表单中的button的用法

1.当在form表单中使用默认的button样式,即<button>按钮</button>,按钮具有提交表单的作用。
2.当使用input的type属性时,若<input type="submit">点击后也会提交表单,但<input type="button">点击后并不会提交表单。

form表单中有多个标签联用,重点介绍下面几个:

input

<input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。<input>的工作方式因其types类型属性的值而有很大差异:如
-checkbox: 复选框。
-button:无缺省行为按钮。
-submit:用于提交表单的按钮。
-text:单行字段;换行会将自动从输入的值中移除。

label

它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性。

label属性for:可标记的 form相关元素的ID,在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值,作为这个label元素的labeled control。

一个简单的form表单的举例如下:

<!-- 一个简单的表单,发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

table表格相关

table常用的子元素有三个:

1.<thead> 元素:表格头部
2.<tfoot> 元素:表格尾部
3.<tbody> 元素:表格内容

在每一个子元素中,也有三个常用的标签:

1.<tr> :table row 表格的一行
2.<td> table data 表格单元
3.<th> table head 表格头部

举例如下:

  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

img

HTML Image 元素( <img> )代表文档中的一个图像。src属性:图像的 URL,这个属性对 <img> 元素来说是必需的。

a

<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

常用的属性:

1.download:此属性指示浏览器下载URL而不是导航到它,因此将提示用户将其保存为本地文件。
2.href:包含超链接指向的URL或URL片段。当href指向伪协议(假连接)时:有以下四种用法

<a href="#">点我没用啊</a> <!--点了就自动回到页面顶部:-->
<a href="javascript:">点我没用啊</a> <!--点了没反应,就左下角出个javascript:-->
<a href="javascript: alert(你错了哟);">点我没用啊</a> <!--点了弹出个1的提示-->
<a href="">点我没用啊</a> <!--点了后刷新当前页面-->

ifame

该元素表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。name属性:嵌入的浏览上下文(框架)的名称。该名称可以用作<a>标签,<form>标签的target属性值。

参考资料:MDN

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

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • a标签a标签可以配合iframe标签 iframe标签 2.1 target属性(1) _blank(也是默认状态...
    Jason_Shu阅读 294评论 0 0
  • 闲来无事,总结几个常用的HTML标签,不喜勿喷,喜欢请点赞!O(∩_∩)O哈哈~ <!--以下是行级元素 --> ...
    苏码码阅读 420评论 0 4