HTML与CSS
1.软件架构
B/S
(Brower/Server
,浏览器/服务器)模式又称B/S
结构,是Web
兴起后的一种网络结构模式.Web浏览器是客户端最主要的应用软件.
这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上,简化了系统的开发、维护和使用.
B/S主用于JavaWeb,而C/S主用于JavaSE
2.前端流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hdg4fdZJ-1638427594679)(https://s3.jpg.cm/2021/08/02/I8E168.png)]
3.资源
3.1 静态资源
所有用户访问,看到的效果相同
eg: 文本,图片,音频, h t m l c s s j a v a s c r i p t html\quad css\quad javascript htmlcssjavascript
如果用户请求的是静态资源,那么服务器会将静态资源发送给浏览器,浏览器内置引擎可以解析这些资源
3.2 动态资源
所有用户访问,看到的效果不一样
eg: jsp/servlet
,php
,asp
如果用户请求的是动态资源,那么服务器转换这些动态资源到静态资源发送给浏览器.
4.HTML
超文本标记语言
超文本:利用超链接的方法,将不同空间的文字联系在一起的网状文本.
标记语言:由标签组成的信息,<标签名字>
,eg: html
,xml
,不是编程语言
后缀名是html
4.1 基本语法
标签分为:
- 围堵标签: 开始标签和结束标签
<html> </html>$
- 自闭和标签: < b r / > <br/> <br/>开始即结束.
- 在开始标签可以定义属性,由键值对构成,属性可以用单引号或者双引号
HTML
标签不区分大小写,但是最好用小写
4.2 文件标签
html
h t m l html html文件的根标签head
用于指定html
文件的属性title
定义标题body
体标签!DOCTYPE html
h t m l 5 html5 html5文件中,定义该文件为 h t m l html html的标签.
<!DOCTYPE html>
<html lang="en"> //指定页面是哪个国家,非China会显示页面翻译
<head> //head 标题标签
<meta charset="UTF-8"> //指定编码格式
<title>Title</title>
</head>
<body>
</body>
</html>
4.3 文本标签
HTML的注释写法:
<!--注释内容-->
- b r br br 标签 换行
你好世界<br>
zero
- h 1 到 h 6 h1 到 h6 h1到h6 标题标签
<h1>这是标题1</h1>
<h2>这是标题2</h2>
- 段落标签
<p>你是不是智商有问题</p>
<p>你是不是智商有问题</p>
- h r hr hr标签 显示一条水平线
自闭合标签,可以选择属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VALfCDjG-1638427594694)(https://s3.jpg.cm/2021/08/02/I8BVNQ.png)]
<hr color="red" width="100" size="90" align="left">
<!--从左往右: 颜色 长度 厚度 对齐方式-->
4.4 字体标签
- b b b 加粗
- i i i 斜体
<b><i>我是sb</i></b>
- f o n t font font 字体属性
- c e n t e r center center 相对父元素文本居中
<font color="red" size="12" face="楷体">什么垃圾</font>
<!--颜色 大小 字体-->
<font color="#0000FF" size="12" face="楷体">什么垃圾</font>
<!-- 十六进制表示红绿蓝占比-->
<!-- 如果用12%表示相对父元素的占比-->
color 属性可以通过 英文单词和 r g b ( x , y , z ) rgb(x,y,z) rgb(x,y,z)赋值
此外还有些特殊字符,需要特别的代码才能显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMIpIn7O-1638427594696)(https://s3.jpg.cm/2021/08/03/I8BUo2.png)]
4.5 图片标签
< i m g > <img> <img>表示图片标签,其中有很多属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SPFuQd1Z-1638427594698)(https://s3.jpg.cm/2021/08/03/I8BbDH.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2xOqDVd-1638427594700)(https://s3.jpg.cm/2021/08/03/I8B1VL.png)]
<img src="images.jpg">
由此延伸,相对路径的格式:
. / ./ ./表示以当前目录为起点
. . / ../ ../ 表示上一级目录为起点
4.6 列表标签
-
li
定义列表中的项 -
ol
有序列表 -
ul
无序列表
<ol type="A" start = 3> <li>睡觉</li> <li>刷牙</li> <li>喝水</li></ol>
下面是无序列表的属性
4.7 链接标签
-
$ $ 标签定义超链接,用于从一张页面链接到另一张页面。
-
默认在当前窗口打开超链接,也可以通过属性设置
属性:
href
定义 u r l url url,也可以访问当前项目写得html
target
默认值是 _ s e l f \_self _self,在本页面内打开_blank
另起一个新页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8RLG0Fwh-1638427594704)(https://s3.jpg.cm/2021/08/03/I8gAv2.png)]
<a href="https://www.w3school.com.cn/tags/tag_a.asp"> 点我 </a><br><a href="./1_HelloWorld.html">很菜</a><br><a href="mailto:12123633@qq.com">联系我</a>
也可以通过特定格式,在url
写入邮箱
写mailto
标注收件人邮箱
4.8 块标签
span
标签被用来组合文档中的行内元素,通常配合CSS
使用
div
可定义文档中的分区或节(division/section)。<div>
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联.一个div
占一整行·
4.9 语义化标签
<header>
标签定义文档的页眉(介绍信息)
<footer>
标签定义文档或节的页脚.
除此之外没有意义,只是提高可读性.
html5
中,还提供了其他语义标签,在此不做介绍
4.10 表格标签
<table>
标签定义 HTML 表格.
<tr>
表示表格内的一行
<td>
定义单元格
<th>
定义表头单元格,一个th
就是一个单元格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTRvsTEL-1638427594705)(https://s3.jpg.cm/2021/08/03/I8znok.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORCVJip6-1638427594707)(https://s3.jpg.cm/2021/08/03/I8z5De.png)]
除此之外,还有caption
定义表格标题
表头单元格默认加粗
<table border="1" width="100%" cellspacing="0"> <caption>HelloWorld</caption> <th>月份</th> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4HGAsyp-1638427594708)(https://s3.jpg.cm/2021/08/03/I8zY2E.png)]
<thead>
那些是语义化标签,只是提高可读性
<rowspan>
,<colspan>
表示合并单元格
<table border="1" width="100%" cellspacing="0"> <caption>HelloWorld</caption> <tr> <td rowspan="2">id</td> <td>姓名</td> <td>成绩</td> </tr> <tr> <td colspan="2">王浩</td> </tr></table>
当每一行的单元格数都不同时,有时需要合并单元格,因为每行的单元格数都不同,所以需要合并的单元格数并不确定.这时可以考虑在每行嵌套一个表格.
4.11 表单标签
用于采集用户输入的数据的.用于与服务器进行交互
<form>
标签定义表单.定义一个范围,表示收集用户信息的范围,即用户提交数据的范围.
属性 值 含义
action | URL | 规定当提交表单时向何处发送表单数据。 |
---|---|---|
method | get post | 规定用于发送 form-data 的 HTTP 方法。 |
表单里的数据要想被提交,必须指定name
属性
<form action="" method="get"> 用户名:<input name="username"><br> 密码:<input name="password"><br> <input type="submit" value="登录"><br></form>
关于 g e t get get 和 p o s t post post的区别
get
请求参数(以上图代码为例,指提交的数据)会在地址栏中显示,而post
不会url
的长度在get
是有限制的,但post
没有
4.11.1 input
i n p u t input input标签可以改变 t y p e type type的值,
type 可取值:
- text 文本输入框 默认值
- password 密码输入框
radio
单选框 如果想实现单选效果,需要让单选框name
属性值相同,一般会给每个单选框指定value
属性,来获取提交后的值checkbox
复选框checked
默认值- placeholder : 输入框的提示信息
- File :提供文件
- hidden:会自动隐藏,用于提交一些隐藏信息
label
: 指定输入框的文字描述信息,当input
的id
与label
的for
一致时,我们就可以将label
与输入框绑定
<form action="" method="get"> <label for="username">用户名</label>:<input id="username" name="username" type="text" placeholder="请输入不多于15字"><br> 密码:<input name="password" type="password"><br> 性别:<input name="gender" type="radio" value="male" checked> 男 <input name="gender" type="radio" value="famale"> 女<br> 爱好:<input name="hobby" type="checkbox" value="fight"> 打架 <input name="hobby" type="checkbox" value="water" checked> 吹水 <input name="hobby" type="checkbox" value="homework"> 写作业<br> 照片:<input type="file"><br> 隐藏域:<input type="hidden" id="你在干什么"><br> <input type="submit" name="id" value="登录"><br></form>
sumbit
按钮:button
按钮,不加其他代码只是一个按钮img
图片的提交按钮,要附注src
color
取色器,只要name
有值就会被提交date
日期.还有datetime_local
email
邮箱: 提交时会做正则校验.number
数字:只允许输入数字
<input type="submit" name="id" value="登录"><br><input type="date" name="birthday"><br>
4.11.2 select 下拉列表
子元素option
记录列表项
语法:
<select name="hometown"> <option>---请选择---</option> <option>湖南</option> <option>江西</option></select><!--可以赋值value属性改变提交的值-->
4.11.3 textarea
属性:
rows
展示多少行cols
展示多少列
5.CSS
页面美化和布局控制
层叠:多个样式作用于同一个HTML
文件上.
5.1 与HTML的结合方式
- 内联样式
<div style="color: red;">你好,css</div>
- 内部样式
在head
标签内,定义style
标签,style
标签的内容就是css
的代码
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: blue; } </style></head><body><div>你好,css</div></body></html>
- 外部样式
- 定义
css
文件 - 在css文件定义样式
- 在需要的文件
head
标签引入css
文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/color.css"><!-- rel是定义当前文件与引入文件的关系--></head><body><div>你好,css</div></body></html>
也可以不用link
引入.参考如下: 同样需要在head
标签内
<style> @import "CSS/color.css"; </style>
5.2 CSS语法
格式:
选择器{ 属性名:属性值; ...}
选择器:筛选具有相同特征的元素,
最后一个属性可以不加**,**
5.3 基本选择器
5.3.1 id选择器
语法:
#id名{ 属性名 = 属性值;}
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ color: red; } </style><!-- 貌似id不允许用纯数字--><!-- rel是定义当前文件与引入文件的关系--></head><body><div id="d1">你好,css</div></body>
5.3.2 元素选择器
选择具有相同标签的元素,
语法:
标签名称{}
i d id id选择器的优先级比类选择器更高
5.3.4 类选择器
具有相同的class
属性的元素.
语法:
.class名{ 属性名:属性值;}
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ color: red; } .cls1{ color: blue; } </style><!-- 貌似id不允许用纯数字--><!-- rel是定义当前文件与引入文件的关系--></head><body><div id="d1">你好,css</div><div class="cls1">你好,css!</div></body>
5.4 扩展选择器
5.4.1 选择所有元素
语法:
*{}
5.4.2 并集选择器
下列提及选择器的样式都按代码改变
选择器1,选择器2{ }
5.4.3 子选择器
选择器1元素下的选择器2元素
选择器1 选择器2{}
<head> <meta charset="UTF-8"> <title>Title</title> <style> div p{ color: red; } </style><!-- 貌似id不允许用纯数字--><!-- rel是定义当前文件与引入文件的关系--></head><body><div> <p>你好世界!</p></div><div>hello,css!</div></body>
5.4.4 父选择器
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>
如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”,孙子或兄弟都不行.
5.4.5 属性选择器
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器
eg:可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像
img[alt] {border: 5px solid red;} input[type="text"]{ color :red; }/*将输入框type=text属性的元素全部变红*/
5.4.6伪类选择器
伪类用于定义元素的特殊状态
以链接为例
/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF;}
5.5 属性
5.5.1 字体 文本
font-size
字体大小color
text-align
对齐方式line-height
行高
5.5.2 背景
5.5.3 边框
border
:设置边框,是复合属性.
所谓的复合属性就是类型 border 这样的属性,能够一个属性规定对象的多个样式
p{ font-size: 30px; text-align: center; border: 3px solid red;/*这里同时赋值多个属性*/}
5.5.4 尺寸
width
height
5.5.5 背景
background
复合属性
div{ width: 2000px; height: 800px; background: red url("image/banner_1.jpg") no-repeat center; }
5.6 盒子模型
控制布局
外边距: CSS margin
属性用于在任何定义的边框之外,为元素周围创建空间
即当前边框与父边框之间的距离
CSS padding
属性用于在任何定义的边界内的元素内容周围生成空间
即当前边框与子边框之间的距离
但是默认情况下:调整内边距会影响盒子大小.
可以使用box-sizing
设置为border-box
,需要使用在外围的盒子上,防止外围盒子变化.
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: red solid; } .div1{ width: 200px; height: 200px; padding: 50px; box-sizing: border-box; } .div2{ width: 100px; height: 100px; } </style><!-- 貌似id不允许用纯数字--><!-- rel是定义当前文件与引入文件的关系--></head><body> <div class="div1"> <div class="div2"> </div> </div></body>
还有一个是浮动属性
float CSS
属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.典型的应用就是报纸上围绕图片环绕文字.
根据float
取值,可以分为:
left
表明元素必须浮动在其所在的块容器左侧的关键字.right
表明元素必须浮动在其所在的块容器右侧的关键字none
表明元素不进行浮动的关键字inline-start
关键字,表明元素必须浮动在其所在块容器的开始一侧,在ltr
脚本中是左侧,在rtl
脚本中是右侧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: red solid; float: left; } .div1{ width: 200px; height: 200px; padding: 50px; box-sizing: border-box; } .div2{ width: 100px; height: 100px; } </style><!-- 貌似id不允许用纯数字--><!-- rel是定义当前文件与引入文件的关系--></head><body> <div>aaaa</div><div>bbbb</div></body></html>
6.JavaScript
客户端脚本语言,运行在客户端浏览器中,每个浏览器都有解析JavaScript
的引擎.
脚本语言不需要编译,可以直接被浏览器解析执行.
作用:可以增强用户与HTML
页面交互的过程,让页面有动态的效果,增强用户体验.
JavaScript
= ECMAScript
+ JavaScript
所特有的(BOM+DOM
)
6.1 ECMAScript
客户端脚本语言的标准
6.1.1 与html的结合方式
6.1.1.1 内部JS
内部JS
就是在html
页面内,定义script
标签,标签内代码就是内部JS
注意script
可以写在任意位置,但不同位置会影响执行顺序.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript</title></head><body>用户名:<input type="text"></body><script> alert("你好世界!")</script></html>
6.1.1.2 外部JS
引入外部JS
文件.由此发现script
可以定义多个.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript</title></head><body>用户名:<input type="text"></body><script src="JS/dec.js"> </script></html>
6.1.2 注释
和java
完全一样,但是没有文档注释
6.1.3 数据类型
类似Java
,数据类型分为两类,一类是引用数据类型,一类是原始数据类型.
先介绍原始数据类型:
number
数字/小数/NaNString
字符和字符串都用String
表示boolean
null
undefined
未定义 ,如果一个变量没用默认初始化值,会被默认为undefined
后面两个应该偏向于变量的值
Java
是强类型语言.在开辟空间时必须定义数据类型.
而JavaScript
是弱类型语言,没必要定义数据类型.
注意是在script
标签里才是JavaScript
语法:
var 变量名 = 初始值;var 变量名;
这里输出到页面的语法是
<script> var a = "你好世界" var b = 5; alert(a); alert(b); document.write(a+"<br>"); document.write(b)</script>
6.1.4 typeof
返回变量类型.
<script> var a = "你好世界" var b = 5; alert(a); alert(b); document.write(a+"<br>"); document.write(typeof b);//这里是语法格式</script>
null
会被返回object
6.1.5 一元运算符
- ++
- –
- +(正号)
在JS
引擎中,如果不是JS
要求的数据类型,会自动进行转换.
其他类型—>number
String
-->number
如果字面值是数字,就转为number
,不是就转为NaN
boolean
–>number
true-->1
,false = 0
6.1.6 算数运算符
-
-
-
- /
- %
唯一的区别是Java
整型运算还是整型.但是JavaScript
有可能是小数
6.1.7 赋值运算符
- =
- +=
- -=
6.1.8 比较运算符
同类型:
字符串按字典序比
不同类型:
先进行类型转换,再比较
eg: string
的"123"与123比较,结果是它们相等.但是JavaScript
引用了新的比较运算符**===**.会比较数据类型和值.
6.1.9 逻辑运算符
其他类型转boolean
number
非0为trueString
非空为truenull
和undefined
为 false- 所有对象都为
true
6.1.10 特殊语法
- 如果一行只有一条语句,分号可以不写
- 变量定义可以不用
var
.第一句是全局变量,第二句是局部变量.
a = 4;var a = 4;
-
在
JavaScript
中,switch
任意的数据类型都可以接受. -
html
的空格是 
.
九九乘法表练习:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript</title> <style> td{ border: black solid; } </style> <script> document.write("<table align='center'>"); for(var i=1;i<=9;i++){ document.write("<tr>") for(var j=1;j<=i;j++) { document.write("<td>" + i + "×" + j + "=" + i * j + "</td>"); } document.write("</tr>"); } </script></head><body></body></html>
6.2.1 ECMAScript定义的基本对象
6.2.1.1 Function
- 调用
函数名(参数列表)
- 创建
var fun = new function(形参列表,方法体);//方法一var fun = new Function("a","b","alert(a+b);");fun("333",3);
//方法二function cal(a,b){ alert(a+b);}cal(1,3);
这里方法定义形参的类型不用写,因为都是var
.
//方法三var funs = function(a,b) { alert(a+b);}funs(1,3);//注意没有new!!!!
- 方法属性
length
新参个数
alert(funs.length);
- 特点
在JS
中,方法调用只与方法名有关,传几个参都不会报错.
var funs = function(a,b) { alert(a+b); } funs(1);
在JS
中,方法声明有内置对象arguments
,封装了所有实际参数.
function cal(){ var sum = 0; for (let i = 0; i < arguments.length; i++) { sum+=arguments[i]; } return sum;}var x = cal(1,3,4,5);document.write(x);
6.2.1.2Array
- 创建
var arrs1 = new Array(1,2,3); var arrs2 = new Array(10); var arrs3 = [1,2,3,4]; document.write(arrs1.length+"<br>");//3 document.write(arrs2.length+"<br>");//10 document.write(arrs3.length);//4
- 方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BH1F8Kdo-1638427594711)(https://s3.jpg.cm/2021/08/04/IAG2fS.png)]
var arrs3 = new Array(1,2,4); /*join(参数) 以指定参数分割*/ let s = arrs3.join(" "); document.write(s+"<br>"); /*push(参数) 返回新长度*/ arrs3.push(131); let numbers = arrs3.push("21"); document.write(numbers+"<br>"); document.write(arrs3);
- 属性
length
长度
- 特点
JS
中,数组的类型是任意的.JS
中,数组的长度是可变的.
6.2.1.3 Date
- 创建
var d = new Date();
- 方法
toLocaleString()
方法可根据本地时间把 Date
对象转换为字符串,并返回结果。
var d = new Date(); document.write(d+"<br>"); document.write(d.toLocaleString()+"<br>");
6.2.1.4 Math
- 创建
特性:类似Java
,不用创建直接使用.
- 属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDay85gG-1638427594712)(https://s3.jpg.cm/2021/08/04/IAG3ZW.png)]
- 方法
唯一值得一提的是random()
产生
[
0
,
1
)
[0,1)
[0,1)的随机数.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVDkPp5M-1638427594716)(https://s3.jpg.cm/2021/08/04/IAGKA2.png)]
6.2.1.5 Global
全局对象,里面的方法不需要对象就可以调用,
- 方法
url
编码: 将字符转换为可通过因特网传输的格式,即在网络传输时,将字符转化为可识别的序列.
GBK
编码,一个汉字2个字节
UTF-8
编码,一个汉字3个字节.
url
编码是将每两个十六进制位前加一个%,然后传输.
encodeURL
与字更多的函数的区别是字更多的函数返回值字符数>=encodeURL
parseInt
逐一判断是否为数字,直到非数字部分,将数字部分转为int
isNaN()
要注意的是NaN
参与的比较==
全部为false
.
6.2.1.6 正则表达式
检验字符串规则的类.
- 单个字符
[]
- 创建
var reg = new RegExp();var reg = /正则表达式/; //不能加字符串
- 方法
test(参数) | 检索字符串中指定的值。返回 true 或 false。 |
---|---|
let name = document.getElementById("username").value; let reg = new RegExp("\\w{1,20}");//这里是定义字符串里面,所以需要转义 return reg.test(name) let name = document.getElementById("username").value; let reg = /\w{1,20}/ //注意不要写两个/....不需要反义 return reg.test(name)
7.DOM 简单学习
DOM是一个接口.它容许脚本( j s js js)控制 W e b Web Web页面、窗口和文档.在DOM中,文档是由节点构成的集合,而节点又分为不同的类型。元素( e l e m e n t element element)节点,文本( t e x t text text)节点,属性( a t t r i b u t e attribute attribute)节点.
DOM将这些封装为了对象 E l e m e n t Element Element,并允许操控这些对象:
document.getElementById(id);
<body><!-- <img src="image/banner_1.jpg" id="images">--><h1 id="images">标题</h1><script> let id = document.getElementById("images"); document.write(id);</script></body>
注意代码的定义顺序,如果 < s c r i p t > <script> <script>定义位置比 < h 1 > <h1> <h1>早,那么就会读到对象 N u l l Null Null.因为还没定义.
设置属性:
let id = document.getElementById("images"); document.write(id); id.align = "center";
修改内容
<body><!-- <img src="image/banner_1.jpg" id="images">--><h1 id="images">标题</h1><script> let id = document.getElementById("images"); document.write(id); alert("换内容了!!!") // id.innerText = "我爱我家"; id.innerHTML = "你妈的";</script></body>
这里涉及两个方法:
- innerHTML指的是****从对象的起始位置到终止位置的全部内容,包括Html标签****。
- innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
- 同时,innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText 属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了.
8.事件的简单学习
功能:某些组件被执行了某些功能后,触发某些代码的执行.
如何绑定事件:
- 直接在
html
标签上,指定事件的属性(操作).属性值就是js
代码.
<head> <meta charset="UTF-8"> <title>JavaScript</title> <script> function cal() { alert('你妈的'); } </script></head><body><img id="images" src="image/icon_3.jpg" onclick="cal();"></body>
- 通过
JS
获取元素对象,指定事件属性,设置一个函数.
<head> <meta charset="UTF-8"> <title>JavaScript</title> <script> function cal() { alert('你妈的'); } function cals() { alert('我查地位和'); } let element = document.getElementById("images2"); element.onclick = cals; </script></head><body><img id="images2" src="image/icon_3.jpg" onclick="cals();"></body>
应用:
模拟灯泡亮灭:
<body><img src="images/off.gif" id="light"><script> let id = document.getElementById("light"); var flag = false; id.onclick = function (){ if(flag) id.src = "images/on.gif"; else id.src = "images/off.gif"; flag = !flag; }</script></body>