Web基础

发表于 2024/08/04 更新于 2024/08/04

作者 phil616

32 分钟阅读

AUTOGEN 025d02dfe77f4a3d948753ab6328f24a

HTML 历史

HTML全称为超文本标记语言(HyperText Markup Language),是用来创建网页的标准标记语言。它定义了网页内容的结构和语义。以下是HTML的来源和发展历史:

1989年: 蒂姆·伯纳斯-李在欧洲核子研究中心(CERN)提出了万维网(World Wide Web)的概念,用来方便科学家之间共享信息。
1990年: 伯纳斯-李开发了第一个网页浏览器和服务器,并创建了HTML的原型。当时的HTML非常简单,只有几个基本的标签。
1993年: NCSA的马克·安德森和埃里克·比纳开发了Mosaic浏览器,推动了万维网的普及。HTML开始快速发展,增加了更多标签和功能。
1994年: 伯纳斯-李成立了万维网联盟(W3C),负责制定Web相关标准,包括HTML。
1995年: HTML 2.0发布,增加了表格、表单等功能。同年,HTML 3.0草案提出,但未正式采用。
1997年: HTML 4.0发布,增强了样式、多媒体支持等功能。它后来被细分为HTML 4.01。
1999年: HTML 4.01成为W3C推荐标准,广泛应用于网页开发。
2000年: XHTML 1.0发布,将HTML重新定义为XML的应用,强调了结构和语义的分离。
2004年: Web应用日益复杂,W3C开始制定HTML 5标准。
2008年: HTML 5草案发布,引入了许多新特性,如视频、音频、画布等。
2014年: HTML 5正式成为W3C推荐标准,成为当前Web开发的主流技术。

HTML的发展反映了Web技术的进步,从简单的文本页面到丰富的多媒体应用。它与CSS、JavaScript等技术配合,构成了现代网页的基础。HTML不断吸收新特性,以满足日益增长的Web需求,同时也在向更加语义化、模块化的方向发展。关于W3C W3C全称为万维网联盟(World Wide Web Consortium),是一个国际组织,致力于制定Web相关的技术标准。它由蒂姆·伯纳斯-李于1994年10月创立,目前拥有400多个成员组织,包括各大IT公司、研究机构、政府部门等。以下是W3C的主要职责和工作:

制定Web标准: W3C的核心任务是制定和维护各种Web技术标准,如HTML、CSS、XML、SVG等,确保不同平台和设备上的Web应用能够互操作。推动Web发展: W3C通过引入新技术和特性,不断推动Web向更加智能、开放、易用的方向发展。例如,HTML 5、语义Web、无障碍性等都是W3C重点关注的领域。提供技术指南: W3C发布各种技术规范、指南和最佳实践,帮助开发者正确地使用Web技术,提高网页的质量和性能。开发Web工具: W3C开发了一系列工具和软件,如验证器、检查器等,用来测试网页是否符合标准,帮助开发者发现和修复问题。促进社区交流: W3C举办各种会议、研讨会和在线讨论,为Web社区提供交流和合作的平台,共同探讨Web技术的发展方向。教育和推广: W3C提供教程、课程和认证等教育资源,帮助人们学习和掌握Web技术。同时,W3C也积极宣传Web标准的重要性,提高公众的认识。 W3C通过一个标准的制定流程来开发Web标准:首先由成员提交提案,经过讨论和修改后形成工作草案,然后公开征求意见,最终发布为W3C推荐标准。这个过程是开放、透明的,鼓励所有相关方参与。

基本结构

HTML文档由一系列嵌套的元素构成,这些元素通过标签来定义。以下是一个典型的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</title>

</head>

<body>
    <h1>Main Heading</h1>

    <p>Paragraph text goes here.</p>

</body>

</html>

让我们逐步解析这个结构:

<!DOCTYPE html>: 文档类型声明,告诉浏览器这是一个HTML5文档。
<html>: 根元素,包含整个HTML文档。lang属性指定文档的语言。
<head>: 包含元数据(metadata)的容器,如页面标题、样式表链接、字符编码等。
<meta charset="UTF-8">: 指定文档使用UTF-8字符编码。
<meta name="viewport" ...>: 设置视口(viewport),优化移动设备上的显示。
<title>: 定义文档的标题,显示在浏览器标签页上。
<body>: 包含页面可见内容的容器,如标题、段落、图片、链接等。
<h1>: 一级标题元素。
<p>: 段落元素。

在<body>中,你可以使用各种HTML元素来构建页面内容,如:

标题: <h1> 到 <h6>
段落: <p>
图片: <img>
链接: <a>
列表: <ul>, <ol>, <li>
表格: <table>, <tr>, <td>
表单: <form>, <input>, <button>

等等。这些元素可以嵌套在一起,形成层次结构。通过CSS可以进一步设置元素的样式,通过JavaScript可以添加交互功能。理解HTML的基本结构是创建网页的第一步。在实践中,你会使用更多的元素和属性来构建丰富、语义化的Web内容。

DOCTYPE

DOCTYPE是”document type”（文档类型）的简写，它是HTML文档中的一个声明，用来告诉浏览器该文档使用哪一个HTML或XHTML规范。DOCTYPE声明必须是HTML文档的第一行，位于<html>标签之前。 DOCTYPE的主要目的是启动浏览器的标准模式（standards mode），以标准的方式渲染文档。如果省略DOCTYPE声明，大多数浏览器会使用怪异模式（quirks mode）来渲染页面，这可能导致页面在不同浏览器下出现不一致的布局和样式问题。以下是一些常见的DOCTYPE声明：

HTML5

<!DOCTYPE html> 这是当前推荐的DOCTYPE声明，适用于HTML5文档。它简洁明了，易于记忆。

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “https://www.w3.org/TR/html4/strict.dtd”> 这个DOCTYPE声明指定了使用HTML 4.01的严格版本，要求文档遵守严格的HTML语法规则。

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “https://www.w3.org/TR/html4/loose.dtd”> 这个DOCTYPE声明指定了使用HTML 4.01的过渡版本，允许使用一些在严格版本中被废弃的元素和属性。

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 这个DOCTYPE声明指定了使用XHTML 1.0的严格版本，要求文档遵守更加严格的XML语法规则。

head

<head>标签是HTML文档的一部分，它包含了一些元数据（metadata）和其他与文档相关但不会直接显示在页面上的信息。以下是一些常见的可以放在<head>标签里面的内容：

<title>: 定义文档的标题，显示在浏览器的标题栏或标签页上。
<meta>: 提供有关页面的元信息，如字符编码、视口设置、关键字、描述等。

  
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="This is a web development tutorial.">

<link>: 定义文档与外部资源的关系，最常用于链接样式表（CSS文件）。

  
<link rel="stylesheet" href="style.css">

<style>: 包含文档的内部CSS样式规则。

  
<style>
  body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
</style>

<script>: 包含JavaScript代码或链接到外部JavaScript文件。

  
<script src="script.js"></script>

<base>: 指定文档中所有相对URL的基础URL。

  
<base href="https://www.example.com/">

<noscript>: 为不支持JavaScript或禁用JavaScript的浏览器提供替代内容。

  
<noscript>
  <p>This website requires JavaScript to be enabled.</p>

</noscript>

<iconify-icon>: 定义文档的图标（如网站的favicon）。

  
<iconify-icon rel="icon" href="favicon.ico" type="image/x-icon">

其他元数据标签，如<meta name="author">（文档作者）、<meta name="generator">（生成文档的软件）等。

Open Graph

Open Graph（OG）是一种由Facebook提出的网页元数据协议，用于在社交网络上分享网页时提供更丰富、更准确的信息。当你在Facebook、Twitter等社交平台上分享一个链接时，Open Graph元数据可以控制显示的标题、描述、图片等内容。 Open Graph元数据以<meta>标签的形式放在HTML文档的<head>部分。以下是一些常用的Open Graph属性：

og:title: 分享的标题。

  
<meta property="og:title" content="My Web Page">

og:type: 分享的内容类型，如article、website、video等。

  
<meta property="og:type" content="website">

og:url: 分享的网页的标准URL。

  
<meta property="og:url" content="https://www.example.com/my-page">

og:image: 分享时显示的图片URL。

  
<meta property="og:image" content="https://www.example.com/image.jpg">

og:description: 分享的内容的简短描述。

  
<meta property="og:description" content="This is my awesome web page.">

og:site_name: 网站的名称。

  
<meta property="og:site_name" content="My Website">

og:locale: 内容的地区语言，默认为en_US。

  
<meta property="og:locale" content="en_US">

除了以上基本属性，Open Graph还提供了一些特定内容类型（如article、video）的附加属性，以提供更详细的信息。这里是一个完整的例子：

  
<head>
  <meta property="og:title" content="My Amazing Article">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.example.com/articles/123">
  <meta property="og:image" content="https://www.example.com/preview.jpg">
  <meta property="og:description" content="Read this fascinating article about Web development.">
  <meta property="og:site_name" content="My Blog">
  <meta property="og:locale" content="en_US">
</head>

通过设置合适的Open Graph元数据，你可以控制你的网页在社交网络上的分享预览，提高用户的点击率和参与度。此外，一些搜索引擎也会利用Open Graph元数据来丰富搜索结果的显示。

JavaScript

JavaScript是一种广泛使用的脚本语言,主要用于Web开发,让网页可以实现交互性和动态效果。下面我来为你详细介绍一下JavaScript的历史、基本概念和语法特点: 历史:

1995年由Netscape公司的Brendan Eich发明,最初命名为LiveScript,后改名为JavaScript。
1996年11月,JavaScript作为提案被提交给欧洲计算机制造商协会(ECMA),标准化为ECMAScript。
此后不断发展,目前最新版本为ECMAScript 2022(ES13),于2022年6月发布。

简介:

JavaScript是一种解释型的、面向对象的、动态类型的编程语言。
主要用于浏览器端,通过与HTML和CSS结合使用,让网页具有交互性。
现在也可以用于服务器端(Node.js)、移动应用(React Native)、桌面应用(Electron)等领域。
支持函数式编程、闭包等特性,语法灵活多变。
有非常丰富和活跃的生态系统,大量第三方库和框架如jQuery、React、Vue等。

基本语法:

语句结尾使用分号;
注释使用//或/**/
变量使用var、let或const声明
数据类型:数值、字符串、布尔值、null、undefined、对象、数组等
条件语句:if…else、switch等
循环语句:for、while等
函数定义使用function关键字
面向对象:通过function和new关键字来模拟类和实例

下面是一些基本语法的示例:

  
// 这是单行注释
/*
  这是
  多行注释
*/

// 变量声明
var a = 1;
let b = "hello";  
const c = true;

// 条件语句
if (a > 0) {
  console.log("a是正数");
} else {
  console.log("a是负数");  
}

// 循环语句
for (let i=0; i<5; i++) {
  console.log(i);
}

// 函数定义
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 函数调用
greet("Alice");

// 面向对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHi = function() {
  console.log("我是" + this.name + ",今年" + this.age + "岁");
};

let p = new Person("小明", 20);
p.sayHi();

JS常见用法

好的,我来举例说明JavaScript的一些常见用法。

匿名函数匿名函数就是没有名字的函数,通常作为参数传递给其他函数使用。例如:

  
setTimeout(function() {
  console.log("这是一个匿名函数");
}, 1000);

箭头函数箭头函数是ES6引入的一种更简洁的函数写法,适用于需要匿名函数的地方:

  
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(x => x * x);
console.log(squares); // [1, 4, 9, 16, 25]

继承和对象 JavaScript使用基于原型的继承。可以使用Object.create()方法来实现继承:

  
let animal = {
  eats: true
};

let rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(rabbit.eats); // true 
console.log(rabbit.jumps); // true

数据结构 JavaScript内置了一些基本的数据结构,如数组和对象。

数组例子:

  
let fruits = ["Apple", "Orange", "Plum"];
fruits.push("Pear"); 
console.log(fruits.length); // 4

对象例子:

  
let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

console.log(user.name); // "John"
user.age = 31;
console.log(user.age); // 31

解构赋值解构赋值可以方便地从数组或对象中提取值:

  
// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a); // 1

// 对象解构  
let { name, age } = { name: "Alice", age: 20 };
console.log(name); // "Alice"

Promise和async/await Promise用于处理异步操作,让代码更易读。async/await是基于Promise的更高层的语法糖。

Promise例子:

  
let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

promise.then(
  result => console.log(result), // "done!"
  error => console.log(error) // 不会被调用
);  

async/await例子:

  
async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // 等待直到promise解决 

  console.log(result); // "done!"
}

f();

ECMAScript

ES是”ECMAScript”的缩写,它是JavaScript语言的标准化规范。而ES6指的是ECMAScript的第6个版本,也称为ECMAScript 2015。简单来说,JavaScript是ECMAScript标准的一种实现。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字、运算符、对象等。各个浏览器厂商和Node.js等JavaScript运行环境,都致力于实现ECMAScript标准。自1997年首版发布以来,ECMAScript标准多次更新,如下:

ES1 (1997)
ES2 (1998)
ES3 (1999)
ES4 (未发布)
ES5 (2009)
ES6/ES2015 (2015)
ES2016
ES2017
ES2018
ES2019
ES2020
ES2021
ES2022

其中,ES6是一个里程碑版本,引入了许多重要的新特性,显著改变了JavaScript的编写方式,如:

let和const关键字
箭头函数
类(class)
模块化(import/export)
Promise
解构赋值
模板字符串
参数默认值、剩余参数、扩展运算符
Symbol类型
Set和Map数据结构
等等

这些新特性让JavaScript的表达能力大大增强,代码更简洁、更易读,也更适合大规模的应用开发。举个ES6的代码例子:

  
// 使用let定义块级变量
let a = 1;

// 使用const定义常量
const PI = 3.14;

// 箭头函数
let square = x => x * x;

// 类
class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

let john = new Person("John");
john.sayHi();

// 模板字符串
let name = "Alice";
console.log(`Hello, ${name}!`);

// 解构赋值
let [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2

// Promise
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

虽然ES6已经问世多年,但由于浏览器兼容性等原因,在实际开发中,通常还需要使用Babel等工具将ES6代码”转译”为旧版本的JavaScript代码。从ES6开始,ECMAScript标准改为每年发布一次,以小版本形式逐步引入新特性。理解和学习好ES6,可以让你更高效地使用现代JavaScript进行开发。

CSS

CSS全称为”Cascading Style Sheets”,即层叠样式表。它是一种用于描述HTML或XML文档呈现的样式表语言。CSS允许你将样式(如布局、颜色、字体等)应用于网页,使内容与表现分离。下面我来详细介绍一下CSS的历史、基本概念和使用方法: CSS的历史:

1994年,哈肯·维姆·莱和伯特·波斯提出了CSS的最初构想
1996年12月,CSS 1规范成为W3C推荐标准
1998年5月,CSS 2规范发布
1999年,IE5率先支持CSS的部分特性
2007年,CSS 2.1规范发布
2011年,CSS 3分成独立的模块并陆续定稿
如今,CSS已发展到第4版,CSS的大部分特性已得到主流浏览器的广泛支持

CSS基本概念:

选择器:用来选取需要添加样式的HTML元素,常见选择器有元素选择器、类选择器、ID选择器等
属性:用来指定所选元素的样式,如color、font-size、width、height等
值:指定属性的设定值,如red、16px、100%等
声明:属性和值用冒号(:)连接,如color: red
规则:选择器+声明块构成一条CSS规则
注释:使用/…/添加注释说明

使用CSS的三种方式:

内联样式:在HTML元素的style属性中直接写CSS规则
内部样式表:在HTML文件
外部样式表:将CSS规则单独写在以.css为扩展名的样式表文件中,并在HTML中用标签引用

举个例子,下面的HTML文档演示了这三种使用CSS的方式:

  
<!DOCTYPE html>
<html>
<head>
  <title>CSS使用示例</title>

  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    .highlight {
      background-color: yellow;  
    } 
  </style>

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>CSS入门</h1>

  <p style="color: red;">这是一段内联样式的文本。</p>

  <p class="highlight">这是一段内部样式表设置的文本。</p>

  <p id="special">这是一段外部样式表设置的文本。</p>

</body>

</html>

假设style.css的内容为:

  
#special {
  font-style: italic;
  font-size: 20px;
}

SCSS、SASS

SCSS (Sassy CSS)和Sass (Syntactically Awesome Style Sheets)都是CSS预处理器,它们扩展了CSS的功能,增加了变量、嵌套、混合、函数等特性,使得CSS更加强大和易维护。SCSS是Sass 3引入的新语法,它完全兼容CSS3的语法。 Sass最初采用缩进语法,没有花括号和分号。而SCSS的语法和CSS相同,使用花括号和分号。下面是Sass和SCSS语法的对比: Sass语法:

  
$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $primary-color

SCSS语法:

  
$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

Sass和SCSS都提供了以下主要特性:

变量:可以使用$符号定义变量,存储常用的值如颜色、尺寸等。
嵌套:可以按照HTML的层级关系嵌套CSS选择器,使代码更简洁。
混合(Mixin):可以定义可重用的CSS代码块,并通过@include引入。
继承:可以使用@extend让一个选择器继承另一个选择器的样式。
运算:支持数值的加减乘除等数学运算。
函数:Sass提供了很多内置函数如darken()、lighten()等,也可以自定义函数。
导入:可以使用@import导入其他Sass或CSS文件。

使用Sass/SCSS的好处包括:

代码更简洁,可读性更好
可以复用代码,便于维护
可以使用变量和运算,更灵活
可以提供更好的代码组织方式

使用Sass/SCSS需要将其编译成CSS才能在浏览器中使用。可以使用命令行工具如sass,或集成到构建工具如Webpack、Gulp中进行自动编译。很多前端框架如Bootstrap、Foundation都提供了Sass版本,可见其影响之大。

CSS响应式

CSS的响应式布局(Responsive Web Design,RWD)是一种让网页在不同设备上都能很好展示的布局方式。它可以让网页根据屏幕大小、分辨率等参数自动调整布局和内容,以提供更好的用户体验。响应式布局的核心思想是:

流式网格(Fluid Grid):使用相对单位如百分比来定义元素的宽度,而不是固定的像素值。这样可以让布局自适应不同的屏幕宽度。
弹性图片/媒体(Flexible Images/Media):让图片和其他媒体也能随着布局自适应调整大小,避免溢出或失真。
媒体查询(Media Queries):根据设备的特性如屏幕宽度应用不同的CSS样式。

下面是一个简单的响应式布局例子:

  
<div class="container">
  <div class="header">Header</div>

  <div class="main">
    <div class="article">Article</div>

    <div class="sidebar">Sidebar</div>

  </div>

  <div class="footer">Footer</div>

</div>

  
.container {
  display: flex;
  flex-wrap: wrap;
}

.header, .footer {
  width: 100%;
  background-color: #f1f1f1;
  padding: 20px;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.article {
  flex: 3;
  background-color: white;
  padding: 20px;
}

.sidebar {
  flex: 1;
  background-color: #f1f1f1;  
  padding: 20px;
}

@media screen and (max-width: 600px) {
  .main {
    flex-direction: column;
  }
}

在这个例子中:

使用flex布局让主要区域(.main)中的文章(.article)和侧边栏(.sidebar)并排显示,并可以自动调整宽度。
使用相对单位flex来分配.article和.sidebar的宽度比例。
在屏幕宽度小于600px时应用不同的样式,让.article和.sidebar垂直堆叠显示。

响应式布局的实现除了CSS的flex、grid布局外,还常用到以下技术:

视口(Viewport)标签:通过设置视口,控制页面的缩放和初始宽度。
rem、vw/vh等相对单位:相对于根元素字体大小或视口宽高的单位,可以实现更灵活的尺寸设置。
响应式断点:根据常见设备宽度设置媒体查询的断点,在断点处应用不同的样式。
移动优先(Mobile First):先设计移动设备的布局和样式,再通过媒体查询扩展到大屏幕,可以让CSS更简洁。

响应式布局已经成为现代网页设计的标配,特别是在移动互联网时代,它可以让网页在手机、平板、PC等不同设备上都能提供良好的体验,减少开发和维护成本。建议在开发网页时始终考虑响应式,并在不同设备上进行测试。

Guidance, Web

web

本文由作者按照 CC BY 4.0 进行授权