HTML5标签的改变

浏览数：26 / 时间：2015年06月09日
一.新的文档类型声明(DTD)
在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。
HTML 5的DTD声明为:<!doctype html>。<!DOCTYPE html >等也是正确的，因为HTML语法是不区分大小写的。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

 HTML5在链接外部js文件或css文件的时候type属性不再是必需的了，可以直接如下：

<script src="js/jquery-1.8.2.min.js"></script>

 链接CSS文件也是类似，而且HTML5不区分大小写，但在开发中最好区分大小写

 

 

 

二.新增的HTML5标签
新增的HTML5标签-结构标签：新的结构标签带来的是网页布局的改变使我们的代码变得更有意义及提升对搜索引擎的友好。搜索引擎能比以前更好的理解我们的网页，并评定网页内容。结构标签：(块状元素) 有意义的div
　　<article> 标记定义一篇文章
　　<header> 标记定义一个页面或一个区域的头部
　   <nav> 标记定义导航链接
　　<section> 标记定义一个区域
　　<aside> 标记定义页面内容部分的侧边栏
　　<hgroup> 标记定义文件中一个区块的相关信息
　　<figure> 标记定义一组媒体内容以及它们的标题
　　<figcaption> 标签定义 figure 元素的标题。
　　<footer> 标记定义一个页面或一个区域的底部
　　<dialog> 标记定义一个对话框(会话框)类似微信
 
新增的HTML5标签-多媒体交互标签：HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验
　　<video> 标记定义一个视频
　　<audio> 标记定义音频内容
　　<source> 标记定义媒体资源 
　　<canvas> 标记定义图片 
　　<embed> 标记定义外部的可交互的内容或插件 比如flash
 
新增的HTML5标签-Web应用标签：
　　<menu>命令列表
　　<menuitem>menu命令列表标签 FF（嵌入系统）
　　<command> menu标记定义一个命令按钮
　　<meter>状态标签(实时状态显示:气压、气温)C、O
　　<progress>状态标签 (任务过程:安装、加载) C、F、O
　　<datalist> 为input标记定义一个下拉列表,配合option F、O
　　<details> 标记定义一个元素的详细内容 ，配合dt、dd   C
 
新增的HTML5标签-其他标签
 　　注释标签
　　　　<ruby> 标记定义 注释或音标
　　　　<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
　　 　  <rt> 标记定义对ruby的注释内容文本
 
　　其他标签
　　　　<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
　　　　<mark> 标记定义有标记的文本 (黄色选中状态)
　　　　<output> 标记定义一些输出类型,计算表单结果配合oninput事件
　　　　<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
 
    
 
 
三.删除的HTML标签
纯表现的元素：
　　basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：
　　frame，frameset，noframes；
产生混淆的元素：
　　acronym ，applet，isindex，dir。
 
 
 
 
四.重新定义的HTML标签
HTML元素
HTML5中的意义
<b>
代表内联文本，通常是粗体，没有传递表示重要的意思
<i>
代表内联文本，通常是斜体，没有传递表示重要的意思
<dd>
可以同details与figure一同使用，定义包含文本，dialog也可用
<dt>
可以同details与figure一同使用，汇总细节，dialog也可用
<hr>
表示主题结束，而不是水平线，虽然显示相同
<menu>
重新定义用户界面的菜单，配合commond或者menuitem使用
<small>
表示小字体，例如打印注释或者法律条款
<strong>
表示重要性而不是强调符号

 

 

 

五、崭新新的页面布局
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5标签的改变</title>
<style>
    /*   *{border:1px solid #900;height:20px;}所有HTML5结构标签本质上就是一个div标签，只不过是有意义的div*/
    
    /*页面头部header*/
    header{
        height:150px;
        background:#36F;
    }
    nav{
        background:#FF0;
        height:30px;
        margin-top:100px;
    }
    nav ul li{
        float:left;
        width:100px;
        height:30px;
        text-align:center;
        line-height:30px;
    }
    
    /*页面中间部分div*/
    div{
        margin-top:10px;
        height:1100px;
    }
    section{
        height:1100px;
        background:#F60;
        width:70%;
        float:left;
    }
    section article{
        background:#FF0;
        width:500px;
        margin:0 auto;/*居中*/
        text-align:center;
    }
    aside{
        height:1100px;
        background:#F60;
        width:28%;
        float:right;
    }
    
    /*页面底部footer*/
    footer{
        height:100px;
        background:#0F3;
        clear:both;
        margin-top:10px;/*如果div没有高度，这句没效果*/
    }
</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>
            <p>This is section标签</p>
            <article>
                <h2>春晓</h2>
                <p>
                    春眠不觉晓，<br/>
                    处处蚊子咬，<br/>
                    打上敌敌畏，<br/>
                    不至死多少。<br/>
                </p>
            </article>
            <hr />
            
            <article>
                <h2>上学歌</h2>
                <p>
                    太阳当空照，<br/>
                    花儿对我笑，<br/>
                    小鸟说早早早，你为什么背上小书包?<br/>
                    我要炸学校老师不知道，一拉线，赶快跑，<br/>
                    轰的一声，学校炸没了。<br/>
                </p>
            </article>
            <hr />
            
            <!--<figure>标签通常和<figcaption>一起使用   <figcaption>用于做标题-->
            <figure>
                <figcaption>UFO</figcaption>
                <p>不明飞行物 Unknown Flying Object</p>
            </figure>
            <figure>
                <dt>DDS</dt>
                <dd>大屌丝</dd>
            </figure>
            <hr />
            
            <dialog>
                <dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
                <dd>悟空:...(看着)</dd>
                <dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
                <dd>悟空:...(纠结)</dd>
                <dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>
                <dd>悟空:我靠!(一棍子抡上去！)</dd>
            </dialog>
            
            <hr/>
            
            <!--<menu>标签可以和<li>一起用-->
            <menu>
                <li>点击</li>
                <li>右键单击</li>
            </menu>
            <hr/>
            
            <!--使用<menu>标签和<menuitem>标签组合使用的时候 <menu>标签要加上一个类型属性   <menuitem>要加上三个属性，第一个是lable onClick  icon
                最后使用div来使用这个整个标签也可以用span
            -->
            <span contextmenu="candan">右键单击我试试</span>
                <menu type="context" id="candan">
                    <menuitem label="菜单一" onclick="alert(‘我是一个寂寞‘)" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem>
                </menu>
                <hr />
                
            
            <meter min="0" max="10" value="3" low="3" high="7" ></meter>
            
            <progress max="100" value="0" id="pro"></progress>
                <script>
                    var pro =document.getElementById(‘pro‘);
                    setInterval(function(){
                        pro.value+=1;
                    },100);
                </script>
                <hr />
            
            <details>
                    <dt>这是一个问题？</dt>
                    <dd>to be or not to be</dd>
                    <dt>这是一个问题？</dt>
                    <dd>to be or not to be</dd>
                    <dt>这是一个问题？</dt>
                    <dd>to be or not to be</dd>
                </details>
                <hr />
                
                
            <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
                <hr />
                
                
                
                女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，
                于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·
            
            
         </section>
        <aside>
            <p>This is aside标签</p>
            <hgroup>
                <!--<hgroup>标签就是一个标题组，存放标题标签     这里放置h1到h6的标签，一般不要用h1 h1标签权限太重一般用于LOGO和网站名称-->
                <h3>女生宿舍为何频频被盗</h3>
                <h3>两百头母猪为何半夜惨死</h3>
                <h3>是人性的扭曲？</h3>
                <h3>还是道德的沦丧！</h3>
            </hgroup>
        </aside>
    </div>
    <footer>
        <p>This is Footer标签</p>
        <hr/>
        <small>法律条文</small>
        <small>联系我们</small>
        <small>客户意见</small>
        <small>商户合作</small>
    </footer>
</body>
</html>

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 src 使用 com log html 文件 class style 代码 src 使用 com log html 文件

相关文章

随机文章

您可能还喜欢

您可能还喜欢