html 总结

目录

一 html 简介

1.1 什么是 html

1.2 html 技术方面组成

1.3 html 内容方面组成

二 html元素

2.1 什么是元素

2.2 语法约束

三 常用字符集、标签实体

四 html常用颜色表示

五 html注释

六 html 标签

6.1 标签分类

6.2 常用格式标签

6.3 无意义块标签和行标签

6.4 文本标签

6.5 img 标签

6.6 超链接标签

6.7 表格标签

6.8 语义化标签（慎用）

6.9 视频标签

6.10 音频标签

七 html 表单

7.1 表单概念

7.2 常用表单

八 html 框架（frameset）

九 html 内联框架（iframe）

十 html5 拖放

十一 html5 画布vsSVG

11.1 区别

11.2 画布

11.3 SVG

十二 html5 地理定位

十三 html5 web 存储

13.1 localStorage

13.2 sessionStorage

十四 html5 应用缓存

十五 html5 web workers

十六 html5 服务器发送事件

十七 参考

---

一 html 简介

1.1 什么是 html

HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

1.2 html 技术方面组成

1) html5 
作用:页面的基本结构

2) css3
作用:把页面标签进行包装和修饰

3) javascript 
作用:把修饰后的页面标签加上特效或动作

1.3 html 内容方面组成

1.文档类型

建议浏览器使用html5的内核标准来阅读并解析后文

2.文档内容区

3.文档头部内容(对体部内容的提前声明)

4.文档标题

百度等搜索引擎收录起着很大的作用

5.建议浏览器在阅读本文档时以utf-8的编码来阅读

6.文档体部内容

注意：

html和body两个标签的区别:
1.html代表整个文档屏幕
2.body代表文档中真正的数据区域
3.当html没有设置背景色，此时body的背景色是文档整个屏幕

二 html元素

2.1 什么是元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）

2.2 语法约束

• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束），空元素也要有闭合标签，如
  
• 大多数 HTML 元素可拥有属性
• 标签字母小写

三 常用字符集、标签实体

<          ---           <
>          ---           >
空格     ---            （直接敲的空格，不管多少个，浏览器只认一个）
<<        ---           «
>>        ---           »
x          ---           ×

四 html常用颜色表示

1.英文
red

2.十六进制
#ff0000
#f00

3.十进制
rgb(255,0,0);

4.十进制
rgba(255,0,0,0.5);

五 html注释

六 html 标签

6.1 标签分类

1  单标签和双标签

2  行标签和块标签

6.2 常用格式标签

br                   //换行,单标签
nobr               //不换行,双标签
pre                 //按源格式输出
address         //地址
abbr              //缩写
acronym       //首字母缩写
bdo               //文字方向
del                //删除线
ins                //插入
q                  //引用
blockquote   //长引用
dfn               //定义
cite              //著作标题

ul                //无序列表
ol                //有序列表
dl                //自定义列表
dt               //自定义标题
dd              //自定义列表内容

6.3 无意义块标签和行标签

div     块标签
span 行标签

6.4 文本标签

p  段落

其他样式建议通过样式解决

6.5 img 标签

6.6 超链接标签

额外说明：url统一资源定位符
url地址 http://www.baidu.com/home/index.php?id=10
1)http:// web服务器协议
2)www.baiud.com 域名
3)/home  网页目录
4)index.php 网页脚本
5)id=10&name=user1 给网页传参数

6.7 表格标签

1 table表格
border    边框粗细
width
height
cellspacing  规定单元边沿与其内容之间的空白。
bordercolor
align

2 tr行
align 
valign

3 th列头和td列
width
height
colspan
rowspan
align
valign

示例：

6.8 语义化标签（慎用）

1.article
2.footer
3.header
4.nav
5.section

6.9 视频标签

属性:
1.autoplay
2.controls
3.width
4.height
5.src
6.loop 循环播放

HTML5视频结合DOM操作:
1.方法
play();
pause();

2.事件
play
pause
ended

示例：

	
	
	


	
	

	start
	stop

6.10 音频标签

属性:
1.autoplay
2.controls
3.width
4.height
5.src
6.loop

HTML5中音频结合DOM操作:
1.方法
play();
pause();

2.事件
play
pause
ended

示例：

	
	
	


	
	

	
	

	start
	stop

七 html 表单

7.1 表单概念

HTML 表单用于收集用户输入。

7.2 常用表单

表单标签:

文本框:

密码框:

提交按钮:

重置按钮:

表单占位:

表单只读属性:

表单禁用属性:

文本框宽度:

文本框最大长度:

单选框:

     linux


     php

多选框:

     linux


     php

下拉菜单:

    linux
    linux

多选下拉菜单:

    linux
    linux

文本域:

提交按钮:

取消按钮:

文件上传框:

图片按钮:

隐藏框:

按钮:

提交表单

八 html 框架（frameset）

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

    
    
        
        
    

九 html 内联框架（iframe）

iframe 用于在网页内显示网页。

十 html5 拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

示例：

请把 W3School 的图片拖放到矩形中：

1 设置元素可拖放

draggable="true"

2 拖动什么 - ondragstart 和 setData

3 放到何处 -  ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

4 进行放置 - ondrop

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

十一 html5 画布vsSVG

11.1 区别

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

11.2 画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

示例-线条

Your browser does not support the canvas element.

 示例-圆

Your browser does not support the canvas element.

示例-渐变

Your browser does not support the canvas element.

示例-图像

Your browser does not support the canvas element.

11.3 SVG

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

示例

十二 html5 地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

示例

点击这个按钮，获得您的坐标：
试一下

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

 

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

 

十三 html5 web 存储

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

13.1 localStorage

示例：

 

刷新页面会看到计数器在增长。

请关闭浏览器窗口，然后再试一次，计数器会继续计数。

13.2 sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

示例：

 

刷新页面会看到计数器在增长。

请关闭浏览器窗口，然后再试一次，计数器已经重置了。

十四 html5 应用缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

• 离线浏览 - 用户可在应用离线时使用它们
• 速度 - 已缓存资源加载得更快
• 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

示例：

获得日期和事件

请打开这个页面，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。

 demo_html.appcache

CACHE MANIFEST
demo_time.js
img_logo.gif

demo_time.js

function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}

 

1 Cache Manifest 基础

如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性：

...

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：".appcache"。

请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

2 Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

3 更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

• 用户清空浏览器缓存
• manifest 文件被修改（参阅下面的提示）
• 由程序来更新应用缓存

 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

 

注意：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

十五 html5 web workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

示例：

计数: 

开始 Worker 
停止 Worker

demo_workers.js

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

1 检测 Web Worker 支持

if(typeof(Worker)!=="undefined")

2 创建 web worker 文件

demo_workers.js

代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

3  创建 Web Worker 对象

  w=new Worker("demo_workers.js");

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。

4 终止 Web Worker

w.terminate();

注意：

Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document 对象
• parent 对象

十六 html5 服务器发送事件

HTML5 服务器发送事件  （Server-Sent ） - 单向消息传递，Server-Sent 事件指的是网页自动获取来自服务器的更新。

示例：

获得服务器更新

1 检测 Server-Sent 事件支持

if(typeof(EventSource)!=="undefined")

2 接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "
";
  };

例子解释：

• 创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
• 每接收到一次更新，就会发生 onmessage 事件
• 当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

3 服务器端代码实例

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP 代码 (demo_sse.php)：

ASP 代码 (VB) (demo_sse.asp):

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

代码解释：

• 把报头 "Content-Type" 设置为 "text/event-stream"
• 规定不对页面进行缓存
• 输出发送日期（始终以 "data: " 开头）
• 向网页刷新输出数据

 

EventSource 对象

在上面的例子中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当错误发生

十七 参考

https://www.w3school.com.cn/h.asp

示例：

https://github.com/TonyChen-9102/HtmlSummaryExample