内容结构表现
1、1 内容结构的表现
内容结构表现是指网页中的各种元素，如文本、图片、视频等在页面上的布局和展示方式，这些元素按照一定的规则和标准进行排列，形成一个有层次、有组织的整体，在WEB标准中，内容结构表现主要包括以下几个方面：
1、1.1 语义化标签
语义化标签是HTML5引入的一种新特性，它允许开发者为网页中的不同部分添加特定的属性，以描述这些部分的内容和作用，使用<header>标签表示网页的头部，<nav>标签表示导航栏等，这样，当浏览器解析网页时，可以根据这些标签来正确地渲染网页的结构，提高网页的可访问性和可用性。
1、1.2 CSS样式表
CSS(层叠样式表)是一种用于描述HTML文档样式的语言，通过编写CSS样式表，可以控制网页中各种元素的字体、颜色、大小、位置等外观属性，从而实现对网页结构的美化和优化，在WEB标准中，推荐使用外部CSS文件来存放样式信息，并通过<link>标签将样式表链接到HTML文档中，这样可以避免将样式信息嵌入到HTML文档中，便于维护和管理。
1、1.3 HTML表格
HTML表格是一种用于展示二维数据的常用元素，在WEB标准中，推荐使用<table>、<tr>、<td>等标签来创建表格，并通过CSS样式表对表格进行美化，还可以通过JavaScript等脚本语言对表格进行交互操作，提高用户体验。
1、2 行为
行为是指网页中的动态效果和交互功能，在WEB标准中，推荐采用一些成熟的技术框架和库来实现这些功能，如jQuery、React、Vue等，这些框架和库可以帮助开发者快速地实现各种复杂的交互效果，提高开发效率，它们还遵循WEB标准的原则和规范，确保生成的代码具有良好的兼容性和可维护性。
分离内容结构表现和行为的方法
在实际开发过程中，我们通常需要将内容结构表现(HTML、CSS)和行为(JavaScript、框架)进行分离，这样做的好处是可以降低代码的耦合度，提高项目的可维护性和可扩展性，本文将介绍一种简单的方法来实现这种分离：模板引擎。
2、1 模板引擎简介
模板引擎是一种用于生成HTML文档的工具，它可以将数据与模板结合在一起，根据数据动态地生成HTML内容，在WEB开发中，常用的模板引擎有EJS、Handlebars、Mustache等，这些模板引擎通常提供了一套简单的语法和API,使得开发者可以轻松地将数据与模板结合在一起，生成最终的HTML文档。
2、2 使用模板引擎分离内容结构表现和行为
下面以EJS为例，介绍如何使用模板引擎将内容结构表现(HTML、CSS)和行为(JavaScript、框架)进行分离。
1、安装EJS模块：
npm install ejs --save
2、创建一个HTML模板文件(如：index.ejs):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web标准示例</title>
<style>
/* 在这里编写CSS样式 */
</style>
</head>
<body>
<header>网站头部</header>
<nav>网站导航栏</nav>
<main id="content">这里是网站的主要内容</main>
<footer>网站底部</footer>
<!-引入外部JavaScript文件 -->
<script src="main.js"></script>
</body>
</html>
3、创建一个JavaScript文件(如：main.js),并引入所需的库和框架：
// 引入jQuery库(可选)
// const $ = require('jquery'); $(document).ready(function() {});
4、在index.ejs模板中使用EJS语法插入数据：
<h1>欢迎来到我的网站</h1>
<p>{{ message }}</p>
5、在main.js文件中处理逻辑：
// 获取要插入的数据(这里是一个字符串)
const data = '这是一段来自后端服务器的数据';
// 将数据插入到HTML模板中(注意：EJS默认不支持直接插入变量，需要借助第三方库或自定义函数实现)
const template = require('ejs').compile('<h1>{{ title }}</h1><p>{{ content }}</p>'); const html = template({ title: '文章标题', content: data }); // 将生成的HTML内容插入到页面中(这里假设有一个id为content的元素) document.getElementById('content').innerHTML = html; // 其他业务逻辑处理(如：调用API获取数据) ...
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/219153.html
微信扫一扫 