web前端

鸢一折纸520

已于 2023-04-12 14:48:59 修改

阅读量364

点赞数 1

文章标签：前端 css css3

于 2023-04-11 18:27:28 首次发布

本文链接：https://blog.csdn.net/yuanyizhezhi520/article/details/129846439

版权

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

HTML（HyperText Markup Language）：超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签构成的语言 HTML标签都是预定义好的。

例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML结构标签

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

图片标签：

<img> src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）

相对路径：从当前文件开始查找。（./ : 当前目录, ../ : 上级目录）

文本属性：

color：设置文本的颜色
font-size：字体大小（注意：记得加px）

标题标签：<h1> - <h6>（h1 → h6 重要程度依次降低）注意：

HTML标签都是预定义好的，不能自己随意定义。

水平线标签：<hr>

超链接

属性：

href：指定资源访问的url
target：指定在何处打开资源链接

_self：默认值，在当前页面打开

_blank：在空白页面打开

视频标签：<video>

src：规定视频的url
controls：显示播放控件
width：播放器的宽度
height：播放器的高度

音频标签：<audio>

src：规定音频的url
controls：显示播放控件
段落标签：<p>
文本加粗标签: <b> / <strong>

布局标签：

实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

div标签

一行只显示一个（独占一行）
宽度默认是父元素的宽度，
高度默认由内容撑开可以设置宽高（width、height）

span标签

一行可以显示多个宽度和高度默认由内容撑开
不可以设置宽高（width、height）

CSS（Cascading Style Sheet）：

层叠样式表，用于控制页面的样式（表现）

CSS引入方式：

行内样式：写在标签的style属性中（不推荐）
内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

颜色表示形式：

color: 设置文本内容的颜色

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue...
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

CSS选择器：

用来选取需要设置样式的元素(标签)

优先级：id选择器 > 类选择器 > 元素选择器

CSS属性

text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
color：定义文本的颜色

换行：<br> ; 段落：<p>

CSS样式

line-height：设置行高
text-indent：定义第一个行内容的缩进
text-align：规定元素中的文本的水平对齐方式

注意

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：

页面布局

模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

CSS属性

width：设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边距
margin：外边距

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 –位置，如：padding-top、padding-left、padding-right …

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个 <tr>	border：规定表格边框的宽度
		width：规定表格的宽度
		cellspacing: 规定单元之间的空间。
<tr>	表格的行，可以包裹多个 <td>
<td>	表格单元格(普通)，可以包裹内容	如果是表头单元格，可以替换为 <th>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

表单项：不同类型的 input 元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域属性：
action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式。GET、POST

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

Javascript

脚本位置

内部脚本：

将JS代码定义在HTML页面中 JavaScript代码必须位于<script></script>标签之间在HTML文档中，可以在任意地方，放置任意数量的<script> 一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本：

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中外部JS文件中，只包含JS代码，不包含<script>标签 <script>标签不能自闭合

注意：

通过<script>标签引入外部js文件时，标签不可以自闭合
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的每行结尾的分号可有可无
注释：单行注释：// 注释内容多行注释：/* 注释内容 */

输出语句

window.alert() 写入警告框
document.write() 写入 HTML 输出
console.log() 写入浏览器控制台

变量

特点：

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：组成字符可以是任何字母、数字、下划线（_）或美元符号（$）数字不能开头建议使用驼峰命名

声明：

var：声明变量，全局作用域/函数作用域，允许重复声明
let：声明变量，块级作用域，不允许重复声明
const：声明常量，一旦声明，常量的值不能改变

数据类型

number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

运算符

算术运算符：+ , - , * , / , % , ++ , --
赋值运算符：= , += , -= , *= , /= , %=
比较运算符：> , < , >= , <= , != , == , === （== 会进行类型转换，=== 不会进行类型转换）
逻辑运算符：&& , || , !
三元运算符：条件表达式 ? true_value: false_value

字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

其他类型转为boolean：

Number：0 和 NaN为false，其他均转为true。
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。

流程控制语句

if…else
if …else…
switch
for
while
do … while

函数

介绍：函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript 函数通过 function 关键字进行定义

注意：

形式参数不需要类型。因为JavaScript是弱类型语言返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称(实际参数列表)

Array

JavaScript 中 Array对象用于定义数组。

定义

var 变量名 = new Array(元素列表); //方式一
var 变量名 = [ 元素列表 ]; //方式二

访问

arr[ 索引 ] = 值;

注意事项：

JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

属性

属性	描述
length	设置或返回数组中元素的数量。

方法

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度。
splice()	从数组中删除元素。

注意事项：

箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }

String

创建方式

var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二

属性

属性	描述
length	字符串的长度。

方法

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

JavaScript自定义对象（JavaScript Object Notation）

定义格式：

调用格式：

对象名.属性名;
对象名.函数名();

JSON

概念：JavaScript对象标记法。 JSON 是通过 JavaScript 对象标记法书写的文本。

定义：

var 变量名 = '{"key1": value1, "key2": value2}';

value 的数据类型为：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象

组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

介绍：浏览器窗口对象。

获取：直接使用window，其中 window. 可以省略。

属性

history：对 History 对象的只读引用
location：用于窗口或框架的 Location 对象
navigator：对 Navigator 对象的只读引用

方法

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

介绍：地址栏对象。

获取：使用 window.location 获取，其中 window. 可以省略。

属性：

href：设置或返回完整的URL。

DOM

概念：Document Object Model ，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

DOM是 W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

Core DOM - 所有文档类型的标准模型
Document：整个文档对象
Element：元素对象 Attribute：属性对象
Text：文本对象 Comment：注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
Image：<img>
Button ：<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document对象中提供了以下获取Element元素对象的函数：

根据id属性值获取，返回单个Element对象
根据标签名称获取，返回Element对象数组
根据name属性值获取，返回Element对象数组
根据class属性值获取，返回Element对象数组

事件监听

事件：HTML事件是发生在HTML元素上的 “事情”。

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听：JavaScript可以在事件被侦测到时执行代码。

方式一：通过 HTML标签中的事件属性进行绑定

方式二：通过 DOM 元素属性绑定

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开