你可能不知道的10个HTML 元素,结构更健全的web应用

论坛 期权论坛 期权     
每天学编程   2019-7-20 10:14   2990   0
我都记不得听到过多少次「HTML 很容易」的说法。尽管我同意,相比其他编程语言,HTML 也许学起来要容易一些,但你不该理所当然地认为它不值一提。
HTML 是强大的标记语言,在运用得当的情况下,可以为 web 应用提供结构和强大的无障碍访问功能。


因此,今天我们将了解你可能不知道的十个 HTML 元素,希望它们有助于你创建更便于无障碍访问,结构健全的 web 应用。
[h1]Audio[/h1]
  1. [/code] 标签定义声音,例如音乐或其他音频流。当前支持的文件格式有:MP3、WAV、OGG。
  2. [code]      Your browser does not support the audio tag.
复制代码
[h1]Blockquote[/h1]
  1. [/code] 标签指定引用自他处的内容。
  2. [code]  Coding Coach is a free, open-source platform which aims to connect software developers and mentors all over the world.  It is built by a group of talented and passionate developers, designers, engineers, and humans who want to make the engineering world a better place to collaborate.  This project was born out of a desire to provide a platform to connect mentors and mentees throughout the world at no cost.  Coding Coach is created by the people, for the people.
复制代码
[h1]Output[/h1]
  1. [/code] 标签表示计算的结果。下面的例子中,加号和等号意味着第一项输入值和第二项输入值的和将「输出」至 output 标签;output 标签的可选属性 [code]for
复制代码
指明了加数的元素 id。
  1.   0100  +  =
复制代码
[h1]Picture[/h1]
  1. [/code] 标签可用于指定图像来源。使用 [code]
复制代码
,可指定适配浏览器视图的多张图像。
picture 标签包含两种不同的标签:一个以上
  1. [/code] 元素,一个 [code]
复制代码
元素。
source 元素的属性如下:
    1. srcset
    复制代码
    (必备):定义显示图像的 URL
    1. media
    复制代码
    :接受任何 CSS 定义下合法的媒体请求
    1. sizes
    复制代码
    :定义单个宽度值,单个媒体请求和宽度值,或逗号分割的列表(每个列表项为媒体请求和宽度值)
    1. type
    复制代码
    :定义 MIME 类型
浏览器根据属性值加载最合适的图像;采用首个满足条件的
  1. [/code] 元素,并忽略后续 source 元素。
  2. [code]
复制代码
标签提供向后兼容性(浏览器可能不支持 picture 元素,或所有
  1. [/code] 标签均不匹配)。
  2. [code]      
复制代码
[h1]Progress[/h1]
  1. [/code] 表示任务的进展。
  2. [code]
复制代码
标签并未取代
  1. [/code] 标签,因此磁盘用量、请求结果之类的地方应该使用 [code]
复制代码
标签。
  1. [/code][h1]Meter[/h1][code]
复制代码
标签定义了特定区间内的标量测度,或者一个比率。
  1. [/code] 标签可用于显示磁盘用量或搜索结果相关性。
  2. [code]
复制代码
标签不应用于任务进度;任务进度之类的地方应该使用
  1. [/code] 元素。
  2. [code]4 out of 1030%
复制代码
[h1]Template[/h1]
  1. [/code] 标签用来表示重复使用的模板代码,对用户隐藏。
  2. [code]  Cat  
复制代码
配合 JavaScript 进行渲染:
  1. function showMyTemplate() {  const myTemplate = document.querySelector('template');  const templateClone = myTemplate.content.cloneNode(true);  document.body.appendChild(templateClone);}
复制代码
[h1]Time[/h1]
  1. [/code] 标签定义人类可读的日期时间,能够用来以机器可读的形式编码日期时间,以便客户端在用户日程中加入生日提醒或计划事件。此外,也有助于搜索引擎提供「智能」搜索结果。
  2. [code]My cat wakes up at 11:00 each day.I have a date with my cat on Christmas.
复制代码
[h1]Video[/h1]
  1. [/code]标签指定电影剪辑或视频流。支持的格式包括 MP4、WebM、Ogg。
  2. [code]      Your browser does not support the video tag.
复制代码
[h1]WBR[/h1]如果有一长串文本,可以使用
  1. [/code] 标签指定文本比较理想的换行位置。
  2. [code]super longgggggggggggggggggggggggggggggggggggggggggggaaaaabbbbbb
复制代码
我希望这十个 HTML 元素为你提供了创建炫酷应用的新工具。


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:25
帖子:5
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP