复习笔记8-HTML CSS JS

## 1.HTML
⭐快捷键
①快速打出框架：！+回车    
②注释：ctrl+shift+/
③保存：ctrl s            
④打开浏览器：alt+b
#### 标题排版
😊图片标签：img(src:url   width:宽度   height：高度)  
😊标题标签： h1 -  h6
😊水平线标签:hr
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/089995a4-1826-4a6a-942d-62d0d6648fdd.png)
## 2.CSS
#### ①标题样式(CSS控制样式)
⭐颜色属性：color     字体大小：font-size(加px)
CSS引入方式:
😊内嵌样式：写在style标签中（通常写在head标签中）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/628264d6-9568-f52f-4f96-901fe7d4ba1d.png)
😊外嵌样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/50010227-5797-3986-8507-4c556b050e96.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/dc868787-9994-ab56-cef2-f6c3a979909f.png)
#### ②标题样式(CSS选择器)
CSS选择器：用来选取需要设置样式的元素(比如设置字体颜色、大小、背景色等)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/44a89850-44c1-7ad8-0e90-a3cb19f94a2d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/53851eec-0243-90e5-2dd9-0d4f88a4851a.png)
#### ③超链接（a标签） 
href:指定访问的url         target:指定在哪里打开资源链接
self:在当前页面打开         blank:在空白页面打开
⭐超链接CSS属性：
text-decoration:规定添加到文本的修饰
none:定义标准的文本
#### ④正文排版
😊视频标签：video
(src:视频的url controls：显示播放控件 width:播放器的宽度  height:播放器的高度)
😊音频标签：audio
(src:音频的url controls：显示播放控件)
😊段落标签：p
😊换行标签：br
😊文本加粗标签：b/strong
⭐CSS样式：
line-height:行高  text-indent:第一个行内容的缩进  text-align:文本的水平对齐方式
注意：HTML中无论输入多少个空格，只会显示一个(可以使用&nbsp;)
#### ⑤页面布局
😊div:一行只显示一个。
😊span:一行可以显示多个
⭐CSS盒子模型及属性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/c43eba54-7bc9-9cee-e16d-be9fc09e6a4b.png)
#### ⑥表格标签
😊table:定义表格整体
（border:表格边框的宽度  width:表格的宽度 cellspacing:单元之间的空间）
😊tr:表格的行
😊td:表格单元格，可以包裹内容（表头单元格：th）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/82c1de2c-4df4-afad-515e-8a17013766dc.png)
#### ⑦表单标签
在网页中主要负责数据采集功能，如注册，登录等数据采集
😊form
⭐表单项：不同类型的input元素，下拉列表，文本域等
input:表单项，通过type属性控制输入形式
select：下拉列表 （option:定义列表项）
textarea:文本域
⭐属性
action:提交表单时向哪里发送表单数据,url
method:发送表单数据的方式
(get:表单数据拼接在url后面，大小有限制  post：表单数据在请求体中携带，大小没有限制)
注意：表单项必须有name属性才可以提交
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/adb3acef-bcab-5116-6b0c-4426252be653.png)
#### ⑧表单项标签
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/fb651854-e968-f3d2-d244-88fff6bc7665.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b40239bd-bd8f-26b7-959c-db5122160bdf.png)
## 3.JS
#### ①引入方式
⭐内部脚本：将js代码定义在HTML页面中
js代码位于script标签之间 放置于body元素的底部
⭐外部脚本：将js代码定义在外部js文件中，然后引入到HTML页面中
外部js文件中只包含js代码，不包含script标签
#### ②书写语法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/b4fd3281-8055-92df-f16f-4bde341c22be.png)
#### ③变量
let:不能重复定义
const:常量，不能被改变的
#### ④数据类型
使用typeof运算符可以获取数据类型：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/43bb52f5-9c13-68a7-3ec5-1223c0a65bb3.png)
#### ⑤运算符
==：会进行类型转换     ===：不会进行类型转换
#### ⑥JS函数(function)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/1d18db2c-24f6-dad5-da02-22b59cbb2499.png)
#### ⑦Array
😊数组长度可变，可以存储任意类型的数据   var 变量名 = [ 元素列表 ];
😊访问：arr[ 索引 ]= 值；
😊方法：
forEach:遍历数组中有值的元素（快捷键：输入fori后按下Tab键）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/51b84518-9ec5-8163-8ece-5a801b8a3e39.png)
添加元素：push
删除元素(从哪个索引开始删，删几个元素)：splice
#### ⑧String
方法：
😊charAt:获取指定位置的字符
😊indexOf:检查字符串，返回索引值
😊trim:去除字符串左右两侧的空格
😊substring:提取字符串中两个指定的索引号之间的字符。开始索引，结束索引，含头不含尾
#### ⑨JSON
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/10629bcf-f5e5-89fa-3842-59ecc00adb46.png)
var 变量名 = '{"key1": value1,"key2":value2,"key3":value3}';
JSON字符串转为对象：var arr = JSON.parse(变量名);
对象转为JSON字符串:var str = JSON.stringfy(arr);
#### ⑩DOM
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/ee1728c9-69c2-b579-1a9f-9418b2fb50f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/de772a99-955b-aaf9-4594-8300df4bdd24.png)
innerHTML：更改内容
TagName:标签名
ByName:属性名
checked=true的话 选中复选框
toLowerCase:变成小写
toUpperCase：变成大写
#### ①①事件绑定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/8cc2f09b-3467-fabc-089b-44d636d78ce3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899383/6f07e175-9074-bda1-f887-25dd4cc5c049.png)