前端入门跟练记录
跟练的视频如下，感兴趣的话可以点来看看，up主讲的非常清楚易懂
前端入门视频
1.常见文本标签
<!DOCTYPE html>
<!--文本格式-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 练习</title>
</head>
<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<p>这是一个段落标签</p>
<p>修改段落格式：<b>加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>
<ul>
<li>无序列表元素 1</li>
<li>无序列表元素 2</li>
<li>无序列表元素 3</li>
</ul>
<ol>
<li>有序列表元素 1</li>
<li>有序列表元素 2</li>
<li>有序列表元素 3</li>
</ol>
<table border="1">
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>元素 1</td>
<td>元素 2</td>
<td>元素 3</td>
</tr>
<tr>
<td>元素 11</td>
<td>元素 12</td>
<td>元素 13</td>
</tr>
<tr>
<td>元素 21</td>
<td>元素 22</td>
<td>元素 23</td>
</tr>
</table>
</body>
</html>
2.HTML属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML属性练习</title>
</head>
<body>
<a href="https://www.cnblogs.com/F1C1">
这是一个超链接
</a><!--我悄悄在这里放上自己简陋的博客应该没有人发现吧-->
<br>
<a href="https://www.cnblogs.com/F1C1" target="_blank">
这是第二个超链接
</a>
<hr>
<img src="https://img1.baidu.com/it/u=2035967561,4001596026&fm=253&fmt=auto&app=138&f=JPEG?w=374&h=541" alt="该图片无法显示" width="300" height="400">
</body>
</html>
3.HTML区块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="nav"><!--块级标签容器，用于组织结构与布局-->
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
<div class="context"><!--.context可以快捷格式化-->
<h1>文本标题</h1>
<p>文本内容1</p>
<p>文本内容2</p>
<p>文本内容3</p>
<p>文本内容4</p>
<p>文本内容5</p>
</div>
<span>这是第一个span标签</span><!--内联样式化文本，给文本的一部分样式化或者标记-->
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
<span>这是第四个span标签</span>
<span>了解详情点这里<a href="#">链接</a></span>
</body>
</html>
<!--使用以上两个标签的时候通常是与CSS和JS一起使用的-->
4.HTML表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML表单</title>
</head>
<body>
<form action="#"><!--选择向何处发送提交数据-->
<label for="username">用户</label>
<input type="text" placeholder="请输入用户名" id="username">
<br>
<br>
<label for="pwd">密码</label>
<input type="password" placeholder="请输入密码" id="pwd">
<br>
<br>
<input type="radio" name="gendar">男<!--name值相同才可以单选-->
<input type="radio" name="gendar">女
<input type="radio" name="gendar">其他
<br>
<br>
<input type="checkbox" name="hobby">社交
<input type="checkbox" name="hobby">IT
<input type="checkbox" name="hobby">健身
<input type="checkbox" name="hobby">吉他
<input type="checkbox" name="hobby">做菜
<br>
<br>
<input type="submit" value="上传数据">
</form>
</body>
</html>
5.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>
<style>
p {
color: blue;
font-size: 26px;
}
h2 {
color: green;
}
</style>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<p>这是一段应用了CSS样式的文字</p>
<h1 style="color: red;">这是一段应用了CSS样式的文字，使用内联样式</h1>
<h2>这是一段应用了CSS样式的文字，使用内部样式</h2>
<h3>这是一段应用了CSS样式的文字，使用外部样式</h3>
</body>
</html>
6.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>
<style>
/* 元素选择器 */
h2 {
color: aqua;
}
/* 类选择器 */
.highlight {
background-color: blueviolet;
}
/* ID选择器 */
#header {
font-size: 35px;
}
/* 通用选择器 */
* {
font-family: KaiTi;
font-weight: bolder;
}
/* 子元素选择器 */
.father > .son{
color: yellowgreen;
}
/* 后代选择器 */
.father p{
color: brown;
}
/* 后代选择器包括子代，而子代不包括后代 */
/* 相邻兄弟选择器 */
h3 + p{
background-color: aqua;
}
/* 伪类选择器 */
#element:hover{
background-color: blue;
}
</style>
</head>
<body>
<h1>不同类型的CSS元素选择器</h1>
<h2>这是一个元素选择器</h2>
<h3 class="highlight">这是一个类选择器</h3>
<h3>这是另一个类选择器</h3>
<h4 id="header">这是一个ID选择器</h4>
<div class="father">
<p class="son">这是一个子元素选择器</p>
<div>
<p class="grandson">这是一个后代选择器</p>
</div>
</div>
<p>这是一个普通的p标签</p>
<h3>这是一个相邻兄弟选择器示例</h3>
<p>这是另一个p标签</p>
<p id="element">这是一个伪类选择器</p>
</body>
</html>
7.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>
<style>
/* 块元素可以调整宽高 */
.block{
background-color: aqua;
width: 150px;
height: 50px;
}
/* 行内元素不能调整宽高，而是由内容决定宽高 */
.inline{
background-color: brown;
}
/* 行内块元素和块元素一样可以调整宽高 */
.inline-block{
width: 170px;
/* 当仅仅放上width时会只按照比例调整大小，
而同时有width和height则会精准调整 */
height:250px
}
.div-inline{
display: inline;
background-color: aquamarine;
}
.span-inline-block{
display: inline-block;
background-color: blueviolet;
width: 300px;
}
</style>
</head>
<body>
<h1 style="font: bolder 50px 'KaiTi';">这是一个复合属性示例</h1>
<p style="line-height: 50px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<div class="block">这是一个块元素</div>
<span class="inline">这是一个行内元素</span>
<img src="https://img1.baidu.com/it/u=2035967561,4001596026&fm=253&fmt=auto&app=138&f=JPEG?w=374&h=541" alt="" class="inline-block">
<img src="https://img1.baidu.com/it/u=2035967561,4001596026&fm=253&fmt=auto&app=138&f=JPEG?w=374&h=541" alt="" class="inline-block">
<img src="https://img1.baidu.com/it/u=2035967561,4001596026&fm=253&fmt=auto&app=138&f=JPEG?w=374&h=541" alt="" class="inline-block">
<!-- display样式可以实现三种元素间的相互转换 -->
<h1>display</h1>
<div class="div-inline">这是一个转换成行内元素的div标签</div>
<span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>
8.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>
<style>
.demo{
display: inline-block;
background-color: aqua;
border: 3px yellowgreen solid;
/* border是复合属性 */
padding: 50px;
/* 内边距padding表示文本与边框之间的距离 */
margin: 40px;
/* 外边距margin表示边框与边界的距离 */
}
.border-demo{
background-color: yellow;
width: 300px;
height: 200px;
/* 遵循上右下左的顺序，即顺时针的顺序进行赋值 */
/* border-width: 0 0 0 15px;
border-style: solid;
border-color: brown; */
border-left: 15px brown solid;
/*只对左边框进行设定
这个也是复合属性 */
}
</style>
</head>
<body>
<div class="demo">B站搜索罗大富</div>
<div class="border-demo">这是一个边框示例</div>
</body>
</html>
9.浮动
<!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: aquamarine;
border: 3px red solid;
overflow: hidden;
/* overfolow:hidden可以支撑父类
在父类没有高度发生坍塌的时候可以起到骨架的作用 */
}
.left-son{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.right-son{
width: 100px;
height: 100px;
background-color: greenyellow;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
</div>
<p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body>
</html>
10.定位
<!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{
height: 350px;
background-color: aqua;
}
.box-normal{
width: 100px;
height: 100px;
background-color: purple;
}
.box-relative{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
/* 相对定位，还在文档流中 */
left: 120px;
top: 40px;
/* 这里的上下左右都是向对于那一边进行偏移 */
}
.box2{
height: 350px;
background-color: yellow;
}
.box-absolute{
height: 100px;
width: 100px;
background-color: yellowgreen;
position: absolute;
/* 绝对定位，脱离了文档流
其下面的元素会自动上浮 */
left: 120px;
}
.box-fixed{
background-color: brown;
height: 100px;
width: 100px;
position: fixed;
right: 0;
top: 300px;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="box-normal"></div>
<div class="box-relative"></div>
<!-- 相对定位 -->
<div class="box-normal"></div>
</div>
<h1>绝对定位</h1>
<div class="box2">
<div class="box-normal"></div>
<div class="box-absolute"></div>
<!-- 绝对定位 -->
<div class="box-normal"></div>
</div>
<h1>固定定位</h1>
<div class="box-fixed"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
11.JS导入方式
<!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="./JS/myscript.js"></script>
</head>
<body>
<h1>JavaScript导入方式</h1>
<script>
console.log("Hello,body标签的内联样式");
alert("你好，内联样式弹窗")
</script>
</body>
</html>
12.JS的基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS基础语法</title>
</head>
<body>
<script>
var x;
let y = 5;
const PI = 3.14;
// 现代JS中，尽量避免使用var
// 而常选择let和const
console.log(x,y,PI);
let name = "如花"
console.log(name);
let empty_value = null
console.log(empty_value);
// undefined和null的区别
// undefined表示变量被声明，但是还未被赋值，将来可能被赋值
// null则已经将变量赋值为空
let age = 18
if (age>=18) {
console.log("你已经成年了");
}else {
console.log("你还未成年")
}
// let time = 18
// if (time<12){
// alert("早上好")
// }else if (time<18){
// alert("中午好")
// }else {
// alert("晚上好")
// }
console.log("for循环")
// 分别对应初始化表达式、循环条件、迭代器
// 注意这里各部分之间要使用;进行分隔
for (let i = 1;i<=10;i++) {
console.log(i)
}
console.log("while循环")
let count = 1
while(count<=10){
console.log(count)
count++
}
// for循环和while循环主要区别：
// for循环自带迭代器，while循环不自带迭代器
// 循环关键字
for(var i=1;i<7;i++){
if (i == 2){
continue
}
if (i == 4){
break
}
console.log(i)
}
</script>
</body>
</html>
13.JS函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS函数</title>
</head>
<body>
<script>
function hello(){
console.log("hello")
}
hello();
function hello_with_return(){
return "hello,world"
}
let a = hello_with_return();
console.log(a);
console.log(hello_with_return());
function hello_with_params(name){
console.log("Hello,"+name)
}
hello_with_params("如花")
// 作用域分为全局作用域和局部作用域
// 全局在函数外声明变量，局部在函数内声明变量
</script>
</body>
</html>
14.JS事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS函数</title>
</head>
<body>
<!-- 事件包括：点击、获取焦点、失去焦点 -->
<button onclick="click_event()">这是一个点击事件按钮</button>
<!-- 注意填写函数的时候要把函数后面的括号加上！ -->
<input type="text" onfocus="focus_event()" onblur="blur_event()">
<script>
// 点击事件
function click_event(){
alert("点击事件触发了")
}
// 聚焦事件
function focus_event(){
console.log("获取焦点")
}
// 失去焦点事件
function blur_event(){
console.log("失去焦点")
}
</script>
</body>
</html>
15.JS DOM
<!DOCTYPE html>
<html lang="en">
<!-- 每个HTML文档和XML文档都可以被视为文档树
DOM节点也就是文档节点是我们整个文档的根节点
DOM的作用也就是为整个文档提供编程接口
也就是DOM API
文档中还包括元素节点、属性节点等等 -->
<!-- DOM也理解为编程中的面向对象编程 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS DOM</title>
</head>
<body>
<div id="box1">这是一个ID选择器标签</div>
<div class="box2">这是一个类选择器标签</div>
<div>普通的div标签</div>
<button>点击按钮</button>
<script>
let element_id = document.getElementById("box1")
console.log(element_id)
let element_class = document.getElementsByClassName("box2")[0]
// 这个会获取到一个数组，所以要添加索引值
console.log(element_class)
let element_tag = document.getElementsByTagName("div")[2]
console.log(element_tag)
element_id.innerHTML = '<a href="#">跳转链接</a>'
// 注意innerHTML是属性，而不是函数
// 所以在后面不能加上括号
// innerHTML会解析修改内容是不是HTML格式
element_class.innerText = '<a href="#">跳转链接</a>'
// innerText则会把内容当成纯文本进行处理
element_tag.style.fontSize = "20px"
element_tag.style.color = "red"
// DOM属性绑定对象
element_button = document.getElementsByTagName("button")[0]
console.log(element_button)
// element_button.onclick = function(){
// alert("DOM属性 按键触发")
// }
element_button.addEventListener('click',function(){
alert("通过 addEventListener 触发按键")
})
</script>
</body>
</html>
16.JS DOM节点操作
.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>
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
/* margin表示外表示 */
}
th,td{
border: 1px gray solid;
text-align: center;
padding: 8px;
/* padding表示内边距 */
}
/* 使按钮间保持间距 */
button{
margin-left: 5px;
}
th{
background-color:#ddd;
/* #ddd属于十六进制颜色表达方式
全称是#dddddd */
}
</style>
</head>
<body>
<h1 style="text-align: center;">表格的增删改查</h1>
<button onclick="addRow()">新增数据</button>
<table id="table">
<tr>
<th>姓名</th>
<th>联系方式</th>
<th>操作</th>
</tr>
<tr>
<td>罗大富</td>
<td>12345678910</td>
<td>
<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>
</td>
</tr>
</table>
<script src="./js/table.js"></script>
</body>
</html>
.js文件
// 新增数据函数
function addRow(){
// 获取table标签内容
let table = document.getElementById("table")
// console.log(table)
// 获取插入的位置
let length = table.rows.length;
// console.log(length)
// 插入行节点
let 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 onclick='editRow(this)'>编辑</button><button onclick='deleteRow(this)'>删除</button>"
}
// 删除数据函数
function deleteRow(button){
// console.log(button)
let row = button.parentNode.parentNode;
console.log(row) ;
row.parentNode.removeChild(row);
}
// 编辑数据函数
function editRow(button){
console.log(button)
let row = button.parentNode.parentNode;
let name = row.cells[0]
let phone = row.cells[1]
let inputName = prompt("请输入名字：")
let inputPhone = prompt("请输入联系方式:")
name.innerHTML = inputName
phone.innerHTML = inputPhone
}
浙公网安备 33010602011771号