本周复习了前端的部分内容，系统整理了以下笔记。
HTML
web标准
分为三部分：结构，表现，行为
-
结构：用于对网页元素进行整理分类，主要为html
-
表现：设置网页元素的样式，主要为css
-
行为：网页模型的定义和交互的编写，现阶段主要为js
html基本结构
<html> //根标签
<head> //头部
<title>test</title>
</head>
<body>
//主体内容，即页面内容
</body>
</html>
DOCTYPE
<!DOCTYPE html>声明当前文档类型为html5，必须写在文档最前面
文档类型声明标签，不属于html标签
<!DOCTYPE html>
<html lang="zh-CN"> //定义当前网页的语言
<head>
<meta charset="UTF-8"> //设置当前网页字符集为UTF-8，一定要写
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
</head>
<body>
前端学习第一天
</body>
</html>
常用标签
标题标签
h1到h6一共六级标签
<h1>1234</h1>
<h2>123</h2>
段落标签
<p>
这是一个段落
</p>
换行标签
//这是一个单表签
<p>
123<br />456
</p>
文本格式化标签
<b>加粗</b>
<strong>加粗</strong>
<em>倾斜</em>
<i>倾斜</i>
<del>删除</del>
<s>删除</s>
<ins>下划线</ins>
<u>下划线</u>
div和span
<div>这是一个占一行的盒子</div> //没有语义，进行布局，占一行
<span>这是一个小盒子</span> //没有语义，进行布局
图像标签
<img src="D:\前端学习\html\images\1.jpg"
alt="加载失败" title="这是一个提示" height="200" width="200"
border="10"/>
注意
属性之间要有空格
路径
根目录： 目录文件夹的第一层
目录文件夹：html文件所在的文件夹
相对路径
<img src="images/1.jpg" /> //图片在下一级
<img src="../1.jpg" /> 图片在上一级
绝对路径
<img src="D:\前端学习\html\images\1.jpg" />
超链接标签
<a href="http://www.baidu.com" target="_self">这是一个外部链接</a>
<a href="index.html" target="_self">这是一个内部链接</a>
<a href="#">这是一个空链接</a>
<a href="a.zip">这是一个下载链接</a>
<a href="http://baidu.com"><img src="1.jpg"/></a> //网页元素链接
<a href="#name">这是一个锚点</a> //锚点 ，id只能为英文
<h4 id="name">锚点目标</h4>
- href用于指定链接目标的url地址
- target用来指定链接页面的打开方式，
_self为默认值，_blank为在新标签页中打开
注释
<!--这是一个注释-->
特殊字符
<!--空格-->
< <!--小于号-->
> <!--大于号-->
表格
基本结构
<table>
<tr>
<th>一</th> <th>二</th> <!--表头单元格-->
</tr>
<tr> <!--行-->
<td>1</td> <td>2</td> <!--行中的单元格-->
</tr>
<tr>
<td>3</td> <td>4</td>
</tr>
</table>
表格属性
<table align="center">
<!-- 表格对齐方式，left，right，center -->
border="1" <!-- 表格是否拥有边框 -->
cellpadding="1" <!-- 单元格边缘与内容之间的空白 -->
cellspacing="0" <!-- 单元格之间的空白 -->
width="1000"> <!-- 单元格宽度 -->
<tr>
<th>加粗</th> <th>居中</th>
</tr>
<tr>
<td>1</td> <td>2</td>
</tr>
<tr>
<td>3</td> <td>4</td>
</tr>
</table>
结构标签
<table>
<thead> <!-- 表格头部 -->
<tr> <!-- 头部内必须要有tr -->
<th>1</th> <th>2</th> <th>3</th>
</tr>
</thead>
<tbody><!-- 表格主体 -->
</tbody>
</table>
合并单元格
<table>
<table align="center" border="1"
cellpadding="1" cellspacing="0" >
<thead>
<tr>
<th>1</th> <th>2</th> <th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1</td> <td></td> //跨列合并
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
</tbody>
</table>
colspan跨列合并
rowspan跨行合并
合并完之后要把多余的单元格删掉
列表
无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!-- 项与项之间没有顺序，是并列的 -->
<!-- ul里只能放li -->
<!-- li相当于容器，里面可以放所有元素 -->
<!-- 列表的样式一般用css实现 -->
有序列表
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
<!-- ol里只能放li -->
<!-- li相当于容器，里面可以放所有元素 -->
<!-- 列表的样式一般用css实现 -->
自定义列表
常用于对名词的描述和解释，列表前没有任何标记符号
<dl>
<dt>name</dt> <!-- 标题，与dd为并列关系 -->
<dd>1</dd> <!-- 解释的内容 -->
<dd>2</dd>
<dd>3</dd>
</dl>
表单
表单由表单域，表单控件，提示信息构成
表单域
<form action="url" method="get/post" name="name">
<!-- action用来指定处理表单数据的服务器地址
method设置表单提交方式
name指定表单名 -->
</form>
表单控件
input输入表单
<form action="url" method="post" name="name">
<input type="属性" name="id" value="1" checked="checked"> //输入元素
</form>
type属性：
text文本 password密码 radio单选框 checkbox复选框 、
- submit 将表单域的元素内容提交到服务器，配合value可以修改内容
- reset 重置表单内容
- button 按钮
- file上传文件
name属性：
定义input元素的名称
单选按钮必须具有相同的name才能实现多选一
value属性：
规定input元素的值，主要为后台使用
checked属性：
规定此input元素默认被选中
maxlength属性：
规定输入的字符最大长度，使用较少
label标签
<label for="text">标签</label> <input type="text" id="text">
扩大鼠标操作范围，提升用户体验
select下拉表单
<form action="url" method="post" name="name">
<select>
<option>1</option>
<option>2</option>
<option select="selected">3</option> //默认选3
</select>
</form>
textarea文本域
<textarea>123</textarea>
CSS
基本结构
h1 { /*选择器*/
color: red; /*属性，值*/
font-size: 25px;
}
基础选择器
标签选择器
按标签名称分类，把某一类标签全部选择出来
使用很多
h1 {
color: red;
font-size: 25px;
}
/*将h1标签选择出来*/
类选择器
差异化的选择选择不同标签，单独选几个标签，使用很多
.red { /*起名red*/
color: red;
}
<h1 class="red">123</h1>
类选择器画盒子
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
一个标签可以有多个类名，类名之间用空格隔开
id选择器
一个id只能被调用一次，一般和js搭配
#q {
background-color: green;
}
<div id="q">1</div>
通配符选择器
为页面中所有标签使用样式，特殊场景下使用
* {
color: aliceblue;
}
字体属性
h4 {
font-family: 'Microsoft YaHei'; /*字体总样式*/
font-family: 'Microsoft YaHei',Arial; /*多字体用，隔开,优先使用第一个字体*/
font-size: 20px; /*字体大小*/
/*标题标签需要单独指定文字大小*/
font-weight: 700; /*加粗*/
font-style: italic; /*斜体*/
}
/*复合形式*/
h1 {
font: font-style font-weight font-size/line-height font-family;
}
/*不能更换顺序 没有可以跳过，size和family不能省略
文本属性
#a {
/* 文本颜色，三种形式 */
color: red;
color: rgb(255, 0, 0);
color: #ff0000; /* 最常用 */
/* 水平对齐方式 */
text-align: center;
/* 文本装饰 */
text-decoration: underline/line-through/overline/none;
/* 文本缩进 */
text-indent: 2em; /* 1em为当前元素1个文字的大小 */
/* 行间距 */
line-height: 26px;
}
css引入方式
内部样式表
把样式写在html内部中的style标签中
style一般放在标签中
行内样式表
<div style="color: red;">123</div>
/* 适合修改简单样式，使用较少 */
外部样式表
样式单独写到一个css文件中，把css文件引入到html中
/* 引入方式 */
<head>
<link rel="stylesheet" href="style.css">
</head>
Emmet
复合选择器
后代选择器
可以从父元素中选择子元素，可以是任意基础选择器
父元素 子元素 {
}
子选择器
选取父元素中最近一级的子元素
父元素 > 子元素 {
}
并集选择器
同时选择几个标签
元素1,
元素2 {
}
伪类选择器
链接伪类
a:link { /* 选中没有点击过的链接 */
color: #333;
}
a:visited { /* 选中点击过的链接 */
color: rgb(60, 11, 194);
}
a:hover { /* 选中鼠标悬停时的链接 */
color: red;
}
a:active { /*选中处于鼠标按下状态时的链接 */
color :red;
}
- 注意事项
按照LVHA顺序声明：link，visited，hover，active
由于链接有默认样式，每个链接都要自定义样式
focus伪类
input:focus { /* 选取获得焦点的表单元素 */
background: yellow;
}
元素显示模式
块元素
<h1>~<h6>,<p> <div> <ul> <ol> <li>
-
可以看作容器，盒子
-
大小可以控制
-
独占一行
-
文字类标签内不能放块元素
行内元素/内联元素
<a> <strong> <b> <em> <i> <del> <ins> <span>
- 一行可以有多个
- 高宽直接设置无效
- 只能放文本或其他行内元素
- 中可以放块元素，需要转换
行内块元素
<img /> <input /> <td>
- 可以在同一行
- 默认宽度为本身内容的宽度
- 大小可以控制
显示模式转换
a {
display: block; /* 行内元素转换为块元素 */
width: 150px;
height: 150px;
background-color: red;
}
div {
display: inline; /* 块元素转换为行内元素 */
}
span {
display: inline-block; /* 转换为行内块*/
}
AJAX
快速入门
Axios异步框架
快速入门
请求方式别名
JSON
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
基础语法
JSON字符串与Java对象转换
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
