程序博客网 > 淘宝如何找相似图片

html5新增标签及属性

来源：互联网 发布：淘宝如何找相似图片 编辑：程序博客网 时间：2024/05/17 20:32

Html5与Html4的区别

1.推出的理由及目标和语法的改变

1）html5改进意图

  • Web浏览器之间的兼容性很低
  • 文档结构不够明确
  • Web应用程序的功能受到了限制

非革命性改变, 是应时代需求发展性改变

2）浏览器厂商对HTML5的支持

微软(IE), Google(Chrome), 苹果, Opera, Mozilla(Firefox)

3）语法的改变

  • 内容类型(不变:扩展名仍为html/htm)
  • DOCTYPE声明(不再需要声明版本 <!DOCTYPE html>)
  • 指定字符编码(直接<meata charset="UTF-8">)
  • 可以省略标记的元素
  • 具有boolean值的属性
<input type="checkbox" checked>     #true<input type="checkbox" checked="checked">       #true<input type="checkbox" checked="">      #true<input type="checkbox">     #false
  • 1
  • 2
  • 3
  • 4
  • 省略引号
<input type="checkbox" checked=checked>
  • 1

2.新增和废除的元素和属性

1）新增的元素

  • 新增的结构元素
    section, article, aside, header, hgroup, footer, nav, figure
  • 新增的其他元素
    video, audio, embed, mark, progress, meter, time, ruby, rt, rp, wbr, canvas(画布), command, details, datalist, datagrid, keygen, output, source, menu
  • 新增的input元素类型
    email, url, number, range, Date Picters

2）废除的元素

  • 能使用CSS替代的元素:basefont, big, center, font, s, tt, u等
  • 不再使用frame框架
  • 只有部分浏览器支持的元素
  • 其他被废除的元素

3）新增的属性

  • 表单相关的属性
  • 链接相关的属性
  • 其他属性

3.新增和废除的全局属性

  • contentEditable
  • designMode
  • hidden
  • spellcheck
  • tabindex
contenteditable

指定元素内容是否可编辑

<ul contenteditable>    <li>列表1</li></ul>
  • 1
  • 2
  • 3
  • 4
desigmode
用来指定整个页面是否可编辑，使上下文的contenteditabe都为true，只能在js脚本内修改，有on/off
hidden
为true时使元素处于不可渲染的隐藏状态，可用js脚本更改，为bool类型（true/false）
spellcheck
对input输入进行语法/拼写检查
tabindex
对于tab键的访问设定顺序(1,2,3), 在默认下只有表单和链接可以tab, 可以加该属性来获取tab交互(-1:无法通过tab访问,但存在tab)

html5新增的结构元素

1.HTML5新增的主体结构元素

1）article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一片博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。article元素是可以套嵌使用的。article元素可以用来表示插件。
  • 1
  • 2
  • 3
  • 4
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>article元素</title></head><body>    <article>        <header>            <h1>这是标题</h1>            <p>Hello to article</p>        </header>        <!--<P>-->            <!--Hello-->        <!--</P>-->        <article>            <header>                作者            </header>            <p>                评论            </p>            <footer>                time            </footer>        </article>        <footer>            <p>这是底部</p>        </footer>    </article><!--article表示插件内嵌在页面中-->    <article>        <h1>这是一个内嵌页面</h1>        <object>            <embed src="#" width="600" height="400"></embed>        </object>    </article></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40

2）section元素

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
  • 1
  • 2

注意

  • article元素可以看成一个特殊的section，都用来分块，但article更加强调独立性，不同内容用article，内容分块用section；
  • 如果用article元素，aside元素，nav元素更符合使用条件，那不要使用section元素；
  • 没有标题内容不要使用section元素；
  • section只用来物理结构上的分块，不要将section元素作为设置样式的页面容器（用div）；

3）nav元素

nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素中即可。
  • 1
  • 2
应用场景：
传统导航条、侧边栏导航、业内导航、翻页操作

注意：不要使用menu元素代替nav元素，menu元素用于交互的菜单

4）aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
  • 1
  • 2
应用：
1. 包含在article元素中作为内容的附属信息
2. 当前页面或站点全局的附属信息

5）time元素与微格式

微格式与time的由来：
利用html5的class属性为网页添加附属信息（时间，电话，邮箱等）的方法；在之前的html中时间的编码容易出现问题，所以增加了time元素，可以改善编码，容易识别时间信息
<body>    <time datetime="2016-3-8">2016-3-8</time>    <time datetime="2016-3-8T23:30">2016-3-8</time>    <time datetime="2016-3-8T23:30Z">2016-3-8</time>    <time datetime="2016-3-8T23:30+09:30">2016-3-8</time></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注：T-分隔符；Z表示UTC标准时间；+时差

6）pubdate属性

可选的bool类型属性，说明time元素代表了整个文章/网页的发布日期
  • 1
  • 2
<body>    <time datetime="2016-3-8" pubdate="true">2016-3-8</time></body>
  • 1
  • 2
  • 3

2.HTML5新增的非主体结构元素

  • header元素
  • footer元素
  • hgroup元素
  • address元素

1）header元素

是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区域块的标题，但是也可以包含其他内容，例如表格、搜索表单或相关的logo图片。
  • 1
  • 2

用来代替之前的<div class="header"></div>

2）footer元素

可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
  • 1
  • 2

用来代替之前的<div class="footer"></div>

3）hgroup元素

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组。
  • 1
  • 2

4）address元素

用来在文档中呈现联系信息，address应该不只用来呈现电子邮件或真实地址，还用来展示跟文档有关的联系人的所有联系信息。
  • 1
  • 2

5）HTML5的结构

  • 显示编排内容区域块
明确的使用section等元素创建区域块
  • 1
  • 2
  • 隐示编排内容区域块
    标题分级、不同区域块使用相同标题
不适用区域元素，根据需求使用h1~h6各级标题和hgroup自动生成区域
  • 1
  • 2

1.表单新增元素与属性

1）标签的control属性

  在HTML5中，可与在标签内部防止一个表单元素，并且通过该标签的`control`属性来访问表单元素。
  • 1
  • 2
<body>    <script>        function setValue(){            var label = document.getElementById("label");            var textbox = label.control;            textbox.value = "010010";        }    </script>    <form>        <label id="label">            邮编:            <input id="txt_zip" maxlength="6">            <small>请输入六位数字</small>        </label>        <input type="button" value="设置默认值" onclick="setValue()">    </form></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

2）表单内元素的formaction属性

可以通过此属性为表单所有提交按钮设置不同的属性（在按钮标签中设置）以将表单提交到不同页面。(action在form中设置指定唯一目标）
  • 1
  • 2

/< form id="test" action="xx.jsp">/

<body>    <form id="testform">        <input type="submit" name="1" value="1" formaction="xx1.jsp">提交到1</input>        <input type="submit" name="1" value="1" formaction="xx2.jsp">提交到2</input>    </form></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3）表单内元素的formmethod属性

对每一个表单元素分别指定不同的提交方法。（GET/POST）
  • 1
  • 2
<body>    <form id="testform" action="xx.jsp">        <input type="submit" name="1" value="1" formmethod="post">提交到1</input>        <input type="submit" name="1" value="1" formmethod="get">提交到2</input>    </form></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

4）表单内元素formenctype属性

表单具有一个enctype属性，用于指定在表单发到服务器之前应该如何对表单内的数据进行编码。html5中可以使用formenctype属性对表单元素分别指定不同的编码方式。
  • 1
  • 2
<body>    <form>        <input type="text" formenctype="text/plain">        <input type="text" formenctype="multipart/form-data">        <input type="text" formenctype="application/x-www-form-urlencoded">    </form></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

5）表单内元素的formtarget属性

对多个按钮分别指定提交后在何处打开所需加载的页面。
  • 1
  • 2

target/formtarget=

  • _blank:在新的浏览器页面打开
  • _self:在相同的框架（frame）中打开
  • _parent:在父框架中打开（与_self效果相似都依赖于frame）
  • _top:在当前窗口中打开。（默认）
  • framename:在指定框架中打开

6）表单内元素的labels属性

在html5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
  • 1
  • 2
<body>    <script>        function Validate(){            var txtName = document.getElementById("txt_name");            var button = document.getElementById("btnValidate");            var form = document.getElementById("testform");            if(txtName.value.trim() == ""){                var label = document.createElement("label");                label.setAttribute("for", "txt_name");                form.insertBefore(label, button);                txtName.labels[1].innerHTML = "input name";            }        }    </script>    <form id="testform">        <label type="label" for="txt_name">name:</label>        <input id="txt_name">        <input type="button" id="btnValidate" value="check" onclick="Validate()">    </form></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

7）表单内元素的form属性

在html5中表单内的从属元素可以书写在页面的任何地方，只要为该元素指定一个form属性，值为表单的id，即可声明从属。
  • 1
  • 2
<body>    <form id="testform">        <input type="text">    </form>    <textarea form="textform"></textarea></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

8）表单image提交按钮的height属性与width属性

来指定图片形式提交按钮的宽高
  • 1
  • 2

2.文本框属性

1）文本框的list属性

在html5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是html5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素默认本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
  • 1
  • 2
解释
有关联datalist的list的输入框有一个下拉菜单，中的内容为datalist中的内容，可以输入，也可以选择。
<form>    <input type="text" name="greeting" list="greetings">    <datalist id="greetings" style="display:none"> /*写明隐藏*/        <option value="html">html</option>        <option value="ios">ios</option>    </datalist></form>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2）文本框的autocomplete属性

帮助输入所用的自动完成功能，使用`autocomplete`属性后之前由输入值可见造成的安全性问题得到很好的控制。
  • 1
  • 2

3）文本框的pattern正则表达式属性

将input的属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当不符合格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。
  • 1
  • 2
<form>    请输入内容    <input pattern="[A-Z]{3}" name="part"> /*只允许输入3个大写字母*/    <input type="submit"></form>
  • 1
  • 2
  • 3
  • 4
  • 5

4）文本框selectionDirection属性

在input和textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取文字方向。正/没有选取任何文字：forward，反：backward。
  • 1
  • 2
<body>    <script>        function AD(){            var control = document.forms[0]['text'];            var Derection = control.selectionDirection;        }    </script>    <form>        <input type="text" name="text">        <input type="button" value="点击我" onclick="AD()">    </form></body>/*捕捉用户的文本选择信心*/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

5）文本框的placeholder属性

`placeholder`是指当文本狂处于问输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。
  • 1
  • 2
<input type="text" placeholder="请输入用户名">
  • 1

6）文本框autofocus属性

为文本框或按钮加上autofocus属性，当页面打开时，该输入框控件自动获得光标焦点。
  • 1
  • 2

7）文本框required属性

可以应用到大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字（浏览器固定的提示内容）。
  • 1
  • 2

8）复选框的indeterminate属性

对于复选框checkbox来说，过去只是选取与非选取的两种状态。在html5中，可以在js脚本中对该元素使用indeterminate属性来说明复选框处于“尚未明确是否选取”状态。
  • 1
  • 2
XXX.indeterminate = true;
  • 1

转载自：http://blog.csdn.net/SkyeyesXY/article/details/50837923

阅读全文
0 0
淘宝如何找相似图片 淘宝如何找相似图片
原创粉丝点击
热门IT博客
淘宝客店铺推广淘宝客店铺推广
我赢职场java视频网盘我赢职场java视频网盘
一知f君2月13号视频
发型设计软件哪个好
php面向对象的实例
中教数据库官网
ubuntu 16.04 jdk8
linux ip转发配置
光学镜头设计软件
谢娜吴昕关系知乎
win10登录界面域名
数据库引擎的作用
武大网络空间安全学院
js设置按钮title值
ubuntu p2p下载工具
linux修改时间格式
mac pro 上网慢
自学ps美工多久能学会
房屋中介软件
八一八沉珂淘宝店
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 ps彩带素材 彩带折花大全图解 一条彩带拉花大全图解 彩带编织手链 彩带装饰房间图片 塑料彩带折花大全图解 彩带折星星的教程一步一步教 彩带蝴蝶结的折法 防鸟彩带有用吗 彩带编织图解 彩带怎么做蝴蝶结 彩带怎么弄卷 包装礼盒彩带打法 气球彩带装饰图片 彩带舞基本动作 彩带花的折法步骤图 如何用彩带做花 简单彩带花折法步骤图 彩带怎么装饰 用彩带做蝴蝶结 彩带包装礼盒 怎样用彩带做蝴蝶结 如何用彩带做蝴蝶结 塑料彩带折花 圣诞彩带装饰 彩带花怎么做 彩带蝴蝶结系法图解 彩带装饰效果图 手工彩带制作方法 彩带怎么折花 彩带花的折法大全 彩带折花步骤图解 怎样用彩带折玫瑰花 彩带怎么编花 彩带折玫瑰花教程 塑料彩带花的折法 彩带编花教程 彩带的编织方法 塑料彩带蝴蝶结的折法 彩带蝴蝶结的打法 彩带风铃制作图解

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里