zoukankan      html  css  js  c++  java
  • HTM5基本语法

    1.2语法改变

    (1)内容类型(contentType):HTML文件的后缀名依旧是.html或者html,HTML 文件的内容类型

    (2)Doctype:文档解析

    H5以前:<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">

      

    H5:<!DOCTYPE html>

      
    

    Doctype声明在html文档中必不可少,位于HTML文档的第一行代码,随着HTML版本的的更新,其生命方式也在更改。但是H5的DOCTYPE的声明方式向下兼容(兼容所有的低版本)。

    (3)字符集

    H5之前:<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    H5:<meta charset="UTF-8">

    H5默认的字符集编码:UTF-8,之前的大部分默认的字符编码为:ISO-8859-1

    (4)标签省略:

        可以省略:body、tbody、head、colgroup、html

        不允许写结束标记的标签:img、input、br、hr、base、link、meta。

        允许写结束标记的标签:p、li、dt、dd、tr、td、th、

    (5)布尔类型的属性

         对于布尔类型的属性,比如:readonly、disabled,checked、selected当它们不写值的时候,就是默认是true。同时对于值是任何东西都是无效的。说白了,只要写了这个属性,属性立马生效。

    (6)属性值省略号

    我们在之前的学习中,属性都是放在双(单)引号里面的,在H5中,如果属性中不包含特殊字符,双引号和单引号都可以去掉

    特殊字符:“<“  ,   “>”   ,”=”

    1.3新增和废弃的元素新增和废弃的属性         

    新增的结构(布局) 标签:section、artcle、nav、footer、header、hgroup、Aside、figure

    新增的其他标签:

    Video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source。。。。。。。

    Input  type 的新增:email、url、number、date、pickers、range

    废弃的标签 :font、center、s、tt、u、big、basefont

    1.4全局属性                                                                     

             全局属性

    在H5中,定义了少量对所有元素都有效的属性。

    <p contenteditable="true">我是一个段落,但我可以编辑</p>//可以被编辑
    <p contenteditable="false">我是一个段落,但我不能编辑</p>//不能被编辑
    <p contenteditable>我是一个没有设置contenteditable的段落,</p>//可以被编辑

    Contenteditable=true:标签设置了此属性之后可以在页面上直接进行编辑。编辑之后元素的宽高自动适应。
     
    Contenteditable=false:说明这个标签不可以被编辑

    注意:如果不设置contenteditable,其默认的值时true

        Contenteditable:属性是可以被继承的,需要考虑就近原则

    可以加到body里,使全局都可以被编辑。

    2. designMode:
    用来指定整个页面是否可以编辑,当designMode设置为on的时候相当于页面上所有的元素都设置了Contenteditable=true;设置为off时,则相当于全局都设置了Contenteditable=false.

    document.designMode="on";
        document.designMode="off";

    注意事项:1如果同时设置了designMode和Contenteditable属性,最终是否可以编辑使用就看就近原则了。

                2,该属性在IE8一下的浏览器无效。 以兼容IE6.7,8为耻。

    Hidden属性可以实现对元素的隐藏,隐藏的元素不会被显示,同时不会占原有的位置。类思域display:none;

    注意:hidden属性默认的值时:“hidden“,所以设置该属性的时候,只需要写属性名就可以了。

    Hidden:看不见不占位置

    "visibility: hidden":看不见,占位置

    display: none:看不见,不占位置

    4、spellchck

     Spellchck属性是H5专门为input和textarea标签提供新属性,它的功能是对用户输入的内容进行拼写和语法检查,如果拼写错了,文字下面有一个波浪线。

    <input type="text"spellcheck="true">

    spellcheck="false":取消语法和和拼写检查

    spellcheck="true":开启语法和拼写检查

    tabindex:

    <label>姓名</label><input type="text" tabindex ="2"><br>
    <label>性别</label><input type="text"tabindex="4"><br>
    <label>年龄</label><input type="text"tabindex="3"><br>
    <label>身份证号</label><input type="text"><br>

    Tabindex=”正整数”:按键tab键可以选中(获取焦点),,这里选择的标签可以是input输入框、input按钮、a标签等。同时按下tab键选择的顺序和设置的tabindex属性一致,Tabindex值越大,越在后面选中。建议不使用Tabindex=0;

    Tabindex=-1,按tab不选中。

    2主体结构元素                         

    主题结构元素,它是为了予以可以结构化,说白了就是更好的SEO,再直白点就是为了浏览器跟好的抓数据。包含元素:article、sction、nav、aside、time

    (1)      article(文章)--使用频率低

    :标签,从语言上来看,可以理解为一个文档一个页面。通常用法:一篇文章,或页面的一个独立的完整内容。这个标签强调的是内容的独立性。同时,一般article元素里面会嵌套一个header标签。

    (2)      section(章节)--使用频率低

    :是文章中的一段,这一段通常有标题和内容组成。

    特点:强调分段,分块,

    <article>
        <h1>苹果</h1>
        <p>苹果是一种既便宜又实惠的水果,大家都喜欢吃</p>
    </article>
    <section>
        <h1>红富士</h1>
        <p>红色的苹果</p>
    </section>
    <section>
        <h1>旮旯</h1>
        <p>又小又青的苹果,味道还不错</p>
    </section>

    (3)      nav(导航)--使用频率高

    :navigation的缩写。通常用在:导航条、页面导航、翻页操作。

    <header>
        <div class="=logo">
            <nav>
                <ul>
                    <li>H5发展史</li>
                    <li>CSS3发展史</li>
                    <li>EMScript发展史</li>
                </ul>
            </nav>
        </div>
    </header>

    (4)      aside(旁边)--使用频率低

    :放在article元素里面,作为附属信息部分,比如:参考信息,名称解释。   

    通常用法:

    放在article元素里面,作为附属信息部分。

    放在外面可作为主体部分。///

    <article>
        <h1>小黑</h1>
        <p>小黑,母,我家养的一条汪,今年八岁了,出了四条腿和肚子,全是黑色的,故名小黑
           饼干厂老大,常常欺鸡惹鹅,很是厉害</p>
        <aside>
            <h1>参考资料</h1>
            <p>百度百科</p>
        </aside>
    </article>
    <aside>
        <nav>
        <h1>参考资料</h1>
        <p>百度百科</p>
        </nav>
    </aside>

    (5)      time(时间)--根本不用

    :时间标签,表示24小时的某个时刻或者某个日期

    所有浏览器都不支持,了解即可

  • 相关阅读:
    C++笔记--模板
    C++笔记--抽象机制
    C++--VECTOR的简单应用
    C++面试笔记--STL模板与容器
    C++面试笔记--指针和引用
    《转载》什么变量在堆内存里存放,什么变量在栈内存里存放
    C++面试笔记--const、sizeof
    C++面试笔记--宏定义
    C++笔记--指针数组和结构
    C++笔记--异常
  • 原文地址:https://www.cnblogs.com/java-ty/p/13693509.html
Copyright © 2011-2022 走看看