HTML总结
2020-12-11 16:38:07 0 举报AI智能生成
Html的基础知识，包含javascript、jquery
作者其他创作
大纲/内容
脚本动态效果之------Jquery
1.认识JQuery 本质是一个优秀的Javascript库
1.概述
（1）轻量级的js库
（2）它兼容CSS3
（3）还兼容各种浏览器
（4）写得多，做的少。
2.特点
（1）动态特效，支持AJAX
（2）可以通过插件来扩展；方便的工具
（3）渐进增强
（4）链式调用
（5）多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）
3.JQuery的面向对象
1.JQuery的对象
（1）jQuery对象可通过$表示
（2）jQuery封装了对HTML元素的操作细节，从而简化对HTML元素的操作和访问
（3）jQuery对象即可以表示一个元素，也可以表示多个元素
2.属性与方法
1.length（）：得到jQuery 对象中元素的个数
2.each(callback)：循环遍历集合中的元素。
用法：$.each(function(index, domEl){
//在函数中可以访问当前的元素
//当前元素可以是this，也可以是domEl
});
4.JQuery的查找HTML的元素的方法
（1）getElementById
（2）getElementsByName
（3）getElementsByTagName
5.JQuery选择器
1.基本选择器
根据class、id、html标记进行查找
例如：1.#id：根据元素的id进行查找
$("#d1");
2.selector1,selector2,selectorN：根据任意选择器进行组合，是或的关系
$("div,#d1,.c1").html("ssssss");
2.层级选择器
根据父子或兄弟关系进行查找
例如：1.ancestor descendant：可以直接到到孙子
$("table tr td").html("李赞红");
2.parent > child：只能找儿子
$("table>tbody>tr>td").html("李赞红");
3.简单选择器
1、根据索引特殊位置进行查找
（1）：first：查找第一个
$("table>tbody>tr:first").css("background", "red");
（2）：last：查找最后一个
$("table>tbody>tr:last").css("background", "green");
（3）:not：取反（除去指定的）
$("table>tbody>tr:not(:last)").css("background", "green");
2、奇偶性查找
（1）:even：查找索引为偶数的元素
$("table>tbody>tr:even").css("background", "green");
（2）:odd：查找索引为奇数的元素
$("table>tbody>tr:odd").css("background", "green");
3、查找指定范围
（1）:eq：查找索引为指定值的元素,eq -> equals
$("table>tbody>tr:eq(3)").css("background", "green");
（2）:gt：查找索引大于指定值的元素 gt -> great than 比...大
$("table>tbody>tr:gt(3)").css("background", "green");
（3）:lt：查找索引小于指定值的元素 lt -> less than 比...小
4.内容选择器
根据标签体内容进行查找
（1）:contains：查找出包含了指定内容的元素
$("div:contains(李)").css("background", "red")
.css("color", "yellow");
（2）:empty：查找出内容为空的元素
$("div:empty").html("/");
5.可见性选择器
根据元素是否可见进行查找
（1）:hidden：找出隐藏的元素
$("div:hidden").show();
（2）:visible：找出显示的元素
6.属性选择器
根据元素属性进行查找
（1）[attribute]：找出定义了某个属性的元素
$("a[title]").hide();
（2）[attribute=value]：找出属性等于value的元素
$("a[title=baidu]").css("fontSize", "100px");
（3）[attribute^=value]：找出属性值以value开头的元素
$("a[title^=b]").css("color", "red");
7.表单选择器
查找特定的表单元素
:input：匹配所有 input, textarea, select 和 button 元素
$(":input").css("background", "red");
8.表单对象属性选择器
根据表单域的状态属性进行查找
:enabled：查找可用元素
:disabled：查找禁用元素
:checked：查找选择的元素，应用于<input type="checkbox">
:selected：查找选择的元素，应用于<select>标记
6.jQuery对象的实用方法
html()：设置或获得标签体的内容
$(domEl)：将dom元素转换成jQuery对象
show()：显示元素
hide()：隐藏元素
toggle()：如果元素是显示就隐藏，如果是隐藏的就显示 val()：设置或获得value属性值
width()：获得元素的宽度
height()：获得元素的高度
offset()：获得元素的位置（离左边的位置、离顶部的位置）
top、left
attr()：设置或访问属性 attribute
2.JQuery元素操作
3.JQuery事件与动画
4.JQuery-JSON与AJAX
脚本动态效果之-----JavaScript
JavaScript基础
1.概述：
1.为什么使用？
1.动画效果
2.表单验证
2.what?(基于对象，事件驱动)
特点：
1.交互性
2.语法与java 类似
3.解释性语言
组成：
1.ECMAScript： 语法
2.Bom: 操作窗口
3.Dom: 操作页面元素
3.组成结构
1.格式：<Script> </Script> 可以放在网页的任意位置
2.HTML中的代码是从上往下执行的
4.执行原理
发送请求
响应请求
浏览器解释执行
5.引用方式
1.行内引用：只能当前标签应用
2.内嵌引用：写在<Script>标签，当前网页可用
3.外部应用：写一个*.js文件，通过<Script>引用到网页
2.语法
a:变量
1.声明：var 变量名
2.赋值：变量名=值;
3.变量可以不经声明而直接使用，不推荐使用。
b.数据类型
1.undefined：变量没有初始值，将被赋予初始值undefined。
2.null:表示一个空值，与undefined值相等
3.number:表示数字型（整数和小数）
4.boolean：表示布尔（true/false）
5.string:表示字符串，（单引或双引）
c.String对象
1.属性：length
2.方法：charAt()：根据下标取字符
indexOf()：根据字符找下标
substring()：截取字符串
split()：根据某个字符分隔字符串
d.typeof方法：检测变量的返回值
e.数组
1.属性：length
2.方法：join()：连接数组元素
sort()：数组排序
push()：向数组末尾添加一个或更多元素，并返回新的长度
子主题 3
f.输入与输出
1.输出
1.alert();只有一个按钮，用于提示或警告。
2.comfirm("提示信息");有两个按钮，用于提问。
按确定返回true，
按取消返回false
2.输入 prompt()
prompt("提示信息","输入框的默认信息");
按下确定，返回输入的数据；
按下取消，返回null。
3.函数
等同于java中的方法，完成一个代码块
分类
1.自定义函数
functon 函数名（参数列表）{.....................}
调用：事件=“函数名（）”
2.系统函数 例如：ParseInt ParseFloat isNaN
4.表单验证
a.取表单元素值： var 变量名=表单name ,元素name ,value
b.表单提交事件：<form action="" method="" onsubmit=“return 函数名”> 注意：true才提交表单
2.BOM
1.BOM的定义：
BOM是browser object model的缩写，简称浏览器对象模型
2.BOM的特征
1.BOM提供了独立于内容而与浏览器窗口进行交互的对象
2.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
3.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
3.BOM的结构图
window
history
location
document
4.window的对象
1.window -- window对象是BOM中所有对象的核心
2.window方法：
输入和输出：prompt()、alert()、confirm()
窗口关闭：close()
窗口打开：open()
计时器：setTimeout() {隔指定时间，调用一次指定函数。（只调一次）}、setInterval() 每隔指定时间，调用一次指定函数。（反复调用）、clearTimeout()、clearInterval() 清除计时器对象
3.open()方法：
常用属性：
heigth、width:窗口的高和宽
left、top：窗口的x、y坐标
toolbar：设置工具栏
scrollbars：设置滚动条
location：设置地址栏
status：设置状态栏
menubar：设置菜单栏
resizable：设置窗口是否可调节尺寸
titlebar：设置显示标题栏
fullscreen：设置窗体全屏模式
5.history对象：
a:方法：
6.Math对象：
ceil():对数进行上舍入
floor():对数进行下舍入
round():把数四舍五入为最接近的数
random():返回0~1之间的随机数
7.Date日期对象：
a.语法:
var 日期对象=new Date()
b.方法：
back()后退 go(-1)也可以
forward()前进 go(1)也可以
getDate():取天1-31天
getDay()：取星期0-6
getFullYear():取年份
getMonth()：取月份0-11
getHours()：取小时
getMinutes()：取分钟
getSeconds()：取秒钟
getTime()：返回自某一时刻（1970年1月1日）以来的毫秒数
3.DOM
1、什么是DOM?
是w3c组织推荐的处理可扩展标志语言的标准编程接口。是一种文档对象模型，用于操作网页中所有的元素节点（添、删、改、查）。
2、DOM的基本操作
A:定位元素(查找元素)
（1）document.getElementById("id名");通过id名称获取元素一个对象。
说明:id不能有重复的。如果有重复的id名，只取第一个。
（2）document.getElementsByTagName("标签名");
通过标签名获取一组元素对象。
（3）document.getElementsByName("name名称");
通过name名称获取一组元素对象。
B:创建新元素
document.createElement(“元素名”)
如：创建div
var a=document.createElement("DIV");
C:追加子元素
父元素对象.appendChild(子元素对象);
如：将创建的div添加以body中。
document.body.appendChild(a);
D:删除子元素
父元素对象.removeChild(子元素对象)
如：将div从body中删除
document.body.removeChild(div元素对象);
E:访问元素属性
方式一：直接通过元素访问。(一般用于标签的内置属性)
如：访问img的src
document.getElementById("img的id名称").src="值";
方式二：应用于自定义的标签属性
调用setAttribute(“属性名”, “属性值”)给属性赋值
调用getAttribute(“属性名”)获得属性的值
F:美化元素
1.e.style.样式属性=值
div.style.backgroundColor = “red;
2.e.className = “cs”;
G:获取父元素
parentNode.parentNode 例如： var zz=YY.parentNode.parentNode;
4.event
1、什么是事件？
事件是元素的行为，可触发函数执行某个操作。
2、基本语法
方式一：<标签 事件名="函数名()"></标签>
方式二：<标签 事件名="javascript:函数()"></标签>
方式三：<标签 属性="javascript:函数()"></标签>
3、常用事件：
1.加载：onload
2.鼠标：onclick、ondbclick、onmouseover、onmouseout、
onmousedown、onmouseup
3.键盘：onkeydown、onkeyup、onkeypress、onchange
4.焦点：onblur、onfocus
4、事件属性（事件本身也是一个对象。）：
1.target：事件源
2.x,y:事件发生的位置的 x 坐标和 y 坐标
3.button:如果事件源为鼠标，哪个鼠标按钮被点击 【event.button=0|1|2 分别为左键、中键、右键】
4.keyCode:事件源为键盘，按键的ASCII码
什么是HTML
1.概述：用来描述网页的一种语言
2.特点：1、是超文本标记语言 2、是一套标签;是用标签描述网页。
标签分类
表格标签
常见的表格标签：<table><thead><tbody><th><tr><td>
<table>的组成结构：<table><tr> 若干个 <th> <td></td> </th> </tr>......</table>
常用属性
border:表格线的宽度 cellspacing:单元格之间的距离 cellpadding:单元格内容与边框之间的距离 width:宽度
其他属性
align(水平对齐) ：left/ center /right valign（垂直对齐） ：top /middle /botttom
跨行/跨列 rowspan/colspan =''行数''/''列数''属性 作用于th和td标签上（单元格合并永远指向向右或向下合并）
注意：
1、如果td中设置了align属性，tr中也设置align属性，那么单元格会的内容按照td中的属性来设置。
caption标签专门用来设置表格的标题（标题自动相对于表格居中）注意点：
一定要写在table标签中
一定要紧跟table标签后面
th标签（只要将当前列的标题存储在这个标签中就会自动居中）
细线表格的制作方式：
1、给table标签设置bgcolor
2、给tr标签设置bgcolor
3、给table标签设置cellspacing="1px"
布局标签
div标签
组合其他HTML元素容器，用于文档布局
打文档分割为独立的、不同的部分。
span标签
用作文本的容器
为部分文本设置样式属性
列表 ul(无序)\ ol(有序) \di(定义)
基本结构：<ul> 若干个 <li></li> </ul>,ol同理
<ul>的type 属性： disc：默认值实心圆 circle:空心圆 square:实心方块
<ol>的type属性 值有：1/a/A/i/I,分别按顺序排列下去
定义列表：
格式：<dl> <dt><dd><dt><dd><dl>(dt是definition title 的缩写 ，用来定义列表中的标题 ，而definition description 的缩写)用来定义标题对应的描述。
应用场景：1、做网站尾部的相关信息 2、做图文混排
注意点：
1、dl和dt /dd与ul、ol一样不会单独出现 2、dl中建议只放dt、dd标签 3、和ul、ol一样能够嵌套其他标签
表单标签
1.概述
表单以一个<form>标签开始，所有用户可以输入和选择的内容都可以算到表单里。 作用：一般用于在注册、登录、和发帖子等功能。
2.使用表单与用户进行交互
<form method="传送方式" action="服务器文件"></form>
3.文本框与密码框输入
<form><input type="text/password" name=“提高语义化" value="输入框的默认值"></form>
4.使用单选框、复选框，让用户选择
<input type="radio/checkbox" value="值" name="名称"checked="checked"/> value:提交到服务器的值 name:为控件命名
5.使用下拉列表框，节省空间
<form action="save.php" method="post"> <lable>爱好：</lable> <select><option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> selected="selected"表示选项被默认选中
利用下拉列表实现分组：
<select> <optgroup lable="分组名称"><option>列表数据</option> </optgroup>/select>
6.使用提交按钮，提交数据
<input type="submit" value="提交" name="submitbtn"/>
7.重置按钮，重置表单信息
<input type="reset " value="重置"/>
8.lable标签
<lable for ="male/female">男/女</lable> <input type ="radio" name="gender" id="male"/"famal">
9.实现绑定的格式：<lable for="account">账号</lable><input type="text" id="account"><br>
1.将文字利用lable标签包裹起来
2.给输入框添加一个id属性
3.在lable标签通过for标签和输入框的id进行绑定即可
10.绑定待选项：
<input type="text" list="cars"><datalist id="cars"> <options>宝马</option> <options>路虎</option> <options>奔驰</option>若干个........ </datalist>
11.自动校验输入内容
<input type="email/url(域名)/numbe/date/color">
12.定义一个多行输入框：<textarea cols="30" rows="10"></textarea>
1.默认情况下可以无限换行
2.默认情况下有自己的宽度与高度
3.可以通过cols和rows来指定输入框的宽度和高度，但还是可以无限往下输入
13.给表单加上边框和文字
在<form><fieldset><legend>注册页面</legend></fielset></form>中用这种格式可以加上边框
多媒体标签video
作用
播放视频
格式一：
<video src="images/sb1.webm" autoplay="autoplay"></video>
其他属性值
src:用于告诉video标签需要播放的视频地址
autoplay：用于告诉video是否要播放视频
controls:用于告诉video标签是否显示控制条
poster：用于告诉video标签没有播放视频之前显示的占位图片
loop：一般用于广告视频，用于告诉video标签播放视频完毕后是否要循环播放
preload：预加载视频，但要注意preload和autoplay相冲。
muted:静音
格式二：
<video><source src="" type=""></source></video> (由于视频数据非常重要，五大厂商不愿支持别人的视频格式，解决浏览器适配问题)
详情概要标签
作用：
利用summary来描述重要信息，利用details来描述详细信息，默认情况下是折叠展示，想看见详情必须点击
格式：
<details> <summary> 概要信息</summary> 详情信息 </details>
音频标签
作用：
播放音频
格式：
<audio><source src="" type=""></source></audio> （属性值跟视频标签用法一样）
marquee标签
作用：
跑马灯
格式 ：
<marquee>内容</marquee>
属性：
direction:设置滚动方向，left/right/down/up
scrollamount:设置滚动属性，值越大就越快
locp:设置滚动次数，默认是-1，也就是无限滚动
behavior：设置滚动类型，slide是滚动到边界就停止，alternate滚动到边界就弹回
被废弃的标签
b
strong语义：定义重要性强调文字
u
ins语义：定义插入的文字
i
em语义：定义强调的文字
s
del语义：定义删除的文字
其他
加空格： 代表一个空格
大于：< 小于：>
©:版权符号
基本结构
HTML标签：1.由尖括号包围的关键词 2.标签通常成对出现（第一个是开始标签第二个是结束标签）
解析原则：1.认识的标签就解析为对应的网页效果 2.不认识的标签直接忽略
HTML元素结构：<标签名=“属性值”>标签体</标签名> （可以没有标签体<br/>）
简单标签
<h1>-<h6> 标题标签 <h1>最大，<h6>最小，以此类推。
<hr/> 水平线 1.可用来分隔类容 2.可以在视觉上分隔成各个部分
<p> 段落 是块级元素，会自动在段落前后添加空行
<a> 行级标签 A：重要属性（1）href="http://www.baidu.com"可以链接跳转到对应网址 （2）href="文件名.后缀名"如果后缀名所示文件浏览器可解析（txt）会在浏览器上显示类容。如果后缀名所示浏览器不可解析（doc、exe、pdf）会转换成下载文档 （3） href="#锚点" 可以找到网页对应的锚点信息 对应锚点：<a name="锚点"></a> B:显示文本 C:target 默认属性值：—self,会替换当前网页地址
其他标签：
base标签就是专门用来统一指定当前网页中所有超链接如何打开（注意一：base标签必须写在head标签的开始标签和结束标签之间 注意二：如果在base中指定了target又在a标签指定了target，那么浏览器会按照a标签中指定的来执行。）
0 条评论
下一页
为你推荐
查看更多
