首页 > Web开发 > 详细

XHTML

时间:2019-05-24 13:17:12      阅读:80      评论:0      收藏:0      [点我收藏+]

XHTML 介绍

技术分享图片

技术分享图片

 

XHTML元素

技术分享图片

 

 

XHTML属性

技术分享图片

 

HTML新增的全局属性

全局属性:对任何元素都可以使用的属性

技术分享图片

 

designMode属性只能在JavaScript中使用

 

技术分享图片
<!DOCTYPE html><!--HTML5版本声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">   <!--编码格式-->
    <title></title>

</head>
<body>
    <h2> 可编辑列表</h2>
    <ul contenteditable="true">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <br/><br/><br/><br/>

    <h2>不可见状态</h2>
    <ul hidden="">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <br/><br/><br/><br/>

 <input type="text" spellcheck="">
<br/><br/><br/><br/>

    <a href="#" tabindex="1">hello</a>
    <a href="#" tabindex="4">hello</a>
    <a href="#" tabindex="3">hello</a>
    <a href="#" tabindex="2">hello</a>
    <ul tabindex="-1">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

</body>
</html>
View Code

 

 

HTML5新增主体结构元素

1. article元素

技术分享图片

技术分享图片
<!DOCTYPE html><!--HTML5版本声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">   <!--编码格式-->
    <title>article</title>
</head>
<body>
    <article>
        <header>
            <h1> 极客学院</h1>
            <p> Hello ,欢迎来到极客学院</p>
        </header>
<!--        article元素可以嵌套使用-->
               <!-- <article>
                    <header>
                        <p> 设计属于自己风格的页面</p>
                    </header>
                    <footer>
                        <p> 设计者:myself</p>
                    </footer>
                </article>-->
        <footer>
            <p>这是底部</p>
        </footer>
    </article>
<!--    article元素可以用来表示插件-->
       <!-- <article>
            <h1> 这是一个内嵌页面</h1>
            <object>
                <embed src="#" width="600" height="400" />
            </object>
        </article>-->
</body>
</html>
View Code

 

2.section元素

技术分享图片

 

 

1.不要将section设置样式的页面容器,这是div的工作

2.如果article元素,等更符合使用条件,不要使用section

3.不要为没有标题的内容的区域块使用section元素

技术分享图片
<!DOCTYPE html><!--HTML5版本声明-->
<html lang="en">
<head>
    <meta charset="UTF-8">   <!--编码格式-->
    <title>section元素</title>
</head>
<body>
<!--不推荐没有标题的内容使用section,而article元素可以独立内容-->
    <section>
        <h1> 苹果</h1>
        <p> 这是一个水果,很好吃</p>
    </section>

    <article>
        <h1> 苹果 </h1>
        <p>这是一个水果,好吃</p>
<!--        每一个section都要自己的标题-->
        <section>
            <h1>红富士 </h1>
            <p>这是一个外表很红的水果,好吃</p>
        </section>
        <section>
            <h1> 国光 </h1>
            <p>这是一个外表很红的水果,好吃</p>
        </section>
    </article>
</body>
</html>
View Code

 

XHTML

原文:https://www.cnblogs.com/addicted-to-you/p/10835238.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!