前端基础知识整理

Scroll Down

前端基础知识整理

一 . 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>

常用的实体引用

转义符符号名称
&gt;>大于
&lt;<小于
&amp;&与号
&nbsp;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>



input的type属性值
描述
button定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox定义复选框。
color定义拾色器。
date定义 date 控件(包括年、月、日,不包括时间)。
datetime定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email定义用于 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#firstnameid选择所有id="firstname"的元素1
** 选择所有元素2
element.elementdiv.intro嵌套选择所有div里class属性为intro的元素
elementp标签选择所有<p>元素1
element,elementdiv,p分组选择所有<div>元素和<p>元素1
element elementdiv p后代选选择<div>元素内的所有<p>元素1
element>elementdiv>p子元素选择所有父级是<div> 元素的<p>元素2
element+elementdiv+p相邻兄弟选择所有紧接着<div>元素之后的<p>元素2
element1~element2p~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
:linka:link伪类选择所有未访问链接1
:visiteda:visited伪类选择所有访问过的链接1
:activea:active伪类选择活动链接1
:hovera:hover伪类选择鼠标在链接上面时1
:focusinput:focus伪类选择具有焦点的输入元素2
:first-letterp:first-letter伪元素选择每一个<p>元素的第一个字母1
:first-linep:first-line伪元素选择每一个<p>元素的第一行1
:first-childp:first-child伪元素指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before伪元素在每个<p>元素之前插入内容2
:afterp:after伪元素在每个<p>元素之后插入内容2
:lang(language)p:lang(it)伪元素选择一个lang属性的起始值="it"的所有<p>元素2
:first-of-typep:first-of-type伪元素选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type伪元素选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type伪元素选择每个p元素是其父级的唯一p元素3
:only-childp: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-childp:last-child伪元素选择每个p元素是其父级的最后一个子级。3
:root:root 选择文档的根元素3
:emptyp:empty伪元素选择每个没有任何子级的p元素(包括文本节点)3
:enabledinput:enabled伪类选择每一个已启用的输入元素3
:disabledinput:disabled伪类选择每一个禁用的输入元素3
:checkedinput: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