前端HTML+CSS+JS速成笔记
HTML
超文本标记语言。
单标签与双标签的区别
单标签用于没有内容的元素，双标签用于有内容的元素。
HTML文件结构
告诉浏览器这还是一个 Html 文件：
<!DOCTYPE html>
Html文件的范围：
<html>
...
</html>
Html 文件的头：
<head>
...
</head>
实际显示在浏览器页面的内容：
<body>
...
</body>
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>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<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>
<h1>table row</h1>
<h1>table data</h1>
<h1>table header</h1>
<table border = "1">
<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>
<tr>
<td>元素 31</td>
<td>元素 32</td>
<td>元素 33</td>
</tr>
</table>
</body>
</html>
HTML 属性
基本语法：
<开始标签 属性名 = “属性值”>
每个 HTML 元素可以有不同的属性。
属性名称不区分大小写，属性值区分大小写。
| 属性 | 描述 |
|---|---|
| class | 为 HTML 元素定义一个或多个类名（类名从样式文件引入） |
| id | 定义元素唯一的 id |
| style | 规定元素的行内样式 |
<!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/XiaoMo247">这是一个超链接</a>
<br>
<a href="https://www.cnblogs.com/XiaoMo247" target="_blank">这是第二个超链接</a>
<hr>
<img src="https://haowallpaper.com/link/common/file/previewFileImg/16445290917318016" alt="该图片无法显示" width="1100" height="618">
</body>
</html>
HTML 区块
- 块元素（Block）
- 行内元素（inline）
<!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>
<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 id="content">
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
</div>
<span>这是第 1 个 span 标签</span>
<span>这是第 2 个 span 标签</span>
<span>这是第 3 个 span 标签</span>
<span>这是第 4 个 span 标签</span>
<hr>
<span>链接点击这里 <a href="#">链接</a> </span>
</body>
</html>
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>
<label for = "username">用户名：</label>
<input type="text" placeholder="请输入内容">
<br>
<br>
<label for = "pwd">密码：</label>
<input type="text" value="请输入内容">
<br>
<br>
<label>性别：</label>
<input type="radio" name = "gender"> 男
<input type="radio" name = "gender"> 女
<input type="radio" name = "gender"> 其他
<br>
<br>
<label>爱好：</label>
<input type="checkbox" name = "hobby"> 唱歌
<input type="checkbox" name = "hobby"> 跳舞
<input type="checkbox" name = "hobby"> RAP
<input type="checkbox" name = "hobby"> 篮球
<br>
<br>
<input type="submit" value="上传">
</form>
<form action="#"></form>
</body>
</html>
CSS
层叠样式表。
控制页面的外观和样式。
选择器 {
属性1: 属性值1;
属性2: 属性值2;
}
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>
<link rel="stylesheet" href="./css/style.css">
<style>
p {
color: blue;
font-size: 26px;
}
h2 {
color: green;
}
</style>
</head>
<body>
<p>这是一个应用了CSS样式的文本</p>
<h1 style="color: red;">这是一个一级标题，应用内联样式</h1>
<h2>这是一个二级标题，应用内部样式</h2>
<h3>这是一个三级标题，应用外部样式</h3>
</body>
</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>
<style>
/* 元素选择器 */
h2 {
color: aqua;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#header {
font-size: 35px;
}
/* 通用选择器 */
* {
font-family: 'KaiTi';
font-weight: bolder;
}
/* 子元素选择器 */
.father > .son {
color: yellowgreen;
}
/* 后代选择器 */
.father p {
color: brown;
font-size: larger;
}
/* 相邻元素选择器 */
h3 + p {
background-color: red;
}
/* 伪类选择器 */
#element:hover{
background-color: blueviolet;
}
/*
选中第一个子元素 :first-child
:nth-child()
:active()
*/
/* 伪元素选择器
::after
::before
*/
</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>这是一个后代选择器示例</p>
</div>
</div>
<p>这是一个普通的 p 标签</p>
<h3>这是一个相邻兄弟选择器示例</h3>
<p>这是另一个 p 标签</p>
<h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>
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: 100px;
}
.inline {
background-color: brown;
}
.inline-block {
width: 400px;
}
.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';"> 这是一个 font 复合属性示例</h1>
<p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<div class = "block">这是一个块级元素</div>
<span class = "inline">这是一个行内元素</span>
<img src="https://haowallpaper.com/link/common/file/previewFileImg/15764837979099456" alt="" class = "inline-block">
<h2>disply</h2>
<div class="div-inline">这是一个转化成行内元素的 div 标签</div>
<span class = "span-inline-block">这是一个转化成行内块元素的 span 标签</span>
</body>
</html>
盒子模型
- margin(外边距) - 清除边框外的区域，外边距是透明的。
- border(边框) - 围绕在内边距和内容外的边框。
- padding(内边距) - 清除内容周围的区域，内边距是透明的。
- content(内容) - 盒子的内容，显示文本和图像。
<!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>
.board-demo {
background-color: yellow;
width: 300px;
height: 200px;
/* border-style: solid;
border-width: 10px;
border-color: blueviolet; */
border-left: 10px solid brown;
}
.demo {
background-color: aqua;
display: inline-block;
border: 5px solid yellowgreen;
padding: 50px;
margin: 40px;
}
</style>
</head>
<body>
<div class = "demo">XiaoMo247</div>
<div class="board-demo">这是一个边框示例</div>
</body>
</html>
浮动
网页布局有以下五种：
- 标准流
- 浮动
- 定位
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>浮动</title>
<style>
.father {
background-color: aquamarine;
/* height: 150px; */
border: 3px solid brown;
/* overflow: hidden; */
}
.father::after {
content: "";
display: table;
clear: both;
}
.left-son {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right-son {
width: 100px;
height: 100px;
background-color: yellow;
float:right;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
</div>
<div>这是一段文本是一段文本是一段文本是一段文本是一段文本</div>
</body>
</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 {
height: 350px;
background-color: aqua;
}
.box-normal {
height: 100px;
width: 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;
margin-bottom: 300px;
}
.box-absolute {
height: 100px;
width: 100px;
background-color: yellowgreen;
position: absolute;
left: 120px;
}
.box-fixed {
width: 100px;
height: 100px;
background-color: brown;
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>
</body>
</html>
JavaScript
javascript 是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。
作为一种客户端脚本语言，javascript 可以直接嵌入 HTML，并在浏览器中执行。
JavaScript的作用
- 客户端脚本
- 网页开发
- 后端开发
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("Hello, 内联样式弹窗")
</script>
</body>
</html>
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;
console.log(x, y, PI);
let name = 'HaHa';
console.log(name);
let empty_val = null;
console.log(empty_val);
let age = 18;
if (age > 18) {
console.log('你已经成年了');
} else {
console.log('未成年');
}
let time = 22;
if (time < 12) {
alert('上午好')
} else if (time < 18) {
alert('下午好')
} else {
alert('晚上好')
}
console.log('For 循环')
for(let i = 0; i < 10; i ++) {
console.log(i);
}
let count = 1;
while(count <= 10) {
console.log(count);
count ++;
}
for(let i = 0; i < 10; i ++) {
if(i == 2) {
continue;
} else if (i == 4) {
break;
}
console.log(i);
}
</script>
</body>
</html>
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, World!');
}
Hello();
function Hello_return() {
return 'Hello haha!';
}
let a = Hello_return();
console.log(a);
</script>
</body>
</html>
事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
事件绑定
HTML属性DOM属性addEventListrner方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件处理</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>
DOM
当网页被加载时，浏览器会创建页面的文档对象模型，也就是 DOM(Document Object Model)。
DOM 为节点树提供一个编程的接口 DOM API,开发者可以通过 js 来操作节点树。
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
您将在本教程的下一章中学到更多有关属性的知识。
<!DOCTYPE html>
<html lang="en">
<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 = '修改 ID 选择器标签文本内容';
element_class.innerText = '修改后的类选择文本';
element_tag.style.color = 'red';
element_tag.style.fontSize = '20px';
//DOM 属性绑定事件
let element_button = document.getElementsByTagName('button')[0];
console.log(element_button);
// element_button.onclick = function() {
// alert("DOM 属性 按键触发");
// }
element_button.addEventListener('click', click_event);
function click_event() {
alert('通过 addEventListener 触发事件');
}
</script>
</body>
</html>
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;
}
th, td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
th {
background-color: #ddd;
}
button {
margin-left: 5px;
}
</style>
</head>
<body></body>
<h1 style="text-align: center;">表格的增删改查</h1>
<button onclick="addRow()">新增数据</button>
<table id = "table">
<tr>
<th>姓名</th>
<th>联系方式</th>
<th>操作</th>
</tr>
<tr>
<td>XiaoMo</td>
<td>123456666</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() {
//获取插入的位置
let tabel = document.getElementById('table');
//获取插入位置
let length = tabel.rows.length;
//插入行节点
let newRow = tabel.insertRow(length);
//插入列几点对象
let nameCol = newRow.insertCell(0);
let phoneCol = newRow.insertCell(1);
let 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) {
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号