web学习之路—H5（四）
2016-02-18 16:59
525 查看
新的一年了，很可惜我还是我，但是庆幸的是我还是我。哈哈，原谅我说话无厘头，今天遇见了大学同学感觉大家都有点尴尬，因为本应该成为朋友的人就这样还是同学。或许没有缘分吧。不过祝愿他们跳槽成功，拿到棒棒的薪资。学习就这样被搁置了好长时间，谁让我本来就懒，呜呜，先哭会。最近公司没事那么我就来学习学习，要不忙起来估计又学不了了。好啦，大家新年快乐，学习去。
在这里稍微总结一下前面学习的，前面三节大致讲了最基础的html的基础知识，其实也就是一堆常用的标签，其实知识都是互通的，比如我会android知识，学起来就觉得他们的整体还是很像的，这样对比着学习比较好记忆。其中学习的常用标签就类似android中控件和组件一样，还有它的整体风格都很像。大家如果有其他知识的基础那么就可以沿用以前学习那些知识好的方法去学习记忆。基础其实我也没有记得很清，想要真正记住只有勤加练习才可以，我也是大致记忆了不多想着先总结吧，到时候用就翻自己总结的咯，毕竟我这么懒。好啦，今天就开始学习高级部分啦。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 头部元素
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target，其中_blank表示都在新的页面打开连接）：
HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
下面的 meta 元素定义页面的关键词：
name 和 content 属性的作用是描述页面的内容。
显示字符集的设定
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
重定向用户
<meta http-equiv="Refresh" content="5;url=http://www.abc.com.cn" />
<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
document.write("Hello World!")
</script>
[/code]
document.write("Hello World!")
</script>[/code]
在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name;
或者
&#entity_number;
如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
注释：实体名称对大小写敏感！
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。
web 服务器
如果希望向世界发布您的网站，那么您必须把它存放在
web 服务器上。这个后续再学习。
好啦，今天就学习到这里了，感觉离学H5就差一点点啦，大家也加油，一起进步吧。
在这里稍微总结一下前面学习的，前面三节大致讲了最基础的html的基础知识，其实也就是一堆常用的标签，其实知识都是互通的，比如我会android知识，学起来就觉得他们的整体还是很像的，这样对比着学习比较好记忆。其中学习的常用标签就类似android中控件和组件一样，还有它的整体风格都很像。大家如果有其他知识的基础那么就可以沿用以前学习那些知识好的方法去学习记忆。基础其实我也没有记得很清，想要真正记住只有勤加练习才可以，我也是大致记忆了不多想着先总结吧，到时候用就翻自己总结的咯，毕竟我这么懒。好啦，今天就开始学习高级部分啦。
<!DOCTYPE> 声明
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target，其中_blank表示都在新的页面打开连接）：
<head> <base href="http://www.abc.com.cn/images/" /> <base target="_blank" /> </head>
HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
显示字符集的设定
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
重定向用户
<meta http-equiv="Refresh" content="5;url=http://www.abc.com.cn" />
HTML script 元素
| 标签 | 描述 |
|---|---|
| <script> | 定义客户端脚本。 |
| <noscript> | 为不支持客户端脚本的浏览器定义替代内容。 |
下面的脚本会向浏览器输出“Hello World!”：
<script type="text/javascript">
document.write("Hello World!")
</script><noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
<script type="text/javascript">
document.write("Hello World!")
</script>
[code]<noscript>Your browser does not support JavaScript!</noscript>
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
JavaScript:
<script type="text/javascript"> [code]<!--
document.write("Hello World!")
//-->
</script>
[/code]
VBScript:
<script type="text/vbscript"> [code]<!--
document.write("Hello World!")
'-->
</script>[/code]
HTML 实体
在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name;
或者
&#entity_number;
如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 中有用的字符实体
注释：实体名称对大小写敏感！| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML URL
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。
web 服务器
如果希望向世界发布您的网站，那么您必须把它存放在
web 服务器上。这个后续再学习。
好啦，今天就学习到这里了，感觉离学H5就差一点点啦，大家也加油，一起进步吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦
- 移动H5页面技术总结
- html5中使用canvas画时钟
- 传奇创世h5开发定制案例--《名师天团喊你来上课》
- web学习之路—H5（三）
- 浅谈基于HTML5的在线视频播放方案
- html5plus官方网址
- 支持H5的一般设置
- 简单整理HTML5的基本特性和语法
- 全面解析HTML5中的标准属性与自定义属性
- HTML5：基本使用
- html5语义化标签使用规范
- html5视音频标签参考.md
- html5 拖拽练习题
- html5 progress标签样式(各浏览器兼容)
- 利用html5 Api 实现分页
- HTML5新标签
- 利用html5 Api 实现分页
- HTML5开发移动web应用——SAP UI5篇(7)
- html5 websocket