HTML5基础

转载 2016年08月30日 23:23:44

原文地址:点击打开链接

一 html5标签大全

html4原有的元素(此处只列出常用元素,全部元素列表(包括h5)见http://www.runoob.com/tags/ref-byfunc.html) 和 HTML 元素速查列表:http://www.runoob.com/html/html-quicklist.html

元素 用途
<h1> - <h6> 标题,<h1>最大,<h6>最小(浏览器会自动地在标题的前后添加空行)
<hr> 水平线
<p> 段落
<br> (单标签) 换行
<b>或<strong> 粗体字
<i>或<em> 斜体字
<code> 定义计算机代码
<a> 链接
<img> 图像
<table> 定义表格
<tr> 表格的行
<td> 每行的各个单元格
<th> 表格的表头,表头<tr>中代替<td>
<ul> 无序列表是一个项目的列表,此列项目使用粗体圆点进行标记
<ol> 有序列表,列表项目前面使用数字进行标记
<li> 列表的每一项
<dl> 自定义列表,不仅仅是一列项目,而是项目及其注释的组合。自定义列表项以 开始,替换li中的点和ol里的数字序号,列表项的定义以 开始。
<div> 定义了文档的区域,块级
<span> 用来组合文档中的行内元素,内联元素(inline)
<form> 表单
<input> 输入标签
<iframe> 框架,以便在同一个浏览器窗口中显示不止一个页面,可用作公共页面部分的共用
<script> 定义了客户端js脚本

html5新增的元素:

HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等。

元素 用途
1 canvas新元素  
<canvas> 画布,标签定义图形,比如图表和其他图像,可以使用 JavaScript 在网页上绘制图像
2 新多媒体元素:  
<audio> 音频
<video> 视频
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,比如插件
<track> 诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道,即:字幕
3 新表单元素:  
<datalist> 定义选项列表,与 input 元素配合使用
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出,比如脚本的输出
4 新的语义和结构元素: (用来创建更好的页面结构)
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<bdi> 允许设置一段文本,使其脱离其父元素的文本方向设置
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚
<header> 定义文档的头部区域
<mark> 定义带有记号的文本
<meter> 定义度量衡,仅用于已知最大和最小值的度量
<nav> 定义运行中的进度(进程);导航
<progress> 定义任何类型的任务的进度
<ruby> 定义 ruby 注释(中文注音或字符)
<rt> 定义字符(中文注音或字符)的解释或发音
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容
<section> 定义文档中的节(section、区段)
<time> 定义日期或时间
<wbr> 规定在文本中的何处适合添加换行符

html5已移除的元素:

<acronym
<applet
<basefont
<big
<center
<dir
<font
<frame
<frameset
<noframes
<strike
<tt>

二 html5新增API

(1)除了原先的DOM接口,HTML5增加了更多样化的API,下面列出一些个人觉得很不错的学习资源:

• HTML Geolocation (地理定位) http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html

• HTML Drag and Drop(拖放) 
http://www.cnblogs.com/wpfpizicai/archive/2012/04/07/2436454.html

• HTML LocalStorage(本地存储) 
http://www.w3school.com.cn/html5/html_5_webstorage.asp

• HTML Application Cache(应用缓存) 
http://www.cnblogs.com/yexiaochai/p/4271834.html

• HTML Web Workers(运行在后台的js,不会影响页面性能) 
http://www.w3school.com.cn/html5/html_5_webworkers.asp

• HTML SSE(服务器数据推送) 
http://www.runoob.com/html/html5-serversentevents.html

Html SSE与websocket对比: 
http://www.php100.com/html/it/biancheng/2015/0323/8828.html

• HTML Canvas/WebGL(绘图) 
http://blog.csdn.net/talking12391239/article/details/8646462

• HTML Audio/Video(音频视频) 
http://www.360doc.com/content/15/0317/14/14006402_455807117.shtml

三 html中重要的概念

1 Canvas 与 SVG 的比较

HTML5 支持内联 SVG(即:可伸缩矢量图形 (Scalable Vector Graphics)),使用<svg>标签表示。

canvas 与 SVG 之间的一些不同之处:

Canvas SVG
依赖分辨率 不依赖
不支持事件处理器 支持
弱的文本渲染能力 最适合带有大型渲染区域的应用程序(比如谷歌地图)
能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 不适合游戏应用

2 HTML5 新的 Input 类型

color 
date 
datetime 
datetime-local 
email 
month 
number 
range 
search 
tel 
time 
url 
week

html5 - 基础格式认识和标签用法(文本元素常用方法)

实例01 第一个实例的html5
  • li5685918
  • li5685918
  • 2015年12月06日 23:29
  • 1428

【基础html5 基础知识点】(全)

新增的结构标签 section元素  表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中……;HTML4中 ……...
  • kongjiea
  • kongjiea
  • 2014年08月16日 15:33
  • 12856

HTML5基础入门

HTML5基础入门 HTML是TypeTextMarkup Language(超文本标记语言)的缩写。 1.HTML的标记类型 1.容器标记(Container Tags)          ...
  • zheng__jun
  • zheng__jun
  • 2016年08月25日 16:33
  • 1229

自学html5开发要学哪些?

HTML5开发是当今比较火热的一个专业,它相对于iOS开发、Android开发来说,学习门槛比较低,不需要任何编程基础,所以对于没有编程基础的同学来说,学HTML5开发是比iOS开发和Android开...
  • shenzhenfeng
  • shenzhenfeng
  • 2016年12月09日 20:46
  • 1409

html5 基本语法详解

HTML头部标记 标记 描述 HTML5标准 定义页面中所有链接的基准URL   设定显示在浏览器左上方的标题内容   表明该文档是一个...
  • mazegong
  • mazegong
  • 2016年05月03日 09:28
  • 576

Html5学习之路 基础

对于我们刚开始学习html的学生来说 ,繁杂的标签是非常麻烦的  而且不好记,闲话少说,首先我推荐的编译器是Hbuider,作为我们中国人开发的第一个编译器,我们理所当然支持一下。不过个人使用的是PH...
  • qq_28292937
  • qq_28292937
  • 2016年05月27日 20:54
  • 1020

HTML5基础复习

1.最新版本的safari、firefox、chrome等都已兼容HTML5,IE在IE9之后兼容,IE9之前,可以使用菜鸟教程的静态资源包html5shiv: 2.所有浏览器,最旧的或者最新的,对...
  • qq_32931975
  • qq_32931975
  • 2017年02月26日 15:09
  • 225

你必须知道的html5的基本特征和用法--基础必会

前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。 一、新的Doctype //...
  • qq_18415783
  • qq_18415783
  • 2016年07月12日 11:43
  • 1297

HTML5基础之代码入门

之前一直在修改现成的项目,学习的内容也是现学现用,没有很系统的学习,这次决定发一些时间,系统的学习,以便充实自己的前端知识,也想提升自己的前端技术。   今天总结的是HTML5基础的第一部分代码入门,...
  • u010297791
  • u010297791
  • 2016年11月12日 15:24
  • 2606

基本HTML结构

每个HTML文档都应该包含以下基本成分 这是每个HTML页面的基础。缩进并不重要,但结构很重要。在这个例子中,默认语言(由lang属性指定)被设为代表英语的en...
  • star0311
  • star0311
  • 2017年03月27日 11:51
  • 347
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5基础
举报原因:
原因补充:

(最多只允许输入30个字)