前端基础知识整理
前端基础知识整理
一 . HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
<!DOCTYPE html>HTML5声明- HTML网页代码结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站标题</title>
</head>
<body>
<h1>主体</h1>
</body>
</html>语法特点
html语法相较于xml比较宽松
XML标签可以是如果一个标签只有属性没有标签体可以简写
如<item name='aaa'></item>可以写成<item name="aaa"/>
html也可以简写同时可以省略闭合标签/符号：<item name="aaa">
例外的是即使<sctript>标签没有代码体只有一个src属性也不能简写, 必须含有闭合标签
<script src="https://example.com/app.js"></script>
常用的实体引用
转义符 | 符号 | 名称 |
|---|---|---|
> | > | 大于 |
< | < | 小于 |
& | & | 与号 |
| space | 空格 |
常用标签
标签 | 元素内容 |
|---|---|
<h1> ~ <h5> | 标题h1-h5 |
<p> | 这是一个段落 |
<a href="default.htm"> | 这是一个链接 |
<br> | 换行 |
<hr> | 水平线 |
<!--注释--> | 注释 |
<b> | 定义粗体文本 |
<del> | 定义删除字 |
<i> | 定义斜体字 |
<ins> | 定义插入字(下划线) |
<table> | 定义表格 |
<tr> | 定义表格的行 |
<td> | 定义表格的单元(列) |
<th> | 定义表头(默认加粗属性) |
<caption> | 定义表格标题 |
<thead> | 定义表页眉 |
<tbody> | 定义表主题 |
<tfoot> | 定义表页脚 |
<img> | 单元图 |
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
<dl> | 定义列表 |
<dt> | 自定义列表项目 |
<dd> | 定义自定列表项的描述 |
表单
标签 | 描述 |
|---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<label>用法
<label>标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的 for 属性应当与相关元素的 id 属性相同
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="提交">
</form>Male
Female
input的type属性值
值 | 描述 |
|---|---|
button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
checkbox | 定义复选框。 |
color | 定义拾色器。 |
date | 定义 date 控件（包括年、月、日，不包括时间）。 |
datetime | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
datetime-local | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
定义用于 e-mail 地址的字段。 | |
file | 定义文件选择字段和 "浏览..." 按钮，供文件上传。 |
hidden | 定义隐藏输入字段。 |
image | 定义图像作为提交按钮。 |
month | 定义 month 和 year 控件（不带时区）。 |
number | 定义用于输入数字的字段。 |
password | 定义密码字段（字段中的字符会被遮蔽）。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮（重置所有的表单值为默认值）。 |
submit | 定义提交按钮。 |
text | 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
- 常用属性
属性 | 描述 |
|---|---|
class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式（inline style） |
HTML 分组标签
标签 | 描述 |
|---|---|
<span> | 用来组合文档中的行内元素， 内联元素(inline) |
<div> | 定义了文档的区域，块级 (block-level) |
<header> | 定义了文档的头部区域 |
<footer> | 定义 section 或 document 的页脚。 |
<section> | 定义文档中的节（section、区段）。 |
<nav> | 定义导航链接的部分。 |
二. CSS
边框
div{
border-style: solid; /*边框样式*/
border-color: red; /*边框颜色*/
border-width: 1px; /*边框宽度*/
/*对边框样式单独设置,top,button,left,right*/
border-top-style: solid;
}边框的样式
none无边框。
dotted虚线边框。
dashed虚线边框。
solid实线边框。
double双边框。
groove凹槽边框。
ridge垄状边框。
inset嵌入边框。
outset外凸边框。
hidden隐藏边框。
选择器
选择器 | 示例 | 类型(xx选择器) | 示例说明 | CSS |
|---|---|---|---|---|
.class | .intro | 类 | 选择所有class="intro"的元素 | 1 |
#id | #firstname | id | 选择所有id="firstname"的元素 | 1 |
* | * | 选择所有元素 | 2 | |
element.element | div.intro | 嵌套 | 选择所有div里class属性为intro的元素 | |
element | p | 标签 | 选择所有<p>元素 | 1 |
element,element | div,p | 分组 | 选择所有<div>元素和<p>元素 | 1 |
element element | div p | 后代选 | 选择<div>元素内的所有<p>元素 | 1 |
element>element | div>p | 子元素 | 选择所有父级是<div> 元素的<p>元素 | 2 |
element element | div p | 相邻兄弟 | 选择所有紧接着<div>元素之后的<p>元素 | 2 |
element1~element2 | p~ul | 后续兄弟 | 选择p元素之后的每一个ul元素 | |
[attribute] | [target] | 属性 | 选择所有带有target属性元素 | 2 |
[attribute=value] | [target=-blank] | 属性 | 选择所有使用target="-blank"的元素 | 2 |
[attribute~=value] | [title~=flower] | 属性 | 选择title属性包含单词"flower"的所有元素 | 2 |
[attribute|=language] | [lang|=en] | 属性 | 选择 lang 属性以 en- 为开头的所有元素 | 2 |
:link | a:link | 伪类 | 选择所有未访问链接 | 1 |
:visited | a:visited | 伪类 | 选择所有访问过的链接 | 1 |
:active | a:active | 伪类 | 选择活动链接 | 1 |
:hover | a:hover | 伪类 | 选择鼠标在链接上面时 | 1 |
:focus | input:focus | 伪类 | 选择具有焦点的输入元素 | 2 |
:first-letter | p:first-letter | 伪元素 | 选择每一个<p>元素的第一个字母 | 1 |
:first-line | p:first-line | 伪元素 | 选择每一个<p>元素的第一行 | 1 |
:first-child | p:first-child | 伪元素 | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
:before | p:before | 伪元素 | 在每个<p>元素之前插入内容 | 2 |
:after | p:after | 伪元素 | 在每个<p>元素之后插入内容 | 2 |
:lang(language) | p:lang(it) | 伪元素 | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
:first-of-type | p:first-of-type | 伪元素 | 选择每个p元素是其父级的第一个p元素 | 3 |
:last-of-type | p:last-of-type | 伪元素 | 选择每个p元素是其父级的最后一个p元素 | 3 |
:only-of-type | p:only-of-type | 伪元素 | 选择每个p元素是其父级的唯一p元素 | 3 |
:only-child | p:only-child | 伪元素 | 选择每个p元素是其父级的唯一子元素 | 3 |
:nth-child(n) | p:nth-child(2) | 伪元素 | 选择每个p元素是其父级的第二个子元素 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 伪元素 | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | 伪元素 | 选择每个p元素是其父级的第二个p元素 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 伪元素 | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
:last-child | p:last-child | 伪元素 | 选择每个p元素是其父级的最后一个子级。 | 3 |
:root | :root | 选择文档的根元素 | 3 | |
:empty | p:empty | 伪元素 | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
:enabled | input:enabled | 伪类 | 选择每一个已启用的输入元素 | 3 |
:disabled | input:disabled | 伪类 | 选择每一个禁用的输入元素 | 3 |
:checked | input:checked | 伪类 | 选择每个选中的输入元素 | 3 |
:not(selector) | :not(p) | 伪类 | 选择每个并非p元素的元素 | 3 |
盒子模型
媒体元素
- 自适应和响应式
属性
背景属性
属性 | 描述 | CSS |
|---|---|---|
background | 复合属性。设置对象的背景特性。 | 1 |
background-attachment | 设置或检索背景图像是随对象内容滚动(显示滚动条)还是固定的。必须先指定background-image属性。 | 1 |
background-color | 设置或检索对象的背景颜色。 | 1 |
background-image | 设置或检索对象的背景图像。 | 1 |
background-position | 设置或检索对象的背景图像位置。必须先指定background-image属性。 | 1 |
background-repeat | 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 | 1 |
background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |
边框(Border) 和 轮廓(Outline) 属性
属性 | 描述 | CSS |
|---|---|---|
border | 复合属性。设置对象边框的特性。 | 1 |
border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 |
border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
border-color | 置或检索对象的边框颜色。 | 1 |
border-left | 复合属性。设置对象左边边框的特性。 | 1 |
border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
border-left-style | 设置或检索对象的左边边框样式。 | 1 |
border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
border-right | 复合属性。设置对象右边边框的特性。 | 1 |
border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
border-right-style | 设置或检索对象的右边边框样式。 | 1 |
border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
border-style | 设置或检索对象的边框样式。 | 1 |
border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
border-width | 设置或检索对象的边框宽度。 | 1 |
outline | 复合属性。设置或检索对象外的线条轮廓。 | 2 |
outline-color | 设置或检索对象外的线条轮廓的颜色。 | 2 |
outline-style | 设置或检索对象外的线条轮廓的样式。 | 2 |
outline-width | 设置或检索对象外的线条轮廓的宽度。 | 2 |
颜色(Color) 属性
属性 | 描述 | CSS |
|---|---|---|
color-profile | 允许使用源的颜色配置文件的默认以外的规范 | 3 |
opacity | 设置一个元素的透明度级别 | 3 |
rendering-intent | 允许超过默认颜色配置文件渲染意向的其他规范 | 3 |
内边距(Padding) 属性
属性 | 说明 | CSS |
|---|---|---|
padding | 在一个声明中设置所有填充属性 | 1 |
padding-bottom | 设置元素的底填充 | 1 |
padding-left | 设置元素的左填充 | 1 |
padding-right | 设置元素的右填充 | 1 |
padding-top | 设置元素的顶部填充 | 1 |
外边距(Margin) 属性
属性 | 说明 | CSS |
|---|---|---|
margin | 在一个声明中设置所有外边距属性 | 1 |
margin-bottom | 设置元素的下外边距 | 1 |
margin-left | 设置元素的左外边距 | 1 |
margin-right | 设置元素的右外边距 | 1 |
margin-top | 设置元素的上外边距 | 1 |
尺寸(Dimension) 属性
属性 | 描述 | CSS |
|---|---|---|
height | 设置元素的高度 | 1 |
max-height | 设置元素的最大高度 | 2 |
max-width | 设置元素的最大宽度 | 2 |
min-height | 设置元素的最小高度 | 2 |
min-width | 设置元素的最小宽度 | 2 |
width | 设置元素的宽度 | 1 |
字体（Font） 属性
属性 | 说明 | CSS |
|---|---|---|
font | 在一个声明中设置所有字体属性 | 1 |
font-family | 规定文本的字体系列 | 1 |
font-size | 规定文本的字体尺寸 | 1 |
font-style | 规定文本的字体样式 | 1 |
font-variant | 规定文本的字体样式 | 1 |
font-weight | 规定字体的粗细 | 1 |
@font-face | 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 | 3 |
font-size-adjust | 为元素规定 aspect 值 | 3 |
font-stretch | 收缩或拉伸当前的字体系列 | 3 |
定位（Positioning） 属性
属性 | 说明 | CSS |
|---|---|---|
bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移 | 2 |
clear | 规定元素的哪一侧不允许其他浮动元素 | 1 |
clip | 剪裁绝对定位元素 | 2 |
cursor | 规定要显示的光标的类型（形状） | 2 |
display | 规定元素应该生成的框的类型 | 1 |
float | 规定框是否应该浮动 | 1 |
left | 设置定位元素左外边距边界与其包含块左边界之间的偏移 | 2 |
overflow | 规定当内容溢出元素框时发生的事情 | 2 |
position | 规定元素的定位类型 | 2 |
right | 设置定位元素右外边距边界与其包含块右边界之间的偏移 | 2 |
top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移 | 2 |
visibility | 规定元素是否可见 | 2 |
z-index | 设置元素的堆叠顺序 | 2 |
文本（Text） 属性
属性 | 说明 | CSS |
|---|---|---|
color | 设置文本的颜色 | 1 |
direction | 规定文本的方向 / 书写方向 | 2 |
letter-spacing | 设置字符间距 | 1 |
line-height | 设置行高 | 1 |
text-align | 规定文本的水平对齐方式 | 1 |
text-decoration | 规定添加到文本的装饰效果 | 1 |
text-indent | 规定文本块首行的缩进 | 1 |
text-transform | 控制文本的大小写 | 1 |
unicode-bidi | 2 | |
vertical-align | 设置元素的垂直对齐方式 | 1 |
white-space | 设置怎样给一元素控件留白 | 1 |
word-spacing | 设置单词间距 | 1 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 1 |
hanging-punctuation | 指定一个标点符号是否可能超出行框 | 3 |
punctuation-trim | 指定一个标点符号是否要去掉 | 3 |
text-align-last | 当 text-align 设置为 justify 时，最后一行的对齐方式。 | 3 |
text-justify | 当 text-align 设置为 justify 时指定分散对齐的方式。 | 3 |
text-outline | 设置文字的轮廓。 | 3 |
text-overflow | 指定当文本溢出包含的元素，应该发生什么 | 3 |
text-shadow | 为文本添加阴影 | 3 |
text-wrap | 指定文本换行规则 | 3 |
word-break | 指定非CJK文字的断行规则 | 3 |
word-wrap | 设置浏览器是否对过长的单词进行换行。 | 3 |
内容生成属性(Generated Content Properties)
表格（Table） 属性
网格（Grid） 属性
页面媒体(Paged Media) 属性
列表(List) 属性
字幕(Marquee) 属性
多列(Multi-column) 属性
语音（Speech） 属性
Ruby 属性
分页（Print） 属性
2D/3D 转换属性
过渡（Transition） 属性
用户外观(User-interface) 属性
超链接(Hyperlink) 属性
弹性盒子模型（Flexible Box）
三. JavaScript
3.1 JS基础
- 语法基础
- 弱类型语言特征
- 变量类型
- 分支结构
- 循环结构
- 定义对象
- 常用函数
- 函数高级 ES6特性
- DOM操作
- 获取节点元素的常用方法
- BOM操作
- window对象 全局对象 任何全局变量都是window的成员变量 包括DOM元素
- window的常用函数: 获取&设置cookie,webSQL(HTML5)
3.2 JQuery
- 文档就绪函数
- 选择器(DOM操作)
- ajax 5种常用函数
3.3 Vue.js
时下最火的前端框架-脚手架工具
四. 前端框架
- bootstrap
- adminLTE
- easyui
- layUI
五. 前后端交互
常用的模板引擎
thymeleaf
freemark