导图社区 HTML5相关知识归纳总结思维导图
- 752
- 57
- 5
- 举报
HTML5相关知识归纳总结思维导图
HTML5是什么？该怎么学习？HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。下面这张导图将HTML5相关知识归纳总结供大家参考学习。
编辑于2018-12-19 12:05:18- 网页
- 相似推荐
- 大纲
HTML5
<body>网址内容
body的属性:
bgcolor:背景颜色 Background：背景图片 Text：字体颜色 onload:加载时调用
结构标签div
以div为基础派生许多div的子元素,他们可以作为div使用 每一个子元素，都是自己的名字，来完成对div描述的“语义化” 语义化：类似java变量命名的规范中的“见名知意”
<section>
网页中的内容区域
<article>
文章
<aside>
文章之外的内容
<hgroup>
内容与标题的组合
<nav>
导航
<figure>
图文并茂
<header>
网页的头部
<footer>
网页的底部
清除浮动:两边
clear:both;
字体的操作
字体加粗
<b>
字体倾斜
<i>
下划线
<u>
删除线
<del>
字体
<font>: Color:字体颜色 Size：1~7 字体大小
<mark>高亮</mark>
标题标签
<h1>~<h6> 字体加粗，变大，独占一行
段落标签
<p> 段落与段落之间隔开
换行
<br>
空格
水平线
<hr>
图片标签
<img src="图片资源路径"width="图片的宽度(px像素或%)"title="悬停提示文字"alt="加载失败的提示文件" border="边框 1有 0没有" />
列表
有序列表:
<ol type="值"> <li>香蕉</li> <li>土豆</li> <li>鸭梨</li> </ol>
无序列表:
<ul type="值"> <li>北京</li> <li>上海</li> <li>广州</li> </ul>
快捷创建
ul>li*4 tab键
表格
表格的属性
border:表格边框，取值为int类型，值越大，线越粗，0表示无 bordercolor：表框的颜色 cellspacing：单元格与单元格之间的距离 width:表格的宽度，像素或百分比 height:表格的高度，像素或百分比 bgcolor:表格或单元格的背景颜色（table，tr，td都适用） background:背景图片
快捷创建
table>tr*2>td*3
<table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table>
tr表示行 td表示列
合并单元格
colspan：和并列 （水平方向/左右方向） 横着合并 rowspan：合并行 （垂直方向/上下方向） 竖着合并 注意：合并，表示多个变成一个，所以，多余要删除！
表单
<form></form>
form表单的属性：
- action：表单提交的目的地 - method：表单提交的方式 get明文(默认)/post密文 - enctype：编码方式（表单中有特殊元素：图片上传时才用到） onsubmit: 事件提交
input
<input type=”x” name=”y”placeholder="" disabled="disabled"> type:类型 name:输入框的名字 placeholder;提示输入框 disabled:禁用
type的取值： text：文本输入框（默认值） password:密码输入框 checkbox:复选框/多选框 <-checked选取选中的元素 radio：单选按钮 submit：提交按钮（可使用value覆盖默认的按钮名称） reset：重置按钮（可使用value覆盖默认的按钮名称） button：按钮 - 在form内：和提交按钮等效 - 在form外：普通的按钮 color:调色板 date:日历 month:月历 week周历 number:数值域 -min最小值 -max最大值 -step按输入的倍数跳 range:滑动 search搜索框
<select> <option>下拉菜单</option> ... </select>
滚动条
<progress></progress>
联想输入框
要一致
可展开的内容区域
框架
引用其他页面的(配合超链接)
<a href="打开的页面或图片" target="xy">第一章</a> <br /><br /> <a href="打开的页面或图片" target="xy">第二章</a> <br /><br /> <a href="打开的页面或图片" target="xy">第三章</a> <br /><br /> <iframe name="xy" width="400px" height="300px"></iframe>
target:打开网页的目标为xy位置
媒体标签
<video>视频
<audio>音乐
显示播放控制
controls
自动播放
autoplay
自动循环
loop
路径
src
超链接
普通的链接
<a href="地址">链接名</a>
锚链接
先定义位置标记：<a name="ding"></a> 然后使用超链接跳转到预先定义好的位置： <a href="#ding">回顶部</a>
功能性连接
QQ弹窗：调用的就是腾讯的远程聊天接口 <a href="tencent://message/?uin=10001&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:10"/></a>
<style>css样式
使用三种方式:
内联样式
写在开始标签的里面
<p style="color:red;">HTML</p>
内部样式
写在</head><body>之间
<style></style>
外部样式表
创建一个.css文件 写在里面
定义:<link href="css/01.css" rel="stylesheet"/>
css的优先级
就近原则
功能
超链接去下划线
text-decoration:none;
背景
背景色
background-color:red;
背景图片
background-image:url(img/1.jpg);
背景平铺
默认情况下，背景图片会“平铺”，x轴和y轴。 使用background-repeat控制平铺的方式：
repeat ： 默认值，x和y方向平铺
repeat-x ： x方向平铺
repeat-y ：y方向平铺
no-repeat ：不平铺
背景平移
背景滚动
background-attachment: scroll; 背景滚动（默认值）
background-attachment: fixed; 背景不动
背景大小
contain：缩放成完全适用背景区域的大小（背景图完全显示） cover：缩放成完全覆盖背景区域的大小（不留空白）
背景位置
background-origin:
border-box;
padding-box: （默认值）
content-box:
背景裁剪
background-clip:
border-box;
padding-box: （默认值）
content-box:
四边切
边框
四个边，同时设置：border:3px solid red;
文本溢出处理
auto: 自适应，超出则加滚动条，否则不加
hidden：超出则隐藏
RGB颜色
http://tool.oschina.net/commons?type=3
盒子模型
margin外边距
top上
padding内边距
left左
文本样式
字体
font-family:"微软雅黑";
缩进
text-indent: 30px;
字体颜色
color:orangered;
文本对齐方式(左,中,右)
text-align: center;
字体加粗
font-weight: bold;
字体大小
font-size:50px;
上划线
text-decoration: overline;
背景色
background: brown;
高度(屋子的高度)
height: 150px;
文字的行高 (人的身高)
line-height:150px ;
中线(删除线)
text-decoration: line-through;
选择器
元素选择器
格式:h2{}
使用标签名作为修饰的目标
类选择器class
格式: .class的名字{}
对元素选择器进一步筛选
ID选择器id
格式: #id的名字{}
对类选择器再进一步
选择器组
格式:h1,h2,h3{}
派生选择器
后代选择器(全选)
格式:div p{}
子代选择器(选子)
格式:div>p{}
伪类选择器
未点击
格式: a:link{}
点过之后
格式:a:visited{}
悬停
格式: a:hover{}
点击不放
格式:a:active{}
四个伪类必须按照一定的顺序，否则失效 lvha
列表样式
去掉
list-style-type: none;
数字
list-style-type: decimal;
小写罗马
list-style-type: lower-roman;
大写罗马
list-style-type: upper-roman;
黑点
list-style-type: disc;
方块
list-style-type: square;
圆圈
list-style-type: circle;
用图片替换列表项的标记
list-style-image: url(img/1.png);
通过浮动定位变成横向
鼠标样式
cursor:
default：指针
pointer：手指
crosshair：十字
text：焦点
wait：等待
定位样式
元素的分类
所有的元素标签，都有自己的分类，块级或行级
块级元素:
h1~h6，p，div等...
自上而下，垂直方向（自动换行）：可以改变宽和高
行内元素
a,b,span等...
从左到右，水平方向（不会换行）：无法改变宽和高
行内块元素：
input,img等...
从左到右，水平方向（自动换行）：可以改变宽和高
默认定位
块级元素显示
display:block;
默认显示
行内元素显示
display:inline;
不能改变宽和高
行内块元素显示
display:inline-block;
可以改变宽和高
浮动定位
浮动元素可以向左或向右移动，直到它的外边缘碰到父元 素或另一个浮动框的边框为止 浮动元素依旧位于父元素之内
左浮动
float:left
右浮动
float:right
相对定位
本元素与相邻元素之间的距离
position : relative
绝对定位
本元素与爷爷元素的距离
position:absolute
固定定位
让元素位置保持不变
positon:fixed;
z轴(覆盖显示)
值越大，越在上（离脸近）
z-index：数值
隐藏文字
display:none;
隐藏文字
表格样式
单元格边框合并
border-collapse: collapse;
<style>css3样式
圆角
border-radius:50%;/*边框圆角50%*/(圆形)
border-radius:左上px 右上px 右下px 左下px;
border-radius:左上(右上)px 右上(左下)px;
阴影
盒子阴影
box-shadow:水平偏移px 垂直偏移px 模糊的大小px 阴影大小px 阴影的颜色;
文本阴影
text-shadow:阴影的颜色 水平方向px 垂直方向px 模糊的大小px;
渐变
线性渐变
background:linear-gradient([to 方向] 颜色列表);
径向渐变
background:radial-gradient(颜色列表);
颜色列表可以有N个
动画
过渡动画
只能控制开始和结束，中间的过程控制不了
transition: 过渡或动画模拟的css属性 完成过渡所使用的时间s 过渡函数 [过渡开始的延迟时间];
并不是所有的属性都支持过渡，css3只开发部分属性
过渡函数:
ease
默认.快到慢
linear
匀速
ease-in
加速
ease-out
减速
ease-in-out
先加速再减速
动画
从一个状态到另一个状态，过程中的每个时间点都可以控制。
定义动画:
@keyframes 动画名称{ from{颜色,形状,距离...}开始 to{颜色,形状,距离...}结束 }
@keyframes 动画名称{ 0%{颜色,形状,距离...} ... 100%{颜色,形状,距离...} }
绑定动画
元素选择器{ animation: 动画名称 执行所用时间s 过渡函数 执行次数 [alternate来回执行]; }
infinite
无线执行次数
<JavaScript>
JS是一种网页编程技术，用来向 HTML 页面添加 交互行为
面向对象基础
创建对象的三种方式
使用object
使用构造函数
使用直接量(JSNO对象)
JSNO对象
创建jsno对象
创建jsno数组
json复杂的对象
使用三种方式
行内
<input type="button" value="哥哥点我" onclick="alert('嘤嘤嘤')";
onclick
绑定事件
alert()
弹窗
内部
<script> alert("helloworld!") </script>
外部
创建一个文件，后缀名叫“.js”
定义:<script src=”01.js”></script>
优先级 谁在上 先执行谁
变量
因为javascript是弱类型语言，所以在定义变量的时候，所有的数据类型全都使用var来声明；
数值类型：number
字符串：string 使用双引或单引
布尔类型：true=1 | false=0 （在运算中转化成1和0）
自动类型转换
数字+字符串=字符串
布尔+数字=数字
布尔+字符串=字符串
布尔+布尔=数字
转换函数
任意类型转 字符串
x.toSring();
字符串转 整数
parseInt（x）
字符串转 小数
parseFloat(x)
查询(判断)数值当前类型
typeof（x）
不能转换返回NaN
js是一门解释性（脚本）语言,由浏览器解释执行代码，不进行预 编译。
运算符/流程控制
算术运算
关系运算
严格相等
===类型数值相同
非严格相等
!==
逻辑运算
三目运算
循环结构
条件判断
常用对象
String
创建字符串对象
var str="helloworld";
var str=new String("helloworld");
常用方法:
数组Array
无论什么数据类型，都是Array
初始化数组的三种方式
var arr1 = new Array(); arr1[0] = 10; arr1[1] = 20; arr1[2] = 30; console.info( arr1 );
var arr2 = new Array(10,'a',true); console.info( arr2 );
var arr3 = [5,'b',false]; console.info( arr3 );
二维数组
数组中的元素，是一个数组。
数组常用的方法:
数字类Math
http://www.w3school.com.cn/jsref/jsref_obj_math.asp
Math.round(x)
四舍五入到整数
Math.floor(x)
取整
Math.random();
返回 0 ~ 1 之间的随机数。
max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。
Number封装类
var data = 23.56789; alert(data.toFixed(2));//23.57
数值转换为字符串,并保留小数点后一定位数
Date日期
RegExp正则表达式
常用方法
RegExp.test(string)
如果字符串 string 中含有与 RegExp 匹配的文本，则返回 true ，否则返回 false
null与undefined
nudefined
有对象，但没值
null
没对象
函数(像java的方法)
函数的定义
由关键字function定义
函数名的定义规则与标识符一致，大小写敏感
可以使用变量、常量或表达式作为函数调用的参数
返回值必须使用return
function 函数名 (参数) { 函数体; return 返回值; }
无参的函数
function abc(){ for(var i = 1;i<=5;i++){ console.info(i); } }
带参的函数
function he(a,b){ alert(a+b); }
带参的函数，在定义的时候，不要加数据类型
带返回值的函数
arguments参数对象
function he(a,b){ alert(a+b); console.info( arguments.length ); //参数的个数 console.info( arguments[0] ) ;//b 的值 }
arguments.length 获得参数列表的个数 arguments[下标] 获得某个位置上的参数
匿名函数
没有名称的函数,只本次执行就可以(类似java 的匿名内部类)
全局函数
都是预定义的，js帮我们准备好的 直接用方法名称引用即可。
常用的
parseInt（）| parseFloat（）
isNaN（）判断是否包含字符
eval（）：用来转换字符串中的运算
encodeURI()
编码
decodeURI()
解码
DOM对象
元素是javascript内部的机制将html页面中所有的元素转换成了对象。这个机制，就是“DOM” 每个文档，都是一个document对象。
查找元素节点的方法:
通过id值，获得唯一对象的
document.getElementById(id值)
通过name属性值，获得多个匹配的对象
document.getElementsByName( name值 )
通过标签名，获得多个匹配对象
document.getElementsByTagName(标签名)
案例:登录验证
案例:隔行变色
案例:全选效果
修改节点样式:
格式 ： 元素对象.style.css属性名="属性值"；
例如： node.style.color = “red”； node.style.fontSize = “10em”; 同时修改多个样式：className = “class名”；
案例:类属性
层次查找节点
因为div和p标签之间有空白节点被解析，所以会出现#text，属于文本节点。 将空白去除
节点类型:
select元素操作
table表格元素对象
创建节点
删除和替换
删除
替换
BOM浏览器对象
window窗口对象
alert(提示信息)
提示对话框
confirm(提示信息)
是否对话框,返回布尔类型
prompt(提示信息,[内容])
输入对话框
window.close()
关闭当前浏览器窗口
window.open(打开的网页地址,窗口的名字,[参数])
打开一个新浏览器窗口
参数:
window定时器
setTnterval(1,2); 1:重复执行的动作(函数) 2:时间间隔 (毫秒)
周期性定时器
clearInterval(定时器对象)
停止定时任务
setTimeout(1,2) 1,执行的函数 2,间隔(毫秒)
一次性定时器,类似延迟效果
屏幕对象
screen.width screen.height
获取屏幕分辨率
历史痕迹对象
history.go(num)
返回上一级
num为正表示前进 num为负表示后退
history.back()
返回上一个网页
location对象
location.href=页面跳转的目的地
案例页面跳转
event事件
鼠标事件
鼠标单击事件
onclick
鼠标双击事件
ondblclick
鼠标悬停事件
onmouseover
鼠标离开事件
onmouseout
键盘事件
键盘按下事件
onkeydown
键盘松手事件
onkeyup
状态事件
onfocus
得到焦点
onblur
失去焦点
onchange
改变时触发
案例:省市级联效果
事件的默认机制
事件的触发顺序是自内向外,就是冒泡机制
如果2个按钮落在一起,默认点击都会触发
取消冒泡机制:
event.stopPropagation();
鼠标触电x和y坐标
event.chintX
event.chintY
event.target.nodeName
发生的目标
提示输出框
prompt()
提示输入框
alert()
弹窗
console.info()
控制台输出
document.write()
输出页面的内容
JQuery框架
简介
1、jquery就是js开发的，所以jquery本身就是javascript
jquery-3.3.1.js 开发环境的 jquery-3.3.1.min.js 生产环境的
简单的隔行换色
<script src="js/jquery-3.3.1.js"></script> <script> $(function(){ $("tr:odd").css("background","blue"); $("tr:even").css("background","red"); }); </script>
强大的选择器
基本选择器
标签选择器
$("p")
id选择器
$("#er")
class选择器
$(".si")
选择器1，选择器2。。。
$("#er,.si")
层级选择器
后代选择器
$("#d2 p")
p1 p2
子代选择器
$("#d2>p")
p1
相邻的兄弟
$("#d2+p")
下一个p
后面的所有兄弟
$("#d2~p")
后面所有的p
基本的筛选选择器
第一个元素
$("p:first")
最后一个元素
$("p:last")
不包含not里的元素(过滤)
$("p:not(.si)")
下标为奇数的元素
$("p:odd")
下标为偶数的元素
$("p:even")
下标相等的元素
$("p:eq(2)")
大于下标的元素
$("p:gt(2)")
小于小标的元素
$("p:lt(2)")
内容的筛选选择器
模糊查询内容 元素内容包含is的所有p元素
$("p:contains(is)")
选取内容为空的元素
$(":empty")
可见性选择器
(秒)显示p元素隐藏的文字
$("p:hidden").show(1000);
表单选择器
:input 选取所有输入框 :text 选取所有的文本框 : password 选取所有的密码框 : radio 选取所有的单选按钮 : checkbox 选取所有的复选框 : submit 选取所有的提交按钮 : reset 选取所有的重置按钮 : button 选取所有的按钮 : file 选取所有的文件域 : hidden 选取所有的隐藏域
属性选择器
属性开始包含xx的
$("a[href^=xx]")
属性结束包含xx的
$("a[href$=xx]")
属性中包含xx的
$("a[href*=xx]")
表单筛选
选取所有禁用的元素
：disabled
选取所有可用的元素
:enabled
选取选中的元素
：checked
属性函数:
获取
$("img").attr("title");
得到img的title属性值
$("input").val();
得到input框的值
$("div").text();
得到div里面的纯文本内容
$("div").html();
得到div里面所有内容（html标签+文本值）
设置
$("img").attr("title","xxx");
设置img的title属性值
$("input").val("xxxx");
设置input框的值
$("div").text("xxxx");
设置div里面的纯文本内容
$("div").html("xxxx");
设置div里面所有内容（html标签+文本值）
移除
$("img").removeAttr("title");
移除img的title属性值
样式函数
$("p").addClass("class样式");
为元素添加类样式
$("p").removeClass("class样式");
为元素移除类样式
$("p").toggleClass("class样式");
切换样式（有->无、无->有）
$("p").css("css属性")
获得p元素的css属性的值
$("p").css("属性","值")
设置p元素的css属性的值
$("p").css({"width": "150px",...});
设置p元素多个css属性的值(jsno)
$("div").width()
获得元素的宽度
$("div").height()
获得元素的高度
$("div").width(值)
设置元素的宽度
$("div").height(值)
设置元素的高度
h5和h4的区别
文档声明
字符编码设计
大小写不敏感
布尔值属性
引号省略
结束标签省略