HTML常见标签

标题

  • h1~h6代表标题,逐层弱化

    h1代表页面最大的标题
    h2代表二级标题
    h3代表三级标题
    h4代表四级标题
    h5代表五级标题
    h6代表六级标题
    

段落

p代表段落,表示大段文字
浏览器会自动地在段落的前后添加空行。
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯,用 <br /> 标签代替它!

链接

a代表链接,链接到一个地址

//打开一个新的页面显示链接内容
<a href ="http://baidu.com" target="_blank" title="baidu">百度.com</a>
//不会跳转
<a href = "#">百度.com</a>  
//跳转到id为about的页面上          
<a href = "#about">百度.com</a>
//跳转到相对于根路径下的id为getCourse的页面  
<a href ="/getCourse">百度.com</> 

图片

img代表展示一张图片,src是其必备属性,代表了图片的名称及地址,alt属性是指当图片显示不出来时,它就会显示,起到一个占位说明的作用。

![](a.png)      //只闭合标签  最后不用加/
![图片](http://js.jirengu.com/images/dave.min.svg)

分块

div,语义为“一大块”,其一大作用就是文档布局,可用于给页面划分区块,让结构更清晰,它取代了使用表格定义布局的老式方法。
div是块级元素,它是可用于组合其他 HTML 元素的容器,且没有特定的含义,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div id = "header">...</div>  //头部
<div id = "content">...</div> //内容
<div id = "footer">...</div>  //底部

ul li

  • ul: unsort list 无序列表,其直接子元素是li,用于表示并列的内容,而且可以嵌套。

    <ul class="nav'>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li>
        <a href="#">更多</a>
        <ul>
          <li>联系</li>
          <li>地址</li>
        </ul>
       </li>
    </ul>
    

ol li

  • ol: order list 有序列表 用于表示带步骤或者编号的并列内容,ol的直接子元素只能是li,而且可以嵌套。

    <h2>把大象关到冰箱的步骤</h2>
    <ol>
      <li>把大象变小</li>
      <li>打开冰箱</li>
      <li>把大象塞进去</li>
    </ol>
    

dl dt dd

自定义列表,用于展示一系列"标题:内容..."的场景。
dl:自定义列表,dt:自定义标题,dd:自定义描述。

<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍:</dt>
<dd>这是一个久远的瓷器,很贵,易碎</dd>
</dl>

button

按钮。

  <button>点我</button>

strong em span

span:是内联元素,可用作文本的容器,也没有特定的含义,当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
em:是内联元素,可用作文本的容器,表示其范围内的文本需要被强调显示。
strong :是内联元素,可用作文本的容器,表示其范围内的文本很重要,强调性更强

<p>优惠<strong>100</strong>元</p>
<p>小谷<em>2</em>岁了</p>

iframe

在当前页面上嵌入一个页面,注意跨域操作问题

<iframe src="http://baidu.com" name="myPager"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPager">W3Cschool.cc</a></p>

表格

table用于展示表格,每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
不要用table来做布局,使用 <table> 元素进行文档布局不是表格的正确用法,<table> 元素的作用是显示表格化的数据,且thread、tbody、tfoot可省略,浏览器会自动添加borader-collapse,用于合并边框。

<table>
<tr>
<th>name</th>
<th>sex</th>
</tr>
<tr>
<th>小米</th>
<th>22</th>
</tr>
<tr>
<th>小花</th>
<th>20</th>
</tr>

</table>

hr

<hr> 或<hr />,画一条直线。

注释

<!--  这是一段注释,在浏览器中不会显示 -->

换行

使用 <br /> 标签,在不产生一个新段落的情况下进行换行(新行)!
<br />和<br />效果一致,但在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素,因此使用 <br /> 是更长远的保障。

样式

style提供了一种改变所有 HTML 元素的样式的通用方法。
style是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。

<html>
<body>
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red">This text is in Verdanda and  red</p>
<p style="font-family:times;color:green">This text is sys </p>
<p style="font-size:30px">This is 20 pixels height</p>
</body>
</html>

文本格式化标签

Paste_Image.png

引用

HTML中通过<q>定义短的引用,且浏览器通常会为 <q> 元素包围引号。

  <p>WWF 的目标是:<q>构建人与自然和谐共存的世界。</q></p>
  WWF 的目标是:"构建人与自然和谐共存的世界。"

HTML中通过<blockquote> 元素定义被引用的节(长引用),且浏览器通常会对 <blockquote> 元素进行缩进处理。

Paste_Image.png
Paste_Image.png

HTML中用class表示类,对 HTML 进行分类(设置类),可以使我们能够为元素的类定义 CSS 样式:为相同的类设置相同的样式,或者为不同的类设置不同的样式。

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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,236评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • HTML 为由一对尖括号(<>)所括起来的内容以特定含义. 这样的标识称为一个 标签开始标签可能包含一些信息,这些...
    饥人谷_Shirley阅读 858评论 0 1
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,053评论 1 25
  • 深夜,整理期中考试成绩,又惊喜又心疼。在高中如此普及的上海,进入中职的孩子是一个特殊群体,都说这里不看分数,但好分...
    我是小曲阅读 269评论 0 0