前端学习手册-仅供自用

最新推荐文章于 2024-06-08 12:53:15 发布

汤姆敲代码

最新推荐文章于 2024-06-08 12:53:15 发布

阅读量453

点赞数

分类专栏：笔记文章标签： html html5 javascript

本文链接：https://blog.csdn.net/a1540306541/article/details/108860893

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

认识HTML

HTML 超文本标记语言 Hyeer Text Markup Language

HTML 是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

整个网站的构成 由 （HTML 、CSS、JS）

Web 标准的制定者： 万维网联盟  简称：W3C

Html 是标记语言并非编程语言

HTML元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

■声明HTML

每个HTML 文档头部都需要一个声明 , <!DOCTYPE> 声明不是 HTML 标签；
它用于告诉 web浏览器页面使用的是哪个 HTML 版本进行编写的

// HTML5
<!DOCTYPE html>

// HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

// XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

文档结构


<!DOCTYPE html>
<html>

<head>
 <!-- 定义对页面的描述： -->
<meta name="description" content="免费的 web 技术教程。" />
 <!-- 定义针对搜索引擎的关键词： -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

<title>页面的标题</title>
</head>

<body>
文档的内容......
</body>

</html>

Head 标签：用于网页的重要数据,供浏览器识别使用 ( 网页编码、语言、编写格式 )
Meta 标签：元数据（metadata）即关于数据的数据。这些元数据可为浏览器（指导浏览器如何显示内容、如何重载页面）、搜索引擎（读取关键词）或其他Web服务所用。一般来说这个标签可以不写
Body 标签：网页可视部分,即前端标签元素都在body标签内编写

`开发准备`

开始一个HTML 编写文档,需要拥有一个编写工具，市面上有很多开发工具供开发者选用，下面列举几个比较好用的编辑工具

VScode （微软开发）
Hbuilder X （推荐）

—— 辅助工具，开发时辅助开发者完成项目
Postman （API 以及接口调试工具）
Typora （markdown 笔记编辑软件）用于编写学习的笔记

—— 开发选用浏览器
chrome 谷歌浏览器

`href 和 src 的区别`

（1）href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的连接，用于超链接

（2）src是执行外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到

文档中。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

`Z-Index 说明`

使用了relative、absolute、fixed三种定位后，都会使正常的文档流发生一定程度的改变，造成元素出现重叠的情形。为了能让重叠的元素有序的显示出来，需要在定位的相关元素加上z-index属性。其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，该属性只对使用了定位的元素有效。

`H5 新特性`

（1）HTML5新特性：主要是关于图像、位置、存储、多任务等功能的增加。包括：

a.绘画canvas（通过脚本实现绘画）

b.用于媒介回放的video和audio元素

c.本地离线存储localStorage、sessionStorage

d.语义化更好的内容元素：article、footer、header、nav、section

表单元素

datalist（规定输入域的选项列表）

output（用于不同元素的输出）

keygen（提供一种验证用户的可靠方法）

input类型：

color、date、month、week、number、email（检测是否为一个email格式的地址）

range（滑动条）、search、url、tel（输入电话号码，-time选择时间）

（2） HTML5新标签的浏览器兼容问题：当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

a.新标签被当做错误处理并被忽略，在DOM构建时会当做这个标签不存在

b.新标签被当做错误处理，在DOM构建时，这个新标签会被构造成行内元素

c.新标签被识别成HTML5标签，然后用DOM节点对齐进行替换

（3）解决兼容性问题：

实现标签被识别。通过document.createElement(tagName)即可让浏览器识别新标签，浏览器支持新标签后，还可以为其添加CSS样式

`CSS优先级`

优先级逐级增加的选择器列表：

通用选择器（*）

元素(类型)选择器：标签选择器权值1

类选择器：权值10

属性选择器

伪类

ID 选择器：权值100

内联样式：权值最高1000

`网络知识点`

当浏览器网速较慢时，加载网页会优先显示HTML，CSS会被浏览器屏蔽掉

`元素嵌套`

行级元素只能嵌套行级元素，块级元素可以嵌套任何元素

P元素不可以嵌套块级元素，A标签不可以嵌套A元素

其他元素可以嵌套块级元素，P元素不行

`文本溢出容器`

目前文本溢出样式代码仅仅支持对单行文本的处理，多行文本的溢出处理使用div或者元素设定宽度和高度。

`浏览器内核`

IE浏览器 Trident

chrome谷歌 Webkig/Blink

firefox火狐 Cecko

opera Presto

safari苹果 Webkit

`外边距融合`

`HTML颜色`

十六进制

RGB

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

颜色名

`引入文件`

引入CSS

引入JS

使用link和import有什么区别

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的

内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS

（2）页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载

（3）link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别

（4）link支持使用JavaScript控制DOM修改样式；而@import不支持。

书写位置

（1）浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，不会等到所有的HTML元素解析之后再构建和布局DOM

树，所以部分内容将被解析并显示。

（2）前端一般主要关心首屏的渲染速度，这也是为什么要提倡“图片懒加载”的原因。

（3）其实外部的JS和CSS文件是并行下载的。随着JS技术的发展，JS也开始承担起页面的渲染工作了。如果JS加载需要很长时间，

会影响用户体验。所以需要将JS区分为承担页面渲染工作的JS和承担事件处理的JS。渲染页面的JS放在前面，事务处理的JS放在后面。

HTML 元素

`<a>`

【超链接】

使用说明：该元素存在默认的文本下划线，可在样式内将其替换掉，

元素位级：行内元素

自身属性：

href
值：跳转的地址或者锚点或者邮箱地址
（定位锚点： #锚点名称）

target
值：
_self （本页跳转-默认）
_blank（新窗口跳转）
_parent（父框架跳转）
_top（最顶级框架跳转）

name
值：锚点定位名称

状态伪类

该元素默认存在、支持浏览器的几种动态伪类。其他元素也可以使用

：link （定义正常链接的样式）

：visited （定义已访问过链接的样式）

：hover （定义鼠标悬浮在链接上时的样式）

：avtive （鼠标点击时的样式）

`<ul>`

【无序列表】

使用说明：该元素存在默认的内边距，使用时可以用CSS去除掉以及默认的列表符号也可以用样式去除

元素位级：行内元素

自身属性：

type 值： disc（实心圆-默认） circle （空心圆） square（方块）

推荐样式：

去掉默认原点：list-style：none 或者 list-style-text：none
列表符换图像：list-style-image： url（" 资源地址 "）

`<table>`

【表格区域】

使用说明：该元素定义一个表格，该元素还需要搭配其他元素完成表格的绘制

自身属性：

属性
border	表格的边框宽度
cellpadding	行间距
cellspacing	列间距
bgcolor	表格背景颜色
background	表格背景图片
width	表格宽度
height	表格高度

`<header>`

【头部区域】

使用说明：用于表示一个区域的头部，实际用法和DIV没有区别，只是为了更好的区分阅读以及开发书写

`<article>`

【头部区域】

使用说明：该元素定义一个表格，该元素还需要搭配其他元素完成表格的绘制

`<nav>`

【头部区域】

使用说明：该元素定义一个表格，该元素还需要搭配其他元素完成表格的绘制

`<footer>`

【底部区域】

使用说明：用于表示一个区域的底部，实际用法和DIV没有区别，只是为了更好的区分阅读以及开发书写

`<form>`

【表单区域】

自身属性：

action 值：提交服务器的地址

method 值： get post （提交方式）

提交方式说明：
Get安全性不够全面，在传输数据过程，数据被放在请求的URL中；
Get传送的数据量较小，这主要是因为受URL长度限制；
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

POST通过request body传递参数。

GET请求在URL中传送的参数是有长度限制的，而POST么有。
GET在浏览器回退时是无害的，而POST会再次提交请求。

使用建议：

在不需要考虑数据安全性的情况下使用GET提交方式，在需要保护数据安全或者隐私数据的时候考虑使用post方式提交

`H5新特性`

`<input>`

【表单控件】

控件类型（type属性的值）：

文本输入框

type=“text”

自身属性：

placeholder 失去焦点时内容区显示的提示文本

pattern 正则匹配格式

autofouce 页面加载时是否获得焦点

密码输入框

type=“password”

自身属性：

placeholder 失去焦点时内容区显示的提示文本

pattern 正则匹配格式

autofouce 页面加载时是否获得焦点

复选框

type=“checkbox”

使用说明：

自身属性：

示例代码：

单选框

type=“radio”

使用说明：

自身属性：

普通按钮

type=“submit”

使用说明：

自身属性：

提交按钮

type=“submit”

使用说明：H5新特性让每个提交按钮都可以提交到不同的服务器页面，每个按钮默认提交的页面以form表单属性作为地址，如果定义了提交页面和提交方式，那么提交按钮将提交到自身的页面属性。

自身属性：

fornaction：提交按钮提交的服务器地址

fornmethod：提交按钮页面服务器的提交方式

formemctype：提交表单的编码

text/plain -multipart/form-data -application/x-www-form-urlencoded

formtarget 定义提交页面用什么方式打开

文本下拉

type=“text” list=“下拉名称”

使用说明：list属性定义一个下拉名称，以便依赖元素可以跟随绑定

依赖元素：

<datalist id="对应下拉名称" > </datalist>   定义一个下拉区域
	
<option></option>  		 定义一个下拉选项

`JS学习笔记`

变量

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

变量命名规则：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

**提示：**JavaScript 标识符对大小写敏感。

// 声明一个变量

var i = 0;

函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()

函数名可包含字母、数字、下划线和美元符号（函数命名规则和变量的命名规则一致）

圆括号可包括由逗号分隔的参数：

在函数中，参数是局部变量。

在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量只能在函数内访问。

局部变量不影响其他函数内的变量重名

局部变量在函数开始时创建，在函数完成时被垃圾回收机制一同回收。

// Function() 构造器
function myFunction(a, b) {
    return a * b;
}

// 函数表达式   在变量中保存函数表达式之后，此变量可用作函数：
var x = function (a, b) {return a * b};

// 匿名函数

Dom （document）方法

查找元素

通过元素内属性的ID查找： document.getElementById（’ '） - 返回带有指定 ID 的元素。

通过元素的标签名称查找： document.getElementByTagName（’ '） - 该方法返回元素数组

通过元素的Class类名查找： document.getElementsByClassName(’ ') - 返回包含带有指定类名的所有元素的节点列表。

通过元素 CSS 选择器查找： document.querySelectorAll( ’ p.intro ’ ); - 本例返回 class=“intro” 的所有 P 元素列表

Dom 属性

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

增-创建

Element.appendChild() 把新的子节点添加到指定节点。

Element.createTextNode() 创建文本节点。

Element.createAttribute() 创建属性节点。

Element.createElement() 创建元素节点。

Element.insertBefore() 在指定的子节点前面插入新的子节点。

查

Element.getAttribute() 返回指定的属性

改

Element.setAttribute(属性, 值) 把指定属性设置或修改为指定的值。

Element.replaceChild( element ) 替换子节点。

删

Element.removeChild( element ) 删除子节点。

`定时器`

setInterval()

定时器说明：（周期运行）按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

运行定时器会返回一个变量，通过该变量可以关闭定时器

函数内的this指向是window

setInterval(函数,时间，可选参数);


// 设置一个定时器，运行函数
var int = setInterval("clock()",1000); 


// 设置一个定时器，运行表达式代码
var int = setInterval("function (){

// 运行代码

}",1000);

setTimeout()

定时器说明：（延迟运行）在指定的毫秒数后调用函数或计算表达式。

运行定时器会返回一个变量，通过该变量可以关闭定时器

函数内的this指向是window

setTimeout(函数,时间，可选参数);

// 设置一个定时器，运行函数
var int = setTimeout("clock()",1000); 


// 设置一个定时器，运行表达式代码
var int = setTimeout("function (){

// 运行代码

}",1000);

关闭定时器

clearInterval(定时器变量);

ES6 类和对象

`类的概念`

类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。
考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
javascript中的类就是对象的模板，通过class关键字，可以定义类。

`Class 关键词`

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，

ES5存在变量提升,可以先使用，然后再定义。

ES6 的class可以看作只是一个语法糖

`定义一个Class 类`

字面量创建：

// 创建一个类，用class关键词
// 类里面的方法与方法之间，不需要用逗号隔开
// Class类通过constructor函数来传递类的参数
// 在类里面定义一个属性需要加上this
class Protom {
   constructor(参数1，参数2) {
	
   }
   toString() {
      return ();
   }
}

// 生成一个类的实例化
var pro = new Protom(参数1，参数2);

javascript ES6 中的 Class类不存在变量的提升，必须先声明后才能调用

`constructor`方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

`箭头函数`

汤姆敲代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习手册-仅供自用

HTML这里写目录标题HTML认识HTML■声明HTML■文档结构■开发准备■ href 和 src 的区别■认识HTML■ Z-Index 说明■H5 新特性CSS优先级网络知识点元素嵌套文本溢出容器浏览器内核外边距融合HTML颜色十六进制RGB颜色引入文件引入CSS引入JS书写位置HTML 元素``状态伪类````示例代码：``````````示例代码H5新特性``文本输入框示例代码密码输入框示例代码复选框示例代码示例代码普通按钮示例代码：提交按钮示例代码示例代码JS变量函数Dom （document
复制链接

扫一扫