本文最后更新于：2022年8月3日晚上

前端学习

跟着黑马程序员学

0x01 网页与html

html是一种**超文本标记语言**
网页是一个html文件，由前端人员书写，浏览器渲染而展现

web标准的组成

web主要由结构，表现，行为组成
结构：html
表现：css（设计外观样式）
行为：JavaScript（用于交互）

html标签

html语法规范

html标签是用尖括号括起来的关键词
有开始标签也有结束标签，结束标签加反斜杠"/"

标签关系
包含关系

1
2
3

<head>
      <title> </title>
</head>

并列关系

1 2	`<head> </head> <body> </body>`

第一个页面

代码如下：

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
    键盘敲烂，工资过万
    </body>
</html>

效果如下

可见，head标签负责页面上方的部分，如页面的名字

而body则是网站主体内容

Vscode 利用写代码

!DOCTYPE 以及 lang等字符集作用

1	`<!DOCTYPE html>`

意思为，使用的是html语言
必须写在文件第一行

1	`<html lang = "en">`

lang语言种类。
1.en定义语言为英语
2.zh-CN为中文
定义是告诉浏览器，语言种类，定义为en也是可以显示中文的。

1	`<meta charset="UTF-8">`

UTF-8是万国码，几乎包含全世界所有国家用到的字符。

html常用标签

根据标签语义，在合适的地方给一个最合理的标签，可以让页面结构更清晰。

标题标签

1	`<h1> - <h6>`

1	`<h1> 我是一级标题</h1>`

标签语义：
重要的，单列一行的加粗的文字
且h1最重要，大于h2，以此类推。一共有六级标题。

段落和换行标签（重要）

<p>

1	`<p>我是段落标签</p>`

1
2
3

<p>全部素材、源码、ppt、素材、讲义都在置顶留言,去下载吧~~</p>
<p>也可以直接： https://gitee.com/xiaoqiang001/html_css_material.git 下载哈！</p>
<p>1. web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式增加的H5C3新特性，新语法，最后讲解</p>

如此，就能分段。
换行标签
换行是单标签

<br />

br加空格，反斜杠。
强制文字换行。

1	`<br />和<p></p>的不同之处在于，段落间有空行，而换行是紧接着下一行开头开始的。`

文本格式化标签

如粗体、斜体、下划线等等

加粗：

1 2	`<strong>我是加粗的文字</strong> <b>我是加粗的文字</b>`

斜体：

1 2	`<em>我是倾斜的文字</em> <i>倾斜</i>`

删除线：

1 2	`<del>我是删除线</del> <s></s>`

下划线：

1 2	`<ins>我是下划线</ins> <u></u>`

div和span标签

这两个标签是无语义的，是放内容的盒子
div是division的缩写，表示分割，分区。

<div>我是一个div标签，我单独占一行</div>
<div>我是一个div标签，我单独占一行</div>
<span>百度</span>
<span>搜狐</span>
<span>新浪</span>

结果为

1
2
3

我是一个div标签，我单独占一行
我是一个div标签，我单独占一行
百度 搜狐 新浪

此两个标签一横一竖，用于布局

图像标签和路径（重点）

1.图像标签

1	`<img src="图像URL"/>`

src 是img标签的必须属性，它用于指定图像文件的路径和文件名。
img是单标签。

可选参数
alt: 当图片显示不出来时，替换用
title：鼠标浮在图片上时，显示文字
width：修改图像的宽度
height：修改图像的高度
border：设置图像的边框粗细

路径

1.相对路径

相对路径：
以**引用文件所在位置**为参考基础，而建立出的目录路径。
简单来说，图片相对于HTML页面的位置。
同一级引用：此html文件与引用图片位于同一层
<img src = "img.jpg" />
下一级引用：
<img src = "images/img.jpg" />
上一级引用:
<img src = "../img.jpg" />

2.绝对路径

1	`<img src = "img的url"/>`

超链接标签

语法:
<a href = "跳转目标" target = "窗口弹出方式">文本或图片</a>
外部链接跳转目标格式：
http://www.kawatsuki.com
需要写http与www.
内部链接：
<a href = "gons.html">gons</a>
即可
空链接：
<a href = "#">空连接</a>
显示为链接，但是不指向任何地方
下载链接：
<a href = "tar.zip">下载文件</a>
点击链接就会下载
锚点链接：快速跳转到本页面某处
语法：
<a href = "#f">个人简介</a>
去往某处标题：
<h4 id = "f">个人简介</a>

注释

语法
<!-- ..... -->
如
<!--这是注释-->
或快捷键：
ctrl + /
可快速注释

特殊字符
空格：
&nbsp;
是一个空格
&lt;
&gt;
分别是小于号（less than）和大于号。
以&开头以;结尾

表格

表格的基本语法

<table>
    <tr>
        <td>单元格中的文字</td>
        ...
    </tr>
    ...
</table>

table是用于定义表格的标签
tr是表格中的行
td是table data，定义表格中的单元格，必须嵌套在tr内

表头单元格标签

1 2	`用<th>words</th> 代替<td>`

<thead>
</thead>
可以用此包括第一个<tr></tr>
表示表头区域
<tbody>
<tr>
...
</tr>
<tr>
...
</tr>
</tbody>
thead与tbody内必须有<tr>
此两个标签用于分割表头与表体，包含于<table>内

合并单元格

合并单元格的方式：
跨行：rowspan = “合并单元格个数”
跨列：colspan = “合并单元格个数”
目标单元格：
跨行：写于最上侧单元格内。
跨列：在左侧单元格内。

三部曲：
1.确定跨行还是跨列
2.找到目标单元格 <td colspan = "10">woreds</td>
3.删除多余格

列表

1.无序列表

语法：
<ul>
    <li>
    ....
    </li>
</ul>
注意：
ul中，只能放li标签
li中，可以放任何标签

2.有序列表

<ol>
    <li>
    </li>
</ol>
有序列表会自动加上1，2，3的样式，即有序。

3.自定义列表

使用场景：
关注我们

新浪微博
官方微信
联系我们


这样的列表
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

表单

如填写注册信息
用于收集用户信息。
表单的组成：

1.表单域
2.表单元素
3.提示信息

表单域

表单域是一个包含表单元素的区域
<form>标签用于定义表单域
<form>会把它范围内的表单元素信息提交给服务器
<form action = "url地址" method = "提交方式" name = "表单域名称">
....
</form>

表单控件

1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素

input:

<input>是单标签，用于收集用户信息。
<input type = "属性值"/>
属性值有
text（文本）


<form>
    用户名：<input type = "text"/>
</form>

password（密码）
输入的是星号，不会泄露


radio（单选）
性别：男<input type = "radio"/> 女<input type = "radio"/>
input内必须有name元素，且相同，才能达到单选的目的


checkbox（多选）
爱好：吃饭<input type = "checkbox"/>  睡觉<input type = "checkbox/>" 打豆豆<input type = "checkbox/>"

name属性：分别不同表单元素
value属性：给此元素一个默认值，如“请输入用户名”。单选框也应写value，用于向后台传递信息。即规定input元素值。
以上两个元素，每个input都应该有！

checked属性：当页面打开的时候，会默认选中该按钮（单选或复选）

1	`<input type = "checkbox" checked = "checked"/>`

maxlength：规定输入最大长度

1	`<input type = "checkbox" checked = "checked" maxlength = "6"/>`

提交按钮submit
重置按钮reset

<input type = "submit">
<input type = "submit" value = "免费注册">
可以用value值来替换“提交”
<input type = "reset" value = "重新填写">
还原为默认值

普通按钮button
文件域file

1
2
3

<input type = "button" value = "获取验证码">
<input type = "file" >
file加不了value。

lable标签
lable用于绑定一个表单元素，当点击lable内的文本，浏览器会自动选择对应表单
语法:

<label for = "sex">男</label>
<input type = "radio" name = "sex" value = "male" id = "sex"/>
核心：
label中的for与表单元素中的id要相同。
不要写错label！！！！

select下拉表单元素

籍贯:
<select>
    <option>o1</option>
    <option selected = "selected">o2</option>
</select>
加selected会默认选中。

textarea文本域表单元素：
如大量书写文字，个人简介120字。

1
2
3

<textarea rows = "3" cols = "20">
</textarea>
rows与cols基本上不使用，以后用css改

CSS

css是网页的美容师
html的局限性：只关注内容的语义，丑

css语法规范

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试案例
    </title>
    <style>
        p {
            color:red;
        }
    </style>
</head>
<body>
   <p>
    you
   </p>
</body>
于<head>标签内加入<style>标签，于style内，格式为
目标 {属性:属性值;}记得分号结尾

p {color:red;
    font-size : 12px;}

CSS选择器

根据不同需求选出不同标签
基础选择器：

标签选择器

以标签名作为选择器

类选择器

可单独选择一个，或某几个标签。
先定义类，再将元素拉入类

<style>
.red {
 color: red;
}
</style>
...
<li class = "red">红色</li>

定义类：.+类名
调用类：标签内加入class = “类名”
长类名用-短横线链接.star-st

多类名

可以在class属性中写多个类名
必须用空格隔开！

1	`<div class = "red green"></div>`

id选择器

html元素用id属性来调用，style中用#定义

#pink {
    color : pink;
}
...
<div id = "pink">michell</div>

与类选择器的区别：
只能被调用一次，被第一个调用者成功调用后，无法再次被调用。

通配符选择器

用*定义，它会选取页面中所有元素。

1
2
3

* {
    color: red;
}

通配符选择器不需要调用，自动给所有元素使用指定的样式。

CSS字体

字体系列

1
2
3

p{
    font-family:"Microsoft YaHei";
}

字体大小

1
2
3

p{
    font-size: 20px;
}

字体粗细

p{
    font-weight: normal;
}
有以下几个参数
bold：粗体 number ：700；
bolder：更粗
lighter：细体
number：加数字，700是加粗，400是正常
font-weight: 700;

文字样式

p{
    font-style: normal;
}
italic:斜体

字体复合属性

body{
    font: font-style font-weight font-size/line-height font-family;
    font: italic 700 16px/20px(20px可不写) 'microsoft yahei';
    不能更改顺序
    只有size和family不能省略，其余部分省略则取默认值。
}

文本属性

文本颜色

1
2
3

div {
    color: red;
}

也可以是16进制如：
#ff0000；
或rgb(255,0,0)；

文本对齐
text-align用于设置元素内文本内容的水平对齐方式

div {
    text-align : left(默认值);
}
left(默认左对齐)
right(右对齐)
center(居中对齐)

装饰文本
text-decoration属性规定添加到文本的修饰。可以添加下划线，删除线，上划线。

div{
    text-decoration: underline;
}
none默认
underline下划线
line-throught删除线
overline上划线

取消链接的下划线：
a{
text-decoration: none;
}
文本缩进
text-indent属性用于指定文本第一行的缩进。

div {
    text-indent: 10px;
}
只缩进首行！

或使用em：当前元素一个文字的大小

1
2
3

div{
    text-indent: 2em;
}

行间距
line-height属性用于设置行间的距离。
行间距由文本高度，上间距，下间距三者构成。
改变的是上、下间距。

1
2
3

div{
    line-height: 16px;
}

CSS的引入方式

按照css书写位置不同，css可以分为三大类
内部样式表
全部写入style标签内部
理论上<style>可以放在任意处，但一般放在head内
是嵌入式引用。
行内样式表
简单的修改：

1	`<div style = "color : pink;">...</div>`

单个的，简单的修改。
外部样式表
样式单独写在style文件内，再进行调用

新建一个后缀名为.css的文件
在这个文件里面，直接写样式，不需要style标签
使用<link>标签引入到html文件里
<link rel = "stylesheet" href = "style.css（css文件路径）"/>

Emmet语法

emmet语法使用缩写提高编写速度。
1.快速生成HTML结构语法

div+tab
div*10+tab
ul>li*3
div+p
p.one(类名) == <p class = "one"></p>
p#one(类名) == <p id = "one"></p>
即.就是生成类为此类名的元素，#同理
.demo$*5会生成以demo1~demo5为类的5个div
div{测试} == <div>测试</div>
$是自增符号
div{$}*5 == <div>1~5</div>

2.emmet语法快速生成css样式

1 2	`tac = text-align:center; w100 = weight: 100px;`

3.快速格式化代码

1	`vscode直接右键，选格式化文档，会自动对齐所有代码`

css复合选择器

后代选择器（重要）
后代选择器
例如：我想把ol内的li全部定一个样式，而ul中不变

ol li{
    color:pink;
    
}

语法：

元素1 元素2{
    color: pink;
}
元素2是元素1后代。
1，2之间用空格隔开
可以套很多层，但后者必须是前一个的后代
可以是任意基础选择器的组合
.nav ul a{
color: yellow;
}

子选择器
子选择器只能选择某元素最近一级的子元素
语法：

元素1>元素2{
color: red;
}
即只选择元素1内离近的2的儿子，作为对象。

并集选择器
并集选择器可以选择多组标签，同时为他们定义相同样式

1
2
3

div,p{
color: pink;
}

伪类选择器
伪类选择器书写最大的特点是用冒号:表示

链接伪类选择器

a:link  选择所有未访问过的链接

a:link{
    color: #333;
    text-decoration: none;
}

a:visited   选择所有已被访问的链接

a:visited{
    color: orange;
}

a:hover   选择鼠标经过的那一个链接

a:hover{
    color: skyblue;
}

a:active选择鼠标按下，但未弹起鼠标的那个链接

a:active{
    color: green;
}

注意事项：

为保证链接系列生效，必须保证LVHA的顺序进行声明。
链接都有默认样式，必须用a单独指定样式
开发中：
a {
    color: grey;
}
a:hover{
    color: skyblue;
}
即可

focus伪类选择器
用于选取获得焦点的表单元素。

input:focus{
    background-color: pink;
}
则获得光标的input元素，背景会变为pink色。

元素的显示模式

元素显示模式就是元素（标签）以什么方式进行显示

如div独占一行，但一行可以放很多span

HTML元素一般分为块元素和行内元素两种类型。

块元素

<h1>~<h6> <p> <div>等等，都是块元素
特点：
霸道，独占一行
可以嵌套，成为容器
但<p>标签以及<h1>系列标签主要存放文字，所以其中不能放块级元素
宽度默认是容器的100%

行内元素

<a>,<strong>......
特点:
一行可以写多个，放在一行内显示
高、宽直接设置是无效的
默认宽度就是本身内容的宽度
行内元素内只能放文本或其他行内元素
注意：
a内不能放a
a内可以放块级元素。但给a转换为块级模式最安全

行内块元素
如img，input标签

1
2
3

特点：
一行内可以放多个此元素，中间会有空白空隙
此元素可以设置宽和高

元素显示模式的转换
如：a链接增加其触发范围
转换为块元素:
display:block;
转换为行内元素：
display:inline;

单行文字垂直居中
小技巧：
让文字行高等于盒子的高度

1 2	`height: 40px; line-height: 40px;`

CSS3列表

为ul、ol设置不同的列表项标记
list-style-type

1
2
3

ul.a{list-style-type: circle;}圆点状列表标记
.b{list-style-type: square;}方形列表标记
none就是无标记

也可指定图像，进行标记

1
2
3

ul{
    list-style-image: url("a.jpg");
}

CSS3表格美化

表格边框

table, th, td
{
    border: 1px solid black;
}
此时会显示双边框，如果想只显示单边框
border-collapse: collapse;
即可

表格高、宽、文字对齐

table{
    width: 100px;
    height: 100px;
    text-align: right;水平方向对齐
    vertical-align: bottom;竖直方向对齐
}

表格填充
控制边框和表格内容之间的间距，使用td与th元素的填充属性:

td{
    padding: 15px;
}
会使表格更大更易于观察

CSS盒子模型

Margin:外边距
Border:边框
Padding:内边距
Content:内容

div{
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    //一共是450px的宽度
}

CSS边框Border

border-style属性：
none：无边框
solid：实线边框
等等
**border-width:边框宽度
border-color:边框颜色
border-top-style:顶框样式
等等
**
p.one{
border-style: solid;
border-width: 5px;
border-color: red;
}

CSS轮廓outline

轮廓是绘制于元素周围的一条线，位于边框边缘的外围

1
2
3

outline-color
outline-style
outline-width

CSS外边距margin

margin用于清除周围的元素区域。margin没有背景颜色，完全透明。

CSS填充padding

padding设置元素内，文本内容与边框之间的距离

CSS内隐藏元素

h1.hidden{
    visibility: hidden;
}
h1.hidden1{
    display: none;
}
注意，前者只是看不见，但占空间
后者是不占空间

CSS定位position

p.p_fixed{
    position: fixed;
}
会使元素位置相对于浏览器窗口是固定位置

CSS溢出文本的处理Overflow

1
2
3

overflow: visible元素不被修剪，呈现于元素框外面
overflow: hidden元素被剪掉
overflow：scroll（auto）元素被剪掉，但可以用滚动条查看剩余内容。

CSS元素的浮动

img{
    float: right;
}
则该图片会显示在网页的右侧，而其余元素会包围它出现

如：
这是参数为left时

而以下为参数是right时

CSS对齐

元素居中对齐：
先设置元素宽度width属性，再

.center{
    margin: auto;
    width: 50%;
    border: 3px solid red;
    padding: 10px;
}
margin: auto;即可使元素水平居中
text-align: center;
是文本居中

而垂直居中，则设置行间距与高度height相等

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

CSS伪元素

:first-line伪元素

p:first-line
{
    color: red;
    font-variant: small-caps;
}
first-line伪元素只用于块级元素

before/after伪元素

用于在元素后面或前面添加东西，如在每个<h2>前面添加图片
h2:before{
    content: url("a.jpg");
}

CSS导航栏的制作

第一步：使用无序列表，元素为a标签

<ul>
    <li><a href="#">title1</a></li>
    <li><a href="#">title2</a></li>
    <li><a href="#">title3</a></li>
    <li><a href="#">title4</a></li>
</ul>

再删除列表前的点，删除边距与填充

ul{
           list-style-type: none;
           padding: none;
           margin: none;
       }

给链接元素转换为块元素
并设置宽度（默认为最大，需要设置）

a{
    display: block;
    width: 60px;
}

进一步设置，鼠标移动到导航栏上后，修改颜色。

li a:hover{
    background-color: #555;
    color: white;
}

添加active类，被选中

li a.active{
    background-color: #4CAF50;
    color: white;
}
注意，不是:而是.
因为这里，是标记出当前页面所在的选项，而不是正在选择

加上边框

ul {
    border: 1px solid #555;
}
 
li {
    text-align: center;
    border-bottom: 1px solid #555;
}
 
li:last-child {
    border-bottom: none;
}

成为全屏高度的固定导航条

ul{
    position: fixed;
    width: 25%;
    height: 100%;
    overflow: auto;
}

CSS导航栏2–水平导航栏

使用内联（inline）或浮动（float）的列表项。
内联列表项

li
{
    display: inline;
}

CSS下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
[mycode3]
[mycode3 type="html"]
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

JavaScript

JS的用法

js代码必须位于HTML中的

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
### JS的输出
JS没有任何打印或者输出的函数
**JS显示数据**
window.alert()

弹出警告窗口

会弹出11的窗口


操作HTML元素
document.getElementById("demo").innerHTML = "段落已修改"
这个是按id查找元素，并进行操作的方法

段落1

会显示“段落已修改”

1	`直接写入HTML文档`

document.write(Date());

1 2	`会额外输出write内的内容写到控制台`

console.log(message) 会输出内容到控制台

1 2	`### JS字面量数字字面量`

3.14 1001 123e5

1 2	`字符串字面量单双引号皆可`

"jobe d" 'lddd sd'

1	`表达式字面量`

7+10 2 * 8

1	`数组字面量`

[40, 100, 200]

1	`对象字面量`

{firstname:"John", lastname:"Done"}

1	`函数字面量`

function myFunc(am,bm) { return a+b; }

1 2	`JS变量用var定义`

var x, length；

x = 5；
length = 6；

**JS注释**
双斜杠```//```
**且JS大小写敏感**
### JS语句

可以用分号结尾一句代码
可以多写空格，提高可读性

1 2	`### JS数据类型和对象 new关键字指定类型`

var x= new Number
var ca= new String
var fl= new boolean

1 2	`对象对象有属性和方法`

定义一个对象

var car = { name: “Fiat”, model:500, color: “white” };
每个值用name: value表示，值之间用逗号分割

访问对象属性

car.name
car[“color”]
两种方式均可

对象方法
创建对象：
var person{
name:”DAvid”,
lasy:”DAAA”,
methodName:function(){
return name + “ “ + lasy
}
}
即在类内定义好了方法
调用：
person.methodName()
即可

1 2	`### JS函数定义函数`

function funcname(var1,var2){
//执行代码
}

不用声明参数的数据类型
### JS事件
#### HTML事件
如：HTML页面完成加载
HTML input字段发生改变
HTML按钮被点击
当发生事件时，可以用JS做些事情，语法如下

如：代码将修改自身元素的内容 this.innerHTML可以达到效果

1	`常见的HTML事件`

onchange HTML元素改变
onclick 点击HTML元素
onmouseover 鼠标移动到元素上

1 2	`### JS字符串可以用索引位置，从0开始访问字符`

var charn = str[9]

1 2	`字符串中的引号，不要跟字符串的引号相同，一双一单字符串长度`

var txt = “ABNCNJMMMM”
var num = txt.length;
length是内置属性

1	`字符串可以是对象`

var fristname=new String(“bob”)
typeof fristname // return String

1 2	String可以用```+```链接起来数字与字符串相加，将数字自动转换为字符串后，返回字符串

z = “hello” + 5
hello5

### JS条件语句
与C++一样
switch也一样

### JS for循环

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + “
“);
}

1 2	`也与C++一样，只是第一个参数是var定义的变量 for--in循环`

var person = {fname:”boll”, lname:”vil”, age:56};
for(x in person)
{
txt = txt + person[x];
}

1	`### JS类型转换`

var a
a=String(123)
var b
b = Number(“3.14”)

1 2	`### JS正则表达式（RE）如`

var patt = /runoob/i

1
2
3

```
/runoob/是正则表达式主题，用于检索
i是修饰符，表示不分大小写

正则表达式常用于检索和替换中

1 2	`var str = document.getElementById("DEmo").innerHTML; var n = str.search("Runoob");`

replace:

var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
修改了txt内容，str未变

JS表单验证

<script>
function validateForm()
{
    var x=document.forms["myForm"]["fname"].value;
    if(x == null||x == "")
    {
        alert("姓必须填写");
        return false;
    }
}
</script>
<form name="myForm" action = "demo.php" onsubmit="return validateForm()" method="post">
姓:<input type = "text" name = "fname">
<input type = "submit" value = "提交">
</form>

JS的this

在方法中，this表示该方法所属的对象
fullName : function(){
    return this.firstname + " " + this.lastname;
}
单独使用，this是全局对象
事件中的this
在HTML事件句柄中，this指向了接收事件的HTML元素
<button onclick="this.style.display ='none'">
点我后就消失咯
</button>

DOM

DOM(Document Object Model)文档对象模型

DOM节点

DOM节点树

节点之间拥有层级关系
常用父，子，同胞等术语描述这些关系

<html>
  <head>
    <meta charset="utf-8">
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 课程1</h1>
    <p>Hello world!</p>
  </body>
</html>

此代码中
文本结点”hello world!”的父节点是<p>节点

### DOM方法
HTML DOM方法是我们可以在节点（即HTML元素）上执行的动作
HTML DOM属性是我们可以在节点设置和修改的值
#### 编程接口
**getElementById()方法**

var elemnt = document.getElementById(“intro”);

1	`以及一些常用的方法`

appendChild(node)插入新的子节点
removeChild(node)删除字节点

### DOM属性
**innerHTML属性**
获取元素内容的最简单的方法是使用innerHTML属性
innerHTML属性对于获取和替换HTML元素的内容很有用
注意**inner**
**nodeValue属性**
nodeValue属性规定节点的值
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性值
### DOM访问
访问HTML元素（节点）
**getElementById()方法**

document.getElementById(“id”);

helloworld

1
2
3

id相对于，以起到寻找的作用
**getElementsByTagName()方法**
该方法会选取所有该标签的HTML元素

document.getElementByTagName("p")

hello

1
2
3

**getElementsByClassName()方法**
### DOM修改
**修改HTML内容**

1	`修改HTML样式`

Hello

hello

1	`添加新的HTML元素`

### DOM元素
**创建新的HTML元素-createElement()**
如上方代码一样
先创建，再添加到已有的元素上
**insertBefore()方法**
可以在指定元素节点之前添加该元素

insertBefore(src,des)

1
2
3

注意记得为各个节点命名，方便操作
**replaceChild()方法**
替换目标元素

replaceBefore(src,des);


## React
### React部署
利用官方cdn链接


实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：
**react.min.js**是核心库
**react-dom.min.js**提供与DOM相关的功能
**babel.min.js**Babel可以将ES6代码转为ES5，提高兼容性
### React元素渲染
#### 将元素渲染到DOM中
传递给```ReactDOM.render()```

const element =

HEllo

ReactDOM.render( element, document.getElementById('example') ); 即可将element内容传给example为id的元素

1 2	`#### 更新元素渲染因为React元素是不可变的，修改时，需要用新元素进行替换`

function tick(){ const element = (

现在是{new Date().toLocateTimeString()}.

); ReactDOM.render( element, document.getElementById('example') ); }

setInterval(tick,1000);

每1000ms替换一次，达到计时效果
### React JSX
JSX是一种语法
在react中代替常规的JavaScript
如

const element =

HEllo

;

1 2	`注意由于JSX是Javascript语言，故一些标识符如class最好用className代替`

var myDivElement =

;

1	`#### 在JSX中插入JS表达式`

ReactDOM.render(

{i == 1 ? ‘True!’ : “False!”}

,
document.getElementById(‘example’)
);
就是JS套HTML再套JS的感觉

1	`### React组件`

function HellowMessage(props){
return

HElloe world

;
}

const element = ;

ReactDOM.render(
element
,
document.getElementById(‘example’)
);


**第一步**
使用函数定义一个组件

**第二步**
用一个元素调用这个组件

const element =

1 2	`最后调用这个元素即可 #### 复合组件`

function Name(props) {
return

网站名称：{props.name}

;
}
function Url(props) {
return

网站地址：{props.url}

;
}
function Nickname(props) {
return

网站小名：{props.nickname}

;
}
function App() {
return (

);
}

ReactDOM.render(
,
document.getElementById(‘example’)
);

可以看出，用props.name时，传递参数要写，name =  "..."
### React State（状态）
#### 将生命周期方法添加到类中
如
每当Clock组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (

Hello, world!

现在是 {this.state.date.toLocaleTimeString()}.

);
}
}

ReactDOM.render(
,
document.getElementById(‘example’)
);

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。代码执行顺序：

当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。

一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。
### React Props
props用于传递数据

function HelloMe(props){
return

Hello {props.name}!

}

const element= ;

ReactDOM.render(
element,
document.getElementById(‘example’)
);

1 2	`### React 事件处理 HTML事件处理：`

React:

react中使用驼峰写法，且传入的是函数，而不是字符串
### React 条件渲染
登录界面判断
是输出**欢迎回来**
还是**请先注册**

function UserGreeting(props) { return

欢迎回来!

; }

function GuestGreeting(props) {
return

请先注册。

;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}

ReactDOM.render(
// 尝试修改 isLoggedIn={true}:
,
document.getElementById(‘example’)
);
```

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Fuzzing 上一篇

泄露出来的地址的处理下一篇

front

前端学习

0x01 网页与html

web标准的组成

html标签

html语法规范

第一个页面

Vscode 利用写代码

!DOCTYPE 以及 lang等字符集作用

html常用标签

标题标签

段落和换行标签（重要）

文本格式化标签

div和span标签

图像标签和路径（重点）

路径

超链接标签

注释

表格

表格的基本语法

表头单元格标签

合并单元格

列表

表单

表单域

表单控件

CSS

css语法规范

CSS选择器

标签选择器

类选择器

多类名

id选择器

通配符选择器

CSS字体

文本属性

CSS的引入方式

Emmet语法

css复合选择器

元素的显示模式

CSS3列表

CSS3表格美化

CSS盒子模型

CSS边框Border

CSS轮廓outline

CSS外边距margin

CSS填充padding

CSS内隐藏元素

CSS定位position

CSS溢出文本的处理Overflow

CSS元素的浮动

CSS对齐

CSS伪元素

CSS导航栏的制作

CSS导航栏2–水平导航栏

CSS下拉菜单

JavaScript

JS的用法

JS表单验证

JS的this

DOM

DOM节点

HEllo

现在是{new Date().toLocateTimeString()}.

HEllo

{i == 1 ? ‘True!’ : “False!”}

HElloe world

网站名称：{props.name}

网站地址：{props.url}

网站小名：{props.nickname}

Hello, world!

现在是 {this.state.date.toLocaleTimeString()}.

Hello {props.name}!

欢迎回来!

请先注册。