当前位置： 首页 > news >正文

【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 传统布局和Web标准布局的区别

news 2026/4/2 11:50:02

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

传统布局与CSS布局

传统Table布局
传统Table布局方式只是利用了HTML的table元素所具有的零边框特性
因此，Table布局的核心是：
设计一个能满足版式要求的表格结构，将内容装入每个单元格中，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。

如下图:


以上这种设计复杂，改版时工作量巨大,表现代码与内容混合，可读性差
也不利于数据调用分析,网页文件量大，浏览器解析速度慢如蜗牛!

Web2.0标准CSS布局结构

我们先来看一张图:

如图

所以我们CSS布局的基础架构，是把整个网页分为三个部分: 结构、表现、行为

结构

用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML

表现

用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等…主要技术就是CSS,目前版本3.0

行为

是指对整个文档内部的一个模型进行定义及交互行为的编写
主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)

如图


所以说基于Web2.0标准的网站设计的核心目的是如何使网页的表现与内容分离！

这样做的好处有如下：

  1. 高效率的开发与简单维护
  2. 信息跨平台的可用性
  3. 降低服务器成本；加快网页解析速度
  4. 更良好的用户体验

那么，CSS2.0从真正意义实现了设计代码与内容分离!
就像以下这样:

真正的表现与内容完全分离，代码可读性强，样式可重复应用!

举个栗子

以下代码看不懂没关系,这里仅供参考!

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试页</title>
<link href="css/style1.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id=“content”>主体</div>
<div id="footer">尾部</div>
</div>
</body>
</html>

css代码

* {font-family: Arial, Helvetica, sans-serif, "宋体";font-size: 12px;margin: 0px;text-align:center;
}
#container {width: 810px;margin:auto;background:#CCCCCC;
}
#header {height: 100px;width: 800px;padding:5px;background-color: #6699FF;
}
#content {height: 400px;width: 800px;padding:5px;background-color#FF9900;
}
#footer {width: 800px;height: 50px;padding:5px;background-color: #6699FF;
}

最后产生的效果如下:

所以这种布局方式，我们俗称为: DIV+CSS布局!

我们在使用web2.0标准布局方式的时候，经常会使用到以下HTML标签:

布局用：<div></div>；
文本用：<h1～h6>，<p></p>
图片用：<img/>
列表用：<ul><ol><li><dl><dt><dd>
数据用：<table></table>
其他的：form，input，select
其它常用标签：font,span,pre

再次声明一下HTML标签的写法:

1.属性名称必须小写
2.属性值必须使用双引号
3.不允许使用标签简写
4.使用id替代name
5.必须使用结束标签

光有标签没用，我们接下来就要开始学习CSS的基础知识啦!

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!
如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

相关文章：

【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 传统布局和Web标准布局的区别

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 传统布局与…...

编程日记 2024/3/8 7:29:39

005-事件捕获、冒泡事件委托

事件捕获、冒泡&事件委托 1、事件捕获与冒泡2、事件冒泡示例3、阻止事件冒泡4、阻止事件默认行为5、事件委托6、事件委托优点 1、事件捕获与冒泡 2、事件冒泡示例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /…...

编程日记 2024/3/8 7:28:38

SpringBoot快速入门（介绍，创建的3种方式，Web分析）

目录 一、SpringBoot介绍 二、SpringBootWeb快速入门 创建 定义请求处理类 运行测试 三、Web分析 一、SpringBoot介绍 我们可以打开Spring的官网(Spring | Home)&#xff0c;去看一下Spring的简介&#xff1a;Spring makes Java simple。 Spring发展到今天已经形成了一种…...

编程日记 2024/3/8 7:26:36

VMwareWorkstation17.0虚拟机搭建WindowsME虚拟机（完整安装步骤详细图文教程）

VMwareWorkstation17.0虚拟机搭建WindowsME虚拟机&#xff08;完整安装步骤详细图文教程&#xff09; 一、Windows ME安装准备工作3.1 Windows ME下载地址3.2 DOS软盘版下载地址3.3 UltraISO 4.用VMware虚拟模仿当年的电脑配置4.1 新建虚拟机4.2 类型配置4.3 类型配置4.4 选择版…...

编程日记 2024/3/8 7:25:34

【Java设计模式】八、装饰者模式

文章目录 0、背景1、装饰者模式2、案例3、使用场景4、源码中的实际应用 0、背景 有个快餐店&#xff0c;里面的快餐有炒饭FriedRice 和 炒面FriedNoodles&#xff0c;且加配菜后总价不一样&#xff0c;计算麻烦。如果单独使用继承&#xff0c;那就是&#xff1a; 类爆炸不说&a…...

编程日记 2024/3/8 7:19:27

python INI文件操作与configparser内置库

目录 INI文件 configparser内置库 类与方法 操作实例 导入INI 查询所有节的列表 判断某个节是否存在 查询某个节的所有键的列表 判断节下是否存在某个键 增加节点 删除节点 增加节点的键 修改键值 保存修改结果 获取键值 获取节点所有键值 INI文件 即Initiali…...

编程日记 2024/3/8 7:16:25

软考笔记--软件系统质量属性

一.软件系统质量属性的概念 软件系统的质量就是“软件系统与明确地和隐含的定义的需求相一致的程度”。更具体地说&#xff0c;软件系统质量就是软件与明确地叙述的功能和性能需求文档中明确描述的开发标准以及任何专业开发的软件产品都应该具有的隐含特征相一致的程度。从管理…...

编程日记 2024/3/8 7:15:24

新型设备巡检方案-手机云巡检

随着科技的不断发展&#xff0c;设备巡检工作也在逐步向智能化、高效化方向转变。传统的巡检方式往往需要人工逐个设备检查&#xff0c;耗时耗力&#xff0c;效率低下&#xff0c;同时还容易漏检和误检。而新型设备巡检应用—手机蓝牙云巡检的出现&#xff0c;则为设备巡检工作…...

编程日记 2024/3/8 7:11:19

node.js 下 mysql2 的 CURD 功能极简封装

此封装适合于使用 SQL 直接操作数据库的小型后端项目&#xff0c;更多功能请查阅MySQL2官网 // 代码保存到单独的 js 文件const mysql require(mysql2/promise)const debug true let conn/*** 执行 SQL 语句* param {String} sql* param {*} params* returns {Array}*/ const…...

编程日记 2024/3/8 7:04:13

Cloud-Eureka服务治理-Ribbon负载均衡

构建Cloud父工程 父工程只做依赖版本管理 不引入依赖 pom.xml <packaging>pom</packaging><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.9.RELEA…...

编程日记 2024/3/8 7:02:10

Northwestern University-844计算机科学与技术/软件工程-机试指南【考研复习】

本文提到的西北大学是位于密歇根湖泊畔的西北大学。西北大学&#xff08;英语&#xff1a;Northwestern University&#xff0c;简称&#xff1a;NU&#xff09;是美国的一所著名私立研究型大学。它由九人于1851年创立&#xff0c;目标是建立一所为西北领地地区的人服务的大学。…...

编程日记 2024/3/8 6:56:04

【Linux的网络编程】

1、OSI的七层网络模型有哪些&#xff0c;每一层有什么作用&#xff1f; 答&#xff1a;&#xff08;1&#xff09;应用层&#xff1a;负责处理不同应用程序之间的通信&#xff0c;需要满足提供的协议&#xff0c;确保数据发送方和接收方的正确。 &#xff08;2&#xff09;表…...

编程日记 2024/3/8 6:55:03

vue-seamless-scroll 点击事件不生效

问题&#xff1a;在使用此插件时发现&#xff0c;列表内容前几行还是能正常点击的&#xff0c;但是从第二次出现的列表开始就没有点击事件了 原因&#xff1a;因为html元素是复制出来的&#xff08;滚动组件是将后面的复制出来一份&#xff0c;进行填铺页面&#xff0c;方便滚动…...

编程日记 2024/3/8 6:54:02

前端工程部署步骤小记

安装mqtt: “mqtt”: “^4.3.7”, npm install git panjiacheng 后台demo下载zip 1、npm install --registryhttps://registry.npmmirror.com 2、npm run dev 前端demo创建 1、安装npm 2、npm install vuenext 3、npm install -g vue/cli 查看版本 vue --version 4、更新插件…...

编程日记 2024/3/8 6:53:01

TS常见问题

文章目录 1. 什么是 TypeScript&#xff1f;它与 JavaScript 有什么区别&#xff1f;2. TS 泛型、接口、泛型工具record、Pick、Omit3. TS unknow和any的区别&#xff0c;如何告诉编译器unknow一定是某个类型&#xff1f;4. 元组与常规数组的区别5. 什么是泛型,有什么作用&…...

编程日记 2024/3/8 6:49:57

linux系统nginx常用命令

查nginx位置 find / -name nginx nginx目录&#xff1a;/usr/local/ 查看nginx进程号 ps -ef |grep nginx 停止进程 kill 2072 启动 ./sbin/nginx /usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf 启动并校验校验配置文件 ./sbin/nginx -t 看到如下显…...

编程日记 2024/3/8 6:48:56

MySQl基础入门③

上一遍内容 接下来我们都使用navicat软件来操作数据了。 1.新建数据库 先创建我门自己的一个数据库 鼠标右键点击bendi那个绿色海豚的图标&#xff0c;然后选择新建数据库。 数据库名按自己喜好的填&#xff0c;不要写中文&#xff0c; 在 MySQL 8.0 中&#xff0c;最优的字…...

编程日记 2024/3/8 6:47:55

idea Gradle 控制台中文乱码

如下图所示&#xff0c;idea 中的 Gradle 控制台中文乱码&#xff1a; 解决方法&#xff0c;如下图所示&#xff1a; 注意&#xff1a;如果你的 idea 使用 crack 等方式破解了&#xff0c;那么你可能需要在文件 crack-2023\jetbra\vmoptions\idea.vmoptions 中进行配置&#xf…...

编程日记 2024/3/8 6:46:53

嵌入式学习day31 网络

网络: 数据传输,数据共享 1.网络协议模型: OSI协议模型 应用层 实际发送的数据 表示层 发送的数据是否加密 会话层 是否建立会话连接 传输层 数据传输的方式&#xff08;数据报…...

编程日记 2024/3/8 6:40:46

Docker网络+原理+link+自定义网络

目录 一、理解Docker网络 1.1 运行tomcat容器 1.2 查看容器内部网络地址 1.3 测试连通性 二、原理 2.1 查看网卡信息 2.2 再启动一个容器测试网卡 2.3 测试tomcat01 和tomcat02是否可以ping通 2.4 只要删除容器，对应网桥一对就没了 2.5 结论 三、--link 3.…...

编程日记 2024/3/8 6:38:43

探索marked：高性能Markdown解析的Web开发工具解决方案

探索marked&#xff1a;高性能Markdown解析的Web开发工具解决方案 【免费下载链接】marked A markdown parser and compiler. Built for speed. 项目地址: https://gitcode.com/gh_mirrors/ma/marked 在现代Web开发中&#xff0c;Markdown解析作为内容呈现的关键环节&am…...

编程新知 2026/4/2 11:47:11

Graphormer惊艳案例：从SMILES到三维构象倾向性预测的延伸应用探索

Graphormer惊艳案例&#xff1a;从SMILES到三维构象倾向性预测的延伸应用探索 1. 模型概述 Graphormer是微软研究院开发的一款基于纯Transformer架构的图神经网络模型&#xff0c;专门为分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测而设计。与传统图神…...

编程新知 2026/4/2 11:42:53

【微信小程序更新机制全解析】原理、实践与最佳实践

前言 微信小程序的更新机制&#xff0c;是连接开发者版本迭代与用户体验的核心桥梁。它设计的核心逻辑是**“自动无感更新为主&#xff0c;手动强制更新为辅”&#xff0c;在保证小程序快速启动、稳定可用**的前提下&#xff0c;尽可能让用户使用最新版本&#xff1b;同时为开…...

编程新知 2026/4/2 11:30:43

JVM面试题——垃圾收集器

目录 Serial / Serial Old ParNew Parallel / Parallel Old CMS&#xff08;Concurrent Mark Sweep&#xff09; G1收集器 ZGC 简介 垃圾收集器对比与选择 Serial / Serial Old 定位&#xff1a;最古老、最稳定的单线程串行收集器&#xff0c;全程 STW。 算法&#xff1…...

编程新知 2026/4/2 11:18:31

电子教材无法下载？教育资源下载工具让智慧课堂资源触手可及

电子教材无法下载&#xff1f;教育资源下载工具让智慧课堂资源触手可及 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#xff0c;让您更方便地获取课本内容。 项目…...

编程新知 2026/4/2 11:06:26

Llama-3.2V-11B-cot算法解析实战：图解卷积神经网络核心原理

Llama-3.2V-11B-cot算法解析实战&#xff1a;图解卷积神经网络核心原理 你是不是经常听到“卷积神经网络”这个词&#xff0c;感觉它既神秘又强大&#xff0c;但一看到那些复杂的数学公式和网络结构图就头疼&#xff1f;别担心&#xff0c;今天咱们就换个方式&#xff0c;用大…...

编程新知 2026/4/2 9:35:14

Alpamayo-R1-10B商业应用探索：车企研发提效与算法验证加速方案

Alpamayo-R1-10B商业应用探索&#xff1a;车企研发提效与算法验证加速方案 1. 项目概述 Alpamayo-R1-10B是NVIDIA推出的自动驾驶专用开源视觉-语言-动作(VLA)模型&#xff0c;作为新一代自动驾驶研发工具链的核心组件&#xff0c;正在改变车企的研发流程。这个100亿参数规模的…...

编程新知 2026/4/2 9:33:10

快速搭建视觉定位服务：Chord（Qwen2.5-VL）一键部署与使用

快速搭建视觉定位服务&#xff1a;Chord&#xff08;Qwen2.5-VL&#xff09;一键部署与使用 1. 项目概述 Chord是基于Qwen2.5-VL多模态大模型的视觉定位服务&#xff0c;能够通过自然语言描述在图像中精确定位目标对象。想象一下&#xff0c;你只需要说"找到图里的白色花…...

编程新知 2026/4/2 9:29:05

告别混乱！用Power BI工作区高效管理跨部门报表：数据集/仪表板/报告编排技巧

告别混乱&#xff01;用Power BI工作区高效管理跨部门报表&#xff1a;数据集/仪表板/报告编排技巧 在数据驱动的商业环境中&#xff0c;跨部门协作常陷入"数据孤岛"困境——财务部的销售分析需要市场部的活动数据&#xff0c;运营部的库存报表又依赖采购部的供应商信…...

编程新知 2026/4/2 8:18:01

C++学习笔记——初始化列表、创建和实例化对象、new 关键字、隐式构造与 explicit 关键字、运算符与运算符重载

目录 1. 初始化列表 1.1 基本语法 1.2 为什么使用初始化列表&#xff1f; 1.3 初始化顺序 2. 创建和实例化对象 2.1 栈上分配&#xff08;自动存储期&#xff09; 2.2 堆上分配&#xff08;动态存储期&#xff09; 2.3 栈 vs 堆&#xff1a;Cherno 的建议 3. new 关键…...

编程新知 2026/4/2 7:39:17