HTML学习笔记(三)

<a href="#1">HTML5新增的元素和废除的元素</a>
<a href="#2">HTML5的结构</a>

<a name="1">HTML5新增的元素和废除的元素</a>

  • 新增的结构元素

    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用于表示说话者的内容

<dialog>
    <dt>问</dt>
    <dd>这次夏令营跟一般旅游有什么不同?</dd>
    <dt>答</dt>
    <dd>本次夏令营以游学为主</dd>
</dialog>
  • 新增的行内的语义元素
    HTML5增加了一些行内语义元素:mark、time、meter、progress。

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

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

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

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

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

  • 新增的input元素类型:url类型,email类型,date类型,time类型,datetime类型

<a name="2">HTML5的结构</a>

  • 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可在图像质量不下降的情况下被放大显示
  • 图像绘制:圆、矩形、椭圆、线条、折线、多边形
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • HTML框架 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都...
    做有趣的恶魔阅读 195评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 一:HTML块、类、布局 HTML 和 可以通过 和 将 HTML 元素组合起来。 HTML 块元素 大多数 HT...
    朝槿123阅读 385评论 0 0
  • HTML表单 HTML 表单用于搜集不同类型的用户输入。 1. 形式<form>...</ form> 2. 元素...
    五秋木阅读 704评论 0 0
  • 一、CSS样式及CSS样式的作用 1.1 什么是CSS CSS也是我们常叫的样式表、通俗叫切图和静态网页布局。我...
    胡溪玥阅读 355评论 0 1