• HTML5区别与新增属性


    HTML5(2014年10月28由W3C与互联网工作组[IETF]联合)————标记语言

    ---HTML5优势
    1)解决跨浏览器问题
    2)明确的语义支持--更人性化

    header(一个内容区块或整个页面的标题)
    nav(导航)
    article(标记页面中的一块与上下文不相关的独立内容)
    section(一个内容区块)
    aside(标记页面内容之外的内容如侧边栏
    footer(通常放在页面或者section底部:版权、声明等)
    figure(图片图标或者代码块)里面包含(figcaption标签是定义figure的标题)
    hgroup(用于对整个页面或者页面中一个内容区块的标题进行组合
    注释:它是用来表明标题的集合,如果有主标题,副标题可以用这来包裹一下也就是它里面包含的是hn标签这个标签在最新HTML5.1版中被废除了
    目前用来模拟hgroup的其他方法

    <header>
    <h1> <a name="toc-2"></a>潜行者<h1>
    <p>关注前端<p>
    </header>

    3)部分属性代替了原来js

    • 例如js里面的document.getElementById("mobile").focus();现在是autofocuse属性即可
      ---HTML5的改变
      1)语法宽松:不区分大小写 、开始标签和结束标签大小写不讲究只要字母一个意思即可、元素可省(空元素br hr 、有些可省略结束标签(li dt dd p 。。。。)、允许有些省略属性的值标签属性等于自己的可以省略、有bool类型 允许属性不带引号但还是建议带着)
      2)标记方法:内容类型.html和.htm都可以、 DTD声明规定为<!DOCTYPE html>
      指定字符集为<meta charset="UTF-8">
      3)与其他版本兼容
      ---HTML5保留的标签
    基本标签 注释、html、head、title、body、style、h1-6、p、div、span、br、hr
    文本格式标签 i、em斜体  strong、b粗体  small小号   sup上标  sub下标  bdo标签属性dir="ltr/rtl"定义文本显示方向
    超链接(链接/假链接锚点--为没有写好的网页格式--#/javascript)和锚点 a标签属性有href=URL 、target="_self自/_blank新窗/_top顶层/_parent夫框架"、media(新)属性=”url是特殊设备i如phon 语音 打印媒介设计“是指定目标url引用的媒体类型
    base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)在head里面写```<base target=_blank/_self>```
    超链接:链接文字、图片------链接网页或者自己的网页文件
    假链接:
    1)#的假链接会自动回到网页的顶部,而javascript;的假链接不会自动回到网页顶部
    <p id="center"></p>
    <a href="#center">跳转到p</a>
    2)   要跳转当前/指定界面就要给你要跳转的位置加个id就是相当于身份证然后用超链接进行跳转href=“#名字”
    列表相关标签 ul li无序、ol有序(type+"A/a/1" start ="第几个开始" reversed排序目前只有谷歌和SAFARI6支持)-li、dl dt dd自定义
    图像标签 img属性scr=”url“ width  height  alt(鼠标点上的显示内容)
     map用来定义一个客户端图像映射
       area用来定义映射中的区域属性是shape=”rect矩形/circle/ploy多边形  coords=”坐标可多个  href  target  media指定所用媒体类型““
    用法:它是在img中使用usemap属性,需要指定map的name或者id(有的浏览器用name有的用id)usemap引用map的时候要在map,name,或者id前加#  map标签可以指定area标签可以使用map的某个区域有特别的能力,比如点击增加链接等alet属性使得光标在该区域时显示的东西
    表格相关类型 table属性cellpadding 和cellspacing width 、 tr行包含td th 、 td列、caption标题、thead定义表格头含、tbody表格主体只含tr、th表格页眉单元格、tfoot表格脚 、col
    框架相关标签 iframe此属性指定一个url,指定该iframe将装载那个页面
    注意:HTML5删除table的align、bgcolor、border、boder建议写在css删除框架frameset、frame、noframes
    • map的使用
    <img src="http://www.dreamdu.com/images/html_table.png usemap="#Map">
    <map name="Map" id="Map">
    <area shape="rect" coords="35,29,135,99" href="#"/>
    //coords="x1,y1,x2,y2"第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,(0,0是图像左上角的坐标)定义矩形实际上是定义带有四个顶点的多边形的简化方法
    <area shape="circle" coords="243,78,44" href="#"/>
    //coords="x,y,z"这里的x,y定义了圆心的位置(0,0是图像左上角的坐标),r是以像素为单位的圆形半径
    <area shape="poly" coords="120,137,195,154,135,207" href="#"/>
    //多边形coords=“x1,y1,x2,y2,x3,y3……”每一对x,y坐标都定义的一个顶点(0,0是图像左上角的坐标)多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
    </map>

    ----HTML5新增的标签

    文档结构标签 header:表示页面中一个内容区块或整个页面的标题
    nav:定义导航链接的部分
    article:标记页面中的一块与上下文不相关的独立内容
    section:一个内容区块
    aside:表示页面主区域内容之外的内容例如侧边栏和辅注栏可包含与主文章相关的内容和链接
    footer:通常放在页面或者section的底部显示相关的内容的文章、链接或者版权声明
    hgroup:用于对整个页面或页面中一个内容区块的标题进行组合
    figure:用于标记独立的流内容(图像、图标、代码)
    figcaption:定义figure元素标题
    语义相关的标签 mark:标记
    time:定义时间或者日期
    details:描述细节包含标签summary来摘要主要内容可见但details不可见点击summary则details可见
    ```
    <details>
    <summary>饭店</summary>
    消极客户好东西哈斯
    </details>
    ```
    dialog:定义对话框或窗口
    meter:定义度量衡
    ```
    meter标签:<meter value="3" max="10" min="0">3/10</meter><br>
    progress标签:<progress min="0" max="10" value="5"></progress>```
    progress:定义任何类型任务的进度

    ----HTML5通用属性:写在任意标签里面

    contentEditable 是否可编辑```<element contentEditable="value">```value--true/false  <div contentEditable="true"></div>```div可编辑
    designMode 全局contentEditable属性为on/off默认·offdocument.designMode="on";
    hidden 隐藏相当于style的display:none;它的属性为true/false
    tabindex 规定tab健控制次序当tab健用于导航时
    ```<a href=" " tabindex="2">跳转链接1</a>```不是所有都支持它:a、area、button、input、object、select、textarea
    spellcheck HTML5为input、textarea等元素增加spellcheck属性支持true、false检查输入
    ```<p contentEditable="true" spellcheck="true">可编辑且检查你输入的是否正确不正确浏览器提示</p>
    • 什么叫做自动获取焦点?

    <wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">





  • 相关阅读:
    精确覆盖DLX算法模板另一种写法
    Hdu3498-whosyourdaddy(精确覆盖模板题)
    精确覆盖DLX算法模板
    Object2Map
    Use ResourceBundle read properties file.
    Kendo UI Example(grid)
    Kendo 日期控件
    Spring mvc 中文乱码问题解决方法
    Thread communication java.util.concurrent.locks.Condition 用法(二)
    Thread communication java.util.concurrent.locks.Condition 用法(一)
  • 原文地址:https://www.cnblogs.com/8-y-m-l/p/10547620.html
Copyright © 2020-2023  润新知