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 为网页添加了交互和动态的能力。通过巧妙地利用这三项技术，才能打造出符合用户需求、响应迅速并兼容不同设备的优秀前端界面。

相关推荐
原谅我很悲12 分钟前
实际开发中，前端项目安装依赖问题总结
前端
humors2211 小时前
java实现excel导入参考资料合集
java·前端·后端·wps·导出·导入·office
New.file2 小时前
AJAX详解
前端·ajax·okhttp
小七蒙恩3 小时前
java 上传txt json等类型文件解析后返回给前端
java·前端·json
糕冷小美n3 小时前
jeecgbootvue3列表数据状态为数字时，手动赋值的三种方法
前端·javascript·vue.js
mqiqe3 小时前
Nginx 配置前端后端服务
运维·前端·nginx
糖炒狗子4 小时前
2.Web安全——HTML基础
安全·web安全·html
小羊小羊，遇事不难5 小时前
Error: near “112136084“: syntax
java·服务器·前端
Domain-zhuo5 小时前
CSS实现一个自定义的滚动条
前端·javascript·css·vue.js·git·node.js
autumn8685 小时前
css的长度单位有那些？
前端·css
热门推荐
01Centos7 yum 报错“Could not resolve host: mirrorlist.centos.org； Unknown error“02新手学习VR全景需要知道的几个问题03HCIA-datacom数通题库和录播视频资料04Excel修改日期格式，改变日期的筛选方式05docker安装启动问题解决排查06玄机平台应急响应—webshell查杀07校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站08【漏洞复现】CVE-2015-3337 Arbitrary File Reading09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10洗涤护理门店小程序DIY制作教程