前端基础知识整理

JavaScript/前端
316
0
0
2023-04-19
ChatGPT前端编程秀之别拿编程语言不当语言
上一篇
基于Javascript开发连连看游戏小程序
下一篇
标签   HTML标签 JavaScript基础

前端基础知识整理

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

Male

Female

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

#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

ChatGPT前端编程秀之别拿编程语言不当语言
上一篇
基于Javascript开发连连看游戏小程序
下一篇