rename
This commit is contained in:
qianguyihao
73
01-HTML/01-认识Web和Web标准.md
Normal file
73
01-HTML/01-认识Web和Web标准.md
Normal file
@@ -0,0 +1,73 @@
|
||||
|
||||
|
||||
## Web、网页、浏览器
|
||||
|
||||
### Web
|
||||
|
||||
Web（World Wide Web）即全球广域网，也称为万维网。
|
||||
|
||||
我们常说的`Web端`就是网页端。
|
||||
|
||||
### 网页
|
||||
|
||||
**网页是构成网站的基本元素**。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
|
||||
|
||||
我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。
|
||||
|
||||
### 浏览器
|
||||
|
||||
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。
|
||||
|
||||
关于浏览器的详细介绍，可以看下一篇文章：《[浏览器的介绍](https://github.com/qianguyihao/Web/blob/master/01-html/02-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E4%BB%8B%E7%BB%8D.md)》
|
||||
|
||||
|
||||
|
||||
|
||||
## Web标准
|
||||
|
||||
|
||||
### W3C组织
|
||||
|
||||
**W3C**：万维网联盟组织，用来制定web标准的机构（组织）。
|
||||
|
||||
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
|
||||
|
||||
W3C 组织就类似于现实世界中的联合国。
|
||||
|
||||
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
|
||||
|
||||
### Web 标准
|
||||
|
||||
**Web标准**：制作网页要遵循的规范。
|
||||
|
||||
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
|
||||
|
||||
**1、Web标准包括三个方面**：
|
||||
|
||||
- 结构标准（HTML）：用于对网页元素进行整理和分类。
|
||||
|
||||
- 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
|
||||
|
||||
- 行为标准（JS）：用于定义网页的交互和行为。
|
||||
|
||||
根据上面的Web标准，可以将 Web前端分为三层，如下。
|
||||
|
||||
**2、Web前端分三层**：
|
||||
|
||||
- HTML（HyperText Markup Language）：超文本标记语言。从**语义**的角度描述页面的**结构**。相当于人的身体组织结构。
|
||||
- CSS（Cascading Style Sheets）：层叠样式表。从**审美**的角度美化页面的**样式**。相当于人的衣服和打扮。
|
||||
- JS：JavaScript。从**交互**的角度描述页面的**行为**。相当于人的动作，让人有生命力。
|
||||
|
||||
**3、打个比方**：（拿黄渤举例）
|
||||
|
||||
HTML 相当于人的身体组织结构：
|
||||
|
||||
|
||||
|
||||
CSS 相当于人的衣服和打扮：
|
||||
|
||||
|
||||
|
||||
JS 相当于人的行为：
|
||||
|
||||
|
||||
104
01-HTML/02-浏览器的介绍.md
Normal file
104
01-HTML/02-浏览器的介绍.md
Normal file
@@ -0,0 +1,104 @@
|
||||
|
||||
|
||||
## 常见的浏览器
|
||||
|
||||
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
|
||||
|
||||
|
||||
|
||||
我们重点需要学习的是 Chrome 浏览器。
|
||||
|
||||
## 浏览器的市场占有份额
|
||||
|
||||
浏览器的市场占有份额：<https://tongji.baidu.com/research/site?source=index#browser>
|
||||
|
||||
|
||||
|
||||
上面这张图的统计时间是2020年2月。
|
||||
|
||||
## 浏览器的组成
|
||||
|
||||
浏览器分成两部分：
|
||||
|
||||
- 1、渲染引擎（即：浏览器内核）
|
||||
|
||||
- 2、JS 引擎
|
||||
|
||||
### 1、渲染引擎（浏览器内核）
|
||||
|
||||
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
|
||||
|
||||
**渲染引擎是浏览器兼容性问题出现的根本原因。**
|
||||
|
||||
渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
|
||||
|
||||
常见浏览器的内核如下：
|
||||
|
||||
|浏览器 | 内核|
|
||||
|:-------------:|:-------------:|
|
||||
| chrome | Blink |
|
||||
| 欧鹏 | Blink |
|
||||
|360安全浏览器| Blink|
|
||||
|360极速浏览器| Blink|
|
||||
|Safari|Webkit|
|
||||
|Firefox 火狐|Gecko|
|
||||
|IE| Trident |
|
||||
|
||||
备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。
|
||||
|
||||
另外，移动端的浏览器内核是什么？大家可以自行查阅资料。
|
||||
|
||||
|
||||
|
||||
### 2、JS 引擎
|
||||
|
||||
也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。
|
||||
|
||||
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。
|
||||
|
||||
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。
|
||||
|
||||
常见浏览器的 JS 引擎如下：
|
||||
|
||||
|浏览器 | JS 引擎|
|
||||
|:-------------:|:-------------|
|
||||
|chrome / 欧鹏 | V8 |
|
||||
|Safari|Nitro|
|
||||
|Firefox 火狐|SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）|
|
||||
|Opera|Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）|
|
||||
|IE|Trident |
|
||||
|
||||
参考链接：
|
||||
|
||||
- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
|
||||
|
||||
## 浏览器工作原理
|
||||
|
||||
|
||||
|
||||
1、User Interface 用户界面，我们所看到的浏览器
|
||||
|
||||
2、Browser engine 浏览器引擎，用来查询和操作渲染引擎
|
||||
|
||||
3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS
|
||||
|
||||
4、Networking 网络，负责发送网络请求
|
||||
|
||||
5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码
|
||||
|
||||
6、UI Backend UI后端，用来绘制类似组合框和弹出窗口
|
||||
|
||||
7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage
|
||||
|
||||
参考链接：
|
||||
|
||||
- <https://www.2cto.com/kf/201202/118111.html>
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
489
01-HTML/03-初识HTML.md
Normal file
489
01-HTML/03-初识HTML.md
Normal file
@@ -0,0 +1,489 @@
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- 头标签
|
||||
- 排版标签：`<p>`、 `<div>`、 `<span>`、`<br>` 、 `<hr>` 、 `<center>` 、 `<pre>`
|
||||
- 字体标记：`<h1>`、 `<font>`、 `<b>`、 `<u>` 、`<sup>` 、`<sub>`
|
||||
- 超链接 `<a>`
|
||||
- 图片标签 `<img>`
|
||||
|
||||
|
||||
## 编辑器相关
|
||||
|
||||
前端开发的编辑器软件，我首先推荐 VS Code，其次推荐Sublime Text。
|
||||
|
||||
有人说 WebStorm 也不错？但真实情况是，自从VS Code 问世之后，用 WebStorm 的人越来越少了。
|
||||
|
||||
### VS Code 的使用
|
||||
|
||||
详情请移步至：[第一次使用VS Code时你应该知道的一切配置](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)
|
||||
|
||||
### Sublime Text 的使用
|
||||
|
||||
详情请移步至：[Sublime Text使用技巧](https://github.com/qianguyihao/Mac/blob/master/05-%E5%85%A8%E5%B9%B3%E5%8F%B0%E8%BD%AF%E4%BB%B6/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
|
||||
|
||||
|
||||
## HTML的概述
|
||||
|
||||
### HTML的概念
|
||||
|
||||
**HTML** 全称为 HyperText Markup Language，译为<font color=#0000ff>**超文本标记语言**</font>。
|
||||
|
||||
HTML 不是一种编程语言，是一种描述性的**标记语言**。
|
||||
|
||||
**作用**：HTML是负责描述文档**语义**的语言。
|
||||
|
||||
### 概念：超文本
|
||||
|
||||
所谓的超文本，有两层含义：
|
||||
|
||||
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。
|
||||
|
||||
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
|
||||
|
||||
|
||||
### 概念：标记语言
|
||||
|
||||
HTML 不是一种编程语言，是一种描述性的**标记语言**。这主要有两层含义：
|
||||
|
||||
（1）**标记语言是一套标记标签**。比如：超链接标签`<a>`、图片标签`<img>`、一级标题标签`<h1>`等等，它们都是属于 HTML 标签。
|
||||
|
||||
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
|
||||
|
||||
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
|
||||
|
||||
### HTML是负责描述文档语义的语言
|
||||
|
||||
HTML 中，除了**语义**，其他什么都没有。
|
||||
|
||||
HTML 是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
|
||||
|
||||
所以，接下来，我们需要要学习一堆 HTML 中的标签对，这些标签对能够给文本不同的语义。
|
||||
|
||||
比如，面试的时候问你，`<h1>` 标签有什么作用？
|
||||
|
||||
- 正确答案：给文本增加主标题的语义。
|
||||
- 错误答案：给文字加粗、加黑、变大。
|
||||
|
||||
关乎“语义”的更深刻的理解，等接下来我们学习了各种标签，就明白了。
|
||||
|
||||
## HTML的历史
|
||||
|
||||
|
||||
|
||||
我们专门来对XHTML做一个介绍。
|
||||
|
||||
**XHTML介绍：**
|
||||
XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。
|
||||
XHTML的主要目的是为了<font color="blue">**取代HTML**</font>，也可以理解为HTML的升级版。
|
||||
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
|
||||
XHTML与HTML4.0的标记基本上一样。
|
||||
XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
|
||||
|
||||
我们稍后将对XHTML的编写规范进行介绍。
|
||||
|
||||
## HTML的专有名词
|
||||
|
||||
- 网页 ：由各种标记组成的一个页面就叫网页。
|
||||
- 主页(首页) : 一个网站的起始页面或者导航页面。
|
||||
- 标记： `<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
|
||||
- 元素：`<p>内容</p>`称为元素.
|
||||
- 属性：给每一个标签所做的辅助信息。
|
||||
- xhtml： 符合XML语法标准的HTML。
|
||||
- dhtml：dynamic，动态的。`javascript + css + html`合起来的页面就是一个dhtml。
|
||||
- http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，ftp：文件传输协议。
|
||||
|
||||
## HTML的编辑工具
|
||||
|
||||
> 用的最多的编辑器是： VS Code 和 Sublime Text。
|
||||
|
||||
- VS Code：最火的前端代码编辑器。
|
||||
- Sublime Text：很轻量的代码编辑器。
|
||||
- NotePad：记事本。
|
||||
- EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
|
||||
- UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
|
||||
- dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
|
||||
|
||||
PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
|
||||
|
||||
## 计算机编码介绍
|
||||
|
||||
计算机，不能直接存储文字，存储的是编码。
|
||||
|
||||
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
|
||||
|
||||
**ASCII码：**
|
||||
美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。
|
||||
美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
|
||||
|
||||
**ANSI编码：**
|
||||
**每个国家为了显示本国的语言，都对ASCII码进行了扩展**。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：
|
||||
中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。
|
||||
日本的ANSI编码是JIS编码。
|
||||
台湾的ANSI编码是BIG5编码（繁体）。
|
||||
|
||||
**GBK：**
|
||||
对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
|
||||
|
||||
**Unicode编码(统一编码)：**
|
||||
用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
|
||||
|
||||
**UTF-8(Unicode Transform Format)编码：**
|
||||
根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
|
||||
|
||||
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
|
||||
|
||||
**中文能够使用的字符集两种：**
|
||||
|
||||
- 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
|
||||
|
||||
- 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面**仅**涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
|
||||
|
||||
字库规模： UTF-8（字全） > gb2312（只有汉字）
|
||||
|
||||
**重点1：避免乱码**
|
||||
|
||||
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。
|
||||
|
||||
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： `文件→ set File Encoding to → Chinese Simplified(GBK)`。
|
||||
|
||||
|
||||
**重点2：UTF-8和gb2312的比较**
|
||||
|
||||
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
|
||||
|
||||
总结：
|
||||
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
|
||||
- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
|
||||
|
||||
|
||||
列出2个使用情形：
|
||||
|
||||
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
|
||||
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
|
||||
|
||||
我们亲测：
|
||||
- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
|
||||
- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
|
||||
|
||||
我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到meta标签中的charset属性即可。
|
||||
|
||||
那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然可以查看网页的源代码了。
|
||||
|
||||
## HTML颜色介绍
|
||||
|
||||
**颜色表示：**
|
||||
|
||||
- 纯单词表示：red、green、blue、orange、gray等
|
||||
- 10进制表示：rgb(255,0,0)
|
||||
- 16进制表示：#FF0000、#0000FF、#00FF00等
|
||||
|
||||
**RGB色彩模式：**
|
||||
|
||||
- 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
|
||||
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
|
||||
- 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
|
||||
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
|
||||
|
||||
## HTML的规范
|
||||
|
||||
- HTML是一个弱势语言
|
||||
- HTML不区分大小写
|
||||
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
|
||||
- HTML的结构：
|
||||
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。<!doctype html>是HTML5标准。
|
||||
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
|
||||
- body部分：我们所写的代码必须放在此标签內。
|
||||
|
||||
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
|
||||
|
||||
### 1、编写XHTML的规范：
|
||||
|
||||
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：`<h1><font></font></h1>`
|
||||
|
||||
（2）所有的标记都必须小写。
|
||||
|
||||
（3）所有的标记都必须关闭。
|
||||
|
||||
- 双边标记：`<span></span>`
|
||||
- 单边标记：`<br>` 转成 `<br />` `<hr>` 转成 `<hr />`，还有`<img src=“URL” />`
|
||||
|
||||
（4）所有的属性值必须加引号。`<font color="red"></font>`
|
||||
|
||||
（5）所有的属性必须有值。`<hr noshade="noshade">`、`<input type="radio" checked="checked" />`
|
||||
|
||||
（6）XHTML文档开头必须要有DTD文档类型定义
|
||||
|
||||
### 2、HTML的基本语法特性
|
||||
|
||||
#### （1）HTML对换行不敏感，对tab不敏感
|
||||
|
||||
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
|
||||
|
||||
也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。
|
||||
|
||||
百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。如下图所示：
|
||||
|
||||
|
||||
|
||||
#### （2）空白折叠现象
|
||||
|
||||
HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠为一个空格显示。
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
#### （3）标签要严格封闭
|
||||
|
||||
标签不封闭是灾难性的。
|
||||
|
||||
标签不封闭的举例如下：
|
||||
|
||||
|
||||
|
||||
## 三、HTML结构详解
|
||||
|
||||
> 备注：
|
||||
> - 所有的浏览器默认情况下都会忽略空格和空行
|
||||
> - 每个标签都有私有属性。也都有公有属性。
|
||||
> - html中表示长度的单位都是**像素**。HTML只有一种单位就是像素。
|
||||
|
||||
HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>），比如 `<div>` 和 `</div>`，也有单独呈现的标签（<font color="blue">**单边标记**</font>），如：`<br />`、`<hr />`和`<img src="images/1.jpg" />`等。
|
||||
|
||||
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
|
||||
|
||||
### 快速生成 html 的骨架
|
||||
|
||||
**方式1**：在 VS Code 中新建 html 文件，输入`html:5`，按 `Tab`键后，自动生成的代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
**方式2**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:5`，按`Tab`键后，自动生成的代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**方式3**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:xt`，按`Tab`键后（或者按Ctrl+E），自动生成的代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
上面的方式2和方式3中，我们会发现，第一行的内容有些不太一样，这就是我们接下来要讲的**文档声明头**。
|
||||
|
||||
### 1、文档声明头
|
||||
|
||||
|
||||
任何一个标准的HTML页面，第一行一定是一个以`<!DOCTYPE ……>`开头的语句。
|
||||
|
||||
这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
|
||||
|
||||
#### HTML4.01有哪些规范呢？
|
||||
|
||||
**HTML4.01**这个版本是IE6开始兼容的。**HTML5是IE9开开始兼容的**。如今，手机、移动端的网页，就可以使用HTML5了，因为其兼容性更高。
|
||||
|
||||
说个题外话，html1 至 html3 是美国军方以及高等研究所用的，并未对外公开。
|
||||
|
||||
HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下图）。
|
||||
|
||||
HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`<H1></H1>`所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
|
||||
|
||||
总结一下，HTML4.01一共有6种DTD。说白了，HTML的第一行语句一共有6种情况：
|
||||
|
||||
|
||||
|
||||
下面对上图中的三种小规范进行解释：
|
||||
|
||||
- **strict**：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
|
||||
比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
|
||||
那怎么给文本增加下划线呢？今后的css将使用css属性来解决。
|
||||
那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
|
||||
|
||||
- **Transitional**：表示“普通的”，这种模式就是没有一些别的规范。
|
||||
|
||||
- **Frameset**：表示“框架”，在框架的页面使用。
|
||||
|
||||
在sublime输入的html:xt，x表示XHTML，t表示transitional。
|
||||
|
||||
在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
```
|
||||
|
||||
### 2、头标签
|
||||
|
||||
#### html5 的比较完整的骨架：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
<meta name="Author" content="">
|
||||
<meta name="Keywords" content="牛逼，很牛逼，特别牛逼" />
|
||||
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
面试题：
|
||||
|
||||
- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
|
||||
- 答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
|
||||
|
||||
头标签都放在<head></head>头部分之间。包括：`<title>`、`<base>`、`<meta>`、`<link>`
|
||||
|
||||
- `<title>`：指定整个网页的标题，在浏览器最上方显示。
|
||||
- `<base>`：为页面上的所有链接规定默认地址或默认目标。
|
||||
- `<meta>`：提供有关页面的基本信息
|
||||
- `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
|
||||
- `<link>`：定义文档与外部资源的关系。
|
||||
|
||||
**meta 标签**：
|
||||
|
||||
上面的`<meta>`标签都不用记，但是另外还有一个`<meta>`标签是需要记住的：
|
||||
|
||||
```html
|
||||
<meta http-equiv="refresh" content="3;http://www.baidu.com">
|
||||
```
|
||||
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
|
||||
|
||||
常见的几种 meta 标签如下：
|
||||
|
||||
（1）字符集 charset：
|
||||
|
||||
```html
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||
```
|
||||
|
||||
字符集用meta标签中的`charset`定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
|
||||
|
||||
charset就是charactor set（即“字符集”）。
|
||||
|
||||
浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
|
||||
|
||||
|
||||
（2）视口 viewport：
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
```
|
||||
|
||||
`width=device-width` ：表示视口宽度等于屏幕宽度。
|
||||
|
||||
viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
|
||||
|
||||
（2）定义“关键词”：
|
||||
|
||||
举例如下：
|
||||
|
||||
```html
|
||||
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
|
||||
```
|
||||
|
||||
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
|
||||
|
||||
（3）定义“页面描述”：
|
||||
|
||||
meta除了可以设置字符集，还可以设置关键字和页面描述。
|
||||
|
||||
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
|
||||
|
||||
设置页面描述的举例：
|
||||
|
||||
```html
|
||||
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**title 标签**:
|
||||
|
||||
用于设置网页标题：
|
||||
|
||||
```html
|
||||
<title>网页的标题</title>
|
||||
```
|
||||
title也是有助于SEO搜索引擎优化的。
|
||||
|
||||
**base标签**：
|
||||
|
||||
```html
|
||||
<base href="/">
|
||||
```
|
||||
|
||||
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
|
||||
|
||||
### 3、`<body>`标签的属性
|
||||
|
||||
其属性有：
|
||||
- `bgcolor`：设置整个网页的背景颜色。
|
||||
- `background`：设置整个网页的背景图片。
|
||||
- `text`：设置网页中的文本颜色。
|
||||
- `leftmargin`：网页的左边距。IE浏览器默认是8个像素。
|
||||
- `topmargin`：网页的上边距。
|
||||
- `rightmargin`：网页的右边距。
|
||||
- `bottommargin`：网页的下边距。
|
||||
|
||||
`<body>`标签另外还有一些属性，这里用个例子来解释：
|
||||
|
||||
|
||||
|
||||
上方代码中，当我们对`点我点我`这几个字使用超链时，`link`属性表示默认显示的颜色、`alink`属性表示鼠标点击但是还没有松开时的颜色、`vlink`属性表示点击完成之后显示的颜色。效果如下：
|
||||
|
||||
|
||||
|
||||
接下来，我们讲一下`<body>`里的各种标签的属性。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
572
01-HTML/04-HTML标签图文详解（一）.md
Normal file
572
01-HTML/04-HTML标签图文详解（一）.md
Normal file
@@ -0,0 +1,572 @@
|
||||
|
||||
## 一、排版标签
|
||||
|
||||
### 注释标签
|
||||
|
||||
```html
|
||||
<!-- 注释 -->
|
||||
```
|
||||
|
||||
### 段落标签`<p>`
|
||||
|
||||
```html
|
||||
<p>This is a paragraph</p>
|
||||
<p>This is another paragraph</p>
|
||||
```
|
||||
|
||||
属性：
|
||||
- `align="属性值"`：对齐方式。属性值包括left center right。
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
段落，是英语paragraph“段落”缩写。
|
||||
|
||||
HTML标签是分等级的，HTML将所有的标签分为两种：
|
||||
|
||||
- **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。（a标签里不能放a和input）
|
||||
|
||||
- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
|
||||
|
||||
|
||||
从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。
|
||||
|
||||
错误写法：（尝试把 h 放到 p 里）
|
||||
|
||||
```html
|
||||
<p>
|
||||
我是一个小段落
|
||||
<h1>我是一级标题</h1>
|
||||
</p>
|
||||
```
|
||||
|
||||
网页效果如下：
|
||||
|
||||
|
||||
|
||||
上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
|
||||
|
||||
PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
|
||||
|
||||
### 块级标签 `<div>`和`<span>`
|
||||
|
||||
> div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
|
||||
|
||||
>CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
|
||||
|
||||
div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
|
||||
|
||||
div标签的属性：
|
||||
- `align="属性值"`：设置块儿的位置。属性值可选择：left、right、 center。
|
||||
|
||||
<br>
|
||||
|
||||
**`<span>`和`<div>`唯一的区别在于**：`<span>`是不换行的，而`<div>`是换行的。
|
||||
|
||||
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
|
||||
|
||||
效果举例：
|
||||
|
||||
|
||||
|
||||
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
|
||||
div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。
|
||||
|
||||
span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。
|
||||
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
|
||||
|
||||
span里面是放置小元素的，div里面放置大东西的。举例如下：
|
||||
|
||||
span举例：
|
||||
|
||||
```html
|
||||
<p>
|
||||
简介简介简介简介简介简介简介简介
|
||||
<span>
|
||||
<a href="">详细信息</a>
|
||||
<a href="">购买</a>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
div举例：
|
||||
|
||||
```html
|
||||
<div class="header">
|
||||
<div class="logo"></div>
|
||||
<div class="nav"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="guanggao"></div>
|
||||
<div class="dongxi"></div>
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
|
||||
```
|
||||
|
||||
所以，我们亲切的称呼这种模式叫做“**div+css**”。**div标签负责布局，负责结构，负责分块。css负责样式**。
|
||||
|
||||
|
||||
### 换行标签`<br>`（已废弃）
|
||||
|
||||
当你打算结束一行，而又不想开始一个新段落时，`<br> `标签就派上用场了。无论你将它置于何处，`<br> `标签都会产生一个强制的换行。
|
||||
```html
|
||||
This <br> is a para<br>graph with line breaks
|
||||
```
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上图显示，**`<p>`标签和`<br>`标签的区别在于**：`<p>`标签会在段落的前后自动插入一个空行，而`<br>`标签没有空行；而且`<br>`标签没有属性。
|
||||
|
||||
注意`<br>` 没有结束标签，把`<br>`标签写为 `<br/>` 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。
|
||||
|
||||
<br>
|
||||
|
||||
### 水平线标签`<hr>`（已废弃）
|
||||
|
||||
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
属性：
|
||||
- `align="属性值"`：设定线条置放位置。属性值可选择：left right center。
|
||||
- `size="2" `：设定线条粗细。以像素为单位，内定为2。
|
||||
- `width="500"`或`width="70%"`：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
|
||||
- `color="#0000FF"`：设置线条颜色。
|
||||
- `noshade`：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。
|
||||
属性效果演示：
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
### 内容居中标签 `<center>`
|
||||
|
||||
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
到了H5里面，center标签不建议使用。
|
||||
|
||||
<br>
|
||||
|
||||
### 预定义（预格式化）标签：`<pre>`
|
||||
|
||||
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
|
||||
说明：真正排网页过程中，`<pre>`标签几乎用不着。但在PHP中用于打印一个数组时使用。
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
上图中，好像红框部分的字体变小了，而且还出现了缩进，好吧， 这个其实是浏览器搞的鬼。
|
||||
为什么要有`<pre>`这个标签呢？答案是：
|
||||
> 所有的浏览器默认情况下都会忽略空格和空行。
|
||||
|
||||
好吧，其实这个标签也用的比较少。
|
||||
|
||||
## 二、字体标签
|
||||
|
||||
### 标题
|
||||
|
||||
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
### 字体标签`<font>`（已废弃）
|
||||
|
||||
属性：
|
||||
- `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`：设置字体颜色。
|
||||
设置方式：单词 \ #ff00cc \ rgb(0,0,255)
|
||||
- `size`：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
|
||||
设置：用’+2’代表值是5 或直接给值
|
||||
- `face="微软雅黑"`：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。
|
||||
举例：
|
||||
```html
|
||||
<font face="微软雅黑" color="#FF0000" size="10">vae</font>
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### 特殊字符（转义字符）
|
||||
|
||||
- ` `：空格 （non-breaking spacing，不断打空格）
|
||||
- `<`：小于号（less than）
|
||||
- `>`：大于号（greater than）
|
||||
- `&`：符号`&`
|
||||
- `"`：双引号
|
||||
- `'`：单引号
|
||||
- `©`：版权`©`
|
||||
- `™`：商标`™`
|
||||
- `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
|
||||
|
||||
要求背诵的特殊字符有：` `、`<`、`>`、`©`。
|
||||
|
||||
|
||||
比如说，你想把`<p>`作为一个文本在页面上显示，直接写`<p>`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到**转义字符**。应该这么写：
|
||||
```html
|
||||
这是一个HTML语言的<p>标签
|
||||
```
|
||||
正确的效果如下：
|
||||
|
||||
|
||||
|
||||
错误的效果如下：
|
||||
|
||||
|
||||
|
||||
其实我们只要记住前三个符号就行了，其他的在需要的时候查一下就行了。而且，EditPlus软件中是可以直接点击这些符号进行选择的：
|
||||
|
||||
|
||||
|
||||
来一张表格，方便需要的时候查询：
|
||||
|
||||
| 特殊字符 | 描述 |字符的代码 |
|
||||
|:-------------|:-------------|:-----|
|
||||
||空格符|` `|
|
||||
|<|小于号|`<`|
|
||||
|> |大于号|`>`|
|
||||
|&|和号|`&`|
|
||||
|￥|人民币|`¥`|
|
||||
|©|版权|`©`|
|
||||
|®|注册商标|`®`|
|
||||
|°|摄氏度|`°`|
|
||||
|±|正负号|`±`|
|
||||
|×|乘号|`×`|
|
||||
|÷|除号|`÷`|
|
||||
|²|平方2（上标2）|`²`|
|
||||
|³|立方3（上标3）|`³`|
|
||||
|
||||
### 一些小标签/小标记
|
||||
|
||||
- `<u>`：下划线标记
|
||||
|
||||
- `<s>`或`<del>`：中划线标记（删除线）
|
||||
|
||||
- `<i>`或`<em>`：斜体标记
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上面的这几个标签，常用于做一些小装饰、小图标。比如：
|
||||
|
||||
20180118_2340.png
|
||||
|
||||
这张图中，我们通过查看京东网站的代码发现，箭头处的小图标都是用的标签`<i>`。
|
||||
|
||||
div的主要目的是用来布局，而小装饰却可以用来
|
||||
|
||||
### 粗体标签`<b>`或`<strong>`（已废弃）
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
### 上标`<sup>` 下标`<sub>`
|
||||
|
||||
上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
|
||||
举例：
|
||||
```html
|
||||
O<sup>2</sup> 5<sub>3</sub>
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
## 三、超链接
|
||||
|
||||
超链接有三种形式：
|
||||
|
||||
**1、外部链接**：链接到外部文件。举例：
|
||||
```html
|
||||
<a href="02页面.html">点击进入另外一个文件</a>
|
||||
```
|
||||
|
||||
a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
|
||||
|
||||
href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
当然，我们也可以直接点进链接，访问一个网址。举例如下；
|
||||
|
||||
```
|
||||
<a href="http://www.baidu.com" target="_blank">点我点我</a>
|
||||
```
|
||||
|
||||
**2、锚链接**：
|
||||
指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
|
||||
首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
|
||||
|
||||
|
||||
|
||||
上图中解释：
|
||||
|
||||
11行代码表示，顶部这个锚的名字叫做name1。
|
||||
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了`#name1`）。注意**上图中红框部分的`#`号不要忘记了**，表示跳到名为name1的特定位置，这是规定。如果少了`#`号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。
|
||||
|
||||
如果我们将上图中的第28行代码写成：
|
||||
```html
|
||||
<a href="a.html#name1">回到顶部</a>
|
||||
```
|
||||
那就表示，点击之后，跳转到`a.html`页面的`name1锚点`中去。
|
||||
|
||||
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
|
||||
|
||||
**3、邮件链接**：
|
||||
代码举例：
|
||||
```html
|
||||
<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>
|
||||
```
|
||||
效果：点击之后，会弹出outlook，作用不大。
|
||||
|
||||
### 超链接的属性
|
||||
|
||||
- `href`：目标URL
|
||||
- `title`：悬停文本。
|
||||
- `name`：主要用于设置一个锚点的名称。
|
||||
- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
|
||||
- `_self`：在同一个网页中显示（默认值）
|
||||
- `_blank`：**在新的窗口中打开**。
|
||||
- `_parent`：在父窗口中显示
|
||||
- `_top`：在顶级窗口中显示
|
||||
|
||||
|
||||
|
||||
`title`属性举例：
|
||||
|
||||
```html
|
||||
<a href="09_img.html" title="很好看哦">结婚照</a>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
`target`属性举例：
|
||||
|
||||
```html
|
||||
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
|
||||
```
|
||||
|
||||
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
|
||||
也就是说，如果不写`target=”_blank”`那么就是在相同的标签页打开，如果写了`target=”_blank”`，就是在新的空白标签页中打开。
|
||||
|
||||
#### 备注1：分清楚img和a标签的各自的属性
|
||||
|
||||
区别如下：
|
||||
|
||||
```html
|
||||
<img src="1.jpg" />
|
||||
<a href="1.html"></a>
|
||||
```
|
||||
#### 备注2：a是一个文本级的标签
|
||||
|
||||
比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：
|
||||
|
||||
```html
|
||||
<p>
|
||||
<a href="">段落段落段落段落段落段落</a>
|
||||
</p>
|
||||
```
|
||||
|
||||
而不是a包裹p：
|
||||
|
||||
```html
|
||||
<a href="">
|
||||
<p>
|
||||
段落段落段落段落段落段落
|
||||
</p>
|
||||
</a>
|
||||
```
|
||||
|
||||
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
|
||||
|
||||
## 四、图片标签
|
||||
|
||||
img: 代表的就是一张图片。是单边标记。
|
||||
|
||||
img是自封闭标签，也称为单标签。
|
||||
|
||||
#### 能插入的图片类型：
|
||||
|
||||
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
|
||||
|
||||
- 不能往网页中插入的图片格式是：psd、ai
|
||||
|
||||
> HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。
|
||||
|
||||
### `src`属性：图片的相对路径和绝对路径
|
||||
|
||||
这里涉及到图片的一个属性：
|
||||
|
||||
- `src`属性：指图片的路径。
|
||||
|
||||
在写**图片的路径**时，有两种写法：相对路径、绝对路径
|
||||
|
||||
#### 1、**写法一：相对路径**
|
||||
|
||||
相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和上一层路径。
|
||||
|
||||
举例1：
|
||||
|
||||
```html
|
||||
<!-- 当前目录中的图片 -->
|
||||
<img src="2.jpg">
|
||||
<img src=".\2.jpg">
|
||||
<!-- 上一级目录中的图片 -->
|
||||
<img src="..\2.jpg">
|
||||
```
|
||||
|
||||
img 是image“图片”的简写，src 是英语source“资源”的缩写。
|
||||
|
||||
相对路径不会出现这种情况：
|
||||
|
||||
```html
|
||||
aaa/../bbb/1.jpg
|
||||
```
|
||||
|
||||
`../`要么不写，要么就写在开头。
|
||||
|
||||
举例2：
|
||||
|
||||
```html
|
||||
<img src="images/1.jpg">
|
||||
```
|
||||
上方代码的意思是说，当前html页面有一个并列的文件夹`images`，在文件夹`images`中存放了一张图片`1.jpg`
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
相对路径的面试题。现有如下文件层级图：
|
||||
|
||||
|
||||
|
||||
问题：如果想在index.html中插入1.png，那么对应的img语句是？
|
||||
|
||||
分析：
|
||||
|
||||
现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
|
||||
|
||||
答案：
|
||||
|
||||
```html
|
||||
<img src="../../photo/1.png" />
|
||||
```
|
||||
|
||||
#### 2、写法二：**绝对路径**
|
||||
|
||||
绝对路径包括以下两种：
|
||||
|
||||
（1）以盘符开始的绝对路径。举例：
|
||||
|
||||
```html
|
||||
<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">
|
||||
```
|
||||
|
||||
（2）网络路径。举例：
|
||||
|
||||
```html
|
||||
<img src="http://img.smyhvae.com/20200122_200901.png">
|
||||
|
||||
```
|
||||
|
||||
|
||||
大家打开上面的img中的链接，可能有惊喜哦。
|
||||
|
||||
### 相对路径和绝对路径的总结
|
||||
|
||||
相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
|
||||
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
|
||||
|
||||
问题：我的网页在C盘，图片却在D盘，能不能插入呢？
|
||||
|
||||
答案： 用相对路径不能，用绝对路径也不能。
|
||||
|
||||
注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。
|
||||
|
||||
下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：
|
||||
|
||||
```html
|
||||
<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
|
||||
```
|
||||
|
||||
总结一下：
|
||||
|
||||
- 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
|
||||
|
||||
- 相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
|
||||
|
||||
- 绝对路径，就是http://开头的路径。
|
||||
|
||||
- 绝对不允许使用file://开头的东西，这个是完全错误的！
|
||||
|
||||
### img标签的其他属性
|
||||
|
||||
- `width`：宽度
|
||||
- `height`：高度
|
||||
- `Align`（已废弃）：指图片的水平对齐方式，属性值可以是：top、middle、bottom、left、center、right。该属性已废弃，替换为 `vertical-align`这个CSS属性。
|
||||
- `title`：**提示性文本**。公有属性。也就是鼠标悬停时出现的文本。
|
||||
- `border`（已废弃）：给图片加边框，单位是像素，边框的颜色默认黑色。该属性已废弃，替换为 `border`这个CSS属性。
|
||||
- `Hspace`（已废弃）：指图片左右的边距。
|
||||
- `Vspace`（已废弃）：指图片上下的边距。
|
||||
|
||||
- `alt`：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。（有的浏览器不支持）
|
||||
|
||||
举例：
|
||||
```html
|
||||
<img src="images/1.jpg" width="300" height="`188" title="这是美女">
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
`Alt`属性效果演示：（当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容）
|
||||
|
||||
|
||||
|
||||
- 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
|
||||
我们来分别看一下这`align`属性的这几个属性值的区别。
|
||||
|
||||
1、`align=""`，图片和文字低端对齐。即默认情况下的显示效果：
|
||||
|
||||
|
||||
|
||||
2、`align="center"`：图片和文字水平方向上居中对齐。显示效果：
|
||||
|
||||
|
||||
|
||||
3、`align="top"`：图片与文字顶端对齐。显示效果：
|
||||
|
||||
|
||||
|
||||
4、`align="left"`：图片在文字的左边。显示效果：
|
||||
|
||||
|
||||
|
||||
5、`align="right"`：图片在文字的右边。显示效果：
|
||||
|
||||
|
||||
|
||||
**注意事项：**
|
||||
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
|
||||
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right。
|
||||
|
||||
最后，送上妹子的近照一张。楼主已经仁至义尽了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg
|
||||
|
||||
怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html)
|
||||
|
||||
982
01-HTML/06-html标签图文详解（二）.md
Normal file
982
01-HTML/06-html标签图文详解（二）.md
Normal file
@@ -0,0 +1,982 @@
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- 列表标签：`<ul>`、`<ol>`、`<dl>`
|
||||
- 表格标签：`<table>`
|
||||
- 框架标签及内嵌框架`<iframe>`
|
||||
- 表单标签：`<form>`
|
||||
- 多媒体标签
|
||||
- 滚动字幕标签：`<marquee>`
|
||||
|
||||
|
||||
## 列表标签
|
||||
|
||||
列表标签分为三种。
|
||||
|
||||
### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
|
||||
|
||||
英文单词解释如下：
|
||||
|
||||
- ul：unordered list，“无序列表”的意思。
|
||||
- li：list item，“列表项”的意思。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>默认1</li>
|
||||
<li>默认2</li>
|
||||
<li>默认3</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
注意：
|
||||
|
||||
- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
|
||||
- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
|
||||
|
||||
|
||||
**属性：**
|
||||
|
||||
- `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
不光是`<ul>`标签有`type`属性，`<ul>`里面的`<li>`标签也有`type`属性（虽然说这种写法很少见）。效果如下：
|
||||
|
||||
|
||||
|
||||
注意：项目符号可以是图片，需要通过CSS设置`<li>`标记的背景图片来实现(CSS中讲)。
|
||||
|
||||
当然了，列表之间是可以**嵌套**的。我们来举个例子。代码：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li><b>北京市</b>
|
||||
<ul>
|
||||
<li>海淀区</li>
|
||||
<li>朝阳区</li>
|
||||
<li>东城区</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li><b>广州市</b>
|
||||
<ul>
|
||||
<li>天河区</li>
|
||||
<li>越秀区</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
**css 属性**：
|
||||
|
||||
```css
|
||||
list-style-position: inside /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
|
||||
```
|
||||
|
||||
#### ul标签实际应用场景：
|
||||
|
||||
场景1、导航条：
|
||||
|
||||
|
||||
|
||||
场景2、li 里面放置的内容可能很多：
|
||||
|
||||
|
||||
|
||||
声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
|
||||
|
||||
### 2、有序列表`<OL>`，里面的每一项是`<li>`
|
||||
|
||||
英文单词：Ordered List。
|
||||
|
||||
例如：
|
||||
|
||||
```html
|
||||
<ol >
|
||||
<li>呵呵哒1</li>
|
||||
<li>呵呵哒2</li>
|
||||
<li>呵呵哒3</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
**属性：**
|
||||
- `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<ol type="1">
|
||||
<li>呵呵</li>
|
||||
<li>呵呵</li>
|
||||
<li>呵呵</li>
|
||||
</ol>
|
||||
|
||||
<ol type="a">
|
||||
<li>嘿嘿</li>
|
||||
<li>嘿嘿</li>
|
||||
<li>呵呵</li>
|
||||
</ol>
|
||||
|
||||
<ol type="i" start="4">
|
||||
<li>哈哈</li>
|
||||
<li>哈哈</li>
|
||||
<li>哈哈</li>
|
||||
</ol>
|
||||
|
||||
<ol type="I" start="10">
|
||||
<li>么么</li>
|
||||
<li>么么</li>
|
||||
<li>么么</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
|
||||
|
||||
|
||||
ol和ul就是语义不一样，怎么使用都是一样的。
|
||||
ol里面只能有li，li必须被ol包裹。li是容器级。
|
||||
|
||||
ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下：
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>1. 小苹果</li>
|
||||
<li>2. 月亮之上</li>
|
||||
<li>3. 最炫民族风</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### 3、定义列表`<dl>`
|
||||
|
||||
> 定义列表的作用非常大。
|
||||
|
||||
`<dl>`英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
|
||||
|
||||
- `<dt>`：definition title 列表的标题，这个标签是必须的
|
||||
- `<dd>`：definition description 列表的列表项，如果不需要它，可以不加
|
||||
|
||||
备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>第一条</dt>
|
||||
<dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
|
||||
<dd>我会让你明白，我从不说空话</dd>
|
||||
<dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>
|
||||
|
||||
<dt>第二条</dt>
|
||||
<dd>良辰最喜欢对那些自认能力出众的人出手</dd>
|
||||
<dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
|
||||
<dd>你只要记住，我叫叶良辰</dd>
|
||||
<dd>不介意陪你玩玩</dd>
|
||||
<dd>良辰必有重谢</dd>
|
||||
|
||||
</dl>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
上图可以看出，定义列表表达的语义是两层：
|
||||
|
||||
- （1）是一个列表，列出了几个dd项目
|
||||
- （2）每一个词儿都有自己的描述项。
|
||||
|
||||
备注：dd是描述dt的。
|
||||
|
||||
|
||||
定义列表用法非常灵活，可以一个dt配很多dd：
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>北京</dt>
|
||||
<dd>国家首都，政治文化中心</dd>
|
||||
<dd>污染很严重，PM2.0天天报表</dd>
|
||||
<dt>上海</dt>
|
||||
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
|
||||
<dt>广州</dt>
|
||||
<dd>中国南大门，有珠江、小蛮腰</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些：
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>北京</dt>
|
||||
<dd>国家首都，政治文化中心</dd>
|
||||
<dd>污染很严重，PM2.0天天报表</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>上海</dt>
|
||||
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
|
||||
</dl>
|
||||
|
||||
<dl>
|
||||
<dt>广州</dt>
|
||||
<dd>中国南大门，有珠江、小蛮腰</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
真实案例：（京东最下方）
|
||||
|
||||
|
||||
|
||||
|
||||
上图中的结构如下：
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd>
|
||||
<a href="#">购物流程</a>
|
||||
<a href="#">会员介绍</a>
|
||||
<a href="#">生活旅行/团购</a>
|
||||
<a href="#">常见问题</a>
|
||||
<a href="#">大家电</a>
|
||||
<a href="#">联系客服</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd>
|
||||
<a href="#">上门自提</a>
|
||||
<a href="#">211限时达</a>
|
||||
<a href="#">配送服务查询</a>
|
||||
<a href="#">配送费收取标准</a>
|
||||
<a href="#">海外配送</a>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
```
|
||||
|
||||
京东商品分类如下：
|
||||
|
||||
|
||||
|
||||
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。
|
||||
|
||||
## 表格标签
|
||||
|
||||
表格标签用`<table>`表示。
|
||||
一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
|
||||
所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
|
||||
在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
|
||||
|
||||
例如，一行的单元格：
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
上面的表格中没有加文字，所以在生成的网页中什么都看不到。
|
||||
例如，3行4列的单元格：
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td>生命壹号</td>
|
||||
<td>23</td>
|
||||
<td>男</td>
|
||||
<td>黄冈</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>许嵩</td>
|
||||
<td>29</td>
|
||||
<td>男</td>
|
||||
<td>安徽</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>邓紫棋</td>
|
||||
<td>23</td>
|
||||
<td>女</td>
|
||||
<td>香港</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图中的表格好像没看到边框呀，不急，接下来看看`<table>`标签的属性。
|
||||
|
||||
**`<table>`的属性：**
|
||||
- `border`：边框。像素为单位。
|
||||
- `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
|
||||
- `width`：宽度。像素为单位。
|
||||
- `height`：高度。像素为单位。
|
||||
- `bordercolor`：表格的边框颜色。
|
||||
- `align`：**表格**的水平对齐方式。属性值可以填：left right center。
|
||||
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签`<td>`进行设置）
|
||||
- `cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
|
||||
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。
|
||||
- `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
|
||||
- `bgcolor="#99cc66"`：表格的背景颜色。
|
||||
- `background="路径src/..."`：背景图片。
|
||||
背景图片的优先级大于背景颜色。
|
||||
- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
|
||||
- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
|
||||
这两个属性的目的是为了设置3D的效果。
|
||||
- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
|
||||
既然说`dir`是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
|
||||
|
||||
单元格带边框的效果：
|
||||
|
||||
|
||||
|
||||
备注：表格中很细表格边线的制作，CSS的写法：
|
||||
|
||||
```css
|
||||
style="border-collapse:collapse;"
|
||||
```
|
||||
|
||||
|
||||
### `<tr>`：行
|
||||
|
||||
一个表格就是一行一行组成的。
|
||||
|
||||
**属性：**
|
||||
|
||||
- `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
|
||||
- `ltr`：从左到右（left to right，默认）
|
||||
- `rtl`：从右到左（right to left）
|
||||
- `bgcolor`：设置这一行的单元格的背景色。
|
||||
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
|
||||
- `height`：一行的高度
|
||||
- `align="center"`：一行的内容水平居中显示，取值：left、center、right
|
||||
- `valign="center"`：一行的内容垂直居中，取值：top、middle、bottom
|
||||
|
||||
### `<td>`：单元格
|
||||
|
||||
**属性：**
|
||||
|
||||
- `align`：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
|
||||
- `valign`：内容的纵向对齐方式。属性值可以填：top middle bottom
|
||||
- `width`：绝对值或者相对值(%)
|
||||
- `height`：单元格的高度
|
||||
- `bgcolor`：设置这个单元格的背景色。
|
||||
- `background`：设置这个单元格的背景图片。
|
||||
|
||||
### 单元格的合并
|
||||
|
||||
单元格的属性：
|
||||
|
||||
- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
|
||||
- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
|
||||
|
||||
效果举例：（横向合并）
|
||||
|
||||
|
||||
|
||||
效果举例：（纵向合并）
|
||||
|
||||
|
||||
|
||||
### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
|
||||
|
||||
- 属性同`<td>`标签。
|
||||
|
||||
<br>
|
||||
### `<caption>`：表格的标题。使用时和`tr`标签并列
|
||||
- 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### 表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签
|
||||
|
||||
这三个标签有与没有的区别：
|
||||
|
||||
- 1、如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
|
||||
- 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<table border="1">
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>生命壹号</td>
|
||||
<td>23</td>
|
||||
<td>男</td>
|
||||
<td>黄冈</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>许嵩</td>
|
||||
<td>29</td>
|
||||
<td>男</td>
|
||||
<td>安徽</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<td>邓紫棋</td>
|
||||
<td>23</td>
|
||||
<td>女</td>
|
||||
<td>香港</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
</table>
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
## 框架标签
|
||||
|
||||
如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。
|
||||
> - 注意，框架标签不能放在`<body>`标签里面，因为`<body>`标签代表的只是一个页面，而框架标签代表的是多个页面。于是：`<frameset>`和`<body>`只能二选一。
|
||||
> - 框架的集合用`<frameset>`表示，然后在`<frameset>`集合里放入一个一个的框架`<frame>`
|
||||
|
||||
**补充**：`frameset`和`frame`已经从 Web标准中删除，建议使用 iframe 代替。
|
||||
|
||||
### `<frameset>`：框架的集合
|
||||
|
||||
一个框架的集合可以包含多个框架或框架的集合。**属性：**
|
||||
|
||||
- `rows`：水平分割，将框架分为上下部分。写法有两种：
|
||||
|
||||
1、绝对值写法：`rows="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
|
||||
|
||||
2、相对值写法：`rows="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
|
||||
|
||||
注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
|
||||
|
||||
- `cols`：垂直分割，将框架分为左右部分。写法有两种：
|
||||
|
||||
1、绝对值写法：`cols="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
|
||||
|
||||
2、相对值写法：`cols="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
|
||||
|
||||
注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图中，如果删掉页面right.html，显示效果如下：
|
||||
|
||||
|
||||
|
||||
### `<frame>`：框架
|
||||
|
||||
一个框架显示一个页面。
|
||||
|
||||
**属性：**
|
||||
|
||||
- `scrolling="no"`：是否需要滚动条。默认值是true。
|
||||
- `noresize`：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<frame src="top.html" noresize></frame>
|
||||
```
|
||||
|
||||
- `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。
|
||||
颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
|
||||
|
||||
- `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
|
||||
|
||||
- `name`：给框架起一个名字。
|
||||
|
||||
利用`name`这个属性，我们可以在框架里进行超链。
|
||||
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 内嵌框架
|
||||
|
||||
内嵌框架用`<iframe>`表示。`<iframe>`是`<body>`的子标记。
|
||||
|
||||
内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂时我不清楚)。
|
||||
|
||||
**属性：**
|
||||
|
||||
- `src="subframe/the_second.html"`：内嵌的那个页面
|
||||
- `width=800`：宽度
|
||||
- `height=“150`：高度
|
||||
- `scrolling="no"`：是否需要滚动条。默认值是true。
|
||||
- `name="mainFrame"`：窗口名称。公有属性。
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
内嵌框架举例：（在内嵌页面中切换显示不同的压面）
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<a href="文字页面.html" target="myframe">默认显示文字页面</a><br>
|
||||
<a href="图片页面.html" target="myframe">点击进入图片页面</a><br>
|
||||
<a href="表格页面.html" target="myframe">点击进入表格页面</a><br>
|
||||
|
||||
<iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe>
|
||||
<br>
|
||||
嘿嘿
|
||||
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
## 表单标签
|
||||
|
||||
表单标签用`<form>`表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
|
||||
|
||||
**属性：**
|
||||
- `name`：表单的名称，用于JS来操作或控制表单时使用；
|
||||
- `id`：表单的名称，用于JS来操作或控制表单时使用；
|
||||
- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
|
||||
- `method`：表单数据的提交方式，一般取值：get(默认)和post
|
||||
|
||||
注意：表单和表格嵌套时，是在<form>标记中套<table>标记。
|
||||
|
||||
form标签里面的action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
|
||||
|
||||
**get提交和post提交的区别：**
|
||||
|
||||
GET方式：
|
||||
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
|
||||
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
|
||||
|
||||
POST方式：
|
||||
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
|
||||
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
|
||||
|
||||
**Enctype：**
|
||||
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
|
||||
|
||||
- Application/x-www-form-urlencoded：**默认**加密方式，除了上传文件之外的数据都可以
|
||||
- Multipart/form-data：**上传附件时，必须使用这种编码方式**。
|
||||
|
||||
|
||||
### `<input>`：输入标签（文本框）
|
||||
|
||||
用于接收用户输入。
|
||||
|
||||
```html
|
||||
<input type="text" />
|
||||
```
|
||||
|
||||
**属性：**
|
||||
|
||||
- **`type="属性值"`**：文本类型。属性值可以是：
|
||||
- `text`（默认）
|
||||
- `password`：密码类型
|
||||
- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
|
||||
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
|
||||
- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
|
||||
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。
|
||||
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
|
||||
- `button`：普通按钮，结合js代码进行使用。
|
||||
- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
|
||||
- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
|
||||
- `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
|
||||
- `file`：文件选择框。
|
||||
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
|
||||
|
||||
- **`value="内容"`**：文本框里的默认内容（已经被填好了的）
|
||||
|
||||
- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
|
||||
注意**size属性值的单位不是像素哦**。
|
||||
|
||||
- `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
|
||||
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
|
||||
|
||||
- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
|
||||
|
||||
> 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。
|
||||
|
||||
**举例**：
|
||||
|
||||
```html
|
||||
<form>
|
||||
姓名：<input value="呵呵" >逗比<br>
|
||||
昵称：<input value="哈哈" readonly=""><br>
|
||||
名字：<input type="text" value="name" disabled=""><br>
|
||||
密码：<input type="password" value="pwd" size="50"><br>
|
||||
性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
|
||||
<input type="radio" name="gender" id="radio2" value="female" >女<br>
|
||||
爱好：<input type="checkbox" name="love" value="eat">吃饭
|
||||
<input type="checkbox" name="love" value="sleep">睡觉
|
||||
<input type="checkbox" name="love" value="bat">打豆豆
|
||||
</form>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
注意，多个个单选框的input标签中，name 的属性值可以相同，但是 **id 的属性值必须是唯一的**。我们知道，html的标签中，id的属性值是唯一的。
|
||||
|
||||
**四种按钮的举例**：
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="button" value="普通按钮"><br>
|
||||
<input type="submit" value="提交按钮"><br>
|
||||
<input type="reset" value="重置按钮"><br>
|
||||
<input type="image" value="图片按钮1"><br>
|
||||
<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
|
||||
<input type="file" value="文件选择框">
|
||||
</form>
|
||||
```
|
||||
|
||||
**前端开发工程师，重点关心页面的美、样式、板式、交互。至于数据的提供和比较重的业务逻辑，都是后台工程师做的事情。**
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### `<select>`：下拉列表标签
|
||||
|
||||
`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
|
||||
|
||||
select标签和ul、ol、dl一样，都是组标签。
|
||||
|
||||
**`<select>`标签的属性：**
|
||||
|
||||
- `multiple`：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
|
||||
- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
|
||||
|
||||
**`<option>`标签的属性：**
|
||||
|
||||
- `selected`：预选中。没有属性值。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<form>
|
||||
<select>
|
||||
<option>小学</option>
|
||||
<option>初中</option>
|
||||
<option>高中</option>
|
||||
<option>大学</option>
|
||||
<option selected="">研究生</option>
|
||||
</select>
|
||||
<br><br><br>
|
||||
|
||||
<select size="3">
|
||||
<option>小学</option>
|
||||
<option>初中</option>
|
||||
<option>高中</option>
|
||||
<option>大学</option>
|
||||
<option>研究生</option>
|
||||
</select>
|
||||
<br><br><br>
|
||||
|
||||
<select multiple="">
|
||||
<option>小学</option>
|
||||
<option>初中</option>
|
||||
<option selected="">高中</option>
|
||||
<option selected="">大学</option>
|
||||
<option>研究生</option>
|
||||
</select>
|
||||
<br><br><br>
|
||||
|
||||
</form>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
### `<textarea>`标签：多行文本输入框
|
||||
|
||||
text 就是“文本”，area 就是“区域”。
|
||||
|
||||
**属性：**
|
||||
|
||||
- `rows="4"`：指定文本区域的行数。
|
||||
- `cols="20"`：指定文本区域的列数。
|
||||
- `readonly`：只读。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<form>
|
||||
<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
|
||||
</form>
|
||||
```
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。
|
||||
|
||||
|
||||
|
||||
### 表单的语义化
|
||||
|
||||
比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
|
||||
举例：
|
||||
|
||||
```html
|
||||
<form>
|
||||
|
||||
<fieldset>
|
||||
<legend>账号信息</legend>
|
||||
姓名：<input value="呵呵" >逗比<br>
|
||||
密码：<input type="password" value="pwd" size="50"><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>其他信息</legend>
|
||||
性别：<input type="radio" name="gender" value="male" checked="">男
|
||||
<input type="radio" name="gender" value="female" >女<br>
|
||||
爱好：<input type="checkbox" name="love" value="eat">吃饭
|
||||
<input type="checkbox" name="love" value="sleep">睡觉
|
||||
<input type="checkbox" name="love" value="bat">打豆豆
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### `<label>`标签
|
||||
|
||||
我们先来看下面一段代码：
|
||||
|
||||
```html
|
||||
<input type="radio" name="sex" /> 男
|
||||
<input type="radio" name="sex" /> 女
|
||||
|
||||
```
|
||||
|
||||
对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。
|
||||
|
||||
本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。
|
||||
|
||||
解决方法如下：
|
||||
|
||||
```html
|
||||
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
|
||||
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
|
||||
```
|
||||
|
||||
上方代码中，让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。
|
||||
|
||||
|
||||
当然了，复选框也有label：（任何表单元素都有label）
|
||||
|
||||
```html
|
||||
<input type="checkbox" id="kk" />
|
||||
<label for="kk">10天内免登陆</label>
|
||||
```
|
||||
|
||||
## 多媒体标签
|
||||
|
||||
**声明：**
|
||||
多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
|
||||
.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
|
||||
上述格式视频一般文件较大，不利于网络下载播放。
|
||||
一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
|
||||
Flash格式的视频兼容性非常好，Flash格式的文件很小。
|
||||
|
||||
### `<bgsound>`标签：播放背景音乐
|
||||
**属性：**
|
||||
- `src="音乐文件的路径"`
|
||||
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。
|
||||
|
||||
举例：
|
||||
```html
|
||||
<body>
|
||||
<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
|
||||
</body>
|
||||
|
||||
```
|
||||
运行效果：
|
||||
打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。
|
||||
<br>
|
||||
### `<embed>`标签：播放多媒体文件（音频、视频等）
|
||||
主要应用Netscape浏览器，它不是W3C规范。
|
||||
|
||||
> 备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。
|
||||
|
||||
**属性：**
|
||||
- `src="多媒体文件的路径"`
|
||||
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。
|
||||
- `autostart="false"`：打开网页时，禁止自动播放。默认值是true。
|
||||
- `volume="100"`：设置默认的音量大小，测试发现这个值好像不起作用哦。
|
||||
- width：指Flash文件的宽度
|
||||
- height：指Flash文件的高度
|
||||
- quality：指Flash的播放质量，质量有高有低 hight low
|
||||
- pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
|
||||
- type：指定Flash的文件格式类型
|
||||
- wmode：指Flash的背景是否可以透明，取值：transparent是透明的
|
||||
|
||||
`<embed>`标签播放音频举例：
|
||||
```html
|
||||
<body>
|
||||
<embed src="王菲 - 清风徐来.mp3"></embed>
|
||||
</body>
|
||||
|
||||
```
|
||||
IE 8中的运行效果：
|
||||
|
||||
|
||||
|
||||
google浏览器中的运行效果：
|
||||
|
||||
|
||||
|
||||
注：在HTML5中新增了`<video>`标签播放视频。
|
||||
<br>
|
||||
|
||||
### `<object>`标签：播放多媒体文件（音频、视频等）
|
||||
|
||||
主要应用IE浏览器，它是W3C规范。
|
||||
|
||||
**属性：**
|
||||
- `classid`：指定Flash插件的ID号，一般存在于注册表中。
|
||||
- `codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
|
||||
- `<param>`标签的主要作用：设置具体的详细参数。
|
||||
|
||||
**总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将`<object>`标签和`<embed>`标签标记一起使用，但使用的顺序是：`<object>`中嵌套`<embed>`标记。**
|
||||
举例：
|
||||
|
||||
```html
|
||||
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
|
||||
<param name="movie" value="images/banner.swf">
|
||||
<param name="quality" value="high">
|
||||
<param name="wmode" value="transparent">
|
||||
<embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
|
||||
</object>
|
||||
```
|
||||
|
||||
## `<marquee>`：滚动字幕标签
|
||||
|
||||
如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。
|
||||
**属性：**
|
||||
- `direction="right"`：移动的目标方向。属性值可以是：`left`（从右向左移动，默认值）、`right`（从左向右移动）、`up`（从下向上移动）、`down`（从上向下移动）。
|
||||
|
||||
- `behavior="slide"`：行为方式。属性值可以是：`slide`（只移动一次）、`scroll`（循环移动，默认值）、`alternate`（循环移动）、。
|
||||
`alternate`和`scroll`属性值都是循环移动，区别在于：假设在`direction="right"`的情况下，`behavior="scroll"`表示从左到右、从左到右、从左到右···`behavior="alternate"`表示从左到右、从右到左、从左到右···
|
||||
|
||||
- `scrollamount="30"`：移动的速度
|
||||
- `loop="3"`: 循环多少圈。负值表示无限循环
|
||||
- `scrolldelay="1000"`：移动一次休息多长时间。单位是毫秒。
|
||||
|
||||
举例：
|
||||
```html
|
||||
<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
## html废弃标签介绍
|
||||
|
||||
HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。
|
||||
|
||||
2004年之前的东西：
|
||||
|
||||
```html
|
||||
<font size="9" color="red">哈哈</font>
|
||||
```
|
||||
|
||||
下面这些标签都是css钩子，而不是原意：
|
||||
|
||||
```html
|
||||
<b>加粗</b>
|
||||
<u>下划线</u>
|
||||
<i>倾斜</i>
|
||||
<del>删除线</del>
|
||||
<em>强调</em>
|
||||
<strong>强调</strong>
|
||||
|
||||
```
|
||||
|
||||
这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
|
||||
|
||||
类似的还有水平线标签：
|
||||
|
||||
```html
|
||||
<hr />
|
||||
```
|
||||
|
||||
换行标签：
|
||||
|
||||
```
|
||||
<br />
|
||||
```
|
||||
|
||||
但是，网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，而不要用`<br />`。不到万不得已，不要用br标签。
|
||||
|
||||
标准的div+css页面，只会用到种类很少的标签：
|
||||
|
||||
```
|
||||
div p h1 span a img ul ol dl input
|
||||
```
|
||||
|
||||
知道每个标签的特殊用法、属性。比如a标签，img的属性。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号（千古壹号id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
874
01-HTML/07-HTML5详解.md
Normal file
874
01-HTML/07-HTML5详解.md
Normal file
@@ -0,0 +1,874 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8424230.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## HTML5的介绍
|
||||
|
||||
### Web 技术发展时间线
|
||||
|
||||
- 1991 HTML
|
||||
|
||||
|
||||
- 1994 HTML2
|
||||
|
||||
- 1996 CSS1 + JavaScript
|
||||
|
||||
- 1997 HTML4
|
||||
|
||||
- 1998 CSS2
|
||||
|
||||
- 2000 XHTML1（严格的html）
|
||||
|
||||
- 2002 Tableless Web Design（表格布局）
|
||||
|
||||
- 2005 AJAX
|
||||
|
||||
- 2009 HTML5
|
||||
|
||||
- 2014 HTML5 Finalized
|
||||
|
||||
|
||||
2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。
|
||||
|
||||
|
||||
2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。
|
||||
|
||||
|
||||
H5草案的前身是叫：Web Application，最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。
|
||||
|
||||
2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。
|
||||
|
||||
|
||||
### 什么是 HTML5
|
||||
|
||||
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
|
||||
|
||||
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
|
||||
|
||||
|
||||
**`HTML5`的广义概念**：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
|
||||
|
||||
`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
|
||||
|
||||
**总结**：`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。
|
||||
|
||||
|
||||
**富客户端**：具有很强的**交互性**和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。
|
||||
|
||||
**PS：**
|
||||
|
||||
单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。
|
||||
|
||||
如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。
|
||||
|
||||
### HTML5 的应用场景
|
||||
|
||||
列举几个HTML5 的应用场景：
|
||||
|
||||
（1）极具表现力的网页：内容简约而不简单。
|
||||
|
||||
（2）网页应用程序：
|
||||
|
||||
- 代替PC端的软件：iCloud、百度脑图、Office 365等。
|
||||
|
||||
- APP端的网页：淘宝、京东、美团等。
|
||||
|
||||
- 微信端：公众号、小程序等。
|
||||
|
||||
（3）混合式本地应用。
|
||||
|
||||
（4）简单的游戏。
|
||||
|
||||
### HTML5 新增的内容
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 语义化的标签
|
||||
|
||||
### 语义化的作用
|
||||
|
||||
语义标签对于我们并不陌生，如`<p>`表示一个段落、`<ul>`表示一个无序列表。**标签语义化的作用：**
|
||||
|
||||
- 能够便于开发者阅读和写出更优雅的代码。
|
||||
|
||||
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
|
||||
|
||||
- 更好地搜索引擎优化。
|
||||
|
||||
总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。
|
||||
|
||||
|
||||
### H5在语义上的改进
|
||||
|
||||
在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
|
||||
|
||||
我们常见的 css+div 布局是：
|
||||
|
||||
|
||||
|
||||
|
||||
在html5中，我们可以这样写：
|
||||
|
||||
|
||||
|
||||
传统的做法中，我们通过增加类名如`class="header"`、`class="footer"`，使HTML页面具有语义性，但是不具有通用性。
|
||||
|
||||
HTML5 则是通过新增语义标签的形式来解决这个问题，例如`<header></header>`、`<footer></footer>`等，这样就可以使其具有通用性。
|
||||
|
||||
|
||||
**传统网页布局：**
|
||||
|
||||
|
||||
```html
|
||||
<!-- 头部 -->
|
||||
<div class="header">
|
||||
<ul class="nav"></ul>
|
||||
</div>
|
||||
|
||||
<!-- 主体部分 -->
|
||||
<div class="main">
|
||||
<!-- 文章 -->
|
||||
<div class="article"></div>
|
||||
<!-- 侧边栏 -->
|
||||
<div class="aside"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
**H5 的经典网页布局：**
|
||||
|
||||
```html
|
||||
<!-- 头部 -->
|
||||
<header>
|
||||
<ul class="nav"></ul>
|
||||
</header>
|
||||
|
||||
<!-- 主体部分 -->
|
||||
<div class="main">
|
||||
<!-- 文章 -->
|
||||
<article></article>
|
||||
<!-- 侧边栏 -->
|
||||
<aside></aside>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
```
|
||||
|
||||
|
||||
## H5中新增的语义标签
|
||||
|
||||
- `<section>` 表示区块
|
||||
|
||||
- `<article>` 表示文章。如文章、评论、帖子、博客
|
||||
|
||||
- `<header>` 表示页眉
|
||||
|
||||
- `<footer>` 表示页脚
|
||||
|
||||
- `<nav>` 表示导航
|
||||
|
||||
- `<aside>` 表示侧边栏。如文章的侧栏
|
||||
|
||||
- `<figure>` 表示媒介内容分组。
|
||||
|
||||
- `<mark>` 表示标记 (用得少)
|
||||
|
||||
- `<progress>` 表示进度 (用得少)
|
||||
|
||||
- `<time>` 表示日期
|
||||
|
||||
本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
|
||||
|
||||
|
||||
PS：单标签不用写关闭符号。
|
||||
|
||||
### 新语义标签的兼容性处理
|
||||
|
||||
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入`html5shiv.js`文件。
|
||||
|
||||
引入时，需要做if判断，具体代码如下：
|
||||
|
||||
```html
|
||||
<!-- 条件注释 只有ie能够识别-->
|
||||
|
||||
<!--[if lte ie 8]>
|
||||
<script src="html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
```
|
||||
|
||||
上方代码是**条件注释**：虽然是注释，但是IE浏览器可以识别出来。解释一下：
|
||||
|
||||
- l：less 更小
|
||||
|
||||
- t：than 比
|
||||
|
||||
- e：equal等于
|
||||
|
||||
- g：great 更大
|
||||
|
||||
|
||||
PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。
|
||||
|
||||
|
||||
在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
|
||||
|
||||
但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
|
||||
|
||||
当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。
|
||||
|
||||
|
||||
## H5中的表单
|
||||
|
||||
传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
|
||||
|
||||
### H5中新增的表单类型
|
||||
|
||||
- `email` 只能输入email格式。自动带有验证功能。
|
||||
|
||||
- `tel` 手机号码。
|
||||
|
||||
- `url` 只能输入url格式。
|
||||
|
||||
- `number` 只能输入数字。
|
||||
|
||||
- `search` 搜索框
|
||||
|
||||
- `range` 滑动条
|
||||
|
||||
- `color` 拾色器
|
||||
|
||||
- `time` 时间
|
||||
|
||||
- `date` 日期
|
||||
|
||||
- `datetime` 时间日期
|
||||
|
||||
- `month` 月份
|
||||
|
||||
- `week` 星期
|
||||
|
||||
|
||||
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>表单类型</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
form {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
margin: 32px auto 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>表单类型</legend>
|
||||
<label for="">
|
||||
email: <input type="email" name="email" required>
|
||||
</label>
|
||||
<label for="">
|
||||
color: <input type="color" name="color">
|
||||
</label>
|
||||
<label for="">
|
||||
url: <input type="url" name='url'>
|
||||
</label>
|
||||
<label for="">
|
||||
number: <input type="number" step="3" name="number">
|
||||
</label>
|
||||
<label for="">
|
||||
range: <input type="range" name="range" value="100">
|
||||
</label>
|
||||
<label for="">
|
||||
search: <input type="search" name="search">
|
||||
</label>
|
||||
<label for="">
|
||||
tel: <input type="tel" name="tel">
|
||||
</label>
|
||||
<label for="">
|
||||
time: <input type="time" name="time">
|
||||
</label>
|
||||
<label for="">
|
||||
date: <input type="date" name="date">
|
||||
</label>
|
||||
<label for="">
|
||||
datetime: <input type="datetime">
|
||||
</label>
|
||||
<label for="">
|
||||
week: <input type="week" name="month">
|
||||
</label>
|
||||
<label for="">
|
||||
month: <input type="month" name="month">
|
||||
</label>
|
||||
<label for="">
|
||||
datetime-local: <input type="datetime-local" name="datetime-local">
|
||||
</label>
|
||||
<input type="submit">
|
||||
</fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
|
||||
|
||||
### 表单元素（标签）
|
||||
|
||||
这里讲两个表单元素。
|
||||
|
||||
**1、`<datalist>` 数据列表：**
|
||||
|
||||
|
||||
```html
|
||||
<input type="text" list="myData">
|
||||
<datalist id="myData">
|
||||
<option>本科</option>
|
||||
<option>研究生</option>
|
||||
<option>不明</option>
|
||||
</datalist>
|
||||
```
|
||||
|
||||
上方代码中，input里的list属性和 datalist 进行了绑定。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上图可以看出，数据列表可以自动提示。
|
||||
|
||||
2、`<keygen>`元素：
|
||||
|
||||
keygen 元素的作用是提供一种验证用户的可靠方法。
|
||||
|
||||
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。
|
||||
|
||||
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
|
||||
|
||||
3、`<meter>`元素：度量器
|
||||
|
||||
- low：低于该值后警告
|
||||
|
||||
- high：高于该值后警告
|
||||
|
||||
- value：当前值
|
||||
|
||||
- max：最大值
|
||||
|
||||
- min：最小值。
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
<meter value="81" min="0" max="100" low="60" high="80"/>
|
||||
```
|
||||
|
||||
### 表单属性
|
||||
|
||||
- `placeholder` 占位符（提示文字）
|
||||
|
||||
- `autofocus` 自动获取焦点
|
||||
|
||||
- `multiple` 文件上传多选或多个邮箱地址
|
||||
|
||||
- `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
|
||||
|
||||
- `form` 指定表单项属于哪个form，处理复杂表单时会需要
|
||||
|
||||
- `novalidate` 关闭默认的验证功能（只能加给form）
|
||||
|
||||
- `required` 表示必填项
|
||||
|
||||
- `pattern` 自定义正则，验证表单。例如
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
form {
|
||||
width: 100%;
|
||||
/* 最大宽度*/
|
||||
max-width: 640px;
|
||||
/* 最小宽度*/
|
||||
min-width: 320px;
|
||||
margin: 0 auto;
|
||||
font-family: "Microsoft Yahei";
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>表单属性</legend>
|
||||
<label for="">
|
||||
用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
|
||||
</label>
|
||||
|
||||
<label for="">
|
||||
电话：<input type="tel" pattern="1\d{10}"/>
|
||||
</label>
|
||||
|
||||
<label for="">
|
||||
multiple的表单: <input type="file" multiple>
|
||||
</label>
|
||||
|
||||
<!-- 上传文件-->
|
||||
<input type="file" name="file" multiple/>
|
||||
|
||||
<input type="submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 表单事件
|
||||
|
||||
- `oninput()`：用户输入内容时触发，可用于输入字数统计。
|
||||
|
||||
- `oninvalid()`：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
form {
|
||||
width: 100%;
|
||||
/* 最大宽度*/
|
||||
max-width: 400px;
|
||||
/* 最小宽度*/
|
||||
min-width: 200px;
|
||||
margin: 0 auto;
|
||||
font-family: "Microsoft Yahei";
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form action="">
|
||||
<fieldset>
|
||||
<legend>表单事件</legend>
|
||||
<label for="">
|
||||
邮箱：<input type="email" name="" id="txt1"/>
|
||||
</label>
|
||||
<label for="">
|
||||
输入的次数统计：<input type="text" name="" id="txt2"/>
|
||||
</label>
|
||||
|
||||
<input type="submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
<script>
|
||||
|
||||
var txt1 = document.getElementById('txt1');
|
||||
var txt2 = document.getElementById('txt2');
|
||||
var num = 0;
|
||||
|
||||
txt1.oninput = function () { //用户输入时触发
|
||||
|
||||
num++; //用户每输入一次，num自动加 1
|
||||
//将统计数显示在txt2中
|
||||
txt2.value = num;
|
||||
}
|
||||
txt1.oninvalid = function () { //验证不通过时触发
|
||||
this.setCustomValidity('亲，请输入正确哦'); //设置验证不通过时的提示文字
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
## 多媒体
|
||||
|
||||
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
|
||||
|
||||
H5里面提供了视频和音频的标签。
|
||||
|
||||
### 音频
|
||||
|
||||
HTML5通过`<audio>`标签来解决音频播放的问题。
|
||||
|
||||
使用举例：
|
||||
|
||||
```html
|
||||
<audio src="music/yinyue.mp3" autoplay controls> </audio>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
我们可以通过附加属性，来更友好地控制音频的播放，如：
|
||||
|
||||
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
|
||||
|
||||
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
|
||||
|
||||
- `loop` 循环播放。
|
||||
|
||||
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
|
||||
|
||||
**处理兼容性问题：**
|
||||
|
||||
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
|
||||
|
||||
|
||||
|
||||
为了做到多浏览器支持，可以采取以下兼容性写法：
|
||||
|
||||
```html
|
||||
<!--推荐的兼容写法：-->
|
||||
<audio controls loop>
|
||||
<source src="music/yinyue.mp3"/>
|
||||
<source src="music/yinyue.ogg"/>
|
||||
<source src="music/yinyue.wav"/>
|
||||
抱歉，你的浏览器暂不支持此音频格式
|
||||
</audio>
|
||||
```
|
||||
|
||||
代码解释：如果识别不出音频格式，就弹出那句“抱歉”。
|
||||
|
||||
|
||||
### 视频
|
||||
|
||||
|
||||
HTML5通过`<video>`标签来解决视频播放的问题。
|
||||
|
||||
使用举例：
|
||||
|
||||
```html
|
||||
<video src="video/movie.mp4" controls autoplay></video>
|
||||
```
|
||||
|
||||
|
||||
我们可以通过附加属性，来更友好地控制视频的播放，如：
|
||||
|
||||
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
|
||||
|
||||
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
|
||||
|
||||
- `loop` 循环播放。
|
||||
|
||||
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
|
||||
|
||||
- `width`：设置播放窗口宽度。
|
||||
|
||||
- `height`：设置播放窗口的高度。
|
||||
|
||||
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
|
||||
|
||||
|
||||
|
||||
兼容性写法：
|
||||
|
||||
```html
|
||||
<!--<video src="video/movie.mp4" controls autoplay ></video>-->
|
||||
<!-- 行内块 display:inline-block -->
|
||||
<video controls autoplay>
|
||||
<source src="video/movie.mp4"/>
|
||||
<source src="video/movie.ogg"/>
|
||||
<source src="video/movie.webm"/>
|
||||
抱歉，不支持此视频
|
||||
</video>
|
||||
```
|
||||
|
||||
## DOM 操作
|
||||
|
||||
### 获取元素
|
||||
|
||||
- document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
|
||||
|
||||
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
|
||||
|
||||
### 类名操作
|
||||
|
||||
- Node.classList.add("class") 添加class
|
||||
|
||||
- Node.classList.remove("class") 移除class
|
||||
|
||||
- Node.classList.toggle("class") 切换class，有则移除，无则添加
|
||||
|
||||
- Node.classList.contains("class") 检测是否存在class
|
||||
|
||||
### 自定义属性
|
||||
|
||||
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
|
||||
|
||||
H5可以直接在标签里添加自定义属性，**但必须以 `data-` 开头**。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 给标签添加自定义属性 必须以data-开头 -->
|
||||
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
|
||||
<script>
|
||||
var box = document.querySelector('.box');
|
||||
|
||||
//自定义的属性 需要通过 dateset[]方式来获取
|
||||
console.log(box.dataset["content"]); //打印结果：我是一个div
|
||||
console.log(box.dataset["myName"]); //打印结果：smyhvae
|
||||
|
||||
//设置自定义属性的值
|
||||
var num = 100;
|
||||
num.index = 10;
|
||||
box.index = 100;
|
||||
box.dataset["content"] = "aaaa";
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### 举例：鼠标点击时，tab栏切换
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tab 标签</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 400px;
|
||||
margin: 30px auto;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #C0DCC0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tabs nav {
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
background-color: #C0DCC0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: block;
|
||||
width: 100px;
|
||||
border-right: 1px solid #FFF;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:last-child {
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
nav a.active {
|
||||
background-color: #9BAF9B;
|
||||
}
|
||||
|
||||
.cont {
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cont ol {
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="tabs">
|
||||
<nav>
|
||||
<a href="javascript:;" data-cont="local">国内新闻</a>
|
||||
<a href="javascript:;" data-cont="global">国际新闻</a>
|
||||
<a href="javascript:;" data-cont="sports">体育新闻</a>
|
||||
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
|
||||
</nav>
|
||||
<section class="cont" id="local">
|
||||
<ol>
|
||||
<li>国内新闻1</li>
|
||||
<li>国内新闻2</li>
|
||||
<li>国内新闻3</li>
|
||||
<li>国内新闻4</li>
|
||||
<li>国内新闻5</li>
|
||||
<li>国内新闻6</li>
|
||||
<li>国内新闻7</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="cont" id="global">
|
||||
<ol>
|
||||
<li>国内新闻1</li>
|
||||
<li>国际新闻2</li>
|
||||
<li>国际新闻3</li>
|
||||
<li>国际新闻4</li>
|
||||
<li>国际新闻5</li>
|
||||
<li>国际新闻6</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="cont" id="sports">
|
||||
<ol>
|
||||
<li>体育新闻1</li>
|
||||
<li>体育新闻2</li>
|
||||
<li>体育新闻3</li>
|
||||
<li>体育新闻4</li>
|
||||
<li>体育新闻5</li>
|
||||
<li>体育新闻6</li>
|
||||
<li>体育新闻7</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="cont" id="funny">
|
||||
<ol>
|
||||
<li>娱乐新闻1</li>
|
||||
<li>娱乐新闻2</li>
|
||||
<li>娱乐新闻3</li>
|
||||
<li>娱乐新闻4</li>
|
||||
<li>娱乐新闻5</li>
|
||||
<li>娱乐新闻6</li>
|
||||
<li>娱乐新闻7</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
// 目标： 默认显示一个 当前的样式
|
||||
// 点击导航，实现切换
|
||||
// key 表示的当前显示的是第几个
|
||||
|
||||
(function (key) {
|
||||
// 获取所有的导航
|
||||
var navs = document.querySelectorAll('nav a');
|
||||
// 遍历 给导航 绑定事件，并且添加当前样式
|
||||
for (var i = 0; i < navs.length; i++) {
|
||||
// 如果是用户指定的当前样式
|
||||
if (key == i) {
|
||||
navs[i].classList.add('active');
|
||||
// 拿到要显示内容section的id
|
||||
var secId = navs[i].dataset['cont'];
|
||||
// 获取对应的section标签
|
||||
document.querySelector('#' + secId).style.display = 'block';
|
||||
}
|
||||
|
||||
// 给每一个导航绑定点击事件
|
||||
navs[i].onclick = function () {
|
||||
// 排他
|
||||
// 之前有active样式的清除, 之前显示的section 隐藏
|
||||
var currentNav = document.querySelector('.active');
|
||||
// 获取对应的内容区域 ，让其隐藏
|
||||
var currentId = currentNav.dataset['cont'];
|
||||
// 去掉导航的active 样式
|
||||
currentNav.classList.remove('active');
|
||||
// 对应的内容区域
|
||||
document.querySelector('#' + currentId).style.display = 'none';
|
||||
|
||||
// 突出显示自己 导航添加样式 对应的section 显示
|
||||
// 给自己添加active样式
|
||||
this.classList.add('active');
|
||||
// 对应的section模块显示出来
|
||||
var myId = this.dataset['cont'];
|
||||
document.querySelector('#' + myId).style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
})(0);
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
266
01-HTML/08-HTML5举例：简单的视频播放器.md
Normal file
266
01-HTML/08-HTML5举例：简单的视频播放器.md
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
|
||||
我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。
|
||||
|
||||
index.html的代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<!-- 引入字体图标的文件-->
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*多媒体标题*/
|
||||
figcaption{
|
||||
text-align: center;
|
||||
line-height: 150px;
|
||||
font-family: "Microsoft Yahei";
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
/* 播放器*/
|
||||
.palyer{
|
||||
width: 720px;
|
||||
height: 360px;
|
||||
margin:10px auto;
|
||||
border: 1px solid #000;
|
||||
background: url(images/loading.gif) center no-repeat #000;
|
||||
background-size:auto 100%;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
.palyer video{
|
||||
height:100%;
|
||||
display: block;
|
||||
margin:0 auto;
|
||||
/*display: none;*/
|
||||
}
|
||||
|
||||
/* 控制条*/
|
||||
|
||||
.controls{
|
||||
width: 700px;
|
||||
height:40px;
|
||||
background-color: rgba(255, 255, 0, 0.3);
|
||||
position: absolute;
|
||||
bottom:10px;
|
||||
left:10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/*开关*/
|
||||
.switch{
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left:10px;
|
||||
top:10px;
|
||||
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color:yellow;
|
||||
|
||||
}
|
||||
/*进度条*/
|
||||
.progress{
|
||||
width: 432px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
left:40px;
|
||||
top:15px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 当前进度*/
|
||||
.curr-progress{
|
||||
width: 50%;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* 时间模块*/
|
||||
.time{
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
left:510px;
|
||||
top:10px;
|
||||
font-size:12px;
|
||||
|
||||
}
|
||||
/*全屏*/
|
||||
.extend{
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
right:20px;
|
||||
top:10px;
|
||||
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color:yellow;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 多媒体-->
|
||||
<figure>
|
||||
<!-- 多媒体标题-->
|
||||
<figcaption>视频案例</figcaption>
|
||||
<div class="palyer">
|
||||
<video src="video/fun.mp4"></video>
|
||||
<!-- 控制条-->
|
||||
<div class="controls">
|
||||
<!-- 播放暂停-->
|
||||
<a href="#" class="switch icon-play"></a>
|
||||
<div class="progress">
|
||||
<!-- 当前进度-->
|
||||
<div class="curr-progress"></div>
|
||||
</div>
|
||||
<!-- 时间-->
|
||||
<div class="time">
|
||||
<span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
|
||||
</div>
|
||||
<!-- 全屏-->
|
||||
<a href="#" class="extend icon-resize-full"></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<script>
|
||||
// 思路：
|
||||
/*
|
||||
* 1、点击按钮 实现播放暂停并且切换图标
|
||||
* 2、算出视频的总时显示出出来
|
||||
* 3、当视频播放的时候，进度条同步，当前时间同步
|
||||
* 4、点击实现全屏
|
||||
*/
|
||||
|
||||
// 获取需要的标签
|
||||
var video=document.querySelector('video');
|
||||
// 播放按钮
|
||||
var playBtn=document.querySelector('.switch');
|
||||
// 当前进度条
|
||||
var currProgress=document.querySelector('.curr-progress');
|
||||
// 当前时间
|
||||
var currTime=document.querySelector('.curr-time');
|
||||
// 总时间
|
||||
var totalTime=document.querySelector('.total-time');
|
||||
// 全屏
|
||||
var extend=document.querySelector('.extend');
|
||||
|
||||
var tTime=0;
|
||||
|
||||
// 1、点击按钮 实现播放暂停并且切换图标
|
||||
|
||||
playBtn.onclick=function(){
|
||||
// 如果视频播放 就暂停，如果暂停 就播放
|
||||
if(video.paused){
|
||||
// 播放
|
||||
video.play();
|
||||
//切换图标
|
||||
this.classList.remove('icon-play');
|
||||
this.classList.add('icon-pause');
|
||||
}else{
|
||||
// 暂停
|
||||
video.pause();
|
||||
// 切换图标
|
||||
this.classList.remove('icon-pause');
|
||||
this.classList.add('icon-play');}
|
||||
}
|
||||
|
||||
// 2、算出视频的总时显示出出来
|
||||
// 当时加载完成后的事件，视频能播放的时候
|
||||
video.oncanplay=function(){
|
||||
// 获取视频总时长
|
||||
tTime=video.duration;
|
||||
console.log(tTime);
|
||||
|
||||
// 将总秒数 转换成 时分秒的格式：00：00:00
|
||||
// 小时
|
||||
var h=Math.floor(tTime/3600);
|
||||
// 分钟
|
||||
var m=Math.floor(tTime%3600/60);
|
||||
// 秒
|
||||
var s=Math.floor(tTime%60);
|
||||
|
||||
// console.log(h);
|
||||
// console.log(m);
|
||||
// console.log(s);
|
||||
|
||||
// 把数据格式转成 00:00：00
|
||||
h=h>=10?h:"0"+h;
|
||||
m=m>=10?m:"0"+m;
|
||||
s=s>=10?s:"0"+s;
|
||||
|
||||
|
||||
console.log(h);
|
||||
console.log(m);
|
||||
console.log(s);
|
||||
// 显示出来
|
||||
totalTime.innerHTML=h+":"+m+":"+s;
|
||||
}
|
||||
// * 3、当视频播放的时候，进度条同步，当前时间同步
|
||||
// 当时当前时间更新的时候触发
|
||||
video.ontimeupdate=function(){
|
||||
// 获取视频当前播放的时间
|
||||
// console.log(video.currentTime);
|
||||
// 当前播放时间
|
||||
var cTime=video.currentTime;
|
||||
// 把格式转成00:00:00
|
||||
|
||||
var h=Math.floor(cTime/3600);
|
||||
// 分钟
|
||||
var m=Math.floor(cTime%3600/60);
|
||||
// 秒
|
||||
var s=Math.floor(cTime%60);
|
||||
|
||||
// 把数据格式转成 00:00：00
|
||||
h=h>=10?h:"0"+h;
|
||||
m=m>=10?m:"0"+m;
|
||||
s=s>=10?s:"0"+s;
|
||||
|
||||
// 显示出当前时间
|
||||
currTime.innerHTML=h+":"+m+":"+s;
|
||||
|
||||
// 改变进度条的宽度： 当前时间/总时间
|
||||
var value=cTime/tTime;
|
||||
|
||||
currProgress.style.width=value*100+"%";
|
||||
|
||||
}
|
||||
|
||||
// 全屏
|
||||
extend.onclick=function(){
|
||||
// 全屏的h5代码
|
||||
video.webkitRequestFullScreen();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
- 2018-02-23-H5多媒体播放器.rar
|
||||
|
||||
|
||||
624
01-HTML/09-HTML5详解（二）.md
Normal file
624
01-HTML/09-HTML5详解（二）.md
Normal file
@@ -0,0 +1,624 @@
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- 拖拽
|
||||
|
||||
- 历史
|
||||
|
||||
- 地理位置
|
||||
|
||||
- 全屏
|
||||
|
||||
## 拖拽
|
||||
|
||||
|
||||
|
||||
|
||||
如上图所示，我们可以拖拽博客园网站里的图片和超链接。
|
||||
|
||||
在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
|
||||
|
||||
### 1、拖拽元素
|
||||
|
||||
页面中设置了 `draggable="true"` 属性的元素。
|
||||
|
||||
举例如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<style>
|
||||
.box1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--给 box1 增加拖拽的属性-->
|
||||
<div class="box1" draggable="true"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。
|
||||
|
||||
|
||||
**拖拽元素的事件监听**：（应用于拖拽元素）
|
||||
|
||||
- `ondragstart`当拖拽开始时调用
|
||||
|
||||
- `ondragleave` 当**鼠标离开拖拽元素时**调用
|
||||
|
||||
- `ondragend` 当拖拽结束时调用
|
||||
|
||||
- `ondrag` 整个拖拽过程都会调用
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box" draggable="true"></div>
|
||||
|
||||
<script>
|
||||
var box = document.querySelector('.box');
|
||||
|
||||
// 绑定拖拽事件
|
||||
|
||||
// 拖拽开始
|
||||
box.ondragstart = function () {
|
||||
console.log('拖拽开始.');
|
||||
}
|
||||
|
||||
// 拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
|
||||
box.ondragleave = function () {
|
||||
console.log('拖拽离开..');
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
box.ondragend = function () {
|
||||
console.log('拖拽结束...');
|
||||
console.log("---------------");
|
||||
}
|
||||
|
||||
box.ondrag = function () {
|
||||
console.log('拖拽');
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 2、目标元素
|
||||
|
||||
比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。
|
||||
|
||||
页面中任何一个元素都可以成为目标元素。
|
||||
|
||||
**目标元素的事件监听**：（应用于目标元素）
|
||||
|
||||
- `ondragenter` 当拖拽元素进入时调用
|
||||
|
||||
- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
|
||||
|
||||
- `ondrop` 当在目标元素上松开鼠标时调用
|
||||
|
||||
- `ondragleave` 当鼠标离开目标元素时调用
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.one {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #000;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.two {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
left: 300px;
|
||||
top: 100px;
|
||||
border: 1px solid #000;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="one" draggable="true"></div>
|
||||
<div class="two"></div>
|
||||
|
||||
<script>
|
||||
var two = document.querySelector('.two');
|
||||
|
||||
//目标元素的拖拽事件
|
||||
|
||||
// 当被拖拽元素进入时触发
|
||||
two.ondragenter = function () {
|
||||
console.log("来了.");
|
||||
}
|
||||
|
||||
// 当被拖拽元素离开时触发
|
||||
two.ondragleave = function () {
|
||||
|
||||
console.log("走了..");
|
||||
}
|
||||
|
||||
// 当拖拽元素在 目标元素上时，连续触发
|
||||
two.ondragover = function (e) {
|
||||
//阻止拖拽事件的默认行为
|
||||
e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
|
||||
|
||||
console.log("over...");
|
||||
}
|
||||
|
||||
// 当在目标元素上松开鼠标是触发
|
||||
two.ondrop = function () {
|
||||
console.log("松开鼠标了....");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：
|
||||
|
||||
|
||||
|
||||
如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。
|
||||
|
||||
**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
|
||||
|
||||
|
||||
**案例：拖拽练习**
|
||||
|
||||
完整版代码：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.one {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.one > div, .two > div {
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 98px;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #000;
|
||||
position: absolute;
|
||||
left: 600px;
|
||||
top: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="one">
|
||||
<div draggable="true">1</div>
|
||||
<div draggable="true">2</div>
|
||||
<div draggable="true">3</div>
|
||||
<div draggable="true">4</div>
|
||||
<div draggable="true">5</div>
|
||||
<div draggable="true">6</div>
|
||||
<div draggable="true">7</div>
|
||||
<div draggable="true">8</div>
|
||||
</div>
|
||||
<div class="two"></div>
|
||||
|
||||
<script>
|
||||
var boxs = document.querySelectorAll('.one div');
|
||||
// 临时的盒子 用于存放当前拖拽的元素
|
||||
|
||||
var two = document.querySelector('.two');
|
||||
|
||||
var temp = null;
|
||||
// 给8个小盒子分别绑定拖拽事件
|
||||
for (var i = 0; i < boxs.length; i++) {
|
||||
boxs[i].ondragstart = function () {
|
||||
// 保持当前拖拽的元素
|
||||
temp = this;
|
||||
console.log(temp);
|
||||
}
|
||||
|
||||
boxs[i].ondragend = function () {
|
||||
// 当拖拽结束 ，清空temp
|
||||
temp = null;
|
||||
console.log(temp);
|
||||
}
|
||||
}
|
||||
|
||||
// 目标元素的拖拽事件
|
||||
two.ondragover = function (e) {
|
||||
// 阻止拖拽的默认行为
|
||||
e.preventDefault();
|
||||
}
|
||||
// 当在目标元素上松开鼠标是触发
|
||||
two.ondrop = function () {
|
||||
// 将拖拽的元素追加到 two里面来
|
||||
this.appendChild(temp);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
## 历史
|
||||
|
||||
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
|
||||
|
||||
在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态
|
||||
|
||||
`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
|
||||
|
||||
1. window.history.forward(); // 前进
|
||||
2. window.history.back(); // 后退
|
||||
3. window.history.go(); // 刷新
|
||||
4. 通过JS可以加入一个访问状态
|
||||
5. history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
|
||||
|
||||
|
||||
|
||||
## 地理定位
|
||||
|
||||
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
|
||||
|
||||
|
||||
|
||||
### 获取地理信息的方式
|
||||
|
||||
#### 1、IP地址
|
||||
|
||||
|
||||
#### 2、三维坐标：
|
||||
|
||||
|
||||
（1）**GPS**（Global Positioning System，全球定位系统）。
|
||||
|
||||
目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
|
||||
|
||||
- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
|
||||
|
||||
- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
|
||||
|
||||
- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
|
||||
|
||||
- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
|
||||
|
||||
- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
|
||||
|
||||
- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
|
||||
|
||||
以上6个系统中国都能使用。
|
||||
|
||||
（2）**Wi-Fi**定位：仅限于室内。
|
||||
|
||||
（3）**手机信号**定位：通过运营商的信号塔定位。
|
||||
|
||||
|
||||
### 3、用户自定义数据：
|
||||
|
||||
对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
|
||||
|
||||
|
||||
|
||||
|
||||
### 隐私
|
||||
|
||||
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
|
||||
|
||||
|
||||
### API详解
|
||||
|
||||
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
|
||||
|
||||
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
|
||||
|
||||
|
||||
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
|
||||
|
||||
- position.coords.latitude纬度
|
||||
|
||||
- position.coords.longitude经度
|
||||
|
||||
|
||||
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
|
||||
|
||||
|
||||
3、可选参数 options 对象可以调整位置信息数据收集方式
|
||||
|
||||
|
||||
地理位置的 api 代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
/*navigator 导航*/
|
||||
//geolocation: 地理定位
|
||||
// window.navigator.geolocation
|
||||
// 兼容处理
|
||||
if(navigator.geolocation){
|
||||
// 如果支持，获取用户地理信息
|
||||
|
||||
// successCallback 当获取用户位置成功的回调函数
|
||||
// errorCallback 当获取用户位置失败的回调函数
|
||||
|
||||
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
|
||||
|
||||
}else{
|
||||
console.log('sorry,你的浏览器不支持地理定位');
|
||||
}
|
||||
// 获取地理位置成功的回调函数
|
||||
function successCallback(position){
|
||||
// 获取用户当前的经纬度
|
||||
// coords坐标
|
||||
// 纬度latitude
|
||||
var wd=position.coords.latitude;
|
||||
// 经度longitude
|
||||
var jd=position.coords.longitude;
|
||||
|
||||
console.log("获取用户位置成功！");
|
||||
console.log(wd+'----------------'+jd);
|
||||
// 40.05867366972477----------------116.33668634275229
|
||||
|
||||
// 谷歌地图：40.0601398850,116.3434224706
|
||||
// 百度地图：40.0658210000,116.3500430000
|
||||
// 腾讯高德：40.0601486487,116.3434373643
|
||||
}
|
||||
// 获取地理位置失败的回调函数
|
||||
function errorCallback(error){
|
||||
console.log(error);
|
||||
console.log('获取用户位置失败！')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
百度地图api举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>普通地图&全景图</title><script async src="http://c.cnzz.com/core.php"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NsGTBiDpgGQpI7KDmYNAPGuHWGjCh1zk"></script>
|
||||
<style type="text/css">
|
||||
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
||||
#panorama {height: 100%;overflow: hidden;}
|
||||
|
||||
</style>
|
||||
|
||||
<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
|
||||
hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head>
|
||||
<body>
|
||||
<div id="panorama"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//全景图展示
|
||||
// 谷歌获取的经纬度 40.05867366972477----------------116.33668634275229
|
||||
|
||||
// 谷歌地图：40.0601398850,116.3434224706
|
||||
// 百度地图：40.0658210000,116.3500430000
|
||||
// 腾讯高德：40.0601486487,116.3434373643
|
||||
// var jd=116.336686;
|
||||
// var wd=40.058673;
|
||||
|
||||
var jd=116.350043;
|
||||
var wd=40.065821;
|
||||
|
||||
var panorama = new BMap.Panorama('panorama');
|
||||
panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图
|
||||
panorama.setPov({heading: -40, pitch: 6});
|
||||
|
||||
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
|
||||
var pos = panorama.getPosition();
|
||||
map.setCenter(new BMap.Point(pos.lng, pos.lat));
|
||||
marker.setPosition(pos);
|
||||
});
|
||||
// //普通地图展示
|
||||
// var mapOption = {
|
||||
// mapType: BMAP_NORMAL_MAP,
|
||||
// maxZoom: 18,
|
||||
// drawMargin:0,
|
||||
// enableFulltimeSpotClick: true,
|
||||
// enableHighResolution:true
|
||||
// }
|
||||
// var map = new BMap.Map("normal_map", mapOption);
|
||||
// var testpoint = new BMap.Point(jd, wd);
|
||||
// map.centerAndZoom(testpoint, 18);
|
||||
// var marker=new BMap.Marker(testpoint);
|
||||
// marker.enableDragging();
|
||||
// map.addOverlay(marker);
|
||||
// marker.addEventListener('dragend',function(e){
|
||||
// panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
|
||||
// panorama.setPov({heading: -40, pitch: 6});}
|
||||
// );
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 全屏
|
||||
|
||||
> HTML5规范允许用户自定义网页上**任一元素**全屏显示。
|
||||
|
||||
### 开启/关闭全屏显示
|
||||
|
||||
方法如下：（注意 screen 是小写）
|
||||
|
||||
```javascript
|
||||
requestFullscreen() //让元素开启全屏显示
|
||||
|
||||
cancleFullscreen() //让元素关闭全屏显示
|
||||
```
|
||||
|
||||
|
||||
为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）
|
||||
|
||||
```javascript
|
||||
webkitRequestFullScreen
|
||||
webkitCancleFullScreen
|
||||
|
||||
mozRequestFullScreen
|
||||
mozCancleFullScreen
|
||||
```
|
||||
|
||||
### 检测当前是否处于全屏状态
|
||||
|
||||
方法如下：
|
||||
|
||||
```
|
||||
document.fullScreen
|
||||
```
|
||||
|
||||
|
||||
不同浏览器需要加私有前缀，比如：
|
||||
|
||||
```javascript
|
||||
document.webkitIsFullScreen
|
||||
|
||||
document.mozFullScreen
|
||||
```
|
||||
|
||||
|
||||
### 全屏的伪类
|
||||
|
||||
- :full-screen .box {}
|
||||
|
||||
- :-webkit-full-screen {}
|
||||
|
||||
- :moz-full-screen {}
|
||||
|
||||
比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
|
||||
|
||||
### 代码举例
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.box {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background-color: green;
|
||||
margin: 100px auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*全屏伪类：当元素处于全屏时，改变元素的背景色*/
|
||||
.box:-webkit-full-screen {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box"></div>
|
||||
|
||||
<script>
|
||||
var box = document.querySelector('.box');
|
||||
// box.requestFullscreen(); //直接这样写是没有效果的。之所以无效，应该是浏览器的机制，必须要点一下才可以实现全屏功能。
|
||||
document.querySelector('.box').onclick = function () {
|
||||
// 开启全屏显示的兼容写法
|
||||
if (box.requestFullscreen) { //如果支持全屏，那就让元素全屏
|
||||
box.requestFullscreen();
|
||||
} else if (box.webkitRequestFullScreen) {
|
||||
box.webkitRequestFullScreen();
|
||||
} else if (box.mozRequestFullScreen) {
|
||||
box.mozRequestFullScreen();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
371
01-HTML/10-HTML5详解（三）.md
Normal file
371
01-HTML/10-HTML5详解（三）.md
Normal file
@@ -0,0 +1,371 @@
|
||||
|
||||
|
||||
## Web 存储
|
||||
|
||||
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
|
||||
|
||||
### H5 中有两种存储的方式
|
||||
|
||||
1、**`window.sessionStorage` 会话存储：**
|
||||
|
||||
- 保存在内存中。
|
||||
|
||||
- **生命周期**为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
|
||||
|
||||
- 在同一个窗口下数据可以共享。
|
||||
|
||||
|
||||
2、**`window.localStorage` 本地存储**：
|
||||
|
||||
- 有可能保存在浏览器内存里，有可能在硬盘里。
|
||||
|
||||
- 永久生效，除非手动删除（比如清理垃圾的时候）。
|
||||
|
||||
- 可以多窗口共享。
|
||||
|
||||
|
||||
### Web 存储的特性
|
||||
|
||||
（1）设置、读取方便。
|
||||
|
||||
（2）容量较大，sessionStorage 约5M、localStorage 约20M。
|
||||
|
||||
（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
|
||||
|
||||
|
||||
### 常见 API
|
||||
|
||||
设置存储内容：
|
||||
|
||||
```javascript
|
||||
setItem(key, value);
|
||||
```
|
||||
|
||||
PS：可以新增一个 item，也可以更新一个 item。
|
||||
|
||||
读取存储内容：
|
||||
|
||||
```javascript
|
||||
getItem(key);
|
||||
```
|
||||
|
||||
根据键，删除存储内容：
|
||||
|
||||
```javascript
|
||||
removeItem(key);
|
||||
```
|
||||
|
||||
|
||||
清空所有存储内容：
|
||||
|
||||
```javascript
|
||||
clear();
|
||||
```
|
||||
|
||||
根据索引值来获取存储内容：
|
||||
|
||||
|
||||
```javascript
|
||||
key(n);
|
||||
```
|
||||
|
||||
|
||||
sessionStorage 的 API 举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text"/>
|
||||
<button>sesssionStorage存储</button>
|
||||
<button>sesssionStorage获取</button>
|
||||
<button>sesssionStorage更新</button>
|
||||
<button>sesssionStorage删除</button>
|
||||
<button>sesssionStorage清除</button>
|
||||
<script>
|
||||
|
||||
//在h5中提供两种web存储方式
|
||||
|
||||
// sessionStorage session（会话，会议） 5M 当窗口关闭是数据销毁 内存
|
||||
// localStorage 20M 永久生效 ，除非手动删除 清理垃圾 硬盘上
|
||||
|
||||
var txt = document.querySelector('input');
|
||||
|
||||
var btns = document.querySelectorAll('button');
|
||||
// sessionStorage存储数据
|
||||
btns[0].onclick = function () {
|
||||
window.sessionStorage.setItem('userName', txt.value);
|
||||
window.sessionStorage.setItem('pwd', '123456');
|
||||
window.sessionStorage.setItem('age', 18);
|
||||
}
|
||||
|
||||
// sessionStorage获取数据
|
||||
btns[1].onclick = function () {
|
||||
txt.value = window.sessionStorage.getItem('userName');
|
||||
}
|
||||
|
||||
// sessionStorage更新数据
|
||||
btns[2].onclick = function () {
|
||||
window.sessionStorage.setItem('userName', txt.value);
|
||||
}
|
||||
|
||||
// sessionStorage删除数据
|
||||
btns[3].onclick = function () {
|
||||
window.sessionStorage.removeItem('userName');
|
||||
}
|
||||
|
||||
// sessionStorage清空数据
|
||||
btns[4].onclick = function () {
|
||||
window.sessionStorage.clear();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
|
||||
|
||||
**localStorage 的 API 举例：**
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="text"/>
|
||||
<button>localStorage存储</button>
|
||||
<button>localStorage获取</button>
|
||||
<button>localStorage更新</button>
|
||||
<button>localStorage删除</button>
|
||||
<button>localStorage清除</button>
|
||||
|
||||
<script>
|
||||
|
||||
/*
|
||||
* localStorage
|
||||
* 数据存在硬盘上
|
||||
* 永久生效
|
||||
* 20M
|
||||
* */
|
||||
|
||||
var txt = document.querySelector('input');
|
||||
var btns = document.querySelectorAll('button');
|
||||
|
||||
// localStorage存储数据
|
||||
btns[0].onclick = function () {
|
||||
window.localStorage.setItem('userName', txt.value);
|
||||
}
|
||||
|
||||
// localStorage存储数据
|
||||
btns[1].onclick = function () {
|
||||
txt.value = window.localStorage.getItem('userName');
|
||||
}
|
||||
|
||||
// localStorage删除数据
|
||||
btns[3].onclick = function () {
|
||||
window.localStorage.removeItem('userName');
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
### 案例：记住用户名和密码
|
||||
|
||||
代码：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<label for="">
|
||||
用户名：<input type="text" class="userName"/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<label for="">
|
||||
密 码：<input type="text" class="pwd"/>
|
||||
</label>
|
||||
<br/><br/>
|
||||
<label for="">
|
||||
<input type="checkbox" class="check" id=""/>记住密码
|
||||
</label>
|
||||
<br/><br/>
|
||||
<button>登录</button>
|
||||
|
||||
<script>
|
||||
var userName = document.querySelector('.userName');
|
||||
var pwd = document.querySelector('.pwd');
|
||||
var chk = document.querySelector('.check');
|
||||
var btn = document.querySelector('button');
|
||||
|
||||
// 当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
|
||||
btn.onclick = function () {
|
||||
if (chk.checked) {
|
||||
// 记住数据
|
||||
window.localStorage.setItem('userName', userName.value);
|
||||
window.localStorage.setItem('pwd', pwd.value);
|
||||
} else {
|
||||
// 清除数据
|
||||
window.localStorage.removeItem('userName');
|
||||
window.localStorage.removeItem('pwd');
|
||||
}
|
||||
}
|
||||
// 下次登录时，如果记录的有数据，就直接填充
|
||||
window.onload = function () {
|
||||
userName.value = window.localStorage.getItem('userName');
|
||||
pwd.value = window.localStorage.getItem('pwd');
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 网络状态
|
||||
|
||||
我们可以通过 `window.onLine` 来检测用户当前的网络状况，返回一个布尔值。另外：
|
||||
|
||||
- window.online：用户网络连接时被调用。
|
||||
|
||||
- window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。
|
||||
|
||||
网络状态监听的代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
window.addEventListener('online', function () {
|
||||
alert('网络连接建立！');
|
||||
});
|
||||
|
||||
window.addEventListener('offline', function () {
|
||||
alert('网络连接断开！');
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## 应用缓存
|
||||
|
||||
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 `cache manifest` 缓存清单文件。
|
||||
|
||||
|
||||
### 优势
|
||||
|
||||
1、可配置需要缓存的资源；
|
||||
|
||||
2、网络无连接应用仍可用；
|
||||
|
||||
3、本地读取缓存资源，提升访问速度，增强用户体验；
|
||||
|
||||
4、减少请求，缓解服务器负担。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### `cache manifest` 缓存清单文件
|
||||
|
||||
|
||||
|
||||
缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 `.appcache`作为后缀名，另外还要添加MIME类型。
|
||||
|
||||
**缓存清单文件里的内容怎样写：**
|
||||
|
||||
（1）顶行写CACHE MANIFEST。
|
||||
|
||||
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。
|
||||
|
||||
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
|
||||
|
||||
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
|
||||
|
||||
格式举例1：
|
||||
|
||||
|
||||
|
||||
|
||||
格式举例2：
|
||||
|
||||
```bash
|
||||
CACHE MANIFEST
|
||||
|
||||
#要缓存的文件
|
||||
CACHE:
|
||||
images/img1.jpg
|
||||
images/img2.jpg
|
||||
|
||||
|
||||
#指定必须联网才能访问的文件
|
||||
NETWORK:
|
||||
images/img3.jpg
|
||||
images/img4.jpg
|
||||
|
||||
|
||||
#当前页面无法访问是回退的页面
|
||||
FALLBACK:
|
||||
404.html
|
||||
|
||||
```
|
||||
|
||||
|
||||
**缓存清单文件怎么用：**
|
||||
|
||||
（1）例如我们创建一个名为 `demo.appcache`的文件。例如：
|
||||
|
||||
demo.appcache：
|
||||
|
||||
```bash
|
||||
CACHE MANIFEST
|
||||
|
||||
# 注释以#开头
|
||||
#下面是要缓存的文件
|
||||
CACHE:
|
||||
http://img.smyhvae.com/2016040101.jpg
|
||||
```
|
||||
|
||||
|
||||
（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径要保证正确。例如：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html manifest="01.appcache">
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
251
01-HTML/11-HTML基础回顾.md
Normal file
251
01-HTML/11-HTML基础回顾.md
Normal file
@@ -0,0 +1,251 @@
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- html 的常见元素
|
||||
|
||||
- html 元素的分类
|
||||
|
||||
- html 元素的嵌套关系
|
||||
|
||||
- html 元素的默认样式和 CSS Reset
|
||||
|
||||
- html 常见面试题
|
||||
|
||||
## html 的常见元素
|
||||
|
||||
html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。
|
||||
|
||||
### 1、head 区域的 html 元素
|
||||
|
||||
> head 区域的 html 元素，不会在页面上留下直接的内容。
|
||||
|
||||
- meta
|
||||
|
||||
- title
|
||||
|
||||
- style
|
||||
|
||||
- link
|
||||
|
||||
- script
|
||||
|
||||
- base
|
||||
|
||||
**base元素的介绍**：
|
||||
|
||||
```html
|
||||
<base href="/">
|
||||
```
|
||||
|
||||
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
|
||||
|
||||
### 2、html 元素（body 区域）
|
||||
|
||||
> body 区域的 html 元素，会直接出现在页面上。
|
||||
|
||||
- div、section、article、aside、header、footer
|
||||
|
||||
- p
|
||||
|
||||
- span、em、strong
|
||||
|
||||
- 表格元素：table、thead、tbody、tr、td
|
||||
|
||||
- 列表元素：ul、ol、dl、dt、dd
|
||||
|
||||
- a
|
||||
|
||||
- 表单元素：form、input、select、textarea、button
|
||||
|
||||
div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，**div 是比较通用的元素，这也决定了 div 的的语义并不是很明确**。
|
||||
|
||||
**常见标签的重要属性**：
|
||||
|
||||
- a[href,target]
|
||||
- img[src,alt]
|
||||
- table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
|
||||
- form[target,method,enctype]
|
||||
- input[type,value]
|
||||
- button[type]
|
||||
- selection>option[value]
|
||||
- label[for]
|
||||
|
||||
### html 文档的大纲
|
||||
|
||||
我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。
|
||||
|
||||
同样，html 网页也可以看成是一种文档，也有属于它的大纲。
|
||||
|
||||
一个常见的html文档，它的结构可以是：
|
||||
|
||||
```html
|
||||
<section>
|
||||
<h1>一级标题</h1>
|
||||
|
||||
<section>
|
||||
<h2>二级标题</h2>
|
||||
<p>段落内容</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>二级标题</h2>
|
||||
<p>段落内容</p>
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
<p>广告内容</p>
|
||||
</aside>
|
||||
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>某某公司出品</p>
|
||||
</footer>
|
||||
```
|
||||
|
||||
### 查看网页大纲的工具
|
||||
|
||||
我们可以通过 <http://h5o.github.io/> 这个工具查看一个网页的大纲。
|
||||
|
||||
**使用方法**：
|
||||
|
||||
（1）将网址 <http://h5o.github.io/> 保存到书签栏
|
||||
|
||||
（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。
|
||||
|
||||
这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。
|
||||
|
||||
## html 元素的分类
|
||||
|
||||
按照样式分类：
|
||||
|
||||
- 块级元素
|
||||
|
||||
- 行内元素
|
||||
|
||||
- inline-block：比如`form`表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
||||
|
||||
按照内容分类：
|
||||
|
||||
|
||||
|
||||
图片来源：<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content>
|
||||
|
||||
## html 元素的嵌套关系
|
||||
|
||||
- 块级元素可以包含行内元素。
|
||||
|
||||
- 块级元素**不一定**能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
|
||||
|
||||
- 行内元素**一般**不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。
|
||||
|
||||
**注意**：在 HTML5 中 `a > div` 是合法的， `div > a > div`是不合法的 ；但是在 html 4.0.1 中， `a > div` 仍然是不合法的。
|
||||
|
||||
## html 元素的默认样式和 CSS Reset
|
||||
|
||||
比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。
|
||||
|
||||
同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。
|
||||
|
||||
如果我们不需要默认的样式，这里就需要引入一个概念：**CSS Reset**。
|
||||
|
||||
### 常见的 CSS Reset 方案
|
||||
|
||||
**方案一**：
|
||||
|
||||
CSS Tools: Reset CSS。链接：<https://meyerweb.com/eric/tools/css/reset/>
|
||||
|
||||
**方案二**：
|
||||
|
||||
雅虎的 CSS Reset。链接：<https://yuilibrary.com/yui/docs/cssreset/>
|
||||
|
||||
我们可以直接通过 CDN 的方式引入：
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
|
||||
```
|
||||
**方式三**：（比较有争议）
|
||||
|
||||
```css
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
```
|
||||
上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。
|
||||
|
||||
### Normalize.css
|
||||
|
||||
上面的几种 css reset 的解决思路是：将所有的默认样式清零。
|
||||
|
||||
但是，[Normalize.css](https://necolas.github.io/normalize.css/) 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。**既然不同浏览器的默认样式不一致，那么，`Normalize.css`就将这些默认样式设置为一致**。
|
||||
|
||||
## html 常见面试题
|
||||
|
||||
### doctype 的意义是什么
|
||||
|
||||
- 让浏览器以标准模式渲染
|
||||
|
||||
- 让浏览器知道元素的合法性
|
||||
|
||||
### HTML、XHTML、HTML5的区别
|
||||
|
||||
- HTML 属于 SGML
|
||||
|
||||
- XHTML 属于 XML，是 HTML 进行 XML 严格化的结果
|
||||
|
||||
- HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。
|
||||
|
||||
### HTML5 有什么新的变化
|
||||
|
||||
- 新的语义化元素
|
||||
|
||||
- 表单增强
|
||||
|
||||
- 新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。
|
||||
|
||||
### em 和 i 的区别
|
||||
|
||||
共同点：二者都是表示斜体。
|
||||
|
||||
区别：
|
||||
|
||||
- em 是语义化的标签，表示强调。
|
||||
|
||||
- i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。
|
||||
|
||||
### 语义化的意义是什么
|
||||
|
||||
- 开发者容易理解，便于维护。
|
||||
|
||||
- 机器（搜索引擎、读屏软件等）容易理解结构
|
||||
|
||||
- 有助于 SEO
|
||||
|
||||
### 哪些元素可以自闭和
|
||||
|
||||
> 自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。
|
||||
|
||||
- 表单元素 input
|
||||
|
||||
- 图片 img
|
||||
|
||||
- br、hr
|
||||
|
||||
- meta、link
|
||||
|
||||
### form 表单的作用
|
||||
|
||||
- 直接提交表单
|
||||
|
||||
- 使用 submit / reset 按钮
|
||||
|
||||
- 便于浏览器保存表单
|
||||
|
||||
- 第三方库（比如 jQuery）可以整体获取值
|
||||
|
||||
- 第三方库可以进行表单验证
|
||||
|
||||
所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。
|
||||
|
||||
Reference in New Issue
Block a user