前端三剑客HTML、CSS、JS详解
首先简单说明三个语言的作用
HTML进行网页的结构搭建，例如文本，链接，图片视频等
CSS进行网页的美化，例如字体颜色，按钮图形等
Javascript简称JS进行网页的交互，例如点击按钮后的跳转设置等
1.HTML
HTML全称”Hypertext Markup Language“（超文本标记语言）
HTML要让浏览器要区分哪个是”标题“，”文本“，”图片“，”链接“等等，于是就有了HTML标签，HTML标签是由尖括号包围的关键字。
标签一般成对出现，包括开始标签和结束标签（也称双标签），内容位于两个标签之间，例如：
1.1 HTML文件结构
<!DOCTYPE html> <!--告诉浏览器此文件为HTML类型-->
<html> <!--文档起点-->
<head> <!--文档头部-->
<title>文档标题</title> <!--标题-->
<meta charset="UTF-8" > <!--文档编码格式-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--外部样式文件-->
</head>
<body> <!--主体标签--><!--body标签内的内容在浏览器中体现-->
</body>
</html>
1.2HTML标签
<p>这是一个段落</p>
<h1>这是一个标题</h1>
<a href='#'>这是一个超链接</a>
标题标签有六个大小，分别从<h1>到<h6>
在段落标签中文字可以进行加粗，斜体，下划线，删除线
<p><b>字体加粗，</b><i>斜体，</i><u>下划线，</u><s>删除线</s></p>
除了双标签，也存在单标签，例如：
<br> <!--换行标签-->
<input type="text"> /<!--一个输入的文本框-->
<hr> <!--分割线标签-->
1.3有序无序列表，表格标签
<ul> <!--无序标题标签-->
<li>无序标题1</li>
<li>无序标题2</li>
<li>无序标题3</li>
</ul>
<ol> <!--有序标题标签-->
<li>有序标题2</li>
<li>有序标题2</li>
<li>有序标题2</li>
</ol>
<table border="33"> <!--border为table属性，设置表格外线条宽度-->
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>元素11</td>
<td>元素12</td>
<td>元素13</td>
</tr>
<tr>
<td>元素21</td>
<td>元素22</td>
<td>元素23</td>
</tr>
</table>
1.4HTML属性
基本语法：
<开始标签 属性名="属性值">
每个HTML元素可以具有不同的属性
<p id='describe' class="section">这是段落标签</p>
<a href="https://www.bilibili.com/">这是超链接</a>
对于超链接标签，有四种选择打开的方式
图片插入
图片的插入可以采用相对路径和绝对路径或是URL，只要让代码能找到就行
<img src="图片1.png" alt="无法显示图片"> <!--默认当前文件下-->
如果图片无法显示出来，alt就会显示"无法显示图片"
如果要设置图片大小，后面添加属性width和height即可
<img src="图片1.png" alt="无法显示图片" width="200" height="200">
1.5HTML块元素，行内元素与行内块元素
举例常见标签<div>和<span>
<div>没有语义常用于布局排版，例如导航栏，侧边栏等不同的模块
<div class="nev">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
<div class="content"> <!--可以使用".content进行快速创建"-->
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
</div>
<span>标签相当于没有特殊样式的<a>和<img>，用<span>包起来以便于用CSS和JS进行包装
<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
或者在span包一个链接
<span>链接点击这里<a href="#">链接</a></span>
1.6表单（form标签）
<form action="#"></form> <!--action属性填写URL为表单的提交提供路径-->
实际上表单就是将一些内容块塞成一个表便于提交，例如塞入：
<label>用户名：</label>
<!--text为文本类型-->
<input type="text" placeholder="请输入用户名"> <!--placeholder后输入内容即为图灰色字体-->
<br><br>
<label for="pwa">密码：</label>
<!--password为密码类型，这样文本框输入密码时就不可见了-->
<input type="password" id="pwa" placeholder="请输入密码">
<br><br>
行内块元素包含了行内元素和块元素的特点，同一行可以像行内元素一样有多个行内块元素，又可以像块元素一样设定大小长款
在一些平台的搜索框会提供灰色的字体供用户参考，当用户一输入内容后灰色字体会消失，例如：
label与span表现一致，不过label只能与input配套使用
与此同时label中for属性是用于绑定与之配套的input标签的
<!--for绑定属性的意义-->
<!-- 绑定前：必须点击小方框 -->
<input type="checkbox" id="agree1"> 我同意条款
<!--checkbox为复选框类型-->
<!-- 绑定后：点击文字也能勾选 -->
<input type="checkbox" id="agree2">
<label for="agree2">我同意条款</label><br><br>
input中type的属性有非常多种，其中一种为单选类型，赋予type类型radio属性，并且必须给选项元素同一个name的属性，将选项元素绑定成同一个name组，不至于造成每个选项不在一个平面导致的多选，例如：
<label>性别：</label>
<!--radio为单选框类型-->
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="radio" name="gender"> 其他
假设以上是表单的内容，整体代码就为：
<form action="#">
<label>用户名：</label>
<!--text为文本类型-->
<input type="text" placeholder="请输入用户名"> <!--placeholder后输入内容即为图灰色字体-->
<br><br>
<label for="pwa">密码：</label>
<!--password为密码类型，这样文本框输入密码时就不可见了-->
<input type="password" id="pwa" placeholder="请输入密码">
<br><br>
<!--for绑定属性的意义-->
<!-- 绑定前：必须点击小方框 -->
<input type="checkbox" id="agree1"> 我同意条款
<!--checkbox为复选框类型-->
<!-- 绑定后：点击文字也能勾选 -->
<input type="checkbox" id="agree2">
<label for="agree2">我同意条款</label><br><br>
<label>性别：</label>
<!--radio为单选框类型-->
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="radio" name="gender"> 其他
<br><br>
<input type="submit" value="上传"> <!--value不填写默认为提交-->
</form>
由于没有后端，所以此处表单中action填入“#”起到锚点和占位的作用，点击上传后不会跳转
2.CSS
CSS全称“Cascading Style Sheets”（层叠样式表）
用于定义网页样式和布局样式的语言
通过CSS，可以指定网页中的元素颜色字体，大小，间距，边框，背景等等，从而实现更精确的网页设计
2.1CSS语法
选择题{
属性1:属性值1;
属性2:属性值2;
}
1.选择器的声明可以写无数条属性
2.声明的每一行属性，都需要以英文分号结尾
3.声明中是所有属性和值都是以键值对这种形式出现的
示例：
<!--这是一个p标签选择器-->
p{
color:bule; <!--设置颜色-->
font-size: 26px; <!--设置字体大小-->
}
2.2CSS的导入方式
CSS的导入方式有三种
内联样式就是在body主体内设计的CSS结构
内部样式表就是在HTML中头部文件<head>进行的设计
外部样式表就是单独设计一个CSS设计的文件，以便于可以多个文件方便的使用一个样式
首先声明文件结构如上图:
style整体代码为：
h3{
color: red;
}
CSS导入方式整体代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS的导入方式</title>
<!--这里设置了h2的内部样式表-->
<style>
h2{
color: yellow;
}
</style>
<!--从herf路径导入外部样式表-->
<link rel="stylesheet" href="./style.CSS">
</head>
<body>
<h1 style="color: blue;">这是一个用了内部样式的一级标题</h1>
<h2>这是一个用了内部样式表的二级标题</h2>
<h3>这是一个使用了外部样式表的三级标题</h3>
</body>
</html>
2.3CSS选择器
- 元素选择器
- 类选择器
- ID选择器
- 通用选择器
- 子元素选择题
- 后代选择器（包括选择器）
- 相邻选择器（兄弟选择器）
- 伪类选择器
- 伪元素选择器
前面已经简单介绍了一下元素选择器也就是标签选择器
元素选择器，类选择器，ID选择器，通用选择器写在<head>下，示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
/* 元素选择器 */
h2{
color: aquamarine;
}
/* 类选择器，顾名思义只会修改同一个类的样式 */
.highlight { /* 这里修改了highlight类的样式 */
background-color: yellow; /* 这里设置的样式是修改元素背景颜色 */
}
/* ID选择器 ,与类选择器的一样的不过此处只修改同一id元素的样式*/
#header{
font-style: 40px;
}
/* 通用选择器 */
* { /*这里使用“*”表示选定全部元素 */
font-family: "楷体"; /*这里是修改字体，*/
}
/* 针对不同的系统，字体也可以自定义
*{
font-family: "PingFang SC", "Hiragino Sans GB", 苹果/日文字体 首用字体适用macOS/次级备用适用macOS(日语环境)
"Microsoft YaHei", 微软雅黑 使用Windows系统
"WenQuanYi Micro Hei", 文泉驿 Linux系统/Android兜底
sans-serif; 通用无衬线 都不适用默认
}
*/
</style>
</head>
<body>
<h1>不同类型的CSS选择器示例</h1>
<h2>这是一个元素选择器示例</h2>
<h3 class="highlight">这是一个类选择器示例</h3>
<h4 id="header">这是一个ID选择器示例</h4>
</body>
</html>
子代选择器和后代选择器涉及到嵌套，相邻选择器要求自定义两个标签，顾名思义会选定经过第一个标签后遇到的第二个标签进行样式修改，三个选择器的示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
/* 子代选择器 */
.father > .son{ /* 如果此处写成.father > p 那优先级会比后代低 */
color: blue;
font-size: 40px;
}
/* 后代选择器 */
.father p{ /* 影响father后所有的p标签 */
color: red;
font-size: 40px;
}
/* 相邻选择器 */
h3+p{ /* 相邻选择器只对相邻的指定标签有作用 */
color: yellowgreen;
}
</style>
</head>
<body>
<div class="father">
<p class="son">这是一个子代选择器</p>
<div>
<p class="grandson">这是一个后代选择器</p>
</div>
</div>
<p>这是一个普通p标签</p>
<h3>这是一个普通的h3标签</h3>
<p>这是与h3相邻的一个p标签</p>
<p>这h3后但不是相邻的p标签</p>
</body>
</html>
伪类选择器和伪元素选择器的区别如下：
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style>
/* 伪类选择器 */
#element:hover {
background-color: purple;
}
/* 伪元素选择题 */
.custom-list li::before {
content: "✓";
color: green;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="element">鼠标悬停位置</div>
<ul class="custom-list">
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</body>
</html>
2.4CSS属性
- Font属性
CSS的属性有上百个，本篇简单举例字体属性（Font）
font具有复合属性，即font可以直接使用将它衍生的几个属性做到用一个属性设置多个样式
<h1 style="font: bolder 50px 'KaiTi'">这是一个font复合属性的示例</h1>
常见的属性还有设置行高
原始文本为：
设置行高后：
<p style="line-height: 50px;">这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本</p>
- 块元素,行内元素,行内块元素的转换
- 块元素对应的属性为：display:block
- 行内元素对应的属性为：display:inline
- 行内块元素对应的属性为：display:inline-block
<div style="display:inline;background-color:rgb(149, 129, 224);">这是一个块元素转换成行内元素</div>
<div style="display:inline;background-color:rgb(149, 129, 224);">这是一个块元素转换成行内元素</div>
<span style="display: block;background-color: aqua;">这一个行内元素换成块元素</span>
<div style="display:inline-block; width:200px;background-color: burlywood;">这是一个块元素转换成行内块元素</div>
2.5CSS盒子模型
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS盒子模型</title>
<style>
.demo{
display: inline-block;
background-color: indianred;
border: 10px solid greenyellow;
padding: 10px; /* 内部文字与边框的距离 */
margin: 50px; /* 离网页的边框距离 */
}
/* 实线:solid,虚线:dashed,点线:dotted,双实线:double */
.box{
background-color: burlywood;
width: 200px;
height: 200px;
border-style: solid dashed dotted double; /* 顺时针，上右下左 */
border-color: cornflowerblue;
border-width: 10px;
}
</style>
</head>
<body>
<div class="demo">素材来源抖音极客侠</div>
<div class="box">盒子边框模型</div>
</body>
</html>
2.6CSS浮动
传统的网页布局方式有五种
- 标准流(普通流、文档流)：网页按照元素的书写顺序依次排列
- 浮动
- 定位
- Flexbox和Grid（自适应布局）避免手机打开的布局错误
标准流是由块级元素和行内元素按照默认的规定方式排列。
”浮动“属性用于创建浮动框，将其移动到一遍，直到左边缘或右边缘触及包括快或另外一个浮动框的边缘，这样即可使元素进行浮动。
但需要注意的是：浮动是相对于父元素浮动，只会在父元素内部移动
语法如下：
选择器{
float:left/right/none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS浮动</title>
<style>
.father{
background-color: rgb(100, 225, 183);
/* height: 200px; */
border: 10px solid rgb(72, 177, 177);
}
.left-son{
background-color: rgb(210, 78, 230);
width: 100px;
height: 100px;
float: left;
}
.right-son{
background-color: greenyellow;
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
</div>
</body>
</html>
由于父元素我们没有设置长度，虽然子元素我们设置了宽长，但此时子元素是浮动属性，相当于在父元素的上一层，所以不会撑开父元素内的空间。
但这里必须注意的是，子元素虽然理解上是在父元素的上一层，但子元素设置的长宽实际还是在造成空间的占用，所以如果我们再输入一段文字，文字会在父元素下呈现，但由于子元素占用了一定的空间，所以实际呈现的效果是文字出现在子元素之间。
我们添加一段p标签文字试试看，此时body下的内容如下所示：
<div class="father">
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
</div>
<p>一段文字</p>
那为了避免这种网页错误，这里简单介绍三种方式：
- 第一种就是设置父元素的长宽
但是缺点就是长宽计算稍微错误还是造成子元素的出格 - 添加伪元素
.father::after{ content: ""; display: table; clear: both; }.father::after
表示在.father元素的内容末尾插入一个伪元素（不占用 HTML 结构）。
content: ""
伪元素必须设置content属性（即使是空字符串），否则不会生效。
display: table
将伪元素显示为表格（兼容性更好的块级元素），也可以写成display: block。
clear: both
清除该伪元素左右两侧的浮动，强制它出现在浮动元素的下方。 - 父元素添加属性
overflow:hidden; 此时的完整代码是: .father{ background-color: rgb(100, 225, 183); /* height: 200px; */ border: 10px solid rgb(72, 177, 177); overflow: hidden; }
2.7CSS定位
2.7.1相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS定位</title>
<style>
.box1{
height: 400px;
background-color: aqua;
}
.normal{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box-relative{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 50px; /* 距离左边框的距离 */
bottom: 50px; /* 距离下边框的距离 */
right:; /* 距离右边框的距离 */
top:; /* 距离上边框的距离 */
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="normal"></div>
<div class="box-relative"></div>
<div class="normal"></div>
<div class="box-relative"></div>
</div>
</body>
</html>
2.7.2绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS定位</title>
<style>
.normal{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2{
height: 400px;
background-color: yellow;
margin-bottom: 100px;
}
.box-absolute{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<h1>绝对定位</h1>
<div class="box2">
<div class="normal"></div>
<div class="box-absolute"></div>
<div class="normal"></div>
<div class="box-absolute"></div>
</div>
</body>
</html>
由于绝对定位脱离了文本流，所以位于box-absolute下的normal紫色块上移
2.7.3固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS定位</title>
<style>
.box-fixed{
width: 100px;
height: 100px;
background-color: brown;
position: fixed;
right: 0;
top: 300px;
}
</style>
</head>
<body>
<h1>固定定位</h1>
<div class="box-fixed"></div>
</body>
</html>
此时红方块就被固定在距离右边距0px，上边距300px的地方，并且怎么移动浏览器都固定在这
3.JavaScript
3.1JS的导入方式
JS有与CSS的导入方式相似不过JS就只用<script>标签即可，也是采用内联和外联，内联可以在<body>和<head>导入
文件结构如上图所示:
myScript文件内容如下：
console.log('Hello,这是外联样式');
导入代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS导入方式</title>
<script>
console.log('Hello,这是head标签的内联样式');
</script>
<script src="./myScript.js"></script>
</head>
<body>
<h1>JavaScript导入方式</h1>
<script>
console.log('Hello,这是body标签的内联样式');
</script>
</body>
</html>
输出内容可以在浏览器控制台中查看：
由此可见输出的优先级是看先后顺序而定的
除此之外弹窗也可以在<script>标签中设置
<script>
alert("你好,内联样式弹窗");
</script>
3.2JS基本语法
3.2.1变量与数据类型
现在变量的申明有三种方式
<script>
var a; /* 可作函数/全局 */
let b = 11; /* 仅块级作用域 */
const PI = 3.1415; /* 仅块级作用域 */
console.log(a,b,PI);
</script>
结果如下图：
但现在更流行使用let和const，因为var容易导致变量提升，例如如上结果图所示，a虽然没有定义，但依然被输出出了结果，说明JS不会将此视为错误，如果在实际函数中出现，容易导致函数出错，但系统不识别错误，并且var定义的a变量，可以后面再次赋值或是多次赋值，容易导致实际开发时不注意造成的错误产生。
值得注意的是null和undefined不一样，null是人为赋的一个空值，undefined则是被定义但没被赋值
3.2.2JS的控制语句
这里简单介绍判断语句和循环语句
实际上JS的这些语句与其他语言是差不多的，像JAVA，C++等，这里就简单写一下格式，各位读者如果感兴趣可以在浏览器自行运行或是可以向ai简单了解一下
- 判断语句（if……else is……else)
<script>
console.log('判断语句');
let number = 1;
if(number < 12 && number > 6){
alert('早上好');
} else if(number < 18 && number >= 12){
alert('下午好');
} else{
alert('晚上好');
}
</script>
- 循环语句（for）（while）
<script>
console.log('FOR循环');
for(let number = 1 ; number <= 11 ; number++){
console.log(number);
}
console.log('while循环');
let cen = 1;
while(cen <= 11){
console.log(cen);
cen++;
}
</script>
3.2.3函数
JS函数也与C++，C的函数大差不差，注意作用域别用混了，在函数内定义的变量只能在函数内使用。格式如下：
示例代码如下：
<script>
console.log('不传参示例');
function hello(){
console.log('Hello,wordl!');
}
hello(); /* 调用函数 */
console.log('传参示例');
function hello_params(name){
console.log('Hello,'+ name);
}
hello_params('tidal');
console.log('返回值示例');
function get_back(){
return 'Hello';
}
console.log(get_back);
console.log(get_back()+',tidal');
let GET = get_back();
console.log(GET);
</script>
3.3JS事件
简单举例点击和聚焦事件：
点击代码如下：
<body>
<button onclick="onclick_return()">这是一个点击触发事件按钮</button>
<script>
//点击事件
function onclick_return(){
alert('点击事件被触发');
}
</script>
</body>
聚焦代码如下：
<body>
<input type="text" onfocus="onfocus_return()" onblur="onblur_return()">
<script>
//聚焦事件
function onfocus_return(){
console.log("获得焦点");
}
//失焦事件
function onblur_return(){
console.log("失去焦点");
}
</script>
</body>
3.4DOM
翻译来说就是：
- DOM 是 HTML 的编程接口,是浏览器将 HTML 转换为 JavaScript 可操作的对象。
- 结构化表示：DOM 把整个 HTML 文档解析成一个 节点（Node）树，每个 HTML 元素、属性甚至文本都是一个节点。这也是DOM的核心（如
document、element、text）。 - 动态更新：通过 DOM API，可以动态修改 HTML、CSS、事件,可以用 JavaScript 增删改查网页内容
常见的获取元素方式有以上五种：
get：获取，Element：元素，By：通过
- getElementById：以id获取元素，id通常是唯一的，所以获取的元素也是唯一的
- getElementsByClassName：以类名获取元素，类一般不止一个，所以Element加s，并且后面要给索引
- getElementsByName：以名字组获取元素，相似于getElementsByClassName
- getElementsByTagName：以标签获取元素，相似于getElementsByClassName
- getElementsByNameNS：在普通HTML中几乎无用，主要用于XML/XHTML下返回所有name属性匹配元素
3.4.1ID选择器
<body>
<div id="box1">这是一个ID选择器标签</div>
<script>
//Id选择器
var element1 = document.getElementById('box1'); //选择id元素并且赋值给element1
console.log(element1); //输出变量element1
</script>
</body>
由于id是唯一的，所以获取元素就是唯一的，只会返回一个元素
3.4.2类选择器
<body>
<div class="box2">这是一个类选择器标签</div>
<div class="box2">这是第二个同类选择器标签</div>
<script>
//类选择器
var element2 = document.getElementsByClassName('box2'); //此时没加索引，所以会将所有box2类名元素全部赋值element2
var element3 = document.getElementsByClassName('box2')[0] //添加索引，此时会将box2第一个元素赋值给element3
console.log(element2); //返回一个组
console.log(element3); //返回一个确定的元素
</script>
</body>
这里的索引和C或JAVA等语言的索引相同，采用0开头为第一元素。name和tagname相似，就不一一介绍了。
- getElementsByName和getElementsByTagName
<body>
<div>这是一个普通的标签</div>
<div name="box3">这是一个名字选择器</div>
<script>
//标签选择器
var element4 = document.getElementsByTagName('div')[3];
console.log(element4);
//名字选择器
var element5 = document.getElementsByName('box3')[0];
console.log(element5);
</script>
</body>
4.练习--表格-增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格增删改</title>
<style>
table{
/* 表示占屏100%，不会导致缩小化或是全屏导致表格变形 */
width: 100%;
/* 表格边框合并，避免有缝隙造成不美观 */
border-collapse: collapse;
/* 增加上边距，与新建表格按钮隔开 */
margin-top: 20px;
}
th,td{
border: 2px solid #4a4949c5;
/* 表格的文本内容居中 */
text-align: center;
/* 内边距，表格格子大小变大 */
padding: 8px;
}
</style>
</head>
<body>
<!-- 标题居中 -->
<h1 style="text-align: center;">表格的增删改</h1>
<button>新建表格</button>
<table class="">
<tr><!--表头 -->
<th>姓名</th>
<th>联系方式</th>
<th>操作</th>
</tr>
<tr>
<td>tadil</td>
<td>1234567890</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</body>
</html>
至此HTML和CSS我们就已经完成，接下来是完善JS的功能。
以下是JS文件
新增功能：
// 新建表格功能
function addRow(){
// console.log('成功导入addPow函数');
var table = document.getElementById('table');
console.log(table); //成功查找到id为table的元素并且赋值给变量table
}
//获取插入元素的位置
var length = table.rows.length; //获取变量table的行数
console.log(lenghts);
// 实际上获取的是表格的行数，但是这里返回的是2，实际上可以之间引用，因为从索引来看2是没被占用的
//插入行节点
var newRow = table.insertRow(length); //此时插入的是一整行，还没有分列
console.log(newRow);
//插入列节点对象
//插入三行，并且分别套入变量
var nameCol = newRow.insertCell(0)
var phoneCol = newRow.insertCell(1)
var actionCol = newRow.insertCell(2)
//修改节点文本
nameCol.innerHTML = '未命名';
phoneCol.innerHTML = '未填写联系方式';
actionCol.innerHTML = '<button>编辑</button> <button>删除</button>'
完整的新增表格代码如下：
// 新建表格功能
function addRow(){
// console.log('成功导入addPow函数');
var table = document.getElementById('table');
// console.log(table); //成功查找到id为table的元素并且赋值给变量table
//获取插入元素的位置
var length = table.rows.length; //获取变量table的行数
// console.log(length);
// 实际上获取的是表格的行数，但是这里返回的是2，实际上可以之间引用，因为从索引来看2是没被占用的
//插入行节点
var newRow = table.insertRow(length); //此时插入的是一整行，还没有分列
console.log(newRow);
//插入列节点对象
//插入三行，并且分别套入变量
var nameCol = newRow.insertCell(0)
var phoneCol = newRow.insertCell(1)
var actionCol = newRow.insertCell(2)
//修改节点文本
nameCol.innerHTML = '未命名';
phoneCol.innerHTML = '未填写联系方式';
actionCol.innerHTML = '<button>编辑</button> <button>删除</button>'
}
删除功能：
首先要在<table>标签下的删除按钮添加删除按钮下的事件：
此时this会自动锁定点击的DOM元素对象，而后导入删除函数
这里注意新增表格函数的删除按钮也要添加事件
//删除表格功能
function deleteRow(hang){ //这里需要一个变量，此变量为行数
//尝试打印hang，此时hang变量被带入this值
console.log(hang);
}
得到效果
我们现在已经锁定了删除按钮，如果我们想删除行，其实就是删除’删除按钮‘所在的<tr>标签下的内容，也就是删除按钮的父类（td）的父类（tr）
//此时我们已经可以锁定删除按钮，要删除行，就是删除‘删除按钮’的父类的父类
var row = hang.parentNode.parentNode; //此时row已经被赋值了hang的父类的父类，也就是th标签
console.log(row);
此时我们已经锁定了要删除的行，但是本身不能删除本身，所以我们要回到锁定元素的父类，再删除该元素
//因为不能删除本身，所以我们回到元素的父类再删除本身元素，也就是再删除父类的子类
row.parentNode.removeChild(row); //导入的元素就是要删除的行，也就是前面被赋值的row
此时删除功能完善，完整代码如下：
//删除表格功能
function deleteRow(hang){ //这里需要一个变量，此变量为行数
//尝试打印hang，此时hang变量被带入this值
// console.log(hang);
//此时我们已经可以锁定删除按钮，要删除行，就是删除‘删除按钮’的父类的父类
var row = hang.parentNode.parentNode; //此时row已经被赋值了hang的父类的父类，也就是th标签
// console.log(row);
//因为不能删除本身，所以我们回到元素的父类再删除本身元素，也就是再删除父类的子类
row.parentNode.removeChild(row); //导入的元素就是要删除的行，也就是前面被赋值的row
}
编辑功能：
//编辑表格功能
function editRow(hang){ //这里依然需要一个变量代表hang
//锁定要编辑的行,这里与删除功能锁定行是一样的，只不过这里的hang的编辑按钮
var row = hang.parentNode.parentNode; //此时row已经被赋值了hang的父类的父类，也就是th标签
}
//设置名字的变量，和电话的变量
var name = row.cells[0]; //row的第一个列，也就是锁定行的名字列
var phone = row.cells[1]; //同理锁定改行的电话列
//设置导入名字和电话的变量
var inputName = prompt("请输入名字"); //这里prompt是调用浏览器自带的窗口，输入值
var inputPhone = prompt("请输入联系方式");
//将获得值的inputName和inputPhon分别导入name和phone
name.innerHTML = inputName;
phone.innerHTML = inputPhone;
此时功能已经完整别忘了添加编辑按钮的事件
完整代码
编辑功能完整代码如下：
//编辑表格功能
function editRow(hang){ //这里依然需要一个变量代表hang
//锁定要编辑的行,这里与删除功能锁定行是一样的，只不过这里的hang的编辑按钮
var row = hang.parentNode.parentNode; //此时row已经被赋值了hang的父类的父类，也就是th标签
//设置名字的变量，和电话的变量
var name = row.cells[0]; //row的第一个列，也就是锁定行的名字列
var phone = row.cells[1]; //同理锁定改行的电话列
//设置导入名字和电话的变量
var inputName = prompt("请输入名字"); //这里prompt是调用浏览器自带的窗口，输入值
var inputPhone = prompt("请输入联系方式");
//将获得值的inputName和inputPhon分别导入name和phone
name.innerHTML = inputName;
phone.innerHTML = inputPhone;
}
5.进阶-移动端窗口
在PC端中，网页可以切换移动端和PC端。例如如图的小米官网，打开F12：
那我们如何在自己设置的网页中布局这种效果不至于切换后结构出错呢：
在我们前面使用HTML时，有一段默认代码
这一段的作用就是保证了网页在不同设备也可以保持等比例的宽度，不至于被缩放
在移动端布局时，我们常用的是rem而不是前面之前用的px。px是像素基本单位是绝对的长度，设置是多少那么不管怎么改页面比例都是那个长度，而rem是相对长度比较的是html根元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端布局</title>
<style>
.box1-px{
width: 300px;
height: 100px;
background-color: violet;
margin-bottom: 50px;
}
.box2-rem{
width: 5rem;
height: 3rem;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1-px"></div>
<div class="box2-rem"></div>
</body>
</html>
此时我们发现虽然box2设置了宽占一半也就是5rem但是界面并没有占50%，这是因为rem比较的是html根元素长度，而html根元素的长度我们还没设置，在<head>标签中的<style>添加
html{
font-size: 100px;
}
但此时html的大小是固定值，所以就算改设备box2-rem也是固定值，所以这里我我们要给<html>下的font-size设置一个随着设备界面大小变化而动态变化的值
首先我们要锁定html元素
function resethtmlfontsize(){
//根据设备宽度计算，HTML标签的font-size的属性值，设置成设备的十分之一
//document：文件，documentElement:文档元素。实际上也就是HTML元素
console.log(document.documentElement);
}
成功锁定HTML，这时对它进行赋值修改即可
<script>
function resethtmlfontsize(){
//根据设备宽度计算，HTML标签的font-size的属性值，设置成设备的十分之一
//document：文件，documentElement:文档元素。实际上也就是HTML元素
// console.log(document.documentElement);
//screen：屏幕，'px'为单位
document.documentElement.style.fontSize = screen.width / 10 + 'px';
}
resethtmlfontsize();
</script>
此时代码已经完成，但浏览器切换设备时不会自动刷新界面将HTML宽度进行更新，所以我们还要自己添加一个事件，当设备宽度发生变化时触发事件从而触发函数
window.onresize = resethtmlfontsize;
完整代码
完整代码如下：
function resethtmlfontsize(){
//根据设备宽度计算，HTML标签的font-size的属性值，设置成设备的十分之一
//document：文件，documentElement:文档元素。实际上也就是HTML元素
// console.log(document.documentElement);
//screen：屏幕，'px'为单位
document.documentElement.style.fontSize = screen.width / 10 + 'px';
}
resethtmlfontsize();
//绑定事件
//onresize就是当窗口大小发生变化时触发事件
window.onresize = resethtmlfontsize;
// 这里windows.onresize = resethtmlfontszie();是错误写法
// 因为这样写的话相当于将resethtmlfontszie()的返回值赋给window.onresize
// 但resethtmlfontszie()没有返回值，会返回undefined,相当于window.onresize = undefined,事务监听就被取消了
</script>
6.Flex弹性布局
用于在容器中的子元素弹性的进行排列，可以配合rem处理尺寸，适应不同设备
Flex的主轴叫：main axis，主轴的起点叫：main start，终点叫：mian end
交叉轴叫：cross axis，交叉轴的起点叫：cross start，终点叫：cross end
项目叫：flex item，主轴叫：main size，交叉轴交：cross size
FIex容器有六大属性
1.flex-direction
确定主轴的方向，也就是项目的方向
2.flex-wrap
当主轴一行放不下时，我们就要设置主轴的换行方式
3.justify-content
设置主轴项目的对齐方式，与word的对齐相似
不过值得注意的是最后一种：space-around，这里项目和项目之间会有两倍距离，所以比起项目和边界的距离，项目和项目的距离会更远
4.align-items
设置项目在交叉轴的对其方式
5.align-content
设置项目在多根轴线的对齐方式
6.flex-flow
flex-flow 是 CSS Flexbox 布局中的一个 复合属性，用于同时设置 flex-direction 和 flex-wrap 两个子属性
构建一些容器方块
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局</title>
<style>
html{
font-size: 10px;
}
.container{
display: flex; /*设置flex形式布局*/
height: 40rem;
background-color: aquamarine;
}
.item{
width: 20rem;
font-size: 10rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<!-- 这里可以输入".item*6{$}"进行快速创建 -->
<div class="item" style="background-color: rgb(248, 85, 85);">1</div>
<div class="item" style="background-color: yellowgreen;">2</div>
<div class="item" style="background-color: blue;">3</div>
<div class="item" style="background-color: rgb(237, 237, 237);">4</div>
<div class="item" style="background-color: pink;">5</div>
<div class="item" style="background-color: goldenrod">6</div>
</div>
</body>
</html>
前三个属性都易理解，这边只简单介绍一下align-items和align-content
- align-items
在<style>标签下的.container下添加，align-items: center;，此时项目按照交叉轴的中点对称，得到：
align-items:start和align-items:baseline的区别在于，baseline会优先将文本对其不考虑项目高度，智能按内容基线对齐，精细排版；而start强制物理顶部对齐，简单粗暴。例如
在align-items:start下的
在align-items:baseline下是：
- align-contenr
前面的举例都是只有一个交叉轴，但是align-content至少需要两个，所以此时就需要分行，在<style>标签下添加flex-wrap: wrap;
此时是align-items:start状态下，因为有多个交叉轴，每行都会按此行的中心对齐，此时就有了两个交叉轴，如果我们这时想让它完全居中对齐，就可以使用align-content: center了
但此时默认的是垂直轴居中，如果还想水平居中，则可以加入：justify-content: center;
此时style的完整代码为：
<style>
html{
font-size: 10px;
}
.container{
display: flex; /*设置flex形式布局*/
height: 40rem;
background-color: aquamarine;
flex-wrap: wrap;
/* align-items:start */
/* align-items:baseline; */
align-content: center; /* 多交叉轴的垂直居中 */
justify-content: center; /* 水平居中 */
}
.item{
width: 20rem;
font-size: 10rem;
text-align: center;
}
</style>
扫一扫
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
