首页  思维导图  详情

HTML

2021-01-20 12:31:32   3  举报





AI智能生成

为你推荐

查看更多



html解析流程

第十六章 HTML5脚本编程

Html

HTML

简单了解html和css

HTML5

第十六章 HTML5脚本编程

基础HTML入门

HTML

html

HTML 基础知识思维导图一图了解HTML

作者其他创作

大纲/内容

HTML

HTML5

什么是HTML5

web应用开发的一系列标准

浏览器端技术的一个发展阶段

新一代开发Web富客户端应用程序整体解决方案

CSS3

JavaScript API

应用场景

极具表现力的网页

内容简约而不简单

网页应用程序

代替PC端的软件

APP端的网页

微信端

公众号

小程序

混合式本地应用

简单的游戏

新增的内容

标签

更语义化的标签

语义化的标签

功能

能够方便开发者阅读和写出更加优雅大的代码

同时让浏览器或者是网络爬虫更好地解析，从而更好地分析其中的内容

更好的SEO

HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。

新增的语义化标签

`<section>` 表示区块

`<article>` 表示文章。如文章、评论、帖子、博客

`<header>` 表示页眉

`<footer>` 表示页脚

`<nav>` 表示导航

`<aside>` 表示侧边栏。如文章的侧栏

`<figure>` 表示媒介内容分组。

`<mark>` 表示标记 (用得少)

`<progress>` 表示进度 (用得少)

`<time>` 表示日期

兼容处理

应用程序标签

属性

链接关系描述

结构数据标记

ARIA

自定义属性

智能表单

新的表单类型

`email` 只能输入email格式。自动带有验证功能。

`tel` 手机号码。

`url` 只能输入url格式。

`number` 只能输入数字。

`search` 搜索框

range` 滑动条

`color` 拾色器

`time`\t时间

`date` 日期

`datetime` 时间日期

`month` 月份

`week` 星期

表单元素（标签）

<datalist> </datalist>数据列表

input里的list属性可以和 datalist 进行了绑定

<keygen></keygen>密钥对生成器

提交表单时，会生成两个键：一个公钥，一个私钥。

私钥（private key）存储于客户端

公钥（public key）则被发送到服务器。

公钥可用于之后验证用户的客户端证书（client certificate）。

<meter>度量器

low:低于该值后警告

high高于该值后警告

value 当前值

max最大值

min最小值

表单属性

placeholder占位符（提示文字）

autofocus自动获取焦点

multiple文件上传多选或者多个邮箱

autocomplete自动完成（填充）

用于表单元素

用于表单自身

form指定表单项属于哪个form

novalidate关闭默认的验证功能（只能加给form）

required 必填项

pattern自定义正，验证表单

表单事件

oninput()

用户输入内容时出发，可用于输入字数统计

oninvalid()

验证不通过时触发

虚拟键盘适配

网页多媒体

音频

附加属性

autoplay 自动播放

controls 控制条

loop 循环播放

preload 预加载设置autoplay时该属性失效

兼容性写法

<audio controls loop> <source src=\"music/yinyue.mp3\"/> <source src=\"music/yinyue.ogg\"/> <source src=\"music/yinyue.wav\"/> 抱歉，你的浏览器暂不支持此音频格式</audio>

视频

loop 循环播放

width 播放器宽度

height 播放器高度

<video controls autoplay> <source src=\"video/movie.mp4\"/> <source src=\"video/movie.ogg\"/> <source src=\"video/movie.webm\"/> 抱歉，不支持此视频 </video>

字幕

Canvas

3D(WebGL)

SVG

CSS

New Selector

Web Fonts

Text Style

Opacity

HSL Color

Rounded Corners

Gradients

Shadows

Background Enhancements

Border Image

Flexible Box Model

Transforms

Transitions

Animations

etc.

核心平台提升

新的选择器

Element.classList

访问历史API

Windows.history对象

WIndows.history.forward()前进

Windows.history.back() 后退

windows.history.go(n)刷新

windows.history.pushState() 设置历史中的状态数据

全屏API

网页存储

Application Cache

应用缓存

优点

可配置需要缓存的资源；

网络无连接应用仍可用；

本地读取缓存资源，提升访问速度，增强用户体验；

减少请求，缓解服务器负担。

`cache manifest` 缓存清单文件。

`.appcache`作为后缀名

添加MIME类型。

内容

顶行写CACHE MANIFEST。

CACHE: 换行指定我们需要缓存的静态资源，如.css、image、js等。

NETWORK: 换行指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。

FALLBACK: 换行当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

使用

在需要应用缓存在页面的根元素(html)里，添加属性manifest=\"demo.appcache\"。

API已被移除

WebSQL

IndexedDB

web存储

sessionStorage

会话存储

保存在内存中，生命周期为关闭浏览器窗口，任何同一个窗口下数据可以共享

容量约5M

localStorage

本地存储

可能保存在浏览器内存或者硬盘中，永久生效除非手动删除，可以多窗口共享

容量约20M

只能存储字符串，可以将对象JSON.stringify()编码后存储

Storage常见API

getItem(key)读取存储内容

removeItem(key) 删除存储内容

clear() 清空所有存储内容

key(n)根据索引值来获取存储内容

设备信息访问

网络状态

windows.online检测用户当前的网络状态

windows.offline用户网络断开时被调用

硬件访问

设备方向

全屏

requestFullscreen()

开启全屏

cancleFullscreen()

关闭全屏

document.fullScreen

检测当前是否处于全屏状态

全屏的伪类

:full-screen {}

:-webkit-full-screen {}

:moz-full-screen {}

地理围栏

地理定位

获取地理信息的方式

IP地址

三维坐标

GPS

美国GPS

苏联GLONASS

欧盟GALILEO

中国BDS

日本QZSS

印度IRNSS

Wi-Fi定位

手机信号定位

隐私

必须先得到用户明确许可才能获取用户的位置信息

API详解

成功调用successCallback返回position

position.coords.latitude维度

position.coords.longitude经度

获取失败调用errorCallback返回error

可选参数 options 对象可以调整位置信息数据收集方式

拖放操作

网页内拖放

拖拽元素

设置draggable=\"true\"

事件监听

ondragstart

拖拽开始时调用

ondragleave

鼠标离开拖拽元素时调用

ondragend

当拖拽结束时调用

ondrag

整个拖拽过程中都会调用

目标元素

目标元素的事件监听

ondragenter 当拖拽元素进入时调用

ondragover 当拖拽元素停留在目标元素上时会连续一直触发

ondrop 当在目标元素上松开鼠标时调用

ondragleave 当鼠标离开目标元素时调用

如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码

桌面拖入

桌面拖出

文件

文件系统API

FileReader

网络访问

XMLHttpReque

fetch

WebSocket

多线程

桌面通知

DOM操作

获取元素

document.querySelector(\"selector\")

通过CSS选择器获取符合条件的第一个元素

document.querySelectorAll(\"selector\")

通过CSS选择器获取符合条件的所有元素，以数组形式存在

类名操作

Node.classList.add(\"class\")

Node.classList.remove(\"class\")

Node.classList.toggle(\"class\")

Node.classList.contains(\"class\")

检测是否存在class

JS可以通过box1.index = 100来定义属性或者通过.来获取属性

H5可以直接在标签里添加自定义属性但是必须是以data-开头

结构

根标签<html></html>

页面语言属性lang

Zh-CN

文档头标签<head></head>

配置<meta>

字符集charset

视口 viewport

定义“关键词”keywords

定义“页面描述”Description

3秒之后，自动跳转到百度页面。

文档标题标签<title></title>

用于设置网页标题：

base标签<base href=\"/\">

base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准

文档主体标签<body></body>

`bgcolor`：设置整个网页的背景颜色。

`background`：设置整个网页的背景图片。

`text`：设置网页中的文本颜色

边距margin

上边距topmargin

下边距bottommargin

左边距leftmargin

右边距rightmargin

link

`link`属性表示默认显示的颜色

`alink`属性表示鼠标点击但是还没有松开时的颜色

`vlink`属性表示点击完成之后显示的颜色

声明头DTD<!DOCTYPE ……>

HTML4.01规范

普通规范

严格Strict

普通**Transitional**

框架**Frameset**

XHTML规范

HTML5规范

<!DOCTYPE html>

HTML 标签

文本级标签

p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。（a标签里不能放a和input）

容器级标签

div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

排版标签

标题标签<h></h>

段落标签<p></p>

水平线标签<hr />

换行标签<br/>

div标签<div></div>

单独占一行

span标签<span></span>

不换行

预定义（格式化）标签<pre></pre>

原封不动地输出结果

字体标签

特殊字符

空格标签nbsp

小于号lt

大于号gt

amp

&符号

双引号quot

单引号quot

版权copy

文字32464

下划线标签<u></u>

删除线<del></del>>/<s></s>

斜体标签<i></i>/<em></em>

上标<sup></sup>

下标<sub></sub>

超链接

外部链接

<a href=\"02页面.html\">点击进入另外一个文件</a>

锚链接

邮件链接

<a href=\"mailto:xxx@163.com\">点击进入我的邮箱</a>

`href`：目标URL

title`：悬停文本。

`name`：主要用于设置一个锚点的名称。

`target`：告诉浏览器用什么方式来打开目标页面

`_self`：在同一个网页中显示（默认值）

`_blank`：**在新的窗口中打开**。

`_parent`：在父窗口中显示

`_top`：在顶级窗口中显示

图片标签

类型

jpg(jpeg)、gif、png、bmp

src

相对路径

站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

相对路径从自己出发，找到别人。

绝对路径

绝对路径，就是`http://`或者`https://`开头的路径。

绝对不允许使用`file://`开头的文件，这个是完全错误的！

`width`：图像的宽度。

`height`：图像的高度

Alt 属性

当图片不可用（无法显示）的时候，代替图片显示的内容。

`title`：**提示性文本**。鼠标悬停时出现的文本。

align 属性

**图片和周围文字的相对位置**

列表标签

ul无序标签

li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li

属性type

`disc`(实心原点)

`square`(实心方点)

`circle`(空心圆)

ol有序标签

1(阿拉伯数字，默认)

a小写英文字母

i小写希腊数字

I大写希腊数字

start 从几开始

定义列表

definition title 列表的标题，这个标签是必须的

definition description 列表的列表项，如果不需要它，可以不加

dd是描述dt的。

表格标签<table></table>

表行<tr>

`dir`：公有属性，设置这一行单元格内容的排列方式。

`bgcolor`：设置这一行的单元格的背景色。

`height`：一行的高度

`align=\"center\"`：一行的内容水平居中显示

valign=\"center\"`：一行的内容垂直居中，

单元格<td></td>

`align`：内容的横向对齐方式。

align`：内容的纵向对齐方式。

`width`：绝对值或者相对值(%)

`height`：单元格的高度

`bgcolor`：设置这个单元格的背景色。

`background`：设置这个单元格的背景图片。

`colspan`：横向合并。

`rowspan`：纵向合并。

`<th>`：加粗的单元格。相当于`<td>` + `<b>`

表格的标题。使用时和`tr`标签并列

`align`，表示标题相对于表格的位置

`border`：边框。像素为单位。

`style=\"border-collapse:collapse;\"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）

`width`：宽度。像素为单位。

`height`：高度。像素为单位。

`bordercolor`：表格的边框颜色。

`align`：**表格**的水平对齐方式。

`cellpadding`：单元格内容到边的距离，像素为单位。

`cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0

`bgcolor=\"#99cc66\"`：表格的背景颜色。

`background=\"路径src/...\"`：背景图片。背景图片的优先级大于背景颜色。

`bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色

`bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。

`dir`：公有属性，单元格内容的排列方式(direction)。可以取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）

`<thead>`标签、`<tbody>`标签、`<tfoot>`标签

如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。

当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。

内嵌框架<iframe></iframe>

`<body>`的子标记。

`src=\"subframe/the_second.html\"`：内嵌的那个页面

`width=800`：宽度

`height=“150`：高度

`scrolling=\"no\"`：是否需要滚动条。默认值是true。

`name=\"mainFrame\"`：窗口名称。公有属性。

表单标签<form></form>

用于与服务器的交互。

`name`：表单的名称，用于JS来操作或控制表单时使用；

`id`：表单的名称，用于JS来操作或控制表单时使用；

`action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”

表单将提交到哪里。

`method`：表单数据的提交方式，一般取值：get(默认)和post

表示用什么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

**上传附件时，必须使用这种编码方式**。

能在POST方式下使用

表单和表格嵌套时，是在<form>标记中套<table>标记。

`<input>`：输入标签（文本框）

**`type=\"属性值\"`**：文本类型

`text`（默认）

`password`：密码类型

`radio`：单选按钮

`checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。

`checked`：将单选按钮或多选按钮默认处于选中状态。

`hidden`：隐藏框，在表单中包含不希望用户看见的信息

`button`：普通按钮，结合js代码进行使用。

`submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。

`reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值

image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。

`file`：文件选择框。

限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

**`value=\"内容\"`**

文本框里的默认内容（已经被填好了的）

`size=\"50\"`：表示文本框内可以显示**五十个字符**。

`readonly`：文本框只读，不能编辑。

`disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。

`<select>`：下拉列表标签

`<select>`标签里面的每一项用`<option>`表示

和ul、ol、dl一样，都是组标签。

`multiple

可以对下拉列表中的选项进行多选。

size=\"3\"

如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

`selected`：预选中。没有属性值。

`<textarea>`标签

多行文本输入框

`rows=\"4\"`：指定文本区域的行数。

cols=\"20\"`：指定文本区域的列数。

`readonly`：只读。

<fieldset></fieldset>表单区域集合

<legend></ledend>:边框上的字

<label></label>标签

让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。

任何表单元素都有label

多媒体标签

`<bgsound>`标签

播放背景音乐

`src=\"音乐文件的路径\"`

`loop=\"-1\"`：属性值代表播放次数，-1代表循环播放。

子主题

.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。

Flash

`<embed>`标签：播放多媒体文件（音频、视频等）

src=\"多媒体文件的路径\"

`autostart=\"false\"`：打开网页时，禁止自动播放。默认值是true。

`volume=\"100\"`：设置默认的音量大小，测试发现这个值好像不起作用哦。

width：指Flash文件的宽度

height：指Flash文件的高度

quality：指Flash的播放质量，质量有高有低 hight low

pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载

type：指定Flash的文件格式类型

wmode：指Flash的背景是否可以透明，取值：transparent是透明的

`<object>`标签：播放多媒体文件（音频、视频等）

`classid`：指定Flash插件的ID号，一般存在于注册表中

codebase`：如果Flash插件不存在，则从codebase指定的地址下载。

`<param>`标签的主要作用：设置具体的详细参数。

在网页中插入Flash时，为了同时兼容多种浏览器，需要将`<object>`标签和`<embed>`标签标记一起使用，但使用的顺序是：`<object>`中嵌套`<embed>`标记。**

滚动字幕标签

direction=\"right\"

滚动的目标方向。

`behavior=\"slide\"`

行为方式

slide(只移动一次)，`scroll`（循环移动转圈，默认值），`alternate`（循环移动，反复横跳，电梯）

标准的DIV+CSS布局用到的标签

div p h1 span a img ul ol dl input

自由主题

 收藏

立即使用

Sass入门

 收藏

立即使用

HTML

日暮斜阳远

职业：本科

去主页





0 条评论

回复删除



取消

下一页