-
后端的前段基础
1CSS 与JAVA Script，HTML的功能
-
HTML ： 结构
-
CSS ： 样式- 1
-
JavaScript ： 行为
如果用人来打比方。HTML像是身体的各个器官，css的功能就是把它组装成一个人， JavaScript的功能就是让它有一定的行动能力，能动起来。
1HTML
超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编程语言。
关于VS Code快捷键
设置：文件->首选项->设置（大小、是否换行word wrap)
创建文件、创建文件夹、重命名和别除
ctrl+s:保存
ctrl+a:全选s
ctrl+x、ctrl+c、ctrl+v:剪切、复制、粘贴
ctrl+Z、ctrl+y:撤销、前进
shift+end:从头选中一行
shift+home:从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行
tab:向后缩进
tab+shift:向前缩进
多光标：alt+鼠标左键
ctr1+d:选则相同元素的下一个2初始代码（！+tab）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">s <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页的最上面title> head> <body> 显示网页内容的区域 body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
3注解
- 1
4标题与段落
h标签
p标签DOCTYPE html> <html lang="en"> <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> head> <body> <h1>题目h1> <h2>基本信息h2> <p>内容p> <h2> 经历 h2> <p>内容p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
5文本修饰标签
<strong>： 表示强调，会对文本进行加粗 <em>： 表示强调，会对文本进行斜体 <sub>、<sup>： 下标文本、上标文本 <del>、<ins>： 删除文本、插入文本- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <p> <strong>this is a very importent txtstrong> <em>这会让他变的倾斜em> <sub>downsub> <sup>onsup> <p> a <sup>2sup>+b <sup>2sup>=c <sup>2sup> p> <p> 删除文本类似于<del>原价del>有下划线文本类似于<ins>现价ins> p> p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
6图片标签
： 图片
src
alt
title
width 、heighDOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <img src="https://img2.utuku.imgcdc.com/640x0/toutiao/20220717/027dd9ca-2019-4a37-8d81-1818ec5466c4.jpg" alt="易烊千玺"title="这是一张图片的提示信息，鼠标在图片上时可以显示出来" width="300" height="300"> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
7引入文件的地址路径
相对路径
. 在路径中表示当前路径
… 在路径中表示上一级路径
绝对路径
一种是本地决定路径，一种是网络绝对路径，他们都代表了这个文件在本地或者网络中的具体位置。DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <img src="../94510856b43f16d7e4fc17e15790211d.jpeg" alt=""> <img src="./1656558089464.jpg" alt=""> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
8跳转链接
标签
href
target
标签DOCTYPE html> <html lang="en"> <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>Documenttitle>head> <body> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> <a href="http://www.baidu.com" target="_blank">百度a> body> html> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
9跳转锚点
实现一 #号 id属性
实现二 #号 name属性- 1
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <a href="#html">HTMLa> <a href="#css">CSSa> <a href="#javaspace">javaspscea> <h2 id="html">html本标记语言h2> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <h2 id="css">css超文本标记语言h2> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <a name="javaspace">a> <h2 >javaspcce超文本标记语言h2> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> <p>模拟段落p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
10特殊符号
应用于输出无法输出的字符，或者会产生奇异的代码片段。
特殊字符 含义 特殊字符代码 空格符 版权 © 注册商标 ® < 小于号 &it > 大于号 > & 和号 & 人民币 ¥ 摄氏度 ° DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <p> <html> p> <p> hellow word p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
11无序列表
- 、
- ：列表的最外层容器、列表项 注：ul和li必须是组合出现的，他们之间是不能有其他标签的 type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <ul> <li><a href="#"> <strong>onestrong> onea>li> <li><a href="#">twoa>li> <li><a href="#">threea>li> <li><a href="#">forea>li> ul> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
12有序列表
- 、
- ：列表的最外层容器、列表项 注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。 type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <ol type="a"> <li> <a href="">1a> <a href="">2a> <a href="">3a> <a href="">4a> <a href="">5a> li> <li> oneli> ol> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
13定义列表
-
：定义列表
：定义专业术语或名词
- ：对名词进行解释和描述
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <dl> <dt>dddddt> <dd>javaspacedd> <dt>fffffdt> <dd>cssdd> dl> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
14嵌套列表
列表之间可以互相嵌套形成多层级列表。
<ul> <li> 贵州 <ul> <li>lpsli> <li>zyli> <li>gyli> ul> li> <li> 云南 <ul> <li>ljli> ul> li> ul>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
15 表格标签
<table>：表格的最外层容器 <tr> ： 定义表格行 <th>： 定义表头 <td>： 定义表格单元 <caption>：定义表格标题 DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <table> <caption>tianqicaption> <tHead> <tr> <th>日期th> <th>天气情况th> <th>出行情况th> tr> tHead> <tr> <td>2022.2.22td> <td>晴天td> <td>带墨镜td> tr> <tr> <td>2022.2.31td> <td>阴天td> <td>带伞td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
16表格属性
border ： 表格边框- 1
cellpadding ： 单元格内的空间 cellspacing ： 单元格之间的空间 rowspan ： 合并行 colspan ： 合并列 align ： 左右对齐方式 valign ：上下对齐方式- 1
- 2
- 3
- 4
- 5
- 6
DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <table border="1" cellpadding="30" cellspacing ="30"> <caption>tianqicaption> <tHead> <tr align="right" > <th colspan="2">日期th> <th>天气情况th> <th>出行情况th> tr> tHead> <tr > <td rowspan="2">2022.2.22td> <td>白天td> <td>晴天td> <td>带墨镜td> tr> <tr> <td>晚上td> <td>阴天td> <td>带伞td> tr> <tr> <tr valigh= "bottom" > <td rowspan="2">2022.2.22td> <td>白天td> <td>晴天td> <td>带墨镜td> tr> <td>晚上td> <td>阴天td> <td>带伞td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
17 表单标签(用户登录极其选择)
form> ： 表单的最外层容器
： 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。type属性 含义 text 普通的文本输入框 password 密码输入框 checkbox 复选框 radio 单选框 file 上传文件 submit 提交按钮 reset 重置按钮 DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <form action="http:/www.baidu"> <h2>输入框：h2> <input type="text" placeholder="请输入用户名"> <h2>密码框：h2> <input type="password"> <h2>复选框h2> <input type="checkbox" checked>苹果 <input type="checkbox">苹 <input type="checkbox" disabled>果 <h2>单选框h2> <input type="radio" name="1">男 <input type="radio" name="1">女 <h2>上传文件h2> <input type="file"> <h2>提交按钮重置按钮h2> <input type="submit"> <input type="reset"> <h2>多行文本框h2> <textarea cols="30" rows="10">textarea> <h2>下拉菜单h2> <select > <option selected disabled >请选择option> <option >北京option> <option >杭州option> <option >扬州option> <option >贵阳option> select> <select size="3"> <option selected disabled >请选择option> <option >北京option> <option >杭州option> <option >扬州option> <option >贵阳option> select> <select multiple> <option >北京option> <option >杭州option> <option >扬州option> <option >贵阳option> <h2>单选框h2> <input type="radio" name="1" id="man"><label for="man">男label> <input type="radio" name="1" id="woman"><label for="woman">女label> select> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
18表单标签
： 多行文本框 、：下拉菜单
19（
与 ）div （块）：
div全称为division，“分割、分区”的意思，标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在标签中，中还可以嵌套多层，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联） :
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行DOCTYPE html> <html lang="en"> <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>Documenttitle> head> <body> <div> <h2> <a href="#"><span>finalyspan> a> h2> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
类似于
-
-
相关阅读:
Hbase的SQL中间层——Phoenix
docker安装Nacos并配置MySQL
【KafkaStream】流式计算概述&KafkaStream入门
Nacos注册中心细节分析
跨平台VSCODE教程
2022 云原生编程挑战赛圆满收官，见证冠军战队的诞生
【docker】dockerfile构建镜像
Linux学习之悟空派上实现OLED的无线网IP及CPU温度显示【守护进程】
SQL每日一练（牛客新题库）——第5天：高级查询
【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法
- 原文地址：https://blog.csdn.net/m0_62953927/article/details/125885674
