Html常用标签介绍

在前端开发工作中,常用的html标签有:

1.文档元数据标签

<meta>标签:表示那些不能由其它Html院相关标签(<base>,<link>,<script>,<style>,或<title>)之一表示的任何元数据信息。

 <link>标签:规定了外部资源与当前html文档的关系,这个标签最长用于链接外部样式表CSS。

<style>标签:在html文档中用style标签包含文档的CSS样式信息。

<script>标签:规定了外部资源与当前html文档的关系,这个标签最长用于链接外部JS。

<title>标签:定义文档的标题,显示在浏览器的标题栏或标签页上,它只可以包含文本,若是包含有标签,则包含的任何标签都不会被解释。

2.内容分区标签

<header>标签:表示一组引导性的帮助信息,可能包含标题元素,也可以包含其他元素,像logo、分节头部,搜索表单等。

<footer>标签:表示最近一个章节内容或者节点元素的页脚部分。

<h1><h2><h3><h4><h5><h6>标签:表示的是6个不同级别的标题,h1标签级别最高,h6标签级别最低;一个标题标签能简要描述该节的主题。

<main>标签:表示文档<body>或内容的主体部分,主体部分由于文档直接相关或者扩展文档的中心主体、应用的主要功能部分的内容组成,通俗说就是文档中重要的内容部分,例如导航栏、版权信息、网站logo、搜索框(作为文档的主要功能)。

<nav>标签:表示导航栏,一个页面的导航条通常使用nav标签。

<section>标签:表示文档中的一个章节或一个区域。

3.文本内容标签

<div>标签:表示一个通用型的流内容容器,它在语义上不代表任何特定的类型内容,它可以用来对其它元素进行分组,一般用于样式化相关的需求(不同容器使用class或id区分)。

<ul>标签:表示多项的无序列表。与<li>标签结合使用。

<ol>标签:表示多项的有序列表,通常使用在有带编号的列表。与<li>标签结合使用。

<li>标签:用于表示列表里的条目,它必须被包含在一个父标签里,如一个无序列表<ul>标签,或是一个有序列表<ol>。

<p>标签:表示文本的一个段落。

<pre>标签:表示预定义格式文本,在该标签的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空白或换行符)都会显示出来。

<hr>标签:表示水平线,即段落标签之间的主题内容转换。它是一条水平线。

4.内联文本标签

<a>标签:同时也被表示为锚元素,通常用a标签来创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的插连接。属性标签有href、target。而target属性有4个不同的值,分别表示不同意思;_blank表示在新窗口打开新页面,_self表示在当前窗口打开新页面,_parent表示在该页面的父级窗口打开新页面,_top表示在该页面的顶级窗口打开新页面。写如下:

<a href="http://qq.com" target="_blank"></a>

<a href="http://qq.com" target="_self"></a>

<a href="http://qq.com" target="_parent"></a>

<a href="http://qq.com" target="_top"></a>

<a>标签中属性download定义了下载链接的地址。

要注意的是:<a>标签的href属性值可以加伪协议,<a href="javascript:;" ></a>意思是点击a链接之后什么都不做。执行了一段js但是没有发请求,页面没反应。

<b>标签:表示给字体加粗,粗体标签,用于吸引读者的注意到该标签的内容上。

<br>:表示在文本中生成一个换行符号,此标签在写诗和地址时很有用,这些地方的换行都非常重要,

<em>标签:表示重视,标记出需要用户着重阅读的内容。一般以斜体展现。

<i>标签:用于表现因某些原因需要区分普通文本的一系列文本,它的内容通常以斜体显示。

<kbd>标签:表示键盘输入标签,用于表示用户输入,它将产生一个行内元素,以浏览器默认的monospace字体显示。

<small>标签:表示将文本中的字体变小一号,(例如大号变成中等、中等变成小,小变成超小)。

<span>标签:是短语内容的通用行内容器,没有任何特殊语义,span标签和div标签很相似,单div是块级元素,而span标签是行内元素。

<strong>标签:表示文本十分钟呀,一般用粗体显示。

<sub>标签:表示文本下标,定义一个文本区域,与主要的文本相比应该展示的更低更小,通常称为下标。

<sup>标签:表示文本上标,定义一个文本区域,与主要的文本相比应该展示的更高更小,通常称为上标。

5.图片和多媒体标签

<audio>标签:用于在文档中表示音频内容,这些音频资源可以用src属性来描述。

<video>标签:用于在文本中嵌入视频内容。

<img>标签:表示在文本中插入图片,通常格式<img src="" alt="" >

<map>标签:于area标签一起使用来定义一个图像映射。

<area>标签:在图片上定义一个热点区域,可以关联一个超链接,area标签仅在mao标签的内部使用。

6.内嵌内容标签

<iframe>标签:html内联框架标签,表示嵌套的浏览器上下文,有效的将另一个html页面嵌入到当前页面中,属性用src。还有一个frameborder="0";这个样式,因为iframe标签默认带边框,将frameborder的值设置为0,边框就不显示。

7.表格内容标签

<table>标签:表示表格——即通过二维数据表表示的信息。

<thead>标签:定义表格的列头的行,通常显示粗体。

<tbody>标签:定义表格的内容部分

<tfoot>标签:定义表格中各列总和的行。

<th>标签:定义表格首列的头。

<tr>标签:表示表格的行。

<td>标签:定义表格内的数据标签。

7.表单-内容标签

<form>标签:表示文档中的一个区域,这个区域包含有交互控住的元件,形成一个表单,向服务器提交信息。

<input>标签:用于为基于web表单创建交互式空间,给用户输入数据。input标签有多个type属性,不同的type属性值定义的功能不一样;下面列举常用的:

input标签的type属性值

语法是:<input type="text" name="" value="" >

<label>标签:表示用户界面中项目的标题,通常与<input>标签结合使用;如:<label><input type="radio" name="shuiguo" value="pingguo">苹果</labe><label><input type="radio" name="shuiguo" value="xiangjiao">香蕉</label>

<select>标签:是一种表单空间,通常用于下拉选项列表,可创建选项菜单,菜单内的内容选项标签为<option>,可以由<optgroup>标签将内容选项进行分组,,

<select>默认是单选,属性multiple为true时,为多选。示例:

<option>标签:与select标签结合使用,用来定义select选项菜单内的内容。

<textarea>标签:文本域标签,表示一个多行纯文本编辑控件。

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

推荐阅读更多精彩内容

  • 1、基本标签 <meta> HTML 文档的元信息,常用属性 charset 此特性声明当前文档所使用的字符编码,...
    饥人谷_朱笑笑啊阅读 696评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1 41
  • HTML文档标签 <!DOCTYPE> 定义文档类型 定义HTML文档 定义文档头部 定义文档主体 布局标签(包含...
    RookieD阅读 259评论 0 0
  • 不能卖产品,还能卖经验 发现微信程序小bug之后,三节课团队迅速反应,针对这个bug设计了一个很有趣的H5。...
    师悦阅读 183评论 0 0