HTML5 标签划分语义化标签

最新推荐文章于 2022-12-13 16:22:21 发布

海胆Sur

最新推荐文章于 2022-12-13 16:22:21 发布

阅读量149

点赞数

分类专栏： # HTML 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/I_fole_you/article/details/114991267

版权

HTML 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文档声明

声明HTML5文件

<!DOCTYPE html>

特殊格式

<abbr> 缩略词，title属性显示完整内容
<bdo dir="rtl/ltr"> 双向文本方向配合全局属性dir实现文字正逆序

功能性标签

进度条标签

定义度量衡。定义进度条

<meter value="2" min="0" max="10">` `<meter value="0.6">`

纯粹的进度条

<progress value="22" max="100">

添加拼音

<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp>
</ruby>

汉 (han)

新的表单元素

选择列表

<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>

围绕表单项的边框

<form>
  <fieldset>
    <legend>Personalia:</legend>  <!-- 边框上标签 -->
  </fieldset>
</form>

显示input可能的输入项

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
</datalist>

计算结果output

<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>

内联框架

<iframe> 定义内联框架。实现页面的嵌入

<iframe src="//www.baidu.com">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

多媒体

图像

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap" id='plantmap'>
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<canvas> 创建画布，使用脚本绘制图形
<figure> 标签规定独立的流内容如果被删除，则不应对文档流产生影响。
<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

音视频

<audio> 定义声音资源目前支持MP3、Wav、Ogg

<audio controls>
  <source src="horse.ogg" >
  <source src="horse.mp3" >
您的浏览器不支持 audio 元素。
</audio>

<track> 为媒体( 和 )元素定义外部文本轨道。
<video> 定义一个音频或者视频

语义化标签

<blockquote cite="urlxxxx">定义块引用
<q> 定义短的引用
<cite> 定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题
<time> 定义一个日期/时间

结构约定

<main> 指定文档的主体内容
<article> 定义一个独立文章内容
<section> 定义了文档的某个区域包含了一组内容及其标题
<aside> 定义主区域内容之外的内容，如侧边栏
<header> 定义一个文档头部部分页眉
<nav> 定义导航栏
<footer> 定义一个文档底部页脚

标签也可以嵌套

<figure> <figcaption> 定义图片标题

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

<code> 定义计算机代码文本
<samp> 定义计算机代码样本
<dfn> 定义定义项目。
<kbd> 定义键盘文本。
<mark> 定义带有记号的文本
<var> 定义文本的变量部分

<wbr> 规定在文本中的何处适合添加换行符。

为了结构更加清晰，便于搜索引擎分析，支持版权和互联共享服务

零碎的标签

表格

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

链接

<base> 定义页面中所有链接的默认地址或默认目标。

脚本程序

<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<embed> 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 ~~感觉有点多余~~

对话框

<dialog> 标签定义一个对话框、确认框或窗口。

折叠框

规定了用户可见的或者隐藏的需求的补充细节

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

海胆Sur

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 标签划分语义化标签

基础<!DOCTYPE html> 声明HTML5文件<hr> 分割线标签<br> 换行标签格式<abbr> 定义缩略词，title属性显示完整内容<address> 定义文档作者/所有者的联系信息;通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。起到隔离作用，浏览器支持度不高<bdo dir="rtl"> 定义文本方向<met
复制链接

扫一扫