前端学习【1】
前端学习【1】
我终于开始写前端部分的博客了，这部分学着真的很好玩，反馈很强，但写博客就会很无聊，极其无聊，三剑客你大概知道怎么写就行，标签，效果啥的太多了，所以博客这边也就基本是一些链接了，外面的各大网站都有，有的还有内置的编辑器可以对着学习，我认为写在这里更多的是说明我正在系统性的学习这个部分罢了
这辈子就是被浏览器害了，浏览器才是这个世界上最强大的工具！！(暴论)
HTML（超文本标记语言）
我们学这个玩意就是学个标签我非常推荐来这个网站来进行学习
玩HTML+CSS就是玩标签，这里面没啥好说的，去查找更好的网站，讲的比我这里细节多了，所以我这里只会提供结构，各种蓝图，框架，可以直接拿着就去用的，还有标签速查表
HTML网站骨架
1 |
|
这是最基础的骨架部分，这是每个网站都需要的，不要自己写，直接复制粘贴，然后根据需要修改即可。
我在给个更标准的骨架1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<meta charset="utf-8">
<title>TT</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
涉及的元素和规则：
<!DOCTYPE html>：声明文档类型，确保浏览器使用正确的渲染模式。<html lang="en">：根元素，指定文档的语言为英文。<head>：文档的元数据和头部信息。<meta charset="UTF-8">：指定字符编码为 UTF-8，确保正确显示特殊字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度，优化移动端访问。<title>Document</title>：文档的标题，显示在浏览器标签和搜索结果中。
HTML标签速查表
这个标签要写在我这里得没完没了了，超级多，我提供常用标签如下:
font标签(字体属性管理)
font标签是字体标签，用来设置字体的颜色，大小，字体等属性（用法如下）
font标签的属性有：
- color：字体颜色
- size：字体大小
- face：字体类型
font标签的属性值有：
- 颜色：red、green、blue、#FF0000（十六进制）等
- 大小：px、em、%等
- 字体：宋体、微软雅黑等
font标签的属性可以组合使用，例如：1
<font color="red" size="4">这是红色字体</font>
font标签的属性可以使用CSS来设置，例如：1
2
3
4
5font {
color: red;
size: 4px;
face: 宋体;
}
br标签(换行)
br标签是换行标签，用来换行（用法如下）1
<br>
br标签的属性可以使用CSS来设置，例如：1
2
3
4br {
display: block;
margin: 10px 0;
}
hr标签(水平线)
hr标签是水平线标签，用来绘制水平线（用法如下）1
<hr>
hr标签的属性可以使用CSS来设置，例如：1
2
3
4
5hr {
border: 0;
height: 1px;
background: #333;
}
路径相关
路径相关标签用来定义文档的路径，有6个等级，分别是：
- base：基本路径
- link：链接路径
- meta：元数据路径
- script：脚本路径
- style：样式路径
- title：标题路径
路径相关标签的用法如下：1
<base href="https://www.baidu.com">
进入到上一级文件：1
<base href="../">
进入到下一级文件：1
<base href="./">
标题标签
加粗，定位，字体大小
标题标签用来定义文档的标题，有6个等级，分别是：
- h1：一级标题
- h2：二级标题
- h3：三级标题
- h4：四级标题
- h5：五级标题
- h6：六级标题
标题标签的用法如下：1
2
3
4
5
6<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
这里面有一些设置方式：
align属性：
- left：左对齐
- center：居中对齐
- right：右对齐
- justify：两端对齐
实际在标签内使用为：标题标签的属性可以使用CSS来设置，例如：1
2<h1 align="center">一级标题</h1>
<h2 align="left">二级标题</h2>1
2
3
4h1 {
font-size: 24px;
color: #333;
}超链接标签
超链接标签用来定义超链接，点击超链接可以跳转到其他页面（用法如下）超链接标签的属性有：1
<a href="https://www.baidu.com">这是一个超链接</a>
- href：超链接目标的URL
- target：超链接打开的目标窗口（_blank：新窗口，_self：当前窗口）
- 新窗口：_blank
- 当前窗口：_self
下面是一个例子：1
2<a href="https://www.baidu.com" target="_blank">这是一个超链接</a>
<a href="https://www.baidu.com" target="_self">这是一个超链接</a>
超链接标签的属性可以使用CSS来设置，例如：1
2
3
4a {
color: #007bff;
text-decoration: none;
}
img标签(图片)
img标签是图片标签，用来显示图片（用法如下）1
<img src="图片路径" alt="图片描述">
img标签的属性有：
- src：图片路径
- alt：图片加载失败时显示的替代文本
- width：图片宽度
- height：图片高度
- style：图片样式
- align：图片对齐方式
- border：图片边框
- vspace：图片垂直间距
- hspace：图片水平间距
我给个样例啊：你也可以获取网上的图片，取得该图片的url，然后复制到src中，案例如下1
<img src="图片路径" alt="图片描述" width="200" height="200" style="border: 1px solid #000;">
img标签的属性可以使用CSS来设置，例如：1
<img src="http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280" alt="图片描述放这里">
1
2
3
4img {
width: 200px;
height: 200px;
}表格标签
表格标签用来定义表格（用法如下）表格标签的属性有：1
2
3
4
5
6<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table> - border：表格边框
- cellspacing：单元格间距
- cellpadding：单元格内边距
- width：表格宽度
- height：表格高度
- style：表格样式
表格标签的属性可以使用CSS来设置，例如：1
2
3table {
border: 1px solid #000;
}列表标签
列表标签用来定义列表（用法如下）列表标签的属性有：1
2
3
4<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul> - type：列表类型（disc：圆点，square：方块，circle：圆）
- style：列表样式
- width：列表宽度
- height：列表高度
- align：列表对齐方式
列表标签的属性可以使用CSS来设置，例如：1
2
3ul {
list-style-type: disc;
}
ol有序列表1
2
3
4
5<ol>
<!-- li是列表项 -->
<li>列表项1</li>
<li>列表项2</li>
</ol>
ul无序列表1
2
3
4<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
这两个的type属性中可以选择
表单标签用来定义表单（用法如下）1
2
3
4<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
</form>
表单标签的属性有：
- action：表单提交的目标URL
- method：表单提交的方式（GET、POST）
- GET：将表单数据拼接在URL后面，提交到服务器
会将表单信息暴露在URL上，不安全 - POST：将表单数据放在请求体中提交到服务器
不会将表单信息暴露在URL上，安全
- GET：将表单数据拼接在URL后面，提交到服务器
- name：表单的名称
- id：表单的唯一标识
- required：必填项
- type：输入框的类型（text、password、radio、checkbox、select、textarea）
- value：输入框的默认值
- placeholder：输入框的占位符
- style：输入框的样式
- readonly：只读属性
- disabled：禁用属性
- multiple：多选属性
- size：输入框的宽度
- maxlength：输入框的最大长度
- minlength：输入框的最小长度
- pattern：输入框的正则表达式验证
- form：输入框所属的表单
- formaction：表单提交的目标URL
- formmethod：表单提交的方式（GET、POST）
- formname：表单的名称
实际样例参考蓝图布局
1 | <!--超级参考，超级易懂的一个简单的元素介绍页面--> |
CSS（层叠样式表）
CSS是用来定义网页的样式的，是HTML的补充。
它是属性样式定义，对特定id,标签，类进行样式定义。
三种选择器存在优先级顺序：
id选择器 > 类选择器 > 元素选择器
CSS实例样式：1
2
3
4
5
6
7
8
9
10
11
12
13/* 选择器 { 属性: 值; } */
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#id {
color: red;
}
你可以直接在HTML文件体中定义CSS样式，也可以在外部文件中定义CSS样式。
直接在HTML文件体中定义CSS样式的方法是：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 选择器 { 属性: 值; } */
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#id {
color: red;
}
</style>
在外部文件中定义CSS样式的方法是：
2
3
4
5
6
7
8
9
10
11
12
13
/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#id {
color: red;
}
外部调用是最常见的用法，也是最合理的。想要在外部调用CSS样式，需要在HTML文件中引入CSS文件。
引入CSS文件的方法是：
2
3
4
5
6
7
8
9
<！-- 也可以 -- >
<style type="text/css" rel="stylesheet">
table {
margin: 0 auto;
}
</style>
rel属性指定文档与外部资源的关系。stylesheet表示引入CSS文件。
href属性指定引入的外部资源的位置。
CSS文件的位置可以是本地文件，也可以是远程文件。
CSS文件的位置可以是相对位置，也可以是绝对位置。
CSS文件的位置可以是多个文件，也可以是一个文件。
若是多个文件，需要在每个文件中引入CSS文件。像下面这样：1
2<link rel="stylesheet" href="css/样式.css">
<link rel="stylesheet" href="css/样式2.css">
以下是关于CSS的三大选择器在HTML中的例子：1
2
3
4
5
6<!-- 元素选择器 -->
<p>这是一个段落</p>
<!-- 类选择器 -->
<div class="red">这是一个红色的div</div>
<!-- ID选择器 -->
<div id="id">这是一个ID选择器</div>
以下是CSS的三大选择器的例子：1
2
3
4
5
6
7
8
9
10
11
12/* 元素选择器 */
p {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#id {
color: red;
}
但是这样用选择器是很不灵活的，所以存在复合选择器，他可以更加精准的选择元素和标签，有两个及其以上的选择器组合而成的是复合选择器
以下是CSS的复合选择器的例子：1
2
3
4
5
6
7
8
9
10
11
12/* 后代选择器 */
div p {
color: red;
}
/* 子代选择器 */
div > p {
color: red;
}
/* 并集选择器 */
div, p {
color: red;
}
以下是CSS的复合选择器的说明：
后代选择器：选择器1 选择器2 { 属性: 值; }
这个玩意又叫包含选择器，外层标签在前面，内层标签在后面，表示选择选择器1中的所有选择器2的元素，记得用空格隔开，前者为父亲（父元素），后者为儿子（子元素），理论上你可以一直套下去，最后选择的最后儿子，选择器2可以是任意一个基础选择器子代选择器：选择器1 > 选择器2 { 属性: 值; }
这个玩意又叫直接选择器，外层标签在前面，内层标签在后面，表示选择选择器1中的直接儿子，选择器2只能是直接的子元素，选择器1和选择器2之间不能有空格隔开并集选择器：选择器1, 选择器2 { 属性: 值; }
这个玩意又叫并集选择器，选择器1和选择器2之间用逗号隔开，这个玩意的作用是将两种选择器的样式合并起来，选择器1和选择器2之间不能有空格隔开
不得不说前端部分的东西真的都多呢，学起来其实还是很有成就感的，毕竟看的见摸得着
常用的CSS属性字段表：
这个想想也会很多的吧靠北，点这个链接查找把
我这里放几个常用的,最常用的CSS的属性的属性表：按照文本属性，按照背景属性，按照边框属性，按照定位属性，按照其他属性来分
文本属性：
- color：文本颜色
- font-size：字体大小
- font-family：字体类型
- text-align：文本对齐方式
- text-decoration：文本装饰线
- line-height：行高
背景属性：
- background-color：背景颜色
- background-image：背景图片
- background-repeat：背景重复
- background-position：背景位置
边框属性：
- border-width：边框宽度
- border-style：边框样式
- border-color：边框颜色
定位属性：
- position：定位方式
- top：顶部位置
- left：左侧位置
- right：右侧位置
- bottom：底部位置
其他属性：
- margin：外边距
- padding：内边距
- display：显示方式
- float：浮动方式
- clear：清除浮动
- cursor：鼠标指针
- z-index：层叠顺序
够了吗？别贪得无厌啊，特么喵的，爷爷我连个四级都没有过，叫我说“看着提示的标签你就知道是干什么的了”，不是找打吗喵
CSS基础框盒模型
border可以设置元素的边框，网页的各个组件和设计基本上就是大框套小框
边框有三个部分组成：边框宽度，边框颜色，边框样式
border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-style：边框样式设置
- solid：实线
- dotted：虚线
- dashed：破折线
border-width：边框宽度
border-style：边框样式
border-color：边框颜色
border-style：边框样式设置
- solid：实线
- dotted：虚线
- dashed：破折线
CSS3效果
圆角边框，阴影，渐变，过渡，动画等
这里提一下就行：效果有点多，而且可定制化，但是也比较复杂，需要自己去研究，这里就不详细介绍了
点这个，快点这个，喵的，后面没有了，这里去细节学习
javaScript
这个是前端的脚本语言，用来给网页添加互动性，比如：弹窗，表单验证，动态内容更新等，可以说是前端的灵魂
js如何和HTML进行联系：
- 内联式：在HTML标签中使用script标签，将js代码写在标签中
只需要在HTML标签中使用script标签，将js代码写在标签中，不需要引入外部文件，但是这种方式不推荐，因为js代码写在HTML标签中，会导致HTML标签变得冗长，影响网页的加载速度（你还觉得HTML不够长吗？） 外部式：在外部文件中写js代码，然后在HTML标签中使用script标签引入外部文件
外部式的js代码写在外部文件中，需要引入外部文件，这种是最主流的操作，可以通过script标签引入外部文件。写法如下1
<script src="js/脚本.js"></script>
script标签可以引入内部的js代码，也可以引入外部代码，但是功能只可以二选一
嵌入式：在HTML标签中使用script标签，将js代码写在标签中，但是使用type属性，将script标签设置为text/javascript，这样浏览器就会将script标签中的代码作为js代码执行
注意在同一个块中，script标签只能引入一个外部文件，但是可以引入多个内部的js代码，但是不推荐这样做
以下是两种引用方式的实际案例：（这里强烈建议在代码中使用内联式的，写好了后再将其移出去）
内嵌式标签：1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// alert是js语言提供了一个警告框函数
// 可以接受任意类型的参数
alert("hello!!JavaScript");
</script>
</head>
<body>
</body>
</html>
外链式标签：1
2
3
4
5
6
7
8
9
10
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/脚本.js"></script>
</head>
<body>
</body>
</html>
外链式标签的js代码写在外部文件中，需要引入外部文件，但是这种方式不推荐，因为js代码写在外部文件中，会导致HTML标签变得冗长，影响网页的加载速度（你还觉得HTML不够长吗？）
js的变量
变量的意思大家都知道，就是用来存储数据的，变量的类型有：
- 字符串:String
- 数字（所有的数值类型）统一为：number
- 布尔值:boolean
- 函数类型:function
- 对象：object
- 未定义：undefined
- 空值：null
- NaN：Not a Number(非数字类型)
示例如下：为什么代码不自动对齐呜呜呜……1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// var可变类型
var i;
// 在控制台输出日志
// typeOf 函数是js语言提供的一个函数，返回变量类型
console.log(typeof(i));
i=12;
console.log(typeof(i));
i=3.14;
console.log(typeof(i));
i="helloJs";
console.log(typeof(i));
i=false;
console.log(typeof(i));
i=new Date();
console.log(typeof(i));
</script>
</head>
<body>
</body>
</html>
js的运算符
这个简单过一下就行上表格：（运算符，描述，例子，运算结果）
|运算符|描述|例子|运算结果|
|—|—|—|—|
|+|加法|1+2|3|
|-|减法|1-2|-1|
||乘法|12|2|
|/|除法|1/2|0.5|
|%|取余|1%2|1|
|++|自增|i++|1|
|—|自减|i—|1|
|+|字符串连接|1+”2”|”12”|
|==|等于|1==2|false|
|!=|不等于|1!=2|true|
|>|大于|1>2|false|
|<|小于|1<2|true|
|>=|大于等于|1>=2|false|
|<=|小于等于|1<=2|true|
|&&|逻辑与|1&&2|2|
||||逻辑或|1||2|1|
|!|逻辑非|!1|false|
ok,打住，这玩意都不认识的建议再单独看看基础QAQ
+有加法和连接符两种作业，如果+的某一边是字符串那么就是为字符串，否则为加法。
隐式类型转换
如果参与数学运算的某个操作数不是数字类型，那么JS会自动将此操作数转换为数字类型。1
2
3
4
5<script>
var i="123";
var j=123;
console.log(i+j);
</script>
显示类型转换
如果需要将一个变量转换为数字类型，那么可以使用Number()函数1
2
3
4
5<script>
var i="123";
var j=Number(i);
console.log(typeof(j));
</script>
字符串类型转换
如果需要将一个变量转换为字符串类型，那么可以使用toString()函数1
2
3
4
5<script>
var i=123;
var j=i.toString();
console.log(typeof(j));
</script>
有很多有很多，这里就不一一列举了。都是些很基础的东西，建议去看看js的官方文档。
流程控制
流程控制语句
分类：
- 条件判断语句
- 条件分支语句
- 循环语句
这里的控制语句与java的相比很相似，简化了许多地方，整体看来还是变简单了
条件判断语句
if语句1
2
3
4
5
6<script>
var i=123;
if(i>100){
console.log("i大于100");
}
</script>
条件分支语句
switch语句1
2
3
4
5
6
7
8
9
10
11
12
13<script>
var i=123;
switch(i){
case 123:
console.log("i等于123");
break;
case 456:
console.log("i等于456");
break;
default:
console.log("i不等于123也不等于456");
}
</script>
循环语句
for语句1
2
3
4
5<script>
for(var i=0;i<10;i++){
console.log(i);
}
</script>
while语句1
2
3
4
5
6
7<script>
var i=0;
while(i<10){
console.log(i);
i++;
}
</script>
do…while语句1
2
3
4
5
6
7<script>
var i=0;
do{
console.log(i);
i++;
}while(i<10);
</script>
数组
字面量数组的创建1
2
3
4<script>
var arr=[1,2,3,4,5];
console.log(arr);
</script>
构造函数创建数组1
2
3
4<script>
var arr=new Array(1,2,3,4,5);
console.log(arr);
</script>
遍历数组1
2
3
4
5
6<script>
var arr=[1,2,3,4,5];
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
</script>
函数
这玩意就像是java的方法的概念，可以让这些代码被复用。具有一次定义，多次调用的优点
创建函数1
2
3
4
5<script>
function say(){
console.log("hello");
}
</script>
调用函数1
2
3
4
5
6<script>
function say(){
console.log("hello");
}
say();
</script>
函数的参数
函数的参数可以有多个，也可以没有参数1
2
3
4
5
6<script>
function say(){
console.log("hello");
}
say();
</script>
函数的返回值
函数的返回值可以有多个，也可以没有返回值1
2
3
4
5
6<script>
function say(){
console.log("hello");
}
say();
</script>
js的事件
什么是事件？事件是电脑输入设备与页面进行响应，称为事件。是js非常重要的性质
常用事件：
- onload加载事件，页面加载完成之后，常用于在页面初始化操作。
- onclick点击事件，常用于按钮点击响应操作。
- onblur失去焦点事件，常用于输入框失去焦点后验证其内容是否合法。
- onchange内容发生改变事件，常用于下拉列表和输入框内容发生改变后的操作。
- onsubmit表单提交事件，用于表单提交时，验证所有表单项的内容是否合法。
事件的注册又分为静态注册和动态注册两种：
什么是事件注册（绑定）：
就是告诉浏览器，当事件响应后要执行的那些操作代码，叫事件注册或者事件绑定。 - 静态注册事件：通过HTML标签的事件属性直接赋予事件响应的代码，静态注册。
- 动态注册事件：通过Dom对象.事件名=function(){}这种形式赋予事件响应后的代码，动态注册
onload页面加载完成事件
1 |
|
onclick点击事件
1 |
|
onblur失去焦点事件
1 |
|
onchange内容发生改变事件
1 |
|
onsubmit表单提交事件
1 |
|
内置对象
js的对象分为3种：内置对象，自定义对象，浏览器对象
内置对象：Math/Array/Date对象带有属性和方法的特殊数据类型。
Date对象
1 |
|
String字符串
1 |
|
js的组成
js是由三部分组成：ECMAScript、DOM、BOM。
核心语法(ECMAScript)
JavaScript的核心语法是构建整个语言基础的部分。这包括了变量、数据类型、运算符、控制流（如if语句、循环）、函数等。
文档对象模型（DOM）
文档对象模型（DOM）是JavaScript与网页文档进行交互的一部分。它允许您通过JavaScript改、添加、删除页面上的元素和内容。
浏览器对象模型（BOM）
浏览器对象模型（BOM）是JavaScript与浏览器进行交互的一部分。它提供了访问和操作浏览器口，文档、导航历史等的方法和属性
DOM的概念
Document Object Model文档对象模型就是把HTML文档中的标签，属性，文本转换为对象来管DOM经常进行的操作
DOM的操作
- 获取元素
- 对元素进行操作（设置属性或调用其方法）
- 动态创建元素
- 事件
根据id获取元素
document.getElementById(“ElementId值”)通过标签的Id属性值查找标签的dom对象，ElementId是标签的id属性值。
根据name获取元素
document.getElementsByName(“ElementName”)通过标签的name属性查找标签的dom对象，ElementsByName是标签的name属性值
根据标签名获取元素
document.getElementsByTagName(“tagName”)通过标签名查找标签dom对象，tagName是标签名
说明指导
document对象有三个查询方法，如果有id属性，优先使用getElementById方法来进行查询标签如果没有id属性，则优先使用getElementsByName方法来进行查询，如果id属性和name属性都没有最后再按照标签名查找getElementsByTagName。
以上三个方法，一定要再页面加载完成之后执行，才能查询到标签对象。
以下有几个案例：案例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 全选
function checkAll(checkAll){
// 获得checkAll标签的选中状态
var checkAll_status=checkAll.checked;
// 获得指定的name属性为hobby的标签，返回的是多个标签对象集合
var hobbys=document.getElementsByName("hobby");
// 改变所有name属性为hobbys的checkbox的选中状态 修改为true
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=checkAll_status;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" id="checkAll" onclick="checkAll(this)"/><br/>
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="python"/>python
<input type="checkbox" name="hobby" value="css"/>css
<input type="checkbox" name="hobby" value="js"/>js
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 动态注册 页面加载完成之后
window.onload=function (){
document.getElementById("checkAll").onclick=function (){
// getElementsByTagName按照指定标签名进行查询并返回集合
var inputs= document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].name='hobby'){
inputs[i].checked=true;
}
}
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="python"/>python
<input type="checkbox" name="hobby" value="css"/>css
<input type="checkbox" name="hobby" value="js"/>js<br/>
<button id="checkAll">全选</button>
</body>
</html>操作属性
通过各种获取元素的方式获取页面中的标签以后，可以直接操作dom元素的属性。
1）innerHTML
获取元素内部的HTML结构
2）InnerText
获取元素内部的文本（只能获取到文本内容，获取不到html标签）
BOM浏览器对象
bom概念
bom由多个对象组成，其中代表浏览器窗口的window对象是bom的顶层对象，其他对象都是该对象的子对象。
对话框
1 |
|
定时器
1 |
|