HTML中，用于描述功能的符号称为标记，也叫标签。例如` < p> ` ` < h1 >` ` <> ` ` < 标记> 内容< /标记> ` ` < 标记> ` ` < 标记/> ` '空格' 隔开。
多属性之间不区分先后顺序。
+ 每个属性都有值。
属性和属性的值之间用'等号' 连接。
属性的值包含在引号内。
` 属性= '值' ` ` 属性= "值" ` < 元素 属性1= "值" 属性n= "值" > 文本或嵌套元素< /元素>
< 元素 属性1= "值" 属性n= "值" > 或 < 元素 属性1= "值" 属性n= "值" />
+ 语法：< ! -- 注释内容 -->
+ pycharm中注释方式：
【Ctrl + /】，批量注释，每行单独注释
【Ctrl + Shift + /】，批量注释，一个注释符号
<! DOCTYPE html > < html> < head> </ head> < body> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < br> < p> </ p> </ body> </ html>
< meta>
< title> < /title>
< style> < /style>
< script> < /script>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
p {
text-align : center;
color : red;
}
</ style> < script>
function clickme ( ) {
alert ( 'How are you?' ) ;
}
</ script> </ head> < body> < p> </ p> < p> < button> </ button> </ p> < p> < buttononclick = " clickme ( ) " > </ button> </ p> </ body> </ html>
+ 直接键入的文本会用浏览器默认的样式显示
+ 包含在标记中的文本会被显示为标记所拥有的样式
` < h1 >< /h1 >` ` < h2 >< /h2 >` ` < h3 >< /h3 >` ` < h4 >< /h4 >` ` < h5 >< /h5 >` ` < h6 >< /h6 >` ` < p> 整段内容< /p> ` ` < div> 整块内容< /div> ` ` < strong> 加粗< /strong> ` ` < b> 粗体< /b> ` ` < i> 斜体< /i> ` ` < u> 下划线< /u> ` ` < s> 删除线< /s> ` ` < span> 内容< /span> ` ` < br> ` ` < hr> ` ` & nbsp; ` ` & copy; ` ` & lt; ` ` & gt; ` ` < sup> 上标内容< /sup> ` ` < sub> 下标内容< /sub> ` ` < span class = 自定义样式名> 修饰内容< span/> ` <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < h1> </ h1> < h2> </ h2> < h3> </ h3> < h4> </ h4> < h5> </ h5> < h6> </ h6> < hr> < p> < br> < strong> </ strong> < br> < b> </ b> < br> < i> </ i> < br> < u> </ u> < br> < s> </ s> < br> </ p> < hr> < div> < br> test
</ div> < div> © 版权所有：xxx公司< br> < 时间简史> < br> < sup> </ sup> < br> < sub> </ sub> </ div> < hr> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
.c1 {
color : darkred;
}
.c2 {
color : green;
}
</ style> </ head> < body> < spanclass = " c1" > </ span> < br> < spanclass = " c2" > </ span> </ body> </ html> <img>` < img src = '图片路径' 属性2= '值' 属性n= '值' > ` < img> 常用属性：
src = '图片路径'
height = '100px'
width = '100px'
alt = '图像无法显示时，显示的文字'
id = '值'
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < div> < imgsrc = " https://test.com/panda.jpg" > </ div> < div> < imgsrc = " imgs/panda.jpg" > </ div> < div> < imgsrc = " imgs/dogs.jpg" alt = " 图像无法显示时，显示的文字" > </ div> < div> < imgsrc = " imgs/panda.jpg" height = " 100px" > < hr> < imgsrc = " imgs/panda.jpg" width = " 100px" > < hr> < imgsrc = " imgs/panda.jpg" height = " 100px" width = " 100px" > </ div> </ body> </ html> <a> </a>` < a href = '链接路径' target = '打开方式' > 显示内容或元素< /a> ` < a> < /a> 常用属性：
href = '链接路径'
'绝对URL路径'
'相对URL路径'
'#元素id值'
'#'
''
target = '目标打开位置'
'_self'
'_blank'
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < div> < ahref = " https://www.baidu.com" > </ a> < hr> < ahref = " https://www.jd.com" , target = " _blank" > </ a> </ div> < div> < ahref = " https://www.baidu.com" target = " _blank" > < imgsrc = " imgs/panda.jpg" height = " 100px" > </ a> </ div> < ahref = " #id_1" > </ a> < hr> < ahref = " #" > </ a> < hr> < ahref = " " > </ a> </ div> </ div> < imgid = " id_1" src = " imgs/cat.jpg" height = " 100px" > </ div> </ body> </ html> <table> </table>
table> tr*3 >< table>
< thead>
< tr>
< td> 单元格内容< /td>
< td> 单元格内容< /td>
< /tr>
< /thead>
< tbody>
< tr>
< td> 单元格内容< /td>
< td> 单元格内容< /td>
< /tr>
< tr>
< td> 单元格内容< /td>
< td> 单元格内容< /td>
< /tr>
< /tbody>
< tfoot>
< tr>
< td> 单元格内容< /td>
< td> 单元格内容< /td>
< /tr>
< /tfoot>
< /table>
` < table 属性1= '值' 属性n= '值' > < /table> ` < table> < /table> 常用属性：
align
valign
width
height
border
cellpadding
cellspacing
bgcolor
` < tr 属性1= '值' 属性n= '值' > < /tr> ` < tr> < /tr> 常用属性
align
valign
width
height
` < td 属性1= '值' 属性n= '值' > 单元格内容< /td> ` < td> < /td> 常用属性
align
valign
width
height
colspan
rowspan
td > tr > table
< thead> < /thead>
< tbody> < /tbody>
< tfoot> < /tfoot>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < tableborder = " 1px" width = " 400px" > < tr> < tdcolspan = " 2" align = " center" height = " 50px" width = " 200px" > </ td> < td> </ td> < trheight = " 50px" > < tdrowspan = " 4" width = " 80px" > </ td> < td> </ td> < td> </ td> </ tr> < trheight = " 50px" > < td> </ td> < td> </ td> </ tr> < trheight = " 50px" > < td> </ td> < td> </ td> </ tr> < trheight = " 50px" > < tdcolspan = " 2" > </ td> </ tr> < trheight = " 50px" > < tdrowspan = " 4" > </ td> < tdalign = " left" > </ td> < tdvalign = " top" > </ td> </ tr> < trheight = " 50px" align = " right" > < tdalign = " center" > </ td> < tdvalign = " middle" > </ td> </ tr> < trheight = " 50px" > < tdalign = " right" > </ td> < tdvalign = " bottom" > </ td> </ tr> < trheight = " 50px" > < tdcolspan = " 2" > < br> </ td> </ tr> </ table> < tableborder = " 1px" width = " 200" > < thead> < tr> < th> </ th> < th> </ th> </ tr> </ thead> < tbody> < tr> < td> </ td> < td> </ td> </ tr> < tr> < td> </ td> < td> </ td> </ tr> </ tbody> < tfoot> < tr> < td> </ td> < td> </ td> </ tr> </ tfoot> </ table> </ body> </ html> <ol> </ol> <ul> </ul>
有序列表 ol> li*3，tab键
无序列表 ul> li*3，tab键
< ol>
< li> 列表元素1 <>
< li> 列表元素2 <>
< li> 列表元素3 <>
< /ol>
< ul>
< li> 列表元素1 <>
< li> 列表元素2 <>
< li> 列表元素3 <>
< /ul>
` < ol 属性1= '值' 属性n= '值' > < /ol> ` < ol> < /ol> 常用属性：
type
'A'
'I'
start
'5'
` < ul 属性1= '值' 属性n= '值' > < /ul> ` < ul> < /ul> 常用属性：
type
'circle'
'square'
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < ol> < li> </ li> < li> </ li> < li> </ li> </ ol> < oltype = " A" > < li> </ li> < li> </ li> < li> </ li> </ ol> < oltype = " A" start = " 5" > < li> </ li> < li> </ li> < li> </ li> </ ol> < oltype = " I" start = " 3" > < li> </ li> < li> </ li> < li> </ li> </ ol> < hr> < ul> < li> </ li> < li> </ li> < li> </ li> </ ul> < ultype = " circle" > < li> </ li> < li> </ li> < li> </ li> </ ul> < ultype = " square" > < li> </ li> < li> </ li> < li> </ li> </ ul> </ body> </ html> <form></form>
1 . 表单用于显示、收集信息，并提交信息到服务器。有两个基本部分：
实现数据交互的可见的界面元素
提交后的表单处理
2 . 表单元素` < form> < /form> ` 3 . 表单可以包含很多不同类型的表单控件，表单控件元素只有在表单元素` < form> < /form> ` 4 . 表单控件元素有：
input元素：输入框（文本框、密码框、隐藏控件）、选择框（单选框、复选框）、按钮（提交按钮、重置按钮、普通按钮）
select和option元素
textarea元素
其它元素
表单元素` < form 属性1= "值" 属性n= "值" > < /form> ` < form> < /form> 常用属性
action = "URL地址"
target = '目标打开位置'
'_self'
'_blank'
name = "表单名称"
method = "表单数据提交方式"
enctype = "表单数据进行编码的方式"
<input> 常用属性表单控件元素` < input type = "值" 属性2= "值" 属性n= "值" > ` < input> 常用属性
+ 提交按钮。传送表单数据，将text、password、hidden的键值对值赋予form的属性action指定的url路径
< input type = "submit" value = "按钮的文字" >
+ 重置按钮。清空表单的内容并把所有表单控件设置为最初的默认值。缺省value= "重置"
< input type = "reset" value = "按钮的文字" >
+ 普通按钮。用于执行脚本
< input type = "button" value = "按钮的文字" >
+ 文本框。显示明文，用于获取值
< input type = "text" name = "被赋值的键" placeholder = "提示信息" maxlength = "最大字符数" >
+ 密码框。不显示明文，用于获取值
< input type = "password" name = "被赋值的键" placeholder = "提示信息" maxlength = "最大字符数" >
+ 隐藏输入框。直接用于设置键值对
< input type = "hidden" name = "隐藏赋值的键" value = "赋予的值" >
+ 单选框。同一组单选框的name相同。checked预选中
< input type = "raido" name = "被赋值的键" value = "赋予的值" checked>
+ 复选框。同一组复选框的name相同。checked预选中
< input type = "checkbox" name = "被赋值的键" value = "赋予的值" checked>
< label>
< input type = "radio" name = "键" value = "值" >
文本
< /label>
< input id = "id值" type = "radio" name = "键" value = "值" >
< label for = "id值" >
文本
< /label>
<input> 示例之输入框
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < form> < p> < inputtype = " text" placeholder = " 用户名" > < br> < inputtype = " password" placeholder = " 密码" > < br> </ p> < inputtype = " submit" value = " 登 陆" > < inputtype = " reset" > </ form> < hr> < formaction = " https://www.sogou.com/web" target = " _blank" > < inputtype = " text" name = " query" > < inputtype = " submit" value = " 搜狗搜索" > </ form> < hr> < formaction = " https://images.baidu.com/search/index" target = " _blank" > < inputtype = " hidden" name = " tn" value = " baiduimage" > < inputtype = " text" name = " word" > < inputtype = " submit" value = " 百度搜图" > </ form> </ body> </ html> <input> 示例之选择框 <label></label><! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < form> < p> </ p> < label> < inputtype = " radio" name = " q1" value = " A" > </ label> < br> < inputid = " id_2" type = " radio" name = " q1" value = " B" > < labelfor = " id_2" > </ label> < p> </ p> < inputid = " 1" type = " checkbox" name = " q2" value = " A" > < labelfor = " 1" > </ label> < br> < inputid = " 2" type = " checkbox" name = " q2" value = " B" > < labelfor = " 2" > </ label> < br> < inputid = " 3" type = " checkbox" name = " q2" value = " C" > < labelfor = " 3" > </ label> < br> < inputid = " 4" type = " checkbox" name = " q2" value = " D" > < labelfor = " 4" > </ label> < p> < inputtype = " submit" > </ p> </ form> </ body> </ html> <select></select> 下拉列表 <option></option>
select> option*3，tab键
< select name = "被赋值的键" >
< option value = "赋予的值" > 选项1 <>
< option value = "赋予的值" selected> 选项2 <>
< option value = "赋予的值" > 选项3 <>
< /select>
< select name = "被赋值的键" size = "3" >
< option value = "赋予的值" > 选项1 <>
< option value = "赋予的值" selected> 选项2 <>
< option value = "赋予的值" > 选项3 <>
< /select>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < form> < p> </ p> < selectname = " q3" > < optionvalue = " A" > </ option> < optionvalue = " B" > </ option> < optionvalue = " C" > </ option> < optionvalue = " D" > </ option> < optionvalue = " E" selected > </ option> </ select> < p> </ p> < selectname = " q4" size = 3> < optionvalue = " A" > </ option> < optionvalue = " B" > </ option> < optionvalue = " C" > </ option> < optionvalue = " D" > </ option> < optionvalue = " E" selected > </ option> </ select> < p> < inputtype = " submit" > </ p> </ form> </ body> </ html> <textarea></textarea> 多行文本框
< textarea name = "被赋值的键" cols = "文本框宽度" rows = "文本框高度" > 预输入内容< /textarea>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < form> < textareaname = " comment" cols = " 50" rows = " 5" > </ textarea> < br> < inputtype = " submit" value = " 发表" > </ form> </ body> </ html> CSS（Cascading Style Sheets，层叠样式表）
HTML用于定义内容的结构和语义，CSS用于设计风格和布局。
可以通过三种方式在HTML中使用CSS：
1 . 内联样式
+ 通过属性style定义样式，并直接写入现有的HTML标签
style = "属性1:值;属性n:值;"
+ 缺点：CSS和HTML标签，标签使用样式都需要定义一次
2 . 内嵌样式
+ 借助标签< style> < /style> 定义样式，并写入HTML的< head> 之间
< style>
选择器 {
属性1: 值;
属性n: 值;
}
< /style>
+ 优点：实现CSS和HTML标签的分离
3 . 外链样式/外联式
+ 将CSS样式写入一个.css文件，借助标签< link/> 链接.CSS文件，并写入HTML的< head> 之间
< link rel = "stylesheet" href = ".css文件路径" >
+ 优点：实现CSS文件和HTML文件的解耦
/* 注释内容 */
/*
注释内容
注释内容
*/
background-color
color
font-size
text-align
display
style="属性1:值;属性n=值"<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < h1style = " background-color : red; color : white; font-size : 40px; text-align : center; " > </ h1> < h1style = " background-color : red; color : white; font-size : 40px; text-align : center; " > </ h1> </ body> </ html> <style>选择器{属性1:值;属性n:值;}</style><! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
h1 {
background-color : red;
color : white;
font-size : 40px;
text-align : center;
}
</ style> </ head> < body> < h1> </ h1> < h1> </ h1> </ body> </ html> <link rel="stylesheet" href=".css文件路径">]# cat css/h1.css
h1 {
background-color: red;
color: white;
font-size: 40px;
text-align: center;
}
]# cat test.html
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < linkrel = " stylesheet" href = " css/h1.css" /> </ head> < body> < h1> </ h1> < h1> </ h1> </ body> </ html>
根据查找元素的方式不同，可以分为以下几类：
标签选择器
class选择器
id选择器
群组选择器
后代选择器
子代选择器
伪类选择器
标签名{}
标签名 {
属性 : 值;
属性 : 值;
}
* {
属性 : 值;
属性 : 值;
}
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
h1 {
background-color : pink;
color : blue;
font-size : 40px;
text-align : center;
}
</ style> </ head> < body> < h1> </ h1> < h1> </ h1> </ body> </ html> .class名{} 共享
.class名 {
属性 : 值;
属性 : 值;
}
标签使用class属性的快捷方式
标签名.class名，tab键
标签使用id属性和class属性快捷方式
标签名#id名.class名，tab键
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
.c1 {
background-color : pink;
color : blue;
font-size : 40px;
text-align : center;
}
</ style> </ head> < body> < h1class = " c1" > </ h1> < h1class = " c1" > </ h1> </ body> </ html> #id名{} 独享
#id名 {
属性 : 值;
属性 : 值;
}
标签使用id属性的快捷方式
标签名#id名，tab键
标签使用id属性和class属性快捷方式
标签名#id名.class名，tab键
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
#i1 {
background-color : pink;
color : blue;
font-size : 40px;
text-align : center;
}
#i2 {
background-color : pink;
color : blue;
font-size : 40px;
text-align : center;
}
</ style> </ head> < body> < h1id = " i1" > </ h1> < h1id = " i2" > </ h1> </ body> </ html> 标签 后代标签{}
标签1 标签2 {
属性 : 值;
}
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
p {
color : red;
}
span {
color : blue;
}
div p {
color : darkred;
}
div span {
color : green;
}
</ style> </ head> < body> < p> < br> < span> </ span> </ p> < div> < p> < br> < span> </ span> </ p> < span> </ span> </ div> </ body> </ html> 标签 > 子代标签{}
标签1 > 标签2 {
属性 : 值;
}
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
p {
color : red;
}
span {
color : blue;
}
div > p {
color : darkred;
}
div > span {
color : green;
}
</ style> </ head> < body> < p> < br> < span> </ span> </ p> < div> < p> < br> < span> </ span> </ p> < span> </ span> </ div> </ body> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
p {
color : red;
}
span {
color : blue;
}
div p {
font-weight : bold;
color : darkred;
}
div span {
font-weight : bold;
color : green;
}
div > span {
font-weight : bold;
color : orange;
}
.c1 {
font-weight : bolder;
color : purple;
background-color : pink;
}
.c1 > p {
color : greenyellow;
background-color : gray;
}
.c1 > span {
color : orangered;
}
</ style> </ head> < body> < p> < br> < span> </ span> </ p> < hr> < div> < p> < br> < span> </ span> </ p> < span> </ span> </ div> < hr> < divclass = " c1" > < p> < br> < span> </ span> </ p> < span> </ span> </ div> </ body> </ html>
标签名:hover {
属性 : 值;
}
.class名:hover {
属性 : 值;
}
#id名:hover {
属性 : 值;
}
标签名:active {
属性 : 值;
}
.class名:active {
属性 : 值;
}
#id名:active {
属性 : 值;
}
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
h1 {
background-color : gray;
color : white;
}
h1:hover {
background-color : lightpink;
color : purple;
}
h2 {
background-color : gray;
color : yellowgreen;
display : inline;
}
h2:hover {
background-color : lightpink;
color : green;
cursor : pointer;
}
h3 {
background-color : gray;
color : white;
}
h3:active {
background-color : lightpink;
color : purple;
}
</ style> </ head> < body> < h1> </ h1> < h2> </ h2> < h3> </ h3> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
h1 {
background-color : gray;
color : white;
transition : all 5s;
}
h1:hover {
background-color : lightpink;
color : purple;
}
h2 {
background-color : gray;
color : yellowgreen;
display : inline;
transition : color 5s;
}
h2:hover {
background-color : lightpink;
color : green;
}
</ style> </ head> < body> < h1> </ h1> < h2> </ h2> </ body> </ html> JS（JavaScript）
JS是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果、用户交互以及前后端的数据传输等。
// 注释内容
/*
注释内容
注释内容
*/
- 核心语法 ECMAScript 规范了JS的基本语法
- 浏览器对象模型 BOM（Browser Object Model），提供了一系列操作浏览器的方法
- 文档对象模型 DOM（Document Object Model），提供了一系列操作的文档的方法
事件：指用户的行为（单击、双击等）或元素的状态（输入框的焦点状态等）
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
常用事件：onclick（单击事件）
...
< body> < buttononclick = " console. log ( 'Hello World' ) ; " > </ button> < br> < buttononclick = " alert ( 'Hello World' ) ; " > </ button> </ body>
文档内嵌：在HTML文档中直接使用< script> < /script> 内嵌JS代码。
script标签可以书写在文档的任意位置，书写多次。
程序一旦加载到script标签就会立即执行其内部的JS代码，因此不同的位置会"影响" 代码最终的执行效果。
通常放在head中的js是为了发生点击等事件时调用，放在body中的js是为了生成一定的内容。
一般会写在html标签之外。
< script>
JS代码
< /script>
外部链接：在HTML文档中使用< script src = "" > < /script> 引入外部的.js文件。
< script src = ".js文件路径" > < /script>
]# cat js/j1.js
alert("js文件的弹窗") // alert()告警弹窗
console.log("这是一个js文件"); // console.log()控制台输出
]# cat test.html
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < script>
alert ( "head的弹窗" ) ;
</ script> < scriptsrc = " js/j1.js" > </ script> </ head> < body> < script>
alert ( "body的弹窗" ) ;
</ script> < scriptsrc = " js/j1.js" > </ script> </ body> < script>
alert ( "html中的弹窗" ) ;
</ script> < scriptsrc = " js/j1.js" > </ script> </ html> < script>
alert ( "html外的弹窗" ) ;
</ script> < scriptsrc = " js/j1.js" > </ script>
JS严格区分大小写。
JS是由语句组成，语句由关键字、变量、常量、运算符、方法组成。
分号可以作为语句结束的标志，也可以省略。
+ 自定义变量名、常量名、函数名、方法名，可以由数字、字母、下划线、美元符$ 组成，禁止以数字开头。
+ 禁止命名为关键字( var const function if else for while do break case switch return class) 。
+ 变量名严格区分大小写。
+ 尽量见名知意，变量名多个单词组成采用小驼峰，例如："userName"
var a;
a = 10 ;
var b = 22 ;
var x,y,z;
var m = 10 , n = 22 ;
+ 声明变量但未赋值，变量初始值为undefined。
+ 声明变量不赋值不能省略var。
+ 声明变量并赋值不建议省略var，某些浏览器可能会报错。
< script>
var n1 = 10 ;
console. log ( n1, typeof n1)
var n2 = 3.14 ;
console. log ( n2, typeof n2)
var s1 = "10" ;
var s2 = "张三" ;
console. log ( s1, typeof s1) ;
var b1 = true ;
var b2 = false ;
console. log ( b1, typeof b1) ;
var u;
console. log ( u, typeof u) ;
var n1 = null ;
console. log ( n1, typeof n1) ;
var n3 = null ;
console. log ( n3, typeof n3) ;
var arr = [ 1 , 3.14 , "a" , true , false ]
console. log ( arr, typeof arr) ;
console. log ( arr[ 0 ] , typeof arr[ 0 ] ) ;
console. log ( arr[ 4 ] , typeof arr[ 4 ] ) ;
console. log ( arr[ - 1 ] , typeof arr[ - 1 ] ) ;
var dic = { one : 1 , two : "zhangsan" } ;
console. log ( dic, typeof dic) ;
console. log ( dic. one, typeof dic[ "one" ] ) ;
console. log ( dic[ "two" ] , typeof dic. two) ;
</ script> < script>
var person = { name : "张三" , gender : "male" } ;
person. age = 19 ;
person. hobby = "唱歌" ;
console. log ( person) ;
var info = "Hello world" ;
console. log ( info[ 0 ] ) ;
console. log ( info. length) ;
console. log ( info. slice ( 0 , 6 ) ) ;
console. log ( info. search ( "world" ) ) ;
console. log ( info. search ( "forld" ) ) ;
console. log ( 123 + "," + info) ;
var name = "Tom" ;
console. log ( ` I'm ${ name} ` ) ;
var arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 ] ;
console. log ( arr. length) ;
console. log ( arr. slice ( 1 , 3 ) ) ;
arr. push ( 10 ) ;
console. log ( arr) ;
arr. pop ( ) ;
console. log ( arr) ;
</ script> < script>
var n1 = 10 ;
console. log ( n1, typeof n1) ;
n1 = n1. toString ( ) ;
console. log ( n1, typeof n1) ;
var b1 = true ;
console. log ( b1, typeof b1) ;
b1 = b1. toString ( ) ;
console. log ( b1, typeof b1) ;
var s1 = "22" ;
console. log ( s1, typeof s1) ;
s1 = Number ( s1) ;
console. log ( s1, typeof s1) ;
var s2 = "5a" ;
console. log ( s2, typeof s2) ;
s2 = Number ( s2) ;
console. log ( s2, typeof s2) ;
</ script> < script>
var n = 33 ;
var s = "abc" ;
res = n + s;
console. log ( n, typeof n) ;
console. log ( res, typeof res) ;
</ script> 赋值运算符：=
算术运算符：+ - * / %
复合运算符：+= -= *= /= %=
自运算：++ --
比较运算符（结果为布尔值）：> < >= <= == ( 相等) != ( 不相等) == = ( 全等) != = ( 不全等)
相等 : 不考虑数据类型，只做值的比较（包含自动类型转换）
全等 : 不会进行数据类型转换，要求数据类型一致并且值相等才判断全等
逻辑运算符：&& || !
< script>
var a = 10 ;
console. log ( a++ ) ;
console. log ( a) ;
console. log ( ++ a) ;
console. log ( a) ;
console. log ( "100" == 100 ) ;
console. log ( "100" === 100 ) ;
console. log ( true && false ) ;
console. log ( true || false ) ;
console. log ( ! true ) ;
var age = 50
console. log ( 18 <= age<= 60 )
console. log ( 70 >= age>= 10 )
</ script>
if ( 条件表达式) {
条件成立时执行;
}
if ( 条件表达式) {
条件成立时执行
} else {
条件不成立时选择执行;
}
if ( 条件1 ) {
条件1 成立时执行;
} else if ( 条件2 ) {
条件2 成立时执行;
} else if ( 条件3 ) {
条件3 成立时执行;
} ... else {
条件不成立时执行;
}
if ( 0 ) { }
if ( 0.0 ) { }
if ( "" ) { }
if ( undefined ) { }
if ( NaN ) { }
if ( null ) { }
< script>
var score = prompt ( "输入一个分数:" )
if ( score >= 90 ) {
console. log ( "优秀" ) ;
} else if ( score >= 80 ) {
console. log ( "良好" ) ;
} else if ( score >= 60 ) {
console. log ( "及格" ) ;
} else {
console. log ( "不及格" ) ;
}
</ script>
var 循环变量 = 初始值;
while ( 条件表达式) {
循环体;
更新循环变量;
}
var 循环变量 = 初始值;
do {
循环体;
更新循环变量;
} while ( 条件表达式) ;
< script>
var n = 0 ;
while ( n < 4 ) {
console. log ( n) ;
n++ ;
}
var m = 0 ;
do {
console. log ( m) ;
m++ ;
} while ( m < 4 ) ;
</ script> for ( var 循环变量 = 初始值; 条件表达式; 更新循环变量) {
循环体;
}
var 数组对象 = [ 元素1 , 元素2 , 元素n]
for ( var i in 数组对象) {
循环体
}
< script>
for ( var i = 0 ; i < 4 ; i++ ) {
console. log ( i) ;
}
var arr = [ 1 , 3.14 , "a" , true , false ]
for ( var i in arr) {
console. log ( i, arr[ i] , typeof arr[ i] )
}
</ script>
break
continue
function 函数名 ( 参数列表 ) {
函数体;
return 返回值;
}
函数名 ( 参数列表) ;
( function ( 形参 ) ) {
函数体
} ) ( 实参) ;
var fn = function ( 形参 ) { 函数体} ;
fn ( ) ;
< script>
var a = prompt ( "请输入一个数" ) ;
a = Number ( a) ;
function add_num ( a, b ) {
return a + b;
}
console. log ( add_num ( a, 22 ) ) ;
var sum;
sum = ( function ( a, b ) { return a + b} ) ( a, 22 )
console. log ( sum)
var fn = function ( a, b ) { return a + b}
console. log ( fn ( a, 22 ) )
</ script>
DOM（Document Object Model，文档对象模型），提供操作HTML文档的一套工具。
BOM（Browser Object Model，浏览器对象模型），提供操作浏览器的一套工具。
JS不能直接操作HTML标签，可以通过操作DOM对象来操作HTML的元素。
document
element
node
document.getElementById( "id名" )
document.getElementsByTagName( "元素名" )
document.getElementsByName( "name名" )
document.getElementsByClassName( "class名" )
1 . getElementById( ) 得到一个DOM对象。
2 . getElementsByName( ) 、getElementsByTagName( ) 、getElementsByClassName( ) 得到DOM对象的集合，集合中每个元素都是一个DOM对象，顺序是其在HTML文档中出现的顺序，用法同数组。
1 . 每个id只能给一个元素独享，每个class可以给多个元素共享。
2 . 属性name一般用于单选框和多选框。
3 . 通过元素名查找会作用于HTML文档中该元素。
<! DOCTYPE html > < htmllang = " zh_CN" > < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < p> </ p> < div> < inputtype = " checkbox" name = " hobby" class = " c1" value = " a" /> < br> < inputtype = " checkbox" name = " hobby" class = " c1" value = " b" /> < br> < inputtype = " checkbox" name = " hobby" value = " c" /> < br> < inputtype = " checkbox" name = " hobby" id = " i1" value = " c" /> < br> </ div> < buttononclick = " checkNo ( ) ; " > </ button> < buttononclick = " checkReverse ( ) ; " > </ button> < buttononclick = " checkHeadTwo ( ) ; " > </ button> < buttononclick = " checkTailOne ( ) ; " > </ button> </ body> </ html> < scripttype = " text/javascript" >
function checkNo ( ) {
var hobbys = document. getElementsByTagName ( "input" ) ;
for ( var i in hobbys) {
hobbys[ i] . checked = false ;
}
}
function checkReverse ( ) {
var hobbys = document. getElementsByName ( "hobby" ) ;
for ( var i = 0 ; i < hobbys. length; i++ ) {
hobbys[ i] . checked = ! hobbys[ i] . checked;
}
}
function checkHeadTwo ( ) {
checkNo ( ) ;
var hobbys = document. getElementsByClassName ( "c1" ) ;
for ( var i = 0 ; i < hobbys. length; i++ ) {
hobbys[ i] . checked = true ;
}
}
function checkTailOne ( ) {
checkNo ( )
var t = document. getElementById ( "i1" ) ;
t. checked = true ;
}
</ script>
DOM.innerHTML
DOM.innerText
DOM.属性名
DOM.属性名 = "属性值"
DOM.style = "width: 300px;" ;
DOM.style.width = "300px" ;
1 . 属性值为字符串形式，单位不能省略。
2 . 如果css属性名包含连接符，使用js访问时，改为小驼峰：font-size ——》fontSize
DOM.getAttribute( "属性名" ) ;
DOM.setAttribute( "属性名" , "属性值" )
DOM.removeAttribute( "属性名" )
DOM.childNodes
DOM.parentNode
DOM.previousSibling
< html> < button onclick = "函数名();" > 按钮内容< /button> < /html>
< script> function 函数名( ) { 代码} < /script>
< html> < button id = "id名" > 按钮内容< /button> < /html>
< script> document.getElementById( "id名" ) .onclick = function ( ) { 代码块} < /script>
DOM.innerHTML、DOM.innerText、DOM.style.子属性<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < style>
div {
width : 100px;
height : 100px;
background-color : red;
transition : all 0.3s;
}
</ style> </ head> < body> < pclass = " c" > < spanstyle = " font-weight : bold; " > </ span> </ p> < p> < buttonid = " btnHtml" > </ button> < buttonid = " btnText" > </ button> </ p> < buttononclick = " bigger ( ) " > </ button> < divid = " box" > </ div> </ body> </ html> < script>
document. getElementById ( "btnHtml" ) . onclick = function ( ) {
alert ( document. getElementsByTagName ( "p" ) [ 0 ] . innerHTML) ;
}
document. getElementById ( "btnText" ) . onclick = function ( ) {
alert ( document. getElementsByClassName ( "c" ) [ 0 ] . innerText) ;
}
function bigger ( ) {
var a = document. getElementById ( 'box' )
alert ( a. style. backgroundColor) ;
a. style = "width: 200px;" ;
a. style. height = "200px" ;
a. style. backgroundColor = "green" ;
alert ( a. style. backgroundColor) ;
}
</ script> DOM.childNodes、DOM.parentNode、DOM.previousSibling<! DOCTYPE html > < html> < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < divid = " question" > < p> </ p> < ulid = " city" > < liid = " bj" > </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < p> </ p> < ulid = " phone" > < li> </ li> < liid = " android" > < spanstyle = " color : red; " > </ span> </ li> < li> </ li> </ ul> </ div> < divid = " btnList" > < div> < buttonid = " btn01" > </ button> </ div> < div> < buttonid = " btn02" > </ button> </ div> < div> < buttonid = " btn03" > </ button> </ div> < div> < buttonid = " btn04" > </ button> </ div> < div> < buttonid = " btn05" > </ button> </ div> < div> < buttonid = " btn11" > </ button> </ div> < div> < buttonid = " btn12" > </ button> </ div> </ div> </ body> </ html> < scripttype = " text/javascript" >
var city = document. getElementById ( "city" ) ;
var cityChilds = city. childNodes;
var phone = document. getElementById ( "phone" ) ;
var phoneChilds = phone. childNodes;
document. getElementById ( "btn01" ) . onclick = function ( ) {
var lis = city. getElementsByTagName ( "li" ) ;
alert ( lis. length) ;
} ;
document. getElementById ( "btn02" ) . onclick = function ( ) {
alert ( cityChilds. length) ;
console. log ( cityChilds) ;
} ;
document. getElementById ( "btn03" ) . onclick = function ( ) {
alert ( phoneChilds. length) ;
console. log ( phoneChilds) ;
} ;
document. getElementById ( "btn04" ) . onclick = function ( ) {
alert ( phone. firstChild. innerHTML) ;
alert ( phoneChilds[ 1 ] . innerHTML) ;
alert ( phone. lastChild. innerHTML) ;
} ;
document. getElementById ( "btn05" ) . onclick = function ( ) {
alert ( phone. firstChild. innerText) ;
alert ( phoneChilds[ 1 ] . innerText) ;
alert ( phone. lastChild. innerText) ;
} ;
var android = document. getElementById ( "android" ) ;
document. getElementById ( "btn11" ) . onclick = function ( ) {
var parentNode = android. parentNode;
console. log ( parentNode)
alert ( parentNode. innerHTML) ;
alert ( parentNode. innerText) ;
} ;
document. getElementById ( "btn12" ) . onclick = function ( ) {
var previousSibling = android. previousSibling;
alert ( previousSibling. innerHTML) ;
} ;
</ script> DOM.xxxAttribute()、DOM.属性<! DOCTYPE html > < html> < head> < metacharset = " UTF-8" > < title> </ title> </ head> < body> < div>
< inputtype = " text" name = " name" id = " username" placeholder = " 你的名字" maxlength = " 3" /> </ div> < divid = " btnList" > < div> < buttonid = " get" > </ button> </ div> < div> < buttonid = " func" > </ button> </ div> </ div> </ body> </ html> < scripttype = " text/javascript" >
document. getElementById ( "get" ) . onclick = function ( ) {
var username = document. getElementById ( "username" ) ;
alert ( username. placeholder) ;
alert ( username. name)
console. log ( username) ;
} ;
document. getElementById ( "func" ) . onclick = function ( ) {
var username = document. getElementById ( "username" ) ;
username. placehoder = "名字" ;
username. setAttribute ( "name" , "user" ) ;
username. removeAttribute ( "maxlength" ) ;
alert ( username. placehoder) ;
alert ( username. name) ;
console. log ( username) ;
} ;
</ script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
