HTML5结构体和标签大全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE>: 定义文档类型.

  • html

    • 告诉浏览器,这是一个网页。所有的标签,都必须写到html里面。
  • head

    • 指定网站的标题/指定网站的小图片
    • 添加网站的SEO信息(指定网站的关键字/指定网站的描述信息)
    • 外挂一些外部的css/js文件。
    • 添加一些浏览器适配相关的内容。
  • head标签的注意点

    • 一般情况相爱,写在head标签内部的内容,都不会给用户查看。
  • title

    • 专门用于指定网站的标题,并且这个指定的标题将来还会作为用户保存网站的默认标题。
  • title标签的注意点

    • title必须写在head的里面
  • body

    • 网页的内容必须写在body里面。


其他常用的标签

  • 1.块级元素
    • 标题<h></h>
    • 有序列表<ol><li></li></ol>
    • 无序列表<ul><li></li></ul>
    • 定义列表<dl></dl>
    • 段落标签<p></p>
    • 预格式文本<pre></pre>
    • 大段引用<blockquote></blockquote>
    • 小段引用<q></q>
    • 划分区块<div></div>
    • 定义<figure></figure>
    • 音频<audio></audio>
    • 视频<video></video>
    • 表格<table></table>
    • 表单<form></form>
    • 装载独立文章<article>
    • 定义文档章节<section>
    • 定义非正文内容<aside>
    • 页眉<header>
    • 页脚<footer>
    • 导航链接部分<nav>
    • 为文档或 section 定义联系信息<address>
    • 制作更小字号的文本<small>


  • 2.内联元素

    • <div>:定义块级元素.
    • <span>:定义行业元素.
    • <header>51:定义区段或页面的页眉.(头部)
    • <footer>5:定义区段或页面的页脚.(足部)
    • <section>5:定义文档中的区段.
    • <article>5:定义文章.
    • <aside>5:定义页面内容之外的内容.
    • <details>5:定义元素的细节.
    • <summary>5:定义 <details> 元素可见的标题.10. <dialog>5:定义对话框或窗口.
    • <nav>:定义导航.
    • <hgroup>5:定义标题组
    • <table>:定义表格.
    • <thead>:定义页眉.
    • <tbody>:定义主体.
    • <tfoot>:定义页脚.
    • <caption>:定义标题.
    • <th>:定义表头.
    • <tr>:定义一行.
    • <td>:定义单元格.


  • 3.内联块元素

    • 图片<img />
    • 内联框架<iframe></iframe>
    • <img>:定义图像.注意加上alt属性
    • <a>:定义超链接.
    • <map>:定义图像映射。
    • <area>:定义图像地图内部的区域.
    • <figure>5:定义媒介内容的分组.
    • <figcaption>5:定义 <figure> 元素的标题.


  • 4.表单标签

    • <form>:定义表单.(表单包含在form标签中)
    • <input>:定义输入域.
    • <textarea>:定义文本域.(多行)
    • <label>:定义一个控制的标签.(input 元素的标注)
    • <fieldset>:定义域.
    • <legend>:定义域的标题.
    • <select>:定义一个选择列表.
    • <optgroup>:定义选择组.
    • <option>:定义下拉 列表的选项.
    • <button>:定义按钮.(定义围绕表单中元素的边框.)
    • <fieldset>:定义围绕表单中元素的边框.
    • <legend>:定义 fieldset 元素的标题.
    • <fieldset>5:定义选项列表.与input 元素配合使用该元素,来定义 input 可能的值.
    • <keygen>5:定义表单的密钥对生成器字段.
    • <output>5:定义不同类型的输出,比如脚本的输出


  • 5.表格标签

    • <table>:定义表格.
    • <thead>:定义页眉.
    • <tbody>:定义主体.
    • <tfoot>:定义页脚.
    • <caption>:定义标题.
    • <th>:定义表头.
    • <tr>:定义一行.
    • <td>:定义单元格.


  • 6.列表标签

    • <ul>:定义无序列表.
    • <ol>:定义有序列表.
    • <li>:定义列表项.
    • <dl>:定义自定义列表.
    • <dt>:定义自定义列表项.
    • <dd>:定义自定义的描述.


  • 7.音频/视频

    • <audio>5:定义声音内容.
    • <source>5:定义媒介源.
    • <track>5:定义用在媒体播放器中的文本轨道.
    • <video>5:定义视频.


  • 8.格式标签

    • 文章标签

      • 1.<h1>-<h6>:定义 HTML 标题.
      • 2.<p>:定义段落.
      • 3.< br>:定义换行.
        1. < hr>:定义水平线.
        1. <bdo>:定义文字方向.
        1. <pre>:定义预格式文本.
        1. <abbr>:定义缩写.
        1. <address>:定义文档作者或拥有者的联系信息.
        1. <ins>:定义被插入文本.
        1. <del>:定义被删除文本.
        1. <time>:定义日期/时间.
    • 短语元素标签

        1. <em>:定义强调文本.
        1. <strong>:定义语气更为强烈的强调文本.
        1. <dfn>:定义定义项目.
        1. <code>:定义计算机代码文本.
        1. <samp>:定义计算机代码样本.
        1. <kbd>:定义键盘文本.
        1. <var>:定义文本的变量部分.
        1. < sup>:定义上标文本.
        1. < sub>:定义下标文本.
        1. <cite>:定义引用.
        1. <blockguote>:定义长的引用.
        1. <q>:定义短的引用.
    • 字体样式标签

        1. <i>:显示斜体文本效果.
        1. <b>:呈现粗体文本效果.
        1. <big>:呈现大号字体效果.
        1. <small>:呈现小号字体效果.
        1. <mark>5:定义有记号的文本.

以上的标签,在开发中会经常用到。

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

推荐阅读更多精彩内容