您好,欢迎来到覃师宁博客!
帝国cms使用手册

HTML标签通过本页您可以了解到常用的html标签有哪些,以及所有标签默认的浏览器样式效果。


【通用容器】

<div>最常用的(块元素)通用容器

<span> 最常用的(内联元素)通用容器

点击查看:内联元素和块级元素的区别

其他常用的语义标签有:<header>/<nav>/<main>/<article>/<section>/<aside>/<footer>等等

<header>定义 section 或页面的头部

<nav>定义导航

<main>定义main 标签表示页面主要区域

<article>定义文章

<section>定义文档中的节

<aside>定义文档内容相关的内容

<footer>定义 section 或页面的尾部


【标题标签】

<h1> - <h6>定义标题 (通常使用粗体显示。注意:单个页面内最好只有1个H1标签,可以设置多个H2、H3、H4、H5、H6)

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题
H6 标题

【段落标签】

<p>标签标记了一个段落内容。


【引用标签】

<blockquote>用来定义摘自另一个源的块引用 (通常四周会有4个像素的缩进)

<q>定义 短的引用 (通常会在两边加双引号)

<address>用于引入联系地址等信息,一般将address 放在footer 标签中。 (通常使用斜体显示)

<cite>定义对参考文献、比如书籍、杂志 (通常使用斜体显示)


【文本描述标签】

<a>定义链接、锚点,比如 覃师宁博客

<em>定义 强调文本 (通常使用斜体显示)

<strong>定义 更为强调的文本 (通常使用粗体显示)

<i>定义 斜体文本

<b>定义 粗体文本

<big>定义 大号文本 (通常使用比正文更大的字号显示)

<small>定义 小号文本 (通常使用比正文更小的字号显示)

<mark>定义 带有标记的文本 (通常会高亮显示)

<del>定义 被删除文本 (通常带有删除线)

<ins>定义 新插入文本 (通常带有下划线)

<sup>定义 上标文本、X 2

<sub>定义 下标文本、H 2O

<details>定义细节内容

<summary>定义 details 的标题

这是一篇关于html标签默认样式的文章

html标签《html标签默认样式的文章》作者:覃师宁博客

<hr>定义水平线 (本页中的分割线均为 <hr> 标签)

<code>定义代码类型 (通常使用等宽字体显示,但 不会保留空格及换行符,需要保留空格及换行符,请使用<pre>)

<pre>定义预格式文本 (通常会 保留空格及换行符,并使用等宽字体显示,通常是引入代码使用)

<bdo>定义文本的方向。 后面的文字会从右到左来显示: 你已经具备了倒读的能力

<abbr>定义缩写。微软推出的浏览器是 IE浏览器。(鼠标移到“IE”上看效果)

<time>定义 (通常不会有任何视觉效果)

<progress>定义进度条

<meter>定义度计量 十分之三 60%


【列表】

<ul>定义无序列表 (通常列表前会有项目符号)

  • <li>定义列表的项目
  • 凌大
  • 唐二

<ol>定义有序列表。 (通常列表前会有数字符号)

  1. <li>定义列表的项目
  2. 凌大
  3. 唐二

<dl>定义定义列表

<dt>定义定义列表中的项目
<dd>定义定义列表中项目的描述
凌大的家谱
凌大的家谱于1900年开始统计,进行了..

【表格】

<table>定义表格

<caption>定义表格标题

<thead>定义表格中的表头内容

<tfoot>定义表格中的表注内容(脚注)

<tbody>定义表格中的主体内容

<tr>定义表格中的行

<th>定义表格中的表头单元格 (通常使用粗体显示)

<td>定义表格中的单元

table 结构标准顺序如下:

<table> <caption></caption> <thead> <tr> <th></th> </tr> </thead> <tfoot> <tr> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> </tr> </tbody> </table>

※ 虽然 tfoot 放在了 tbody 之前,浏览器依然会将 tfoot 显示在 tbody 之后,而且这样做能让浏览器在获得所有表格内的数据前显示表注。

表格标题
表头 ID 表头 姓名 表头 日期
表注 这是编号 表注 这是假名 表注 这是添加日期
1 凌大 2009-09-09
2 唐二 2010-10-10

自带边框样式
表头 ID 表头 姓名 表头 日期
表注 这是编号 表注 这是假名 表注 这是添加日期
1 凌大 2009-09-09
2 唐二 2010-10-10

【表单】

<form>定义表单


<fieldset>定义围绕表单中元素的边框 (通常四周会有缩进,并显示围绕的边框)

<legend>定义 fieldset 元素的标题

标题

内容


<select>定义选择列表(下拉列表、多选列表)

<optgroup>定义选择列表中相关选项的组合

<option>定义选择列表中的选项


滚动列表形式


多选列表


<input>定义输入控件 (如果浏览器不支持 HTML5 新的类型,那么会使用文本域替代)

文本域 type="text"

密码域 type="password"

复选框 type="checkbox" A B C

单选按钮 type="radio"组A: ②  组B:

文件域 type="file"

图像域 type="image" (可用做提交按钮)

隐藏域 type="hidden" (当然是看不见的了)

普通按钮 type="button"

重置按钮 type="reset"

提交按钮 type="submit"

email 域 type="email" (若有输入内容,则会验证格式是否符合 email)

url 域 type="url" (若有输入内容,则会验证格式是否符合 url)

数值域 type="number" (若有设置最大值或最小值,则会验证数字是否在最大最小值之内)

数值范围域 type="range" (通过拖动滑块来选择数值)

日期域 type="date" (会调用浏览器自带的日期选择器,可设置的类型:date, month, week, time, datetime, datetime-local)

    type="month"

    type="week"

    type="time"

    type="datetime"

    type="datetime-local"

色值域 type="color" (会调用浏览器自带的颜色选择器)

搜索域 type="search" (用于搜索,站内搜索或 Google 搜索等,在输入框内容右侧通常会出现清除按钮)


<datalist>定义 input 元素的选项列表


<keygen>定义生成秘钥


<output>定义多行的文本输入控件


<label>定义 input 元素的标注


<textarea>定义多行的文本输入控件


<button>定义按钮 (与 input 不同的是,button 内部可以放置更多的内容,比如文本或图像)


【图像】

<img>定义图像

<map>定义可点击区域

<area>定义可点击区域的内部区域

图片左右两边的链接不一样:

Blog F2E

<figure>定义文档中的媒体内容(图片、图表、照片、代码等)

<figcaption>定义 figure 元素的标题

覃师宁博客

<canvas>定义画布 (此处不做演示)


【音频/视频】

<audio>定义声音

<source>定义媒体源


<audio>定义视频

<video>定义字幕


【其他】

<noscript>定义针对不支持客户端脚本的用户的替代内容

当前您的浏览器支持JavaScript脚本


<noframes>定义针对不支持框架的用户的替代内容

若您看到这行字,说明您的浏览器不支持运行框架

<ruby>定义 ruby 注释

<rt>定义 ruby 注释的解释

<rp>定义若浏览器不支持 ruby 元素显示的内容

微信订阅号