HTML
2021-01-20 12:31:32 3 举报AI智能生成
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>` 表示日期
兼容处理
<!-- 条件注释 只有ie能够识别--> <!--[if lte ie 8]> <script src=\"html5shiv.min.js\"></script> <![endif]-->
应用程序标签
属性
链接关系描述
结构数据标记
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()
验证不通过时触发
虚拟键盘适配
网页多媒体
音频
<audio></audio>
附加属性
autoplay 自动播放
controls 控制条
loop 循环播放
preload 预加载 设置autoplay时 该属性失效
兼容性写法
<!--推荐的兼容写法：--><audio controls loop> <source src=\"music/yinyue.mp3\"/> <source src=\"music/yinyue.ogg\"/> <source src=\"music/yinyue.wav\"/> 抱歉，你的浏览器暂不支持此音频格式</audio>
视频
<video></video>
loop 循环播放
width 播放器宽度
height 播放器高度
<!--<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>
字幕
Canvas
2D
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
en
Zh-CN
文档头标签<head></head>
配置<meta>
字符集charset
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\">
视口 viewport
<meta name=\"viewport\" content=\
定义“关键词”keywords
<meta name=\"Keywords\" content=\
定义“页面描述”Description
<meta name=\"Description\" content=\"网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。\" />
<meta http-equiv=\"refresh\" content=\"3;http://www.baidu.com\">
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=\"a.html#name1\">回到顶部</a>
邮件链接
<a href=\"mailto:xxx@163.com\">点击进入我的邮箱</a>
`href`：目标URL
title`：悬停文本。
`name`：主要用于设置一个锚点的名称。
`target`：告诉浏览器用什么方式来打开目标页面
`_self`：在同一个网页中显示（默认值）
`_blank`：**在新的窗口中打开**。
`_parent`：在父窗口中显示
`_top`：在顶级窗口中显示
图片标签
<img src=\"图片的URL\" />
类型
jpg(jpeg)、gif、png、bmp
src
相对路径
站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
相对路径从自己出发，找到别人。
绝对路径
绝对路径，就是`http://`或者`https://`开头的路径。
绝对不允许使用`file://`开头的文件，这个是完全错误的！
`width`：图像的宽度。
`height`：图像的高度
Alt 属性
当图片不可用（无法显示）的时候，代替图片显示的内容。
`title`：**提示性文本**。鼠标悬停时出现的文本。
align 属性
**图片和周围文字的相对位置**
列表标签
ul无序标签
li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li
li
属性type
`disc`(实心原点)
`square`(实心方点)
`circle`(空心圆)
ol有序标签
1(阿拉伯数字，默认)
a小写英文字母
i小写希腊数字
I大写希腊数字
start 从几开始
dl
定义列表
dt
definition title 列表的标题，这个标签是必须的
dd
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>`
<caption>
表格的标题。使用时和`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，即下拉视图。
<option></option>
`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>`标记。**
滚动字幕标签
<marquee></marquee>
direction=\"right\"
滚动的目标方向。
`behavior=\"slide\"`
行为方式
slide(只移动一次)，`scroll`（循环移动转圈，默认值），`alternate`（循环移动，反复横跳，电梯）
标准的DIV+CSS布局用到的标签
div p h1 span a img ul ol dl input
自由主题
0 条评论
下一页
