Web前端三剑客

心系2023-11-20 16:00

Web前端三剑客是指 HTML、CSS 和 JavaScript 这三种技术，它们是网页前端开发的基础。其中HTML 负责网页的结构，CSS 负责网页的样式，JavaScript 则负责网页的交互和动态效果。

HTML（Hyper Text Markup Language 1990）

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。由万维网联盟（World Wide Web Consortium，简称W3C）进行标准化和更新。W3C是一个国际组织，由网景公司、微软公司等多家公司和机构组成，致力于推动Web技术的发展和标准化。

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hellow World</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

用浏览器打开呈现的效果：

HTML版本

HTML经历了多个版本的发展和演变：

  1. HTML 2.0： 发布于1995年，是HTML的第一个正式规范版本，引入了基本的文本标记和图像显示。
  2. HTML 3.2： 发布于1997年，增加了表格、表单和图像映射等功能，是早期网页设计中广泛使用的版本。
  3. HTML 4.01： 发布于1999年，进一步完善了表单、样式和脚本等元素，引入了CSS（层叠样式表）来控制页面的外观和布局。
  4. XHTML 1.0： 发布于2000年，是对HTML进行扩展和重新定义的严格版本，基于XML语法，要求严格的标签闭合和语法规范。
  5. HTML5： 发布于2014年，是目前最新的HTML标准版本。HTML5引入了许多新特性，如语义化标签、多媒体支持、Canvas绘图、本地存储等，为网页开发提供了更多的功能和灵活性。

HTML与XHTML的区别

  1. 语法规范：HTML的语法相对宽松，容忍一些不严格的写法，而XHTML则要求更为严格的语法。XHTML是基于XML的，要求每个元素都必须正确嵌套并闭合，并且标签名、属性名和属性值都必须使用小写字母。
  2. 文档结构：在HTML中，一些标签可以省略或者写得不完整，而XHTML要求所有标签必须按照严格的层次结构来组织，包括、和等。
  3. DOCTYPE声明：HTML和XHTML的DOCTYPE声明也有所区别。HTML中常见的DOCTYPE声明为<!DOCTYPE html>，而XHTML需要使用更长的XML格式的DOCTYPE声明，如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "``http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd``">。
  4. 内容类型：HTML文档的内容类型通常设置为text/html，而XHTML文档的内容类型常设置为application/xhtml+xml，这意味着XHTML文档必须以XML形式传递给浏览器，并且需要更严格的解析规则。
  5. 脚本和样式：在HTML中，可以将脚本（如JavaScript）和样式（如CSS）直接嵌入到标记语言中，而XHTML更倾向于将脚本和样式以外部文件的形式引入。

HTML5新增内容

  1. 语义化标签： HTML5引入了一系列的语义化标签，如、、、、等，用于更清晰地定义文档结构和内容。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Example</title>
  <style>
    html,
    body {
      margin: 0;
    }
    * {
      box-sizing: border-box;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #FFA841;
      padding: 0 20px;
      height: 60px;
    }
    header ul {
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    header ul li {
      padding: 10px;
    }
    header ul li a {
      color: white;
    }
    .main {
      display: flex;
    }
    .aside {
      width: 200px;
      background-color: #589FFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
    }
    .aside ul li {
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #AB8EFF;
      display: flex;
      flex-direction: column;
      padding: 10px;
      height: calc(100vh - 142px);
    }
    .content section {
      background-color: #51EE97;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      padding: 0 10px 10px 10px;
    }
    footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: black;
      color: white;
    }
    footer p {
      margin: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </header>
  <section class="main">
    <aside class="aside">
      <h3>Aside Menu</h3>
      <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
      </ul>
    </aside>
    <section class="content">
      <section>
        <h2>Content One</h2>
        <article>
          <h2>My Blog Post</h2>
          <p>Here is my blog post content...</p>
          <p>Here is more content...</p>
        </article>
      </section>
      <section>
        <h2>Content Two</h2>
        <article>
          <h2>My Blog Post</h2>
          <p>Here is my blog post content...</p>
          <p>Here is more content...</p>
        </article>
      </section>
      <section>
        <h2>Content Three</h2>
        <article>
          <h2>My Blog Post</h2>
          <p>Here is my blog post content...</p>
          <p>Here is more content...</p>
        </article>
      </section>
    </section>
  </section>
  <footer>
    <p>&copy; 2023 My Company. All rights reserved.</p>
    <p>Contact us at info@mycompany.com</p>
  </footer>
</body>
</html>
  1. 视频和音频支持： HTML5提供了和标签，使得在网页中直接嵌入视频和音频变得更加简单，而无需依赖第三方插件。在HTML5出来之前，使用Flash技术。2020年底Adobe正式停止对Flash Player的更新和分发，并在2021年后彻底下线。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Video Example</title> 
</head>
<body>
<video width="800" height="540" controls>
  <source src="https://www-static.chemicalai.cn/assets/videos/airs.mp4" type="video/mp4">
  <source src="https://www-static.chemicalai.cn/assets/videos/airs.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>
</body>
</html>

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Audio Example</title> 
</head>
<body>
<audio controls>
  <source src="https://www.runoob.com/try/demo_source/horse.ogg" type="audio/ogg">
  <source src="https://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</body>
</html
  1. Canvas绘图： HTML5的元素允许通过JavaScript进行动态的2D和3D绘图，可以实现复杂的动画效果和交互。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
  <title>Canvas Example</title> 
</head>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
  </script>
</body>
</html>
  1. 表单增强： HTML5为表单提供了一些新的输入类型，如日期、时间、邮箱、搜索等，同时还提供了验证、自动完成和提交控制等功能，减少了对脚本的依赖。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
  <title>Form Example</title>
</head>
<body>
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">
  <label for="meeting-time">会议时间:</label>
  <input type="time" id="meeting-time" name="meeting-time">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  <label for="search">搜索:</label>
  <input type="search" id="search" name="search">
  <progress value="50" max="100"> </progress>
</body>
</html>
  1. 本地存储： HTML5引入了本地存储技术，包括localStorage和sessionStorage，使得网页可以在客户端存储数据，提高了离线使用和性能优化的能力。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head> 
  <meta charset="utf-8"> 
  <title>localStorage Example</title> 
</head>
<body>
  <div id="result"></div>
  <script>
    if (typeof (Storage) !== "undefined") {
      // 存储
      localStorage.setItem("sitename", "world");
      // 查找
      document.getElementById("result").innerHTML = "Hello：" + localStorage.getItem("sitename");
    }
    else {
      document.getElementById("result").innerHTML = "对不起，您的浏览器不支持 web 存储。";
    }
  </script>
</body>
</html>
  1. 地理位置 API ： HTML5引入了Geolocation API，可以获取用户的地理位置信息，用于定位服务和位置相关的应用。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Location Example</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else
  {
    x.innerHTML="该浏览器不支持获取地理位置。";
  }
}

function showPosition(position)
{
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude; 
}
</script>
</body>
</html>

CSS（Cascading Style Sheets 1996）

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由万维网联盟（World Wide Web Consortium，简称W3C）进行标准化和更新。

xml 复制代码 
 <style type="text/css">
    h1 {
      color: yellow;
      text-align: center;
    }

    p {
      font-family: "Microsoft YaHei", 微软雅黑;
      font-size: 20px;
    }

    button {
      background-color: red;
    }
  </style>

CSS版本

  1. CSS1： 于1996年成为W3C推荐标准，定义了最基本的 CSS 属性和样式。
  2. CSS2： 于1998年成为W3C推荐标准，引入了更多的选择器、定位方式、字体控制等新功能，并提供了对表格和打印样式的更好支持。
  3. CSS2.1： 于2004年成为W3C推荐标准，对CSS2进行了修正和完善，保持了与之前版本的向后兼容性。
  4. CSS3： 增加了大量的新特性和功能，如圆角、阴影、渐变、动画等。常见的 CSS3 模块包括 CSS Selectors Level 3、CSS Color Level 3、CSS Backgrounds and Borders Level 3、CSS Transforms 2D/3D 等。

CSS3动画

通过transition和animation属性，可以实现元素在不同状态下的平滑过渡和动画效果。可以定义过渡的属性、持续时间、延迟时间等，并且还可以使用关键帧动画来控制元素的动画序列。

CSS3 2D 3D转换

CSS3引入了transform属性，可以实现元素的2D和3D转换效果，如平移、旋转、缩放、倾斜等，为页面添加更丰富的交互效果。

CSS3媒体查询

媒体查询是CSS3的一个重要特性，允许根据设备的特征（如屏幕大小、分辨率、颜色能力等）以及用户的偏好设置来应用不同的样式规则，实现响应式布局和自适应设计。

示例代码：

xml 复制代码 
<style>
@media screen and (max-width: 300px) {
    body {
        background-color:black;
    }
}
</style>

CSS3绘制图形、字母

css-tricks.com/the-shapes-...

www.cssportal.com/css3-shapes...

css-doodle.com/

www.zhangxinxu.com/wordpress/2...

www.shejidaren.com/pure-css-ic...

JavaScript（1995原名LiveScript）

JavaScript（简称"JS"）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

目前最主要的组织是ECMA国际（European Computer Manufacturers Association，欧洲计算机制造商协会）。ECMA国际负责制定和发布JavaScript的标准规范，确保不同浏览器和平台上的JavaScript具有一致的行为。

示例代码：

xml 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <script>
    function displayDate() {
      document.getElementById("demo").innerHTML = Date();
    }
  </script>
</head>
<body>
  <h1>我的第一个标题</h1>
  <p>我的第一个段落。</p>
  <button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>

JavaScript版本

  1. ECMAScript 1 (ES1)： 1997年发布的第一个ECMAScript标准，定义了最初的JavaScript语言规范。
  2. ECMAScript 2 (ES2)： 1998年发布，对ES1进行了一些修订和纠正。
  3. ECMAScript 3 (ES3)： 1999年发布，引入了一些新功能和语法改进，成为Web开发中使用最广泛的JavaScript版本。
  4. ECMAScript 4 (ES4)： 原计划于2008年发布，但由于争议和技术分歧而被搁置，最终没有实施。
  5. ECMAScript 5 (ES5)： 2009年发布，引入了许多新功能，包括严格模式（strict mode）、JSON对象、Array方法等。
  6. ECMAScript 6 (ES6ES13) / ECMAScript 2015 (ES2015ES2022)： 2015年发布，是一次重大的更新，引入了许多新的语言特性，如箭头函数、类、模块化等。

自ES6以后，ECMAScript开始采用每年发布一个小版本的更新策略，所以还有很多后续版本，如ES2020、ES2022等。这些版本中包含了更多的新功能和语法改进，以增强JavaScript的功能和可用性。

JavaScript能干什么

  1. 前端 交互： JavaScript 可以使网页具有动态和交互性，页面元素的展示与隐藏、按钮点击事件等。
  2. 动态内容加载： 通过 JavaScript，可以在不刷新整个页面的情况下，动态地加载和更新页面的部分内容，从而提升用户体验。
  3. 数据操作：JavaScript 具有强大的数据处理能力，可以对文本、数值、数组、对象等进行操作和转换，实现数据的增删改查、排序、过滤等功能。
  4. 浏览器交互： JavaScript 可以通过浏览器提供的 API 与浏览器进行交互，读取和修改网页的样式、结构、内容，实现动态修改和优化页面。
  5. AJAX/异步请求： JavaScript 可以通过 AJAX 技术发送异步请求，与服务器进行数据交互，并实时更新页面，实现无需刷新的数据传输。
  6. 客户端表单验证： JavaScript 可以实现客户端的表单验证，减少不必要的服务器请求和响应时间，并提供实时的错误提示和反馈。
  7. 响应式设计： JavaScript 可以检测设备窗口大小的变化，并根据不同的屏幕尺寸和设备类型，动态调整页面的布局和样式。
  8. 动画效果： 通过 JavaScript 和 CSS 结合，可以实现各种动画效果，如淡入淡出、滑动、缩放、旋转等，为网页添加生动和吸引力。
  9. 地理位置和地图： JavaScript 可以利用浏览器提供的地理位置 API，获取用户的地理位置信息，并结合地图服务实现位置定位和导航功能。
  10. 前端 框架和库： JavaScript 生态系统丰富，有众多优秀的前端框架和库（如React、Vue、Angular、jQuery），通过使用这些框架和库，可以快速构建复杂的交互式应用程序。

2023年6月编程语言排名

总结

HTML、CSS 和 JavaScript 是前端开发的三大基石，被称为前端三剑客。HTML 定义网页的骨架，CSS 赋予网页美观的外表，而 JavaScript 为网页添加了交互和动态的能力。通过巧妙地利用这三项技术，才能打造出符合用户需求、响应迅速并兼容不同设备的优秀前端界面。

相关推荐
涔溪43 分钟前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa2 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
夜色呦2 小时前
掌握ECMAScript模块化：构建高效JavaScript应用
前端·javascript·ecmascript
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10文件或文件夹名称中有空格如何批量去除