html5 新特性

来源：互联网发布：淘宝联盟佣金怎么提现编辑：程序博客网时间：2024/05/16 10:26

目前大部分浏览器支持html5，例如 ie 10以下不怎么支持html5。 firefox对html5支持比较好。

html5

1 dtd 申明

<!doctype html>

2 新增的标签: 网页布局的提升和搜索引擎的友好

结构标签: article

header

nva

section

aside

hgroup

figure

figcaption

footer

dialog

多媒体交互标签：出现意外这富媒体的发展以及不需要装插件的情况下即可操作媒体文件，

video：视频

source：媒体资源

audio：音频

canvas：画图

embed：外部可交互的内容或插件

新增的web应用标签：

<menu>：命令列表目前浏览器不支持

<meter>：状态标签

<progress>:进度标签

其他标签：

<ruby>:注释标签1

<rp>:注释标签2

<rt>:注释标签3

<keygen>:

<mark>

<time>:目前浏览器不支持

删除的标签：

纯表现的标签：<big> <center> <font> <tt>

负面影响的标签：frame ，frameset， noframes html5是删除但是不代表不能用，但是没有删iframe

产生混淆的标签：dir aplate

重新定义的标签：

<B>：加粗字体，意义做了变化不表示重要的意思

<I>：斜体，意义做了变化不表示重要的意思

<small> ：表示小字体

<dd>:可以喝details和dialog 标签一起使用

<dt>

<hr> :表示主题结束

以上标签的HTML test页面：

<!DOCTYPE HTML />
<html>
    <head>
        <style type="text/css">
           *{border:1px solid none;height:30px;}
           /*所有的结构标签本生就是div标签只不过是有意的*/

           header{ height:150px; background-color:Blue;}
           nav{ height:70px; background-color:Yellow; margin-top:30px;}
             nav ul li{ height:30px; width:30px; float:left;}


           div{ margin-top:10px; height:700px;}
           section{ height:700px; background-color:Blue; width:70%; float:left;}
           article{ width:500px; background-color:Yellow;margin:0 atuo; text-align:center; }
           aside{height:700px; background-color:Blue; width:28%;float:right;}



           footer{ height:100px; background-color:Blue; margin-top:10px; clear:both;}
        </style>
    </head>
    <body>
       <header>
       <p>this is header</p>
       <nav>
            <ul>
                <li>首页</li>
                 <li>企业</li>
                 <li>作业</li>
                 <li>不务正业</li>
                 <li>午夜</li>
            </ul>
       </nav>

       </header>
       <div>
            <section>this is section
            <article>
                <h2> 春晓</h2>
                <p>
                春眠不觉晓
              <br />
                处处蚊子咬
                             <br />

                搭上敌敌畏
                             <br />

                不知死多少
                </p>
            </article>
            <br />
              <article>
                <h2> 上学歌</h2>
                <p>
                 太阳当空照
              <br />
                花儿对我笑
                             <br />

                小鸟说早早早
                             <br />

                你为什么背上小书包
                </p>
            </article>
            <br />
              <article>
                <h2> 乌衣巷</h2>
                <p>
                  旧事王谢堂前燕
              <br />
                飞入寻常百姓家
                             <br />

            </article>
            <br />


             <figure>
                <figcaption>ufo</figcaption>
                <p>
                 ufo:不明飞行物 unknown flying object
                </p>
             </figure>

               <figure>
                   <dd>dds</dd>
                   <dt>大屌丝 </dt>

             </figure>

                 <dialog>
                      <dd>唐僧说悟空你有调皮了，观音姐姐的月光宝盒怎么能乱扔了</dd>
                      <dt>悟空无语。。。。。 </dt>
                      <dd>唐僧说说这样乱扔是不对的啊，砸到小朋友怎么办就是砸不到小朋友砸到花花草草也是不好的啊</dd>
                       <dt>悟空无语纠结 </dt>
                       <dd>唐僧又说悟空你想要吗想要你就告诉我呀你不告诉我我怎么知道你想要呢，，，</dd>
                       <dt>悟空说我靠！一棍子抡上去去了 </dt>
                </dialog>

                <span contextmenu="candan">单击菜单</span>
                <menu   type="context" id="candan">
                    <menuitem label="菜单特使-" onclick="alert(' i am shy ')">

                    </menuitem>
                </menu>

                <progress max="100" value="1" id="pro"></progress>
                 <script>
                     var pro = document.getElementById('pro')
                     setInterval(function () {
                         pro.value += 10;
                     }, 1000)
                 </script>

                 <details>
                   <dd>这是一个问题 </dd>
                   <dt>选择还是不选择</dt>
                    <dd>这是一个问题 </dd>
                   <dt>选择还是不选择</dt>
                    <dd>这是一个问题 </dd>
                   <dt>选择还是不选择</dt>
                 </details>

                 /*注释标签*/
                 <ruby>
                        丁<rp>(</rp></r><rt>ding<rp>)</rp></rt>
                 </ruby>


                女人 <mark>最喜欢的事情是逛街，，吃零食 </mark>，，逛街，，吃零食，，偶然呜呜哭，于是女人是逛吃逛吃，，呜呜。

            </section>
            <aside>this is aside
            <hgroup>
                 <h3>女生宿舍为何频频被盗</h3>
                 <h3>200头母猪为何半夜踩死</h3>
                 <h3>是人性的扭曲还是道德沦丧</h3>
                 <h3>周杰伦合适结婚</h3>
            </hgroup>

            </aside>
       </div>
       <footer>this is footer
       <small>法律条文</small>
        <small>联系我们</small>
       </footer>
    </body>
</html>

html5新增的input类型有：email,url,number,range,date pickers,datalist,telephone,search,color

input标签新增属性有： autofocus ：聚焦， form：（值为表单id）关联表单，required：是否必填，placeholder：默认值,Pattern：正则表达式

http://blog.csdn.net/u012116457/article/details/24577509

http://blog.csdn.net/u012116457/article/details/24663905

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form表单学习笔记</title>
</head>
<body>
<!-- 在旧版的html中，form表单与input等元素必须嵌套使用，为了排版方便，在html中提出了新方法
表单的多个内容不必非得放到一块，为前台美工提供了很大的方便-->
<form id="regForm">
邮箱 :<input type="email" name="user_email" autofocus="autofocus"/>
</form>
用户名：<input name="name" type="text" form="regForm"/>
<input type="submit" form="regForm"/>
http://blog.csdn.net/u012116457/article/details/24577509
1.属性：required 值：required 表单拥有该属性表示内容不能为空，为必填项
<input name="name" type="password" required="required" form="regForm"/>
2.属性：placeholder 值：提示文本表单的提示信息，若存在默认值则不显示
用户名：<input type="text" name="name" value="默认值" form="regForm"/>
<!-- 当点击提交时，若用户不对其进行修改，会把“默认值”这三个字也传向后台，而我们往往不需要，
html5为我们提供的这个新属性，如果用户不对默认值进行修改，其内容将不会被提交 -->
用户名：<input type="text" name="name" placeholder="默认值" form="regForm"/>
3.属性：autofocus 值：autofocus 自动聚焦属性，页面加载完成后光标会自动聚焦到指定表单
用户名：<input type="text" name="name" autofocus="autofocus" form="regForm"/>
刷新页面后，光标会自动聚焦到该文本框中
4.属性：Pattern 值：正则表达式输入的内容必须匹配到指定正则
<!-- 在以往的html中使用正则需要写到js等里边，html5中可以直接使用正则表达式，在html中就可以直接判断，
是不是省了好多事情呢？ -->
学号：<input type="text" name="num" Pattern="\d{8}"/>
</body>
</html>

0 0