Menu

HTML5基础

各个标签的用法

  • abbr 缩写词，可以配合dfn元素定义术语

    • the GDO is a device that allows off-world teams to open the iris.

  • area&map （map定义图像映射区域，area定义图像映射内部的区域）
    • Planets Sun Mercury Venus
  • article （表示文档内容的一个独立块）

    • article表示文档内容的一个独立块

    article实例

  • aside （可以用于标记会话,与文档主要内容无关或关系不大的内容，位于web页面侧边）
  • b (关键文字@粗体)
    • Take a lemon and squeeze it with a juice.
  • bdi* (定义文本的文本方向，使其脱离其周围文本的方向设置)
    • The recommended restaurant is my Juice Cafe(At the Beach).
  • bdo (定义文本显示的方向)
    • The proposal is to write English , but in reverse order,"Juice" would become "Juice".
  • cite
    • 我最喜欢的电影是千与千寻
  • code (计算机代码)
    • 运行javac命令编译java文件
  • data* (为元素赋予机器可读的数据)
    • 常年有售! 哈根达斯袖珍版
  • details (用来隐藏或者显示与内容相关的附加信息)
    • 使用summary代替“详细信息”

    The proposal is to write English , but in reverse order,"Juice" would become.


  • dfn （定义实例，通常来定义术语）
    • the term organic foodrefers to food produced without synthetic chemicals.
  • dialog （表示与页面其他部分略微相关的内容块）
    • 相关内容块在哪里呢？
  • em (侧重点的强调，可嵌套使用，嵌套个数越多，强调级别越高)
    • figure主要用来定义插图注解、图表、照片、代码列表等，通常会配合figcaption元素定义其标题或者说明：
  • figure&figcaption
    • The castle through the ages: 1423, 1858, and 1999 respectively.(这是figcaption,包含在figure中)
    Etching. Anonymous, ca. 1423.
    The castle has one tower, and a tall wall around it.
    Oil-based paint on canvas. Maria Towle, 1858.
    The castle now has two towers and two walls.
  • hgroup (用来组合一个或多个标题元素，将它们在文档大纲中合并为一个元素)

    • this is a headline

    this is a sub-line

    and this is a sub-section


  • i (另一种叙述方式@斜体)
    • Lemonade consists primarily of Citrus limon
  • kbd (用户输入)
    • Press Enter to continue.
  • mark* (标记或高亮文本)
    • Elderflower cordial,with one part cordial to ten parts water,stands apart from the rest.
  • meta charset （定义web页面使用的字符集编码）
  • meter* (用来标记一个标量测量范围)
    • Keep the dough warm.
  • progress* (用来标记一个标量测量范围,除非存在已知最大值，否则将meter用作测量是不正确的)
    • I am half way
  • q (短引用，可以是某人的一句话)
    • the judge said you can drink water from the fish tank but advised against it.
  • rel

    • 这是当前文档， 这是， 这是

  • rel="prefetch"可以预先加载通过href引用的页面
    • chrome下，使用prerender来代替prefetch
  • progress表示进度，可以使用在文件上传和表单填写等场，对提升用户体验有着非常大的帮助

    • 没有具体进度值的进度条 50%

  • ruby （字符旁边的小注释，通常用来标记读音）
    • ruby text
  • s
    • 20332016
  • section （定义通用的文档或者应用程序节）

    • 它可以和h1-h6一起使用来表示

    文档结构

  • small(法律文档等附属细则：小号字体)
    • this artical is edited by liuxiaowan
  • samp (计算机程序的输出)
    • Unknown error -3
  • sub (下标文本)
    • Water is H2O.
  • sup (上标文本)
    • f(x,n)=log4xn
  • time* (data标签的时间格式版本)
    • iPhone7将于开售！
  • u (标注@下划线)
    • the mixture of apple juice and eldeflower juice is very pleasant.
  • var (定义变量)
    • if there are n fruit in the bowl,at least n/2 will be ripe
    加*号为HTML5新增标签
    Menu

HTML5表单2.0

  • 占位符文本

    • 提供相关信息或输入格式提示，并不会占用该表单字段本身的输入空间

  • 自动聚焦

    • 只需将autofocus属性添加至表单字段的元素中，即可在页面加载完成后自动聚焦

  • 数字类型

    • type=number



    type=range

    How much do you like ice cream?
    Not at allmore than anything

    type=tel

  • 日期和时间类型

    • type=datetime

    type=datetime-local

    type=month

    type=week

    type=time

  • Email，URL,颜色和搜索框类型

    • email和url在移动设备上会和其他类型有区别

    type=email

    type=url

    type=color

    type=search

  • 其他新表单元素

    • 密钥生成表单字段,可以用来生成公私密钥对，私钥被保存于本地密钥存储中，公钥被打包发送至服务器

    表单输出元素，output,最大的作用是用于显示页面内的动态javascript的结果

    命令菜单列表，menu，用于为上下文菜单，工具栏和表单控制创建命令列表

  • 1
  • 2
  • 3
    •
  • 表单验证

    • novalidate属性，表单不进行验证

  • 综合实例演示：

    • form







    Male
    Female

    + =

    SVG教程

    SVG 圆

    SVG矩形

    SVG线条

    SVG椭圆

    SVG多边形

    SVG折线

    SVG渐变

    MathML教程

    a2 + b2 = c2
    x2 + 4 x + 4 = 0

    矩阵

    A = x y z w

    Web存储

    CSS

  • border-radius(使用css3设置圆角)

    • Here is a short paragraph of text.

  • letter-spacing(该属性用来设置单个字母之间的间距)
  • word-spacing(该属性用来设置字母群的间距，即单词之间)
  • line-height(该属性用来设置行间距)
  • text-align(该属性用来设置同一行中文本布局)

    • 值有left（默认），right，center，justify，æ

    Canvas


  • canvas(单击显示，双击消失)
  • 绘制矩形

    1. fillRect:绘制有填充的矩形
    2. strokeRect:绘制矩形轮廓
    3. clearRect:绘制空心透明矩形

  • 绘制矩形(线性渐变)
  • 绘制矩形(圆形渐变)
  • 绘制多边形和线条
  • 绘制联结类型的线条形状
  • 绘制圆形(使用arc)
  • 绘制圆形波浪
  • 显示图像(使用drawImage函数将图像绘于canvas中)
  • 添加图案(使用createPattern函数将图像创建在canvas中)

    • 标准属性

    属性 选项 功能
    accesskey 用户自定义 定义访问元素的键盘快捷键
    align right，left，center 水平对齐标签
    background URL 在元素后面设置一个背景图像
    bgcolor 数值，十六进制值，RGB值 在元素后面设置一个背景颜色
    contenteditable true,false 定义用户是否可以编辑元素的内容
    contextmenu Menu 为元素定义上下文菜单
    data－XXXX 用户定义 自定义属性，HTML文档的作者可以定义自己的属性
    draggable true,false,auto 定义用户是否可以拖动元素
    item 元素列表 用户组合元素
    itemprop 条目列表 用户组合条目
    spellcheck true，false 定义元素是否必须有拼写或错误检查
    subject 用户定义id 定义元素关联的条目
    tabindex Tab number 定义元素关联的条目
    item 元素列表 用户组合元素
    valign top,middle,bottom HTML元素内标签的垂直对齐方式

    Cookies


    视频和音频

  • video标签

    • 三种基本视频编码：MP4或H.264；ogg/Theora；WebM

  • audio标签

    • 三种基本音频编码：MP3，Vorbis，WAV


    使用HTML5编辑内容和用户互动

  • contenteditable属性，可以添加到任何标签中，默认为true

    • 上传文件

    上传文件

    footer