• HTML


    <!--New things in HTML 5 are marked within red. Reference URL: http://www.w3schools.com/html/html5_new_elements.asp-->

    Note: 在HTML5中,元素(Element)名称和属性(Attribute)名称都应该使用小写格式,详情参考此处

    1. New Declaration

    In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

    HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

    <!DOCTYPE html>

    2. HTML headings are defined with h1 to h6 tags.

    3. HTML元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码;

    开始标签元素内容结束标签
    <p> This is a paragraph </p>
    <a href="default.htm" > This is a link </a>
    <br />    

    4. <a>标签的新属性:download,可以指定用户点击链接时下载某个文件,也可以默认下载href属性中的链接地址;

    5. <a>标签的target属性:新标签页,当前frame,父级frame,整个body,或者指定的frame下;

    <a target="_blank|_self|_parent|_top|framename">

    6. <img>标签的alt属性用于指定在图片不能显示时的替代文字(在IE7及以前的版本中,alt属性被作为tooltip(提示框)显示出来,这种行为是错误的,应该使用title属性来显示图片的提示信息)。

    7. <map> --><area>的coords属性的坐标值是对于整个页面而言的,“0,0”就是页面左上角,坐标顺序是左上右下(x1,y1,x2,y2);

    8. margin属性的顺序是上右下左,例如:“margin: 10 0 20 50;" 意思是margin-left是50px,margin-top是10px;

    9. <abbr>标签用于显示缩写词,用于替代以前的<acronym>标签:

    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948</p>

    鼠标放在“WHO”上就可以看到

    10. <bdo>标签用于指定文本的方向;

    <p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

    11. <a>标签可以链接到一个新邮件

    <p>
    This is another mailto link:
    <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
    </p>

    12. <table>的border-spacing样式用于设置单元格之间的距离;

    13. HTML Form Tags: 可嵌套用在<form>标签内的标签;

    TagDescription
    <form> Defines an HTML form for user input
    <input> Defines an input control
    <textarea> Defines a multiline input control (text area)
    <label> Defines a label for an <input> element
    <fieldset> Groups related elements in a form
    <legend> Defines a caption for a <fieldset> element
    <select> Defines a drop-down list
    <optgroup> Defines a group of related options in a drop-down list
    <option> Defines an option in a drop-down list
    <button> Defines a clickable button
    <datalist> Specifies a list of pre-defined options for input controls
    <keygen> Defines a key-pair generator field (for forms)
    <output> Defines the result of a calculation

    14. <output>标签:用于定义一个计算的结果;

    15. <input>标签的step属性规定输入字段的合法数字间隔(假如 step="3",则合法数字应该是 -3、0、3、6,以此类推);

    16. <input>标签的range属性:用slider控件直观地显示数字变化范围;

    17. <section>标签和<article>标签:<section>标签定义了文档中的一个区域(占用页面中整整一行,类似<p>),<article>标签定义了一块独立的内容区域,用于包含Forum post、blog post、News story等;

    18. <header>标签和<footer>标签:可用于整个文档,也可用于一个section;

    19. <figure>标签:定义一块独立的区域,用于包含插图、图标、照片,代码等,<figcaption>标签用于定义一个caption;

    20. <input>标签的新Type属性值有以下几种:其中tel不被任何浏览器接受,IE只识别url、range、number和email。

    color
    date
    datetime
    datetime-local
    email
    month
    number
    range
    search
    tel
    time
    url
    week

    21. <input>标签的新属性(Attribute)有以下几种:

    autocomplete
    autofocus
    form
    formaction
    formenctype
    formmethod
    formnovalidate
    formtarget
    height and width
    list
    min and max
    multiple
    pattern (regexp)
    placeholder
    required
    step

    22. <form>标签的新属性有以下几种:

    autocomplete
    novalidate

    23. 新属性(Property)valueAsNumber:此属性可以将用户输入的内容转化为一个number(不必再使用parseInt或者parseFloat),number可以为整数或者小数;

    24. <canvas>标签:画板,主要用于画Paths, Text, Gradients, 和Images;例如,arc: arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针);

    25. <svg>标签:用于绘制矢量图,<svg>标签定义的图形使用XML格式

    26. <video>标签:用于视频播放,目前支持的格式有mp4, ogg, webm;

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    </video>

    27. <audio>标签:用于音频播放,目前支持格式有mp3, ogg, wav;

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    </audio>

    28. navigator.geolocation对象:包含一系列与位置相关的函数:如getCurrentPosition(), watchPosition(), 和clearWatch();

     其中,getCurrentPosition()和watchPosition()方法都会返回一个位置对象,包含以下属性:

    PropertyDescription
    coords.latitude The latitude as a decimal number
    coords.longitude The longitude as a decimal number
    coords.accuracy The accuracy of position
    coords.altitude The altitude in meters above the mean sea level
    coords.altitudeAccuracy The altitude accuracy of position
    coords.heading The heading as degrees clockwise from North
    coords.speed The speed in meters per second
    timestamp The date/time of the response

    29. drag和drog操作:JS提供了一系列方法用于拖放操作,详细请参考此处

    30. Multimedia支持:HTML5标准只支持MP4, WebM, and Ogg格式的视频(Video),和MP3, WAV, and Ogg 格式的音频(audio);

    31. Plug-ins支持:<object></object>标签和<embed>标签(无对应关闭标签);

    32. HTML Sounds/Audio:最好使用<audio>和<embed>结合,<a>标签也可以播放;

    33. HTML Videos: 最好的解决方案是<video>+<object>+<embed>,<a>标签也可以播放;

    34. <script>标签: type属性不再必须,新加入了一个async属性

    35. <style>标签和<link>标签:type属性不再必须

    36. <meter>标签:用于显示一个在固定范围内的标准测量值;

    --------------------------------------------------------------------------------------------------------------------------

    37. 将pdf嵌套进网页的代码:

    <object><embed src="FILENAME.PDF" height="600" width="600" type="application/pdf"></embed></object>

    38. 行级元素必须包含在块级元素内,比如<label>,<span>必须包含于<p>或者<div>内;

    39. placeholder属性用于给当前input添加一个提示,placeholder的值显示在input中,

    <input type="text" name="fname" placeholder="First name"><br>
    <input type="text" name="lname" placeholder="Last name"><br>
    <input type="submit" value="Submit">

    40. 

     ------------------------------------------------------------

    Deprecated Tags and Attributes

    1. Tags<font>, <center>, <strike>, <acronym>

    2. Attributes: color, bgcolor, type of <ul>, align of <div>, 

  • 相关阅读:
    Eclipse下载
    RTT之AT命令组件
    RTT之shell
    RTT之内存管理及异常中断
    单片机的图形UI
    RTT学习
    RTT学习之线程管理
    C++学习笔记:
    运放
    关于KEIL下的图形化显示和输出问题
  • 原文地址:https://www.cnblogs.com/qijiage/p/3752471.html
Copyright © 2020-2023  润新知