前端 | Front-End

Posted 2023-04-13 Arcticus

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端 | Front-End相关的知识，希望对你有一定的参考价值。

HTML

将 HTML 理解成 Markdown 好啦。Markdown 是用来排版一份文本的，同样地，HTML 是用来排版一个网页的。

html
├── head
│   ├── title
│   ├── meta
│   └── link
└── body
    ├── header
    │   ├── h1
    │   └── nav
    │       └── ul
    │           ├── li
    │           ├── li
    │           └── li
    ├── main
    │   ├── section
    │   │   ├── h2
    │   │   ├── p
    │   │   └── p
    │   └── section
    │       ├── h2
    │       ├── p
    │       └── p
    └── footer
        └── p

上面的树状结构展示了一个 HTML 文件的组成：

根元素：<html>
头部：<head>
头部包含了网页的元数据，例如页面标题（title）、字符编码（meta）和样式表（link）。
页面的导航通常在页眉部分（nav）中提供，它包含了一个或多个链接（a）。
主体：<body>
主体包含了网页的主要内容，例如页眉（header）、主要内容区域（main）和页脚（footer）。
主体通常包含一个或多个区域（section），每个区域通常都有一个标题（heading）和一些段落（p）。

一个元素的形式可能如下：

<a href="#">Home</a>

<a> 表示该元素是一个锚点（anchor），“href” 是该元素的一个属性表示跳转链接，“Home” 则是元素的具体内容。“#” 在此处未指定 “id” 则默认回到页面顶部，如果使用了 <base> 元素来指定基准 URL，那么 “#” 符号会被解析为基准 URL。

<p class="tip"><span>提示：</span>... ... ...</p>

p.tip span 
	font-weight:bold;
	color:#ff9955;

“提示” 使用了 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。

<h1 onclick="changetext(this)">点击文本!</h1>

这里的 this 指代 h1 元素本身，它可以传递参数给 JavaScript 脚本以完成特定事件。

一份具体的实例可能如下：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Welcome to My Webpage</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>About Me</h2>
        <p>Hi, my name is Arcy and I\'m a web developer. I love building websites and learning new technologies.</p>
        <p>When I\'m not coding, I enjoy music and playing piano.</p>
      </section>
      <section>
        <h2>My Projects</h2>
        <ul>
          <li><a href="#">Project 1</a></li>
          <li><a href="#">Project 2</a></li>
          <li><a href="#">Project 3</a></li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 Arcy</p>
    </footer>
  </body>
</html>

HTML 中 <div> 和 <span> 可以提高代码的可读性，<div> 用于一个代码块为 “块级元素”，可通过添加 “class” 或 “id” 属性加以指定，<span> 则生效于一行之中为 “内联元素”，可包裹短小的文本。

<img> 和 <table> 用于图表，<form> 用于表单，<input> 等则决定表单中每个元素的作用，<label> 可为元素添加标注。

&lt，&gt 等被称为字符实体，它们用来表示一些特殊字符或无法直接输入的字符。

对于不是空元素的元素，请不要忘记加上结束标签。

CSS

HTML 标签被设计为用于定义文档内容，样式表则用于定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。

CSS 规则由两个主要的部分构成：选择器和声明。选择器是需要改变样式的 HTML 元素，声明分为属性和值，如

p color:red;text-align:center;

在这里选择器是 p，声明是 color:red;text-align:center;。

选择器分为元素选择器、id 选择器、class 选择器、后代选择器、伪类选择器等，“#” 选择一个 id，“.” 选择一个 class。

CSS 中常设置的属性包括背景属性、文本属性、字体属性、列表属性、表格属性等。一些属性可以简写，简写属性的顺序不可更改。

对于链接，共有四种伪类状态：

a:link color:#000000;      /* 未访问链接*/
a:visited color:#00FF00;  /* 已访问链接 */
a:hover color:#FF00FF;  /* 鼠标移动到链接上 */
a:active color:#0000FF;  /* 鼠标点击时 */

其中 a:hover 必须跟在 a:link 和 a:visited 后面，a:active 必须跟在 a:hover 后面。

所有 HTML 元素可以看作盒子，在CSS中，“box model” 这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，自外向内包括：外边距（margin）、边框（border）、内边距（padding）和内容（content）。当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，一个完整大小的元素还必须添加内边距、边框和外边距。

Float 会使元素向左或向右移动，其周围的元素也会重新排列。Float 往往是用于图像，但它在布局时一样非常有用。

下面是一个水平导航栏的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Webpage</title>
<style>
ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;


li 
    float: left;


li a 
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;


li a:hover 
    background-color: #111;

</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

CSS 可用 @keyframes 创建动画。对于旧版本的浏览器，可添加前缀 -webkit-。

下面是一个动画的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>My Webpage</title> 
<style> 
div

	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s;


@keyframes myfirst

	0%   background:red; left:0px; top:0px;
	25%  background:yellow; left:200px; top:0px;
	50%  background:blue; left:200px; top:200px;
	75%  background:green; left:0px; top:200px;
	100% background:red; left:0px; top:0px;


</style>
</head>
<body>

<div></div>

</body>
</html>

CSS 中的 @media 允许根据设备屏幕的尺寸、方向、分辨率或其他一些条件来修改 CSS 样式，例如

@media screen and (max-width: 600px) 
  body 
    background-color: lightblue;

它仅适用于宽度小于 600 像素的屏幕。

JavaScript

JavaScript 服务于网页的动作，如下面的代码能在点击 button 后获取 id 为 “demo” 的 HTML 元素并改变其内容

<script>
function myFunction()

	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容

</script>
<button type="button" onclick="myFunction()">点击这里</button>

下面的两种语法

x=document.getElementById("demo");
var x=document.getElementById("demo").value;

第一行获取了名为 “demo” 的引用，它并没有创建变量，只能在当前函数中生效。第二行创建了名为 x 的对象，赋值等于 “demo” 的值，添加 var 声明其为该函数的局部变量，不添加 var 则为全局变量。如果使用 let 代替 var，则只能在当前代码块而不是整个函数生效。

JavaScript 有四种输出方式: 使用 window.alert() 弹出警告框，使用 document.write() 方法将内容写到 HTML 文档中，使用 innerHTML 写入到 HTML 元素，使用 console.log() 写入到浏览器的控制台。

JavaScript 分为若干数据类型:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = firstName:"John", lastName:"Doe";  // Object 通过对象字面量赋值

创建对象可以使用 new 方法，这将会调用对象的构造函数即关键字 constructor 函数。

对象中可以创建方法，如

var person = 
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	
       return this.firstName + " " + this.lastName;
    
;

可通过 person.fullName() 调用它。上述代码中的 fullName : function() 也可简写为 fullName() 。

正则表达式可验证输入的字符串是否符合某个特定的格式，例如邮箱地址

function validate() 
	var email = document.getElementById("email").value;
	var regex = /^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]2,3$/;
	if (regex.test(email)) 
		document.getElementById("result").innerHTML = "邮箱格式正确";
	 else 
		document.getElementById("result").innerHTML = "邮箱格式不正确";

test 方法可用于检查字符串是否包含符合某个模式的子串，search、replace、match 可进行搜索、替换、提取等。

添加事件监听方法 addEventListener() 用于向指定元素添加事件句柄

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown")。

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的，默认情况下浏览器使用冒泡方式触发事件，但可以使用 addEventListener 方法的第三个参数来指定使用捕获方式。

事件的传递分为冒泡和捕获两种方式。冒泡是指事件从最具体的元素开始，逐级向上触发，直到触发事件的最外层元素。如果一个子元素触发了某个事件，它的父元素也会触发该事件。捕获是指事件从最外层元素开始，逐级向下触发，直到触发事件的最具体的元素。如果一个父元素触发了某个事件，它的子元素也会依次触发该事件。

Promise 和 then 可以很好地处理异步编程和处理异步操作返回的结果，如

fetch(\'https://api.example.com/data\')
  .then(response => response.json()) // 处理成功返回结果
  .then(data => console.log(data)) // 输出成功结果
  .catch(error => console.error(error)); // 处理错误信息

箭头指的是箭头函数，左侧为形参，右侧为函数体，response => response.json() 是一个回调函数。上述代码中 fetch 函数向服务器发起一个异步请求，第一个 .then() 方法将服务器返回的响应对象转换成一个 JSON 对象，第二个.then() 方法将 JSON 对象输出到控制台上，如果失败则执行 .catch()。

Promise 是一个表示异步操作的对象，有三种状态：pending（等待中）、fulfilled（已完成）和 rejected（已拒绝）。Fetch 返回的 promise 对象解析后的值就是下一行 .then 中的 response。.then() 方法会返回一个新的 promise 对象，这个新的 promise 对象的状态和值取决于前一个 promise 对象的状态和回调函数的返回值。

jQuery 是一种 JavaScript 库，它提供了一组易于使用的 API，$ 符号 (选择器符号) 是 jQuery 的快捷方式，它可以快速选取元素、执行操作、绑定事件等，如

<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction()
	$("#h01").html("Hello jQuery")

$(document).ready(myFunction);
</script>