前端简略版本

最新推荐文章于 2024-09-21 18:46:25 发布

从你的全世界路过026

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量122

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_66026801/article/details/133849959

版权

WEB前端

网页开发原则：关注点分离，即各种技术只负责自己的领域，避免耦合。

对于网页开发来说，主要是三种技术分离：

HTML：负责网页结构，又称语义层
CSS：负责网页样式，又称视觉层
JavaScript：负责网页逻辑与交互，又称逻辑层或交互层

HTML

简介

HTML (Hyper Text Markup Language)，是一种超文本标记语言，用来描述网页。

HTML由一系列元素组成，这些元素可以用来包围不同部分内容，使其以某种方式呈现。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

元素

之前就说过HTML由元素组成，元素又是由什么组成呢？

<p class="editor-note">今天是星期三</p>

上述就是一个元素，这个元素主要部分有：

开始标签<p>：包含元素类型，被尖括号包围，表示元素从这里开始。
结束标签</p>：与结束标签相似，只是在其元素名之前包含一个斜杠，表示元素结束。
内容今天是星期三：元素的内容
元素：开始标签、结束标签与内容相结合，便是一个完整元素。
属性：元素的额外信息

元素属性

属性包含元素的额外信息。上述例子中，这个class属性给元素赋一个识别的名字，这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容：

元素和属性之间有个空格space（如果有一个或多个已存在的属性，就与前一个属性之间有一个空格）
属性后面紧跟着一个“=”符号
有一个属性值，由一对引号引起来

<a href="https://www.baidu.com" title="百度链接">hello</a>

元素<a>是锚，它使被标签包裹的内容成为一个超链接，此元素也可以添加大量的属性，其中几个如下：

href：声明超链接web地址，点击链接，浏览器跳转至声明的web地址。
title：标题title属性为超链接声明额外信息。鼠标悬浮时，出现提示。
target：目标target属性指定将用于显示链接的浏览上下文。例如，target="_blank"将在新标签页显示链接。如果希望在目前标签页显示链接，只需忽略该属性。

HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="editor-note">今天是星期三</p>
    <a href="https://www.baidu.com" title="百度链接">hello</a>
</body>
</html>

<!DOCTYPE html>：声明文档类型。类型声明类似于链接，规定了HTML页面必须遵守的良好规则，能自动检测错误和其他有用的东西。目前只需要知道这是最短的有效的文档声明。

<html></html>：<html>元素，这个元素包裹了整个完整的页面，是一个根元素。

<head></head>：<head>元素，这个元素是一个容器，它包含了所有你想包含在HTML页面中，但不想在HTML页面中显示的内容，这些内容包括CSS样式，字符集声明等等。

<meta charset="UTF-8">：这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分文字，基本上能识别所有文本内容，使用它，可以避免很多其他问题。

<title></title>：页面标题，出现在浏览器标签上，当你标记、收藏页面时可用它来描述页面。

<body></body>：<body>元素，包含你访问页面时所有显示在页面上的内容，文本、图片、音频、游戏等等。

特殊字符

在HTML中，字符< > " ' &是特殊字符，他们是HTML语法本身一部分。如何将这些字符包含进你的文本？——使用字符引用，每个字符以符号&开始，以分号;结束。

原义字符	等价字符引用
`<`	`<`
`>`	`>`
`"`	`"`
`'`	`'`
`&`	`&`

举例：使用<p>来表示<p>

HTML注释

HTML中有一种可用机制来在代码中书写注释，需要使用特殊记号括起来，例：

<!-- <p>我在注释内！</p> -->

块级元素和内联元素

块级元素
- 在页面中以块的形式展现，相对于其前面的内容会出现在新的一行，其后内容会被挤到下一行展示
- 通常用于展示页面上结构化的内容，例如段落、列表、导航菜单。
- 一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中。
内联元素
- 通常出现在块级元素中并包裹文档内容一小部分，而不是一整个段落或者一组内容
- 内联元素不会导致文本换行
- 通常出现在一堆文字之间，例如超链接元素<a>

<!-- 内联元素 -->
<em>第一</em><em>第二</em><em>第三</em>

<!-- 块级元素 -->
<p>第四</p><p>第五</p><p>第六</p>

<em>为内联元素，三个元素没有空隙地展示在同一行。

<p>为块级元素，元素分别另起新的一行展示。

常见的块级元素：
div、dl、form、h1、h2、……、menu、ol、p、table、ul、li

常见的内联元素：
a、em、strong、font、img、imput、label、select、span、textarea、cite、dfn

内联元素的宽度随着内容增加，高度随着字体大小而改变。
内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

HTML的CSS样式

当浏览器读到一个样式表，他会按照样式表对文档进行格式化。有下列三种方式插入样式表：

外部样式表
内部样式表
内联样式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，你可以通过更改一个文件来改变整个站点的外观。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
<head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。
可以在head部分通过<style>标签定义内部样式表。

<head>
    <style type="text/css">
        body {background-color: red}
        p {margin-left: 20px}
    </style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联央视的方法是在相关标签中使用样式属性，可以包含任何CSS属性。

<p style="color: red; margin-left: 20px">
    This is a paragraph
</p>

CSS

简介

CSS指层叠样式表(Cascading Style Sheets)，定义如何显示HTML元素。

样式表允许以多种方式规定样式信息。样式可以规定在单个HTML元素中，在HTML页头元素中，在一个外部CSS文件中，甚至在同一个HTML文档内部引用多个外部样式表。同HTML部分CSS的样式表示的多种形式。

**更多情况下，样式保存在外部CSS文件中。**通过仅仅编辑一个简单CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观，极大提高工作效率。

多个样式定义可层叠为一。

层叠次序

当同一个HTML元素被不止一个样式定义时，会使用哪个样式？

一般而言，所有样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高优先级。
1.浏览器缺省设置
2.外部样式表
3.内部样式表
4.内联样式

CSS语法

CSS规则(规则集，简称规则)主要由两部分组成：selector以及一条或者多条的declaration。

selector{
    declaration1;
    declaration2;
    ...;
}

selector(选择器)通常是我们需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。属性和值被冒号分开。declaration = property : value
属性(property)是希望设置的样式属性。

例：

.editor-note {
    color: red;
}

#p1 {
    color: blue;
}

a {
    color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Document</title>
</head>
<body>
    <p class="editor-note">今天是星期三</p>
    <p id="p1">明天星期四</p>
    <a href="https://www.baidu.com" title="百度链接">hello</a>
</body>
</html>

CSS的选择器

派生选择器(上下文选择器)

依据元素在其位置的上下文关系来定义样式。
通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

比如，希望列表中strong元素变成斜体字而不是通常的粗体字，可以定义一个如下派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
}

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

id选择器

可以为标有特点id的HTML元素指定特定的样式
以#来定义

可以定义这样一个id选择器：下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色。

#red {color:red;} 
#green {color:green;}

注意：id属性只能在每个HTML文档中出现一次。

属性选择器

对带有指定属性的HTML元素设置样式

可以定义一个属性选择器，下面的例子为带有title属性的所有元素设置样式：

[title]
{
    color:red;
}

JavaScript

简介

JavaScript是一门跨平台、面向对象的脚本语言，它能够让网页具有交互性(例如具有复杂动画，可点击按钮，通俗的菜单等)。另外还有高级的服务端JavaScript版本，例如Node.js，它可以让你的网页上添加更多的功能，不仅仅是下载文件。

JavaScript内置了一些对象的标准库，比如数组(Array)，日期(Date)，数学(Math)和一套核心语句，包括运算符，流程控制符以及申明方式等。JavaScript的核心部分可以通过添加对象来扩展语言以适应不同用途。

客户端JavaScript通过提供浏览器及其DOM对象来扩展语言核心。例如：客户端版本直接支持应用将元素放在HTML表单中并且支持响应用户事件，比如鼠标点击、表单提交和页面导航。
服务端JavaScript则通过提供有关在服务器运行JavaScript的对象来可扩展核心语言。例如：服务端版本直接支持应用和数据库通信，提供应用不同调用间的信息连续性，或者在服务器上执行文件操作。

使用

如需在HTML页面中插入JavaScript，请使用<script>标签。
<script>和</script>之间的代码行包含了JavaScript：

<script>
    alert("My First JavaScript");
</script>

HTML中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>与<head>部分中，也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。
如需使用外部文件，请在<script>标签的src属性中设置js文件。

例：

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
<body>
</html>

基本语法

语句

JavaScript是区分大小写的，并使用Unicode字符集。JavaScript是大小写敏感的，因此fruth和Fruth则是两个不同的变量。

在JavaScript中，指令被称为语句statement，并用分号进行分割。
如果一条语句独占一行的话，那么分号是可以省略的。
但如果一行中有多条语句，那么这些分号必须以分号分开。
虽然不是必需，但是一条语句末尾加上分号可以大大减少代码中产生bug的可能性。

注释

JavaScript注释的语法和C++或许多其他语言类似：

// 单行注释

/*
    多行注释
*/

不能嵌套注释，在代码执行过程中，注释将被自动跳过(不执行)。

变量

在应用程序中，使用变量来作为值的符号名。变量的名字又叫做标识符，其需要遵守一定规则。一个JavaScript标识符必须以字母、下划线或者美元符号开头，后续的字符也可以是数字(0-9)。因为JavaScript区分大小写，所以字母可以是从A到Z和从a到z的字母。

变量声明

JavaScript有三种声明方式：

var：声明一个变量，可选初始化一个值。
let：声明一个块作用域的局部变量，可选初始化一个值。
const：声明一个块作用域的只读常量。

数据类型

数字
字符串
布尔类型
数组
对象
Undefined和Null

声明变量类型

当声明新变量时，可以使用关键词new来声明其类型

var carname = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

JavaScript变量均为对象，当声明一个变量时，就创建了一个新的对象。

变量的作用域

在函数之外声明的变量，叫做全局变量，因为它可被当前文档中的任何其他代码所访问。
在函数内部声明的变量，叫做局部变量，因为它只能在当前函数内部访问。

变量提升

JavaScript变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升；JavaScript 变量感觉上是被“提升”或移到了函数或语句的最前面。但是，提升后的变量将返回 undefined 值。因此在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。

异常处理

可以用throw语句抛出一个异常并且用try...catch语句捕获处理它。

throw语句

使用throw语句抛出一个异常。当你抛出异常，你规定一个含有值的表达式要被抛出。
你可以抛出任意表达式而不是特定一种类型的表达式。
下面的代码抛出了几个不同类型的表达式：

throw "Error2";
throw 42;
throw true;
throw {toString: function(){
    return "I'm an object!";
}}

try…catch语句

finally块：finally块包含了在try和catch块完成后、下面接着try…catch的语句之前执行的语句。finally块无论是否抛出异常都会执行。

从你的全世界路过026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫