【HTML5复习】HTML5标签

HTML5中的新特性包括了嵌入音频、视频和图形的功能,客户端数据存储以及交互式文档
HTML5还包含了新的元素,比如 nav header footer figure 等等
参考:https://www.w3school.com.cn/
HTML标签总结:

标签描述
<!-- -->定义注释
<!DOCTYPE>定义文档类型 html5声明: <!DOCTYPE html>
<a>定义超链接 <a href=""></a>
<abbr>定义缩写 <abbr title="People's Republic of China">PRC</abbr>
<address>定义文档或文档的作者/拥有者的联系信息
<area>定义图像映射(带有可点击区域的图像)中的区域
<article>规定独立的自包含内容
<aside>定义其所处内容之外的内容 可以用作文章的侧栏
<audio>定义声音,比如音乐或其他音频流 是HTML5的新标签
<b>粗体文本 在没有其他合适的标签时,才把它作为最后的选项 HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
<base>为页面上的所有连接规定默认地址或默认目标 无结束标签 base标签必须位于head元素内部url:规定页面中相对链接的基准UPL target:在何处打开页面的所有链接。_blank:新窗口打开链接文档 _self:默认,在相同的框架中打开被链接文档 _parent:在父框架中打开被链接的文档_top_:在整个窗口中打开被链接的文档 framename:在指定的框架打开链接文档
<basefont>规定页面上的默认字体颜色和字号 只有IE浏览器支持 一般不使用
<bdi>把用户名从周围的文本方向设置找那个隔离出来 目前只有谷歌和火狐支持
<bdo>覆盖默认的文本方向 属性dir:值:ltr从左向右 rtl从右向左
<big>呈现大号字体效果
<blockquote>标记唱的引用 浏览器在 blockquote 元素前后添加了换行,并增加了外边距。
<body>定义文档的主体 包含文档的所有内容(比如文本、超链接、图像、表格、列表等)
<br>单标签 插入一个简单的换行符
<button>按钮
<canvas>图形容器 通过脚本来绘制图形 HTML5新标签
<caption>表格标题 caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<center>对其所包含的文本进行水平居中 一般不用一般用CSS来居中文本
<cite>标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。按照惯例,引用的文本将以斜体显示。
<code>定义计算机代码文本
<col>单标签 为表格中一个或多个列定义属性值
<data>用于添加给定内容的机器可供翻译 比如: <li><data value="21053">圣女果</data></li>
<datalist>定义选项列表
<dd>定义列表中定义条目的定义部分
<del>定义文本中已被删除的文本
<details>用于描述文档或文档某个部分的细节 HTML5新增
<dfn>用于定义一个项目
<dialog>定义对话框或窗口 HTML5新增
<dir>定义目录列表 不赞成使用
<div>定义文档中的分区或者节
<dl>定义定义列表 结合dt dd使用
<dt>定义定义列表中的项目(即术语部分)
<em>把文本定义为强调的内容 不推荐使用
<embed>定义嵌入的内容,比如插件 HTML5新增
<fieldest>可将表单内的相关元素分组
<figcaption>标签定义 figure 元素的标题(caption)。
<figure>标签规定独立的流内容(图像、图表、照片、代码等等)。
<font>规定文本的字体、字体尺寸、字体颜色。
<footer>定义文档或节的页脚。
<form>为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
<frame>标签定义 frameset 中的一个特定的窗口(框架)
<frameset>可定义一个框架集。它被用来组织多个窗口(框架)。
<h1>-<h6>标题 1最大
<head>标签用于定义文档的头部 下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
<header>定义文档的页眉(介绍信息)
<hr>在 HTML 页面中创建一条水平线
<html>可告知浏览器其自身是一个 HTML 文档。
<i>显示斜体文本效果。
<iframe>会创建包含另外一个文档的内联框架(即行内框架)。
<img>向网页中嵌入一幅图像。并不会在网页中插入图像,而是从网页上链接图像。创建的是被引用图像的占位空间。标签有两个必需的属性:src 属性 和 alt 属性。
<input>用于搜集用户信息 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<ins>新插入的部分的文本
<kbd>定义键盘文本 它表示文本是从键盘上输入的
<keygen>规定用于表单的密钥对生成器字段。 服务器接收到的字段是加密的
<label>为 input 元素定义标注(标记)。
<legend>legend 元素为 fieldset 元素定义标题(caption)。
<li>定义列表项目 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
<link>定义文档与外部资源的关系
<main>规定文档的主要内容。
<map>定义一个客户端图像映射
<mark>突出显示部分文本
<menu>定义命令的列表或菜单。 所有主流浏览器均不支持 area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。只支持火狐浏览器
<meta>可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 单标签
<meter>来度量给定范围(gauge)内的数据
<nav>定义导航链接的部分
<noframes>noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
<noscript>定义在脚本未被执行时的替代内容(文本)。
<object>定义一个嵌入的对象 用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash
<ol>有序列表
<optgroup>定义选项组。
<option>option 元素定义下拉列表中的一个选项(一个条目)。
<output>标签定义不同类型的输出,比如脚本的输出。
<p>段落
<param>param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 或者 标签提供参数。
<picture>图像 元素包含两个标签:一个或多个 <source> 标签和一个 <img> 标签。
<pre>元素可定义预格式化的文本
<progress>标示任务的进度(进程)。 HTML5新
<q>定义短的引用。 浏览器给定义的内容加上了引号 <q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。
<rp>注释 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
<rt>注释 ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
<ruby>定义注释 就像是拼音一样
<s>strike的缩写版本
<samp>定义样本文本
<script>插入js代码
<section>定义文档中的节(section 区段)比如章节、页眉、页脚等
<select>创建单选或者多选菜单
<small>小号字体效果
<source>标签为媒介元素video/audio定义媒介资源。
<span>被用来组合文档中的行内元素。 span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
<strike>可定义加删除线文本定义。一般用del代替
<strong>把文本定义为语气更强的强调的内容。不推荐使用
<style>用于为 HTML 文档定义样式信息。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css style 元素位于 head 部分中。
<sub>下标文本 这段文本包含 下标
<summary>包含details元素标题 ,“details” 元素用于描述有关文档或文档片段的详细信息。
<sup>定义上标文本 包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。
<svg>定义SVG图形的容器
<table>表格
<tbody>表格主体
<td>定义标准单元格
<template>保留页面加载时隐藏的内容,使用js来显示
<textarea>定义多行的文本输入控件
<tfoot>定义表格的页脚
<th>单元格表头
<thead>定义表格的表头 与tbody和tfoot结合使用
<time>定义公历时间(24小时制)或日期,时间和时期偏移是可选的
<title>定义文档标题
<tr>表格-行 包含一个或者多个th或者td
<track>字幕 为viedo等媒介规定外部文字轨道
<tt>呈现类似打字机或者等宽的文本效果
<u>为文本添加下划线 尽量避免下划线 容易与超链接混淆
<ul>无序列表
<var>定义变量 不推荐使用
<video>定义视频,比如电影片段或者其他视频流
<wbr>规定在文本的何处合适添加换行符 就是英文单词避免换行单词中断 单标签

补充:
colgroup、col 标签用来定义表格列的分组。

<col>标签是给表格中一个或多个列定义属性值,而<colgroup>标签是对表格中的列进行组合,从而实现对表格的格式化。 <col>标签一般会放在<colgroup>标签中使用,对<colgroup>标签组合的列分别设置样式。

如果一个表格前三列要垂直居上,后两列垂直居下,我们就可以用分组来进行设置。

<table border="1">

<colgroup span="3" valign="top"></colgroup>

<colgroup span="2" valign="bottom"></colgroup>

<tr>

<td>1垂直居上</td>

<td>2垂直居上</td>

<td>3垂直居上</td>

<td>4垂直居下</td>

<td>5垂直居下</td>

</tr>

</table>

span 用以表示该组包含多少列。

col 的作用是细化 colgroup,因为即使在一个组中,列与列之间也可能会出现一些差别,这时就得用到 col 了。

<colgroup span="3" valign="top">

<col width="50"></col>

<col align="center"></col>

<col valign="middle"></col>

</colgroup>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>
<ruby><rt> ㄏㄢˋ </rt>
</ruby>

运行结果:
在这里插入图片描述

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

optgroup 选项分组
option 选项
在这里插入图片描述

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter> 

在这里插入图片描述

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

在这里插入图片描述

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

在这里插入图片描述

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值