HTML学习笔记（三）

HTML5新增的元素和废除的元素
HTML5的结构

HTML5新增的元素和废除的元素

• 新增的结构元素

  1.section：可以表达书本的一章或一部分，或者一章内的一节
  2.header：页面主体上的头部，并非head元素
  3.footer：页面的底部（页脚），可以使一封邮件签名的所在
  4.nav：到其他页面的链接集合
  5.article：博文、杂志、文章汇编等中的一篇文章

• 新增块级元素：HTML5中还增了一些纯语义性的块级元素：aside、figure、figcaption、dialog

  1.aside：定义页面内容之外的内容，比如侧边栏
  2.figure：定义媒介内容的分组以及它们的标题
  3.figcaption：媒介内容的标题说明
  4.dialog：定义对话（会话）

• aside可以表达注记、侧栏、摘要、插入的引用等作为补充主体的内容

• figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元

• dialog元素用于表达人们之间的对话.在HTML5中，dt用于表示说话者，dd用于表示说话者的内容

    
问
    
这次夏令营跟一般旅游有什么不同?
    
答
    
本次夏令营以游学为主

• 新增的行内的语义元素
  HTML5增加了一些行内语义元素：mark、time、meter、progress。

  1.mark：定义有记号的文本
  2.time：定义日期/时间
  3.meter：定义预定义范围内的度量
  4.progress：定义运行中的进度

• mark元素用来标记一些不是特别需要强调的文本

• time元素用于定义时间和日期。该元素可以代表24小时中的某一时刻，再表示时刻时，允许有时间差。在设置时间或日期时，只须将该元素的属性datetime设为相应的时间或日期即可。

• progress是HTML5中新增的状态交互元素，用来表示页面中的某个任务完成得进度。例如下载文件时，文件下载到本地的进度值，可以通过该元素动态展示在页面中，展示的方式既可以使用整数（如1_{100），也可以使用百分比（1%}100%）

• 新增的嵌入多媒体元素与交互性元素：video元素（视频）、audio元素（音频）、embed元素（用来插入各种多媒体）

• 新增的input元素类型：url类型，email类型，date类型，time类型，datetime类型

HTML5的结构

• HTML地理定位。目前网站可以使用3种方法来确定你的地理位置

1.通过IP地址来定位
2.全球定位系统GPS
3.蜂窝电话基站的位置定位

• HTML5画布canvas
  canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas元素要求至少设置width和height属性，以指定要创建的绘图区域大小。
• 使用CSS来设置canvas元素的大小，与直接设置属性相比，其差别是基于这样一个事实：canvas元素实际上有两套尺寸。一个是元素本身的大小，还有一个是元素绘图表面的大小。当设置元素的width和height属性时，实际上同时修改了该元素本身的大小和元素绘图表面的大小。然而如果是通过CSS来设定canvas元素的小，那么只会改变元素本身的大小，而不会影响到绘图面积。在默认情况下，canvas元素与其绘图面积，都是300像素宽，150像素高。
• 线性渐变沿着一条直线路径，从一种颜色过渡到另外一种颜色，使用createLinearGradient方法接收4个参数

线性渐变.png

• 径向渐变是从一个点向外围扩散，使用createRadialGradient方法接收6个参数

纵向渐变.png

• 用canvas做出一个精美时钟

  
  
  

  精美时钟.png

• SVG（可缩放矢量图形）是基于可扩展标记语言XML的一种图形格式，用于描述二维矢量图形。支持3种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。

SVG与其他图像格式相比（比如JPEG和GIF），使用SVG的优势如下：
1.SVG图像可以通过文本编辑器来创建和修改
2.SVG图像可被搜索、索引、脚本化和压缩
3.SVG是可缩放的
4.SVG图像可在任何的分辨率下以高质量打印输出
5.SVG可在图像质量不下降的情况下被放大显示

• 图像绘制：圆、矩形、椭圆、线条、折线、多边形