HTMl5-------新增属性

mac2025-02-28  5

(一)HTML HTML5新增标签整理

HTML5增加了主要增加了一些结构标签,媒体标签,表单标签以及一些功能性标签

1,结构标签

section 定义文档中的节,如章节,页眉页脚等,可与和,h2等标签结合使用,表示文章结构article 定义页面独立的内容区域,如一篇文章aside 定义文档的头部区域header 定义文档的头部区域hgroup 对页面中一个内容区块的标题进行整合;标题组footer 定义也叫,如作者姓名,地址等nav 定义导航部分,他是有意义的标签,并不是在某处加上这个标签就有了当行的样式了,这只是有意义的div而已,在头部header中加入菜单标签<nav>,nav标签可以和<ul><li>标签何用figure 定义独立的刘内容,如图像,图片,照片,代码等 这个标签可以和他的配套标签联合使用<figcaption>,不过<figcaption></figcaption>中间写标题,p标签写内容 还可以和<dt><dd>联合使用,其中<dt></dt>是写标题,而<dd>是写内容的,

2,表单标签

需要注意兼容性问题,使用时需严格测试,大部分标签只有高版本浏览器支持

email 输入邮箱地址,提交表单时会自动验证是否合法;如<input type=“email”>url 输入yrl地址,提交表单时会自动验证是否合法,如<input type=“url”>number 输入域为数值,如 max:设定最大值 min:设定最小值 pattern:验证输入字段的模式 reqired:不可为空 step:规定合法的间隔range 包含一定范围内数字值的数字域 <input type=“range” min=“1” max=“10”> 特有属性介绍: max:设定最大值 min:设定最小值 step:规定合法的间隔date 从日期选择器中选择一个日期,如 <input type=“date”>datetime-local 从日期选择器中选择一个日期和事件,如<input type=“datetime-local”>month 选择一个月份如<input type=“mouth”>week 选择一个周 如<input type=“week”>search 搜索 如 <input type=“search”>clolr 颜色选取,可获取颜色响应的十六进制颜色值, 如 <input type=“color” value="#FFFFFF">

3,媒体标签

video 定义视频,IE9+,目前只支持MP4,Ogg,WebM格式,如 <video src=“movie.mp4” controls>您的浏览器不支持video标签</video> 或者 <video width=“320” height=“240” controls> <source src=“movie.mp4” type=“video/mp4”> <source src=“movie.ogg” type=“video/ogg”> </video> 属性介绍src视频urlautoplay视频就绪后马上播放controls向用户展示控件,如播放按钮height定义播放器高度width定义播放器宽度loop是否循环播放muted静音poster值为YRL,规定点击播放按钮前展示的图像proload视频在页面加载时就进行加载,并预备播放,如使用autoplay属性,则忽略该属性 audio 定义音频,IE9,目前只支持MP3,Ogg,Wav格式,如 <audio src=“misic.mp4” contorls>您的浏览器不支持audio标签</audio> 或者: <video width=“320” height=“240” controls> <source src=“misic.mp3” type=“audio/mp3”> <source src=“misic.ogg” type=“audio/ogg”> </video> 属性|介绍 ------------|---------------------- src|音频URL autoplay|视频就绪后马上播放 controls|向用户展示控件,如播放按钮 loop|是否循环播放 muted|静音 preload:视频在页面加载时就进行加载,并预备播放,如使用autoplay属性,则忽略该属性embed 定义嵌入的内容,可以是各种类型的内容,如插件,视频,音频等等 <embed src="demo.swf /> 属性介绍src内容YRLheight嵌入内容的高度width潜入内容的宽度type嵌入内容的MIME类型,如 application/x-shockwave-flash

还有一些其他属性可以根据引入的内容类型来选择使用,如当引用内容为音频或视频时,可使用autoplay,loop,lolume[音量调节]等属性.

4,新增其他功能标签

mark 标记文本,IE9,如,<mark>被标记文本

propress 进度条,IE9+ <progress value = “10” max=“100”>

time 标记时间,方便搜索引擎搜索,IE9+ 如 <time datetime=“2016-02-14”>情人节 还可以设置pudate属性,来表示该事件为文档的创建时间,注意兼容性问题

ruby 注释,rt内为注释的内容,rp内为浏览器不支持时展示的内容

cnavas 标签定义图形,比如图标和其他图像.改标签基于Javascript的绘图API

command 定义命令按钮,如单选按钮,复选框或者按钮,兼容性极差,IE9支持

details 用于描述文档或文档的某个部分的细节,类似于下拉列表,兼容性极差chrome与Safari支持,如 <details> <summary>指定的标题,用户点击标题时暂时下面的所有内容,内容可以是任何形式的内容 <div> <p>内容描述</p> </div> </details> 当增设open属性时,描述内容默认展示. <details open> <summary>指定的标题,用户点击标题时暂时下面的所有内容,内容可以是任何形式的内容 <div> <p>内容描述</p> </div> </details>

dialog 定义对话框,如提示框,兼容性极差,chrome与safari支持,如 <dialog>内容</dialog> 当增设open属性时,对话框显示 <dialog open>内容</dialog>

keygen 加密,新的web标准中已经废弃

output 计算结果输出展示,IE不支持,如: 属性介绍: name:定义唯一名称,提交表单时使用 for:计算中使用的元素 <from οninput=“x.value = parseInt(a.value)+parseInt(b.value)”> 0 <input type=“range” id=“a” value=“50”> 100+ <input type=“number” id=“b” value=“50”> = <output name=“x” for=“a b” > </form>

menu 这个标签可以和<li>标签合用 可以给邮件单机中添加自己的内容

(二)HTML5 新增属性

sizes sizes定义链接属性的大小,支队rel="ircon"其作用,宽度高度之间用x或者X分隔,如: base base为页面上所有的相对链接规定默认URL会默认目标,如

<base href=“http://wwww.junru.com/images/” taget="_blank"> <body> <img src=“demo.png”> <a href=“www.baidu.com”>将在新窗口打开,因为base的target属性为_blank

input标签新增属性 新增属性意义autocomplete是否启动自动完成功能autofocus页面加载时自动花去焦点height设置type=image的高度width设置type=image宽度required必填placeholder提示文字pattern指定输入格式,如pattern="[0-9]" //正则表达式max规定输入字段的最大值maxlenght规定输入字段中的字符的最大长度min最小值forminput元素所属的一个或多个表单,值必须是form_idformaction可以覆盖form的action属性formenctype覆盖表单的enctype属性formmethod覆盖表单的method属性formnovalidate覆盖表单的novlidate属性,如果使用该属性,则提交表单时不进行验证formtarget覆盖表单的target属性 a 超链接,注意:如果没有href属性,则hreflanh,media,rel,target,type不可用. 新增属性: download:指定下载链接 media;指定媒介类型 type:指定MINE类型ol有序列表 如: <ol start=“20” reversed> <li>one</li> <li>two</li> <li>three</li> </ol>style内嵌样式,如; <div> <style> h1{color:red;} p{font-szie:20px} <style> <h1>标签</h1> <p>内容</p> </div>iframe

新增属性|介绍 ------------|-----------------![在这里插入图片描述](https://img-blog.csdnimg.cn/2019110109561536.bmp seamless|使iframe看起来象是父文档的一部分,无边框,无边距 secdoc|指定页面中html内容展示在iframe中,src失效 sandbox|禁止一些行为,禁止表单提交,禁止运行JS脚本,由四个参数可指定允许的操作

script 新增async与defer属性的区别(蓝色:JS脚本加载的事件;红色:JS脚本执行的事件;)

没有async与defer参数是,浏览器会立即加载并执行JS脚本,按照文档的顺序依次执行 defer:文档的加载与JS脚本的加载同时执行,等文档所有元素解析完成后,domContentLoaded事件触发事件才执行 async:文档与js脚本的华仔与执行是并行进行的,即异步执行

新增全局属性详解

data-* 自定义数据属性,属性名中不要包含大写字母,如<p data-type="content>内容hidden 隐藏spellcheck 拼写检查[错误划红线]<textarea spellcheck=“teue”></texttarea>contentteditable 指定元素可编辑,如 <p contenteditable=“true”>内容<p>draggable 指定元素可拖动具体需结合ondragstart等属性来使用,如: <p draggable=“true">内容</p> 简单的拖动效果实现: <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <p draggable=“true" id="drag" ondragstart="drag(event)">拖动的内容</p> 代码说明: 1. 拖动数据:ondragstart指定了被拖动的数据 function drag(event){ event.dataTransfer.setData("Text",ev.target.id); //数据类型text,可拖动元素ID为drag } 2. 放到何处: ondragover指定了在何处放置被拖动的数据 function allowDrop(event){ event. preventDefault( ); } 3. 放置: ondrop 放置时调用drop函数 function drop(event){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
最新回复(0)