【HTML/CSS】HTML5和CSS3的新特性

目录

      • 1 HTML5
        • 1.1 语义化标签
        • 1.2 画布canvas
        • 1.3 新增API
          • 1.3.1 拖拽
          • 1.3.2 地理定位
        • 1.4 音视频Audio/Video
        • 1.5 Web存储
        • 1.6 WebWorker
        • 1.7 WebSocket
        • 1.8 新增表单控件
      • 2 CSS3
        • 2.1 新增属性
        • 2.2 @font-face
        • 2.3 2D/3D转换
        • 2.4 过渡
        • 2.5 动画
        • 2.6 媒体查询
        • 2.7 弹性布局
        • 2.8 用户界面属性

1 HTML5

1.1 语义化标签

  1. 举例:header、main、section、aside、footer、nav、dialog、detail、summary
  2. 优点:有利于开发人员和搜索引擎理解代码,有利于代码的维护和搜索引擎优化

1.2 画布canvas

canvas标签作为图像容器,通过JS绘制图像

1.3 新增API

1.3.1 拖拽
  1. 将元素的draggable属性设置为true
  2. ondragstart绑定事件,使用e.dataTransfer.setData(‘div1’, ev.target.id)保存触发拖拽的元素的id
  3. ondrop绑定事件,使用ev.dataTransfer.getData(“div1”)获取id,将元素append到目标位置
  4. 事件:
    拖拽元素绑定:
    dragstart:拖动开始
    dragend:拖动完成
    drag:拖动时
    释放区绑定:
    dragenter:进入释放区
    dragover:在释放区移动
    dragleave:没有释放离开释放区
    drop:在释放区放下
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
1.3.2 地理定位

navigator.geolocation.getCurrentPosition(showPosition)
showPosition中定义获取定位信息的函数:
获取经纬度:position.coords.latitudeposition.coords.longitude

1.4 音视频Audio/Video

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。
</video>

1.5 Web存储

替代cookie的解决方案:cookie容量小,还会携带在http请求中,增加请求的负载。

  1. sessionStorage:只能维持当前会话中,关闭窗口,数据就会删除
  2. localStorage:可以持久存储,直到被手动删除

1.6 WebWorker

web worker为单线程的JS提供了多线程的实现方式,它是在后台运行的JS,独立于其他脚本,不影响页面的性能,可以继续在页面做其他的事,web worker在后台运行。

1.7 WebSocket

WebSocket中浏览器和服务器只需要做一个握手的动作,就可以形成一条快速的通道,二者之间可以互相传输数据。客户端通过send发送数据,通过onmessage接收数据。

1.8 新增表单控件

  1. input的类型:coloer、date、datetime、email、search、tel、time、url
  2. input新属性:autocomplete、autofocus、min、max、required

2 CSS3

2.1 新增属性

  1. border-radius:圆角边框
  2. border-shadow:边框阴影、 text-shadow:文字阴影
  3. liner-gradient:线性渐变、radial-gradient:径向渐变

等等…

2.2 @font-face

自定义字体

2.3 2D/3D转换

transform: translate(x, y)移动scale(x,y)缩放
transform: translate3d(x, y, z)scale3d(x,y)缩放rotate3d(x,y,z,angle)旋转

2.4 过渡

transition

2.5 动画

@keyframes animatoion1
{0%{background: red;}25%{background: yellow;}50%{background: blue;}100%{background: green;}
}
div
{animation-name: animatoion1;animation-duration:5s;animation-timing-function: linear;animation-delay:2s;animation-iteration-count: infinite;animation-direction: alternate;/*是否逆向播放*/animation-play-state: running;/*规定动画是否正在运行或暂停*//* Safari and Chrome: */-webkit-animation-name: animatoion1;-webkit-animation-duration:5s;-webkit-animation-timing-function: linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;
}

@keyframes 定义动画名称

2.6 媒体查询

@media 可以查询设备的物理像素然后进行自适应操作

2.7 弹性布局

display: flex

2.8 用户界面属性

resize:none | both | horizontal | vertical | inherit 元素是否由用户调整大小
box-sizing: content-box | border-box | inherit 盒模型的类型
outline:outline-color outline-style outline-width outine-offset 轮廓的偏移

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/480855.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式实践及总结

一、设计模式概念及设计原则 记得刚开始学编程的时候就看过设计模式相关的书籍&#xff0c;虽然当时有很多地方都不理解&#xff0c;但是建立了早期对架构设计的意识&#xff0c;让后面的学习和工作中受益匪浅&#xff0c;最近两年也一直在做架构设计方面的工作&#xff0c;解开…

图解Transformer

原文标题&#xff1a;The Illustrated Transformer 原文链接&#xff1a;https://jalammar.github.io/illustrated-transformer/ 论文地址&#xff1a;https://arxiv.org/abs/1706.03762 前言 Transformer在Goole的一篇论文Attention is All You Need被提出&#xff0c;为了方…

知识工场 | 让机器认知中文实体 —复旦大学知识工场发布中文实体识别与链接服务

本文转载自公众号&#xff1a;知识工场。一、什么是实体识别与链接近年来&#xff0c;如何通过知识图谱让机器实现自然语言理解受到越来越多的关注。其中&#xff0c;识别文本中的实体&#xff0c;并将它们链接到知识库中&#xff0c;是让机器理解自然语言的第一步&#xff0c;…

【手撕算法】排序

目录1 插入排序2 堆排序3 归并排序4 快速排序5 冒泡排序6 选择排序1 插入排序 时间复杂度O(n2)O(n^2)O(n2) 空间复杂度 O(1) 稳定 从第一个元素开始&#xff0c;认为左边的序列是有序的&#xff0c;从有序部分的最后一个向前比较&#xff0c;如果当前元素小于有序部分就交换&…

mikechen谈技术人成长的三大原则

“ 我自己是工程师出身&#xff0c;一路就像游戏打怪一样&#xff0c;不断去突破自己的职能舒适区&#xff0c;技术这条路我用了整整10年去把它全部打通&#xff0c;这些经验看似平淡&#xff0c;作为一个过来人&#xff0c;在你每一次新的选择的时候&#xff0c;你就会发现它…

最新进展 | 深度学习在天气预测中的应用

谷歌研究员提出使用机器学习方法预测未来短时间内的天气。此方法虽然处于早期发展阶段&#xff0c;但效果已经优于传统模型。 前言 天气总是会或轻或重地影响人们的日常生活&#xff0c;而天气预报的准确性会极大影响人们应对天气的方式。天气预报可以告知人们是否应当选取一条…

快速上手笔记,PyTorch模型训练实用教程(附代码)

前言自 2017 年 1 月 PyTorch 推出以来&#xff0c;其热度持续上升&#xff0c;一度有赶超 TensorFlow 的趋势。PyTorch 能在短时间内被众多研究人员和工程师接受并推崇是因为其有着诸多优点&#xff0c;如采用 Python 语言、动态图机制、网络构建灵活以及拥有强大的社群等。因…

领域应用 | 中医临床术语系统V2.0在线发布啦!

本文转载自公众号&#xff1a;中医药知识组织与标准。中医临床术语系统V2.0在线发布中医临床术语系统&#xff08;Traditional Chinese Medicine Clinical Terminological Systems, TCMCTS&#xff09;是由中国中医科学院中医药信息研究所研制的&#xff0c;用来描述健康状况和…

【手撕算法】字符串

文章目录1 求最长公共前缀1.1 暴力法1.2 分治法2 最长回文子串2.1 暴力法1 求最长公共前缀 1.1 暴力法 以第一个为基准&#xff0c;取其前缀&#xff0c;与其他字符串依次比较&#xff0c;如果全部相同&#xff0c;就更新res。res指向公共前缀的末尾。 var longestCommonPre…

NLP Subword三大算法原理:BPE、WordPiece、ULM

Subword算法如今已经成为了一个重要的NLP模型性能提升方法。自从2018年BERT横空出世横扫NLP界各大排行榜之后&#xff0c;各路预训练语言模型如同雨后春笋般涌现&#xff0c;其中Subword算法在其中已经成为标配。且与传统空格分隔tokenization技术的对比有很大的优势~~ E.g. 模…

【小程序】微信小程序开发实践

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 https://blog.csdn.net/diandianxiyu/article/details/53068012 </div><link rel"stylesheet" href"https://csdnimg.cn/release/phoenix/template/css/ck…

技术人如何提升自己的核心竞争力

互联网行业是一个发展非常快&#xff0c;变化也快的行业&#xff0c;在这个行业&#xff0c;总是让人感觉既兴奋又不安。 兴奋的是你总能看到无数新奇的事物&#xff0c;甚至亲身参与到一场变革中去&#xff0c;而不安的则是&#xff0c;任凭你如何NB&#xff0c;你也无法保证哪…

AAAI 2018经典论文获奖者演讲:本体论的昨天和今天

本文转自公众号&#xff1a;AI科技评论。AI 科技评论按&#xff1a;正在美国新奥尔良召开的 AAAI 2018 的经典论文奖颁给了《Algorithm and Tool for Automated Ontology Merging and Alignment》。这篇论文发表在 2000 年的第 17 届 AAAI 大会上。这次颁奖是为了表彰这篇论文在…

ICLR2020 | 如何判断两个神经网络学到的知识是否一致

人工智能顶会 ICLR 2020 将于 4 月 26 日于埃塞俄比亚首都亚的斯亚贝巴举行。在最终提交的 2594 篇论文中&#xff0c;有 687 篇被接收&#xff0c;接收率为 26.5%。本文介绍了上海交通大学张拳石团队的一篇接收论文——《Knowledge Consistency between Neural Networks and B…

7张图学会SQL

第1周&#xff1a;SQL入门 学习SQL语句的书写语法和规则从零学会SQL&#xff1a;入门​www.zhihu.com 第2周&#xff1a;查询基础 Select查询语句是SQL中最基础也是最重要的语句&#xff0c;这周我们就来利用Select来对表中的数据进行查询。从零学会SQL&#xff1a;简单查询​w…

大公司稳定工作和创业之间如何选择?

“ 是留在大公司&#xff0c;还是加入小型创业公司&#xff0c;还是自己创业&#xff0c;面对房价每年高涨的趋势&#xff0c;面对未来的不确定&#xff0c;应该怎样选择。 作为一个亲历者&#xff0c;希望你看完后能有所启发。 本文作者&#xff0c;陈睿 优知学院创始人 优知…

论文浅尝 |「知识表示学习」专题论文推荐

本文转载自公众号&#xff1a;PaperWeekly。本期论文清单来自清华大学博士生韩旭和北师大本科生曹书林&#xff0c;涵盖了近年知识表示学习方向的重要论文。[ 综述类 ]■ 论文 | Representation Learning: A Review and New Perspectives■ 链接 | https://www.paperweekly.sit…

如何选择一家公司

不管是刚毕业的大学生还是工作几年的职场朋友&#xff0c;每个人都会面临选择公司和行业的困扰&#xff0c;我也相信每个人都还记忆犹新你的第一份工作以及让你无比难忘的一家公司。有时候我们也盲目的所求&#xff0c;其实&#xff0c;偶尔停下来思考下你真想去的地方&#xf…

LightGBM最强解析,从算法原理到代码实现~

1 LightGBM简介 GBDT (Gradient Boosting Decision Tree) 是机器学习中一个长盛不衰的模型&#xff0c;其主要思想是利用弱分类器&#xff08;决策树&#xff09;迭代训练以得到最优模型&#xff0c;该模型具有训练效果好、不易过拟合等优点。GBDT不仅在工业界应用广泛&#xf…

数据分析师基本技能——SQL

我们做数据分析工作时&#xff0c;多数数据来源于数据库&#xff0c;SQL非常方便我们访问和查询数据库。 SQL 作为数据分析师的基本技能&#xff0c;那么需要掌握哪些SQL核心技能 理解数据库SQL基础重点知识&#xff1a;查询&#xff0c;更新&#xff0c;提取&#xff0c;插入&…