HTML5提高

栏目: IT技术 · 发布时间: 4年前

内容简介:我个人觉得,当你学会了一些最基本的标签其实是够用的,但是在很多网页中可以发现很多新的标签。这个时候不知道它是干嘛的实际上心里是非常没底的,所以在这里我打算写一篇HTML5提高的文章,尽量以大白话的方式来告诉你H5中的一些实用小技巧。首先,要明白一点。我们使用标签时如果想要非常规范的一看就很专业的那种效果,我们应该利用原本标签的语义。如,写了一个

HTML5提高

前言

我个人觉得,当你学会了一些最基本的标签其实是够用的,但是在很多网页中可以发现很多新的标签。这个时候不知道它是干嘛的实际上心里是非常没底的,所以在这里我打算写一篇HTML5提高的文章,尽量以大白话的方式来告诉你H5中的一些实用小技巧。

首先,要明白一点。我们使用标签时如果想要非常规范的一看就很专业的那种效果,我们应该利用原本标签的语义。

如,写了一个 <main> 标签,别人一看就知道,原来这是主体内容的区域。

当然,如果你全部使用 <div> 也没什么问题,只是不推荐这样做。

其次,使用HTML标签不要在意他原本的模样,尽管他可能非常丑,因为我们可以随时通过CSS来修改它的样式。

结构化标签

header 页眉

<header> 标签代表一块内容区域的页眉,即头部,它没什么具体语义,一个页面中可以有多个 <header> 标签,当然也可以只有一个。

HTML5提高

footer 页脚

<footer> 标签代表一个页眉的页脚,即尾部。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。应该是与 <header> 相对应,不过没有也没关系。

HTML5提高

nav 导航

<nav> 代表一块区域中的导航。注意!是一块区域的导航,这代表一个页面中可以有多个 <nav> 标签,当然也可以只有一个。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">导航一</a></li>
                <li><a href="#">导航二</a></li>
                <li><a href="#">导航三</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

main 主要区域

<main> 标签代表主要内容区域,一个页面只应该出现一次。

HTML5提高

article 内容区域

<article> 仅仅代表一块区域中的内容,没什么具体语义。

HTML5提高

section 区块定义

使用 <section> 定义一个区块,一般是一组相似内容的排列组合。

HTML5提高

当然像这种更多的就是用列表标签排序。不过外层我们可以套上 <section> 标签。

aside 附加区域

使用 <aside> 可以设置与主要区域无关的一些内容,如轮播图,广告,公告等等。

HTML5提高

div 通用容器

<div> 没有什么清楚的界限来规定它应该做什么,所以变成了一个万能的标签。啥都能装,这个就不用多介绍了,基本你一打开页面全是它。

基础文本相关

p 段落标签

<p> 标签用于定义一段文本的内容。这个在上一篇HTML中已经讲过了,使用它应该注意一些问题,如包裹的内容等。

pre 原样显示标签

<pre> 标签可以原封不动的将你所有的格式打印出来,在博客园里的代码块基本外部都是包裹的 <pre> 标签。这个标签在上一篇HTML中也提到过了。

HTML5提高

br 换行标签

<br> 才是一个真正的换行标签,注意与 <p> 的使用区别。上一篇HTML中也提到过。

span 文本容器

<span> 代表的意思和 <div> 一样,如果你的某些文本需要修改一下样式。可以使用它来包裹,这在页面中是非常常见的,但是它的语义却不是很明确,也是属于一个模糊的定位。可以看到在博客园的插入代码中,几乎全都是用的 <span> 标签。

HTML5提高

描述性文本相关

time 时间文本

<time> 标签里可以放一些时间的文本,这非常方便。尽管他看起来没有任何样式,这里再强调一下,不要看他样式,注意语义就行了。

HTML5提高

abbr 带有描述的文本

<abbr> 也是放的一个文本,它有个 title 属性,这里面可以放一些描述信息。当鼠标悬浮与其上方时,描述信息就会出来。可以看到文本下方有小虚线,不用在意。CSS可以帮你干掉他。

HTML5提高

sub sup 上下标

这个没什么好描述的,在上一篇文章中也写的非常的明白了。如果你经常使用数学之内的公式,那么你应该掌握它。

del 删除文本

在上一篇文章中是将它归类于文字类的,一个删除线。但是 <del> 本身的意思就是删除,我们再碰到如下的情景时可以使用它。

HTML5提高

ins 修正文本

<del> 可配套使用,一个代表已经废弃了,一个代表修正后的。如下图。

HTML5提高

s 不准确文本

它的语义为定义一些不是很准确的文本信息,虽然与 <del> 的使用效果是一样的,但是我们应该按照不同的语义划分来使用标签。

HTML5提高

code 代码文本

<code> 标签中应该放入的是代码,尽管它没有任何格式化,需要一些格式化插件来辅助完成代码的格式化。

HTML5提高

progress 进度条

可以用于显示进度条的完成时间,属性 max 为进度条的最大数量,属性 value 为当前的进度。后期可以使用js来进行控制。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
  <progress value="58" max="100"></progress>
</body>
</html>

强调文本相关

strong 非常重要

在上一篇文章中我给他定义为加粗,这是在效果上来定的。但是实际上它的语义应该为强调性的文本。

HTML5提高

em 比较重要

同上,也是属于强调性文本,但是强调的程度不同,这个应该轻一点。

HTML5提高

mark 值得记录

这个就相当于一个马克笔的效果,能够突出显示文本,因此我觉他的定义应该是值得记录的一段文本。

HTML5提高

引用相关

cite 引用信息

<cite> 标签通常表示它所包含的文本对某个参考文献的引用,或文章作者的名字。

HTML5提高

blockquote 块引用

<blockquote> 引用来源标签,一般为小段文本。

HTML5提高

q 行内引用

<q> 用于表示行内引用文本,在大部分浏览器中会加上引号。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
  <cite>狂人日记</cite>
  <blockquote>
    凡事总须研究,才会明白。古来时常吃人,我也还记得,可是不甚清楚。我翻开历史一查,这历史没有年代,歪歪斜斜的每叶上都写着“仁义道德”几个字。我横竖睡不着,仔细看了半夜,才从字缝里看出字来,满本都写着两个字是“吃人”!
  </blockquote>
  <cite>鲁迅先生</cite><q>吃人</q>用的恰到好处!
</body>
</html>

联系信息

address 地址

<address> 用于设置地址信息。一般放在 <footer> 页脚中。

HTML5提高

超链接

上篇文章中记录了 <a> 的一些使用小技巧。我在这里再例举几个。

邮箱链接

除了页面跳转外可以指定其他链接。使用以下方式也有缺点,邮箱可能会被恶意用户采集到。

<a href="mailto:c2323182108@gmail.com">发送邮件</a>

拨打电话

这个就主要针对移动端的用户了。

<a href="tel:10086">y移动客服</a>

下载文件

默认情况下使用链接可以下载浏览器无法处理的文件,如果下载图片需要后台语言告之浏览器 mime 类型。Ps:如果不懂 mime 的百度一下就知道了。

<a href="下载链接地址">下载文件</a>

表单

hidden属性 隐藏域

<input> type 有个 hidden 可以作为隐藏输入框,这个里面的值我们可以填好。用于隐藏的向后台提交一些数据。

HTML5提高

pattern属性 正则验证

当用户在 <input> 框输入内容后,可以设定 pattern 属性进行正则验证,还可以绑定 oninvalid 事件,如果验证错误则会触发该事件。注意,我们不单单该在前端验证,更应该在后端进行验证,二次验证才能确保数据的准确性,如果有用户修改页面中的代码,那么第一次验证就会出现问题,所以我们需要二次验证。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username" pattern="[\w]{3,18}" 
        oninvalid="javascript:alert('请输入正确的用户名,字母下划线组成长度3-18')">
        <button>提交</button>
    </form>
        
</body>
</html>

autocomplete属性 键入历史记录

我们可以为 <input> 设定属性 autocomplete 属性,它有2个状态为,一个 on 一个 off ,用来选择是否记住用户键入值的历史记录。这个属性默认的值为 on

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username" autocomplete="off">
        <button>提交</button>
    </form>
        
</body>
</html>

input type 日期与时间

<input> type date 时候,可以来上传一个年月日(标准时间)。当 <input> type time 时,可以上传时分。 是年周, 是年月。 则为本地化时间。 属性可以设置开始时间, 属性可以设置结束时间。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="date" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="time" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="week" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="month" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="datetime-local" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

button 按钮

我们在提交表单时除了使用 <submit> 标签外,也可以使用 <button> 按钮来进行提交,只需要将其 type 属性设置为 submit 即可。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <form action="#">
    <input type="hidden" name="hiddent_id" value="1">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <button type="submit">提交</button>
  </form>
</body>
</html>

多文件上传与类型限制

<form> 有个属性叫做 multiple ,可以支持多文件上传。还有个属性叫 accept ,用来指定上传文件的MIME类型。

<form action="" method="POST" enctype="multipart/form-data">
    <fieldset>
        <input type="file" name="icon" accept="image/png,image/gif" multiple>
    </fieldset>
    <button>保存</button>
</form>

datalist 数据列表

这个数据列表有点像 <select> 但是又不一样,它是通过 <input> <datalist> 以及 <option> 进行组合的。

<input> 有个属性为 list ,指定为 <datalist> id 即可。

HTML5提高

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" list="data_list">
        <datalist id="data_list">
​
            <option value="北京"></option>
            <option value="上海"></option>
            <option value="广州"></option>
​
        </datalist>
    </form>
        
</body>
</html>

多媒体

video 视频

尽管H5中已经支持 <video> 标签来插入视频,但是它原生的并不太好。我们应该用一些第三方的插件,如 阿里云播放器 video.js 等等。

属性 描述
autoplay 如果出现该属性,则视频在就绪后马上播放(需要指定类型如 type="video/mp4" )。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload=metadata 值将加载视频尺寸或关键针数据,目的也是减少带宽占用。 设置为 preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性,则向用户显示控件,比如播放按钮。 该属性是必须的。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
src 要播放的视频的 URL。

audio 音频

<audio> ,与视频使用方法基本一致。

属性 描述
autoplay 如果出现该属性,则视频在就绪后马上播放。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。 如果设置为 preload=metadata 值将加载视频尺寸或关键针数据,目的也是减少带宽占用。 设置为 preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
src 要播放的视频的 URL。

source 媒介元素

当有的浏览器不支持某种格式的多媒体,我们可以为他添加一些备用的。将 <source> 嵌入到 <video> 或者 <audio> 中即可。请注意设置 <source> src 属性以及 属性。

<audio controls autoplay loop preload="auto">
    <source src="houdunren.ogg" type="audio/ogg">
    <source src="houdunren.mp3" type="audio/mp3">
</audio>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

jQuery基础教程 (第4版)

jQuery基础教程 (第4版)

[美] Jonathan Chaffer、[美] Karl Swedberg / 李松峰 / 人民邮电出版社 / 2013-10 / 59.00

本书由jQuery API网站维护者亲自撰写,第一版自2008上市以来,一版再版,累计重印14次,是国内首屈一指的jQuery经典著作! 作为最新升级版,本书涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery M......一起来看看 《jQuery基础教程 (第4版)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器