• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5学习笔记简明版(6):新增属性(1)

HTML5学习笔记简明版(6):新增属性(1)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,新增属性等相关知识,匿名希望在学习及工作中可以帮助到您

a和area下的media属性

为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问:http://dev.w3.org/csswg/css3-mediaqueries/#media0

代码示例:

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
HTML5 a media attribute.
</a>

area下的hreflang, type, rel属性

为了保存和a元素以及link元素的一致性,area元素增加了hreflang, type, rel等属性。

属性

值

描述

hreflang

language_code

规定目标 URL 的语言

media

media query

规定目标 URL 是为何种媒介/设备优化的

rel

alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag

规定当前文档与目标 URL 之间的关系

type

mime_type

规定目标 URL 的 MIME 类型

base下的target属性

base下的target属性和a的target属性是一样的,目的很多老版本浏览器早就一起支持了。

注1:target必须在所有连接元素之前声明。

注2:如果声明多个,以第一个为准。

<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the <base> element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

点击上面的连接,将跳转到http://www.example.com/news/archives.html。

meta下的charset属性

charset是用来定义文档的encoding方式的,如果在XML里定义了该属性,则charset的值必须是不区分大小写的ASCII以便match UTF-8,因为XML文档强制使用UTF-8作为encoding方式的。

注:meta属性上的charset属性在XML文档里是不起作用的,仅仅是为了方便与XHTML直接互相迁移。

不能声明多个带有charset属性的meta元素。

在HTML4里,我们不得不这样定义:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

在HTML5里,我们这样定义就行了:

<meta charset="ISO-8859-1">

autofocus属性

HTML5为input, select, textarea和button元素增加了一个autofocus属性(hidden的input不能使用),它提供了一种声明式的方式来定义当页面load以后,焦点自动作用于当前元素上。使用autofocus可以提高用户体验,比如我们在登录页面设置,页面load以后自动将焦点设置到用户名的textbox上。

<input maxlength="256" name="loginName" value="" autofocus>
<input type="submit" value="Login">

注1:一个页面声明一次autofocus属性。

注2:一个页面里不是必须要设置autofocus的。

placeholder属性

input和textarea元素新增加了placeholder属性,该属性是提升用户输入内容。当用户点击的时候,该内容文本自动消失,离开焦点并且值为空的话,再次显示。以前我们都是使用JavaScript代码来实现,其实蛮复杂的,有了placeholder属性就爽了,直接写成下面下这样的代码:

<input type="username" placeholder="请输入你的用户名">

form属性

form属性(不是<form>元素),是一个划时代的属性,它允许你将<form>表单里的表单控件声明在表单外门,只需要在相应的控件上设置form属性为指定的<form>表单的id就行了,不需要非得把元素声明在<form>元素里了,解放啦。

代码如下:

<label>Email:
 <input type="email" form="foo" name="email">
</label>
<form id="foo"></form>
支持该属性的元素有:input, output, select, textarea, button, label, object和fieldset。

required属性

required属性是一个验证属性,表明该控件是必填项,在submit表单之前必须填写。可用的元素是:input, select和textarea(例外: type类型为hidden, image或类似submit的input元素)。

如果在select上使用required属性,那就得设置一个带有空值的占位符option。代码如下:

<label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Gree
  


 

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03html5 css3实例教程 一款html5和css3实现的小机器人走路动画_html5教程技巧
  • 2018-12-03关于 HTML5 视频编码,听说 Google 没那么努力推 WebM 了,听说 Mozilla 貌似要采用 H.264 了,这是不是意味著 H.264 最终会胜出?
  • 2017-08-06HTML5中的postMessage API基本使用教程
  • 2018-12-03 百度钱包ios移动端html5网页无法自动关闭问题
  • 2017-08-06突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
  • 2018-12-03H5怎么操作WebSQL数据库
  • 2018-12-03HTML5互联网:地铁行业新模式
  • 2018-12-03深入解析HTML5的IndexedDB索引数据库_html5教程技巧
  • 2017-08-06HTML5 Convas APIs方法详解
  • 2018-12-03利用分层优化 HTML5 画布渲染

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用HTML和CSS实现WWDC 2015上的动画效果
    • HTML5新知识
    • HTML5 新事件 小结_html5教程技巧
    • input实现文字超出省略号(代码示例)
    • HTML5中的视频代码详解
    • h5在网页中上传超大文件教程实例
    • content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计?
    • HTML 5.1来了 9月份正式发布 更新内容预览
    • html5 datalist标签使用示例(自动完成组件)
    • 处理HTML5新标签的浏览器兼容版问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有