网安入门|前端基础之Html_css基础

Web1.0、Web2.0 和 Web3.0 是互联网发展的三个主要阶段，每个阶段有其独特的特征和技术进步。以下是对它们的介绍：

Web 1.0（静态互联网）

时间：1990年代初到2000年代初
特点：

  1. 静态内容：网页主要是静态的 HTML 文档，内容由网站管理员创建，用户只能浏览，不能参与互动。
  2. 单向信息流：网站向用户单方面提供信息，缺乏用户生成内容和反馈机制。
  3. 典型应用：企业官网、在线目录、新闻门户，如早期的 Yahoo! 和 MSN。
  4. 技术特点：HTML、HTTP 和简单的服务器架构，无动态脚本或数据库支持。

Web 2.0（互动互联网）

时间：2000年代初到2010年代初
特点：

  1. 用户参与：用户可以创建内容（UGC，如博客、视频、评论），网站内容更丰富，互动性强。
  2. 社交化：社交网络崛起，用户之间的互动变得广泛（如 Facebook、Twitter）。
  3. 动态内容：采用动态生成内容的技术，如 AJAX，让网页更流畅。
  4. 典型应用：维基百科、YouTube、博客、在线社区。
  5. 技术特点：JavaScript、HTML5、CSS3、RESTful API，以及以数据库为核心的内容管理系统（如 MySQL）。

Web 3.0（语义互联网）

时间：2010年代初至今（正在发展中）
特点：

  1. 语义化：使用机器可读的数据格式，使得不同服务和系统之间能自动交换和理解数据。
  2. 个性化和智能化：结合人工智能、大数据和机器学习，提供高度个性化的用户体验。
  3. 去中心化：利用区块链技术，使得互联网更去中心化，数据归用户所有。
  4. 沉浸式体验：结合虚拟现实（VR）、增强现实（AR）和物联网（IoT）提供更丰富的交互。
  5. 典型应用：区块链应用（如比特币、以太坊）、去中心化社交平台、NFT 市场。
  6. 技术特点：区块链技术、语义标记（RDF、OWL）、智能合约和知识图谱。

对比总结

特性Web 1.0Web 2.0Web 3.0
内容生成静态，由网站提供动态，由用户生成语义化，机器和用户共同生成
互动性低高（社交、评论等）极高（智能和个性化体验）
技术核心HTML、HTTPAJAX、JavaScript区块链、AI、大数据
架构中心化部分中心化去中心化

HTTP和HTML的恩怨纠葛

HTTP（超文本传输协议）和HTML（超文本标记语言）虽然是完全不同的技术，但在互联网的发展中，它们有着密不可分的关系，可以形象地理解为，HTTP是“载体”，而HTML是“数据”，两个构成了现代互联网的重要基础。以下是它们的“恩怨纠葛”：

一、初次相遇：相辅相成

  1. HTML 的诞生：最早由蒂姆·伯纳斯-李（Tim Berners-Lee）在1989年提出，用于定义网页的内容和结构，比如文本、图片和超链接等。
  2. HTTP 的发明：伯纳斯-李也设计了HTTP，用于在客户端（浏览器）和服务器之间传输HTML文档。最初的HTTP协议非常简单（仅支持GET请求）。
  3. 第一次合作：HTML文档通过HTTP协议传输到用户的浏览器，这种结合实现了第一个网页的显示，开启了Web 1.0时代。

二、发展：互相促进

  1. HTML 的进化：随着网页需求的增加，HTML逐步加入了更多功能（如表格、表单、CSS支持）。
    • HTTP 的支持：HTTP 1.0 和 1.1 随之改进，使传输HTML文件更高效（例如，支持持久连接）。
  2. 多样化内容：HTML不再局限于简单的文本页面，还支持了图片、音频和视频等多媒体内容。
    • HTTP 的适应：HTTP协议优化了数据传输方式，例如通过“内容类型”头字段传递多媒体资源。

三、矛盾：谁拖了谁的后腿

  1. HTML 页面越来越复杂：
    • 动态网页的需求（如JavaScript）导致HTML文件越来越大，服务器负载增加。
    • HTTP 1.x 的线性传输方式（队头阻塞）无法高效传输复杂网页。
    • 结果：用户抱怨网页加载速度慢，HTML指责HTTP技术落后。
  2. HTTP 的瓶颈：
    • HTTP 1.x 不支持并行请求，导致资源加载变慢。
    • HTML 指责 HTTP 没跟上时代的步伐，但HTTP反驳：“是你内容太臃肿了！”

四、和解：技术共进

  1. HTML5 的突破：HTML5加入了丰富的新功能（如本地存储、视频标签），优化了前端体验，并通过压缩文件和代码优化减少了对HTTP传输的压力。
  2. HTTP/2 的革命：HTTP/2 引入多路复用、头部压缩和二进制传输，极大地提高了网页资源加载效率，缓解了HTML复杂性带来的问题。
  3. 共同的愿景：Web体验优化：两者都在追求更快、更流畅的用户体验，成为移动互联网时代的基石。

五、未来：HTTP/3 和 HTML 的新旅程

  1. HTTP/3 的出现：基于QUIC协议，HTTP/3 通过UDP实现低延迟传输，进一步优化了复杂HTML页面的加载速度。
  2. HTML 的展望：作为语义化的网页语言，HTML 将与人工智能和语义网络结合，构建更智能的Web。

HTML基础

HTML定义

HTML，超文本标记语言，如何解读：

  1. 超文本：比文本更牛掰的东西
  2. 标记：给文本内容打上标签
  3. 语言：计算机语言，通常拥有一些固定语法

通俗的说，超文本标记语言的产物：HTML文件，它的主要功能是:存在固定的语法和标签，编辑者可以给文本打上对应的标签，让它有着比文本更牛掰的效果和功能。

前端三剑客

  1. HTML - 超文本标记语言
  2. JavaScript -JS脚本
  3. CSS - 层叠样式表

HTML元素

要学网安的话，你得把这些标签了解一下具体有什么作用，后期项目可能需要看得懂前端代码。

<html><head><title><meta><style><script><body><p><input><form><div><span><h1><img><a>

以下是对这些 HTML 标签的简要介绍及其用途：

1. <html>

  • 定义：HTML 文档的根元素。所有其他 HTML 元素必须包含在 <html> 标签内。
  • 用途：标记一个网页的起始和结束。
<html><!-- 内容 -->
</html>

2. <head>

  • 定义：HTML 文档的头部，包含页面的元信息。
  • 用途：存放标题、样式表、脚本、元数据等内容。
<head><title>网页标题</title><meta charset="UTF-8">
</head>

3.<title>

  • 定义：定义网页的标题，显示在浏览器标签上。
  • 用途：帮助用户识别网页内容；对 SEO 有重要作用。
<title>我的网页</title>

4.<meta>

  • 定义：定义网页的元数据，提供描述性信息，不直接显示在页面中。
  • 用途：
    • 指定字符编码 (charset)。
    • 设置关键词 (keywords) 和描述 (description)。
    • 控制页面刷新或重定向。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

5. <style>

  • 定义：嵌入式样式表，用于定义页面的 CSS 样式。
  • 用途：控制网页的外观，包括字体、颜色、布局等。
  • 示例：
<style>p { color: blue; }
</style>

6. <script>

  • 定义：嵌入或链接 JavaScript 代码的标签。
  • 用途：实现网页的动态功能。（后期可用来xss攻击利用）
  • 示例：
<script>alert("欢迎访问我的网站！");
</script>

7. <body>

  • 定义：HTML 文档的主体内容，显示在浏览器中。
  • 用途：包含网页中用户可见的所有内容（文本、图片、表单等）。
  • 结构：
<body><!-- 页面内容 -->
</body>

8. <p>

  • 定义：段落标签，用于表示文本段落。
  • 用途：分隔文本内容，便于排版。
  • 示例：
<p>这是一个段落。</p>

9. <input>

  • 定义：用户输入控件，用于表单中接收数据。
  • 用途：创建文本框、按钮、复选框等。
  • 属性：type 属性决定输入类型，如文本框 (text)、密码框 (password)、提交按钮 (submit) 等。
  • 示例：
<input type="text" placeholder="输入您的名字">

10. <form>

  • 定义：创建交互表单，用于向服务器提交数据。
  • 用途：承载多个输入控件，处理用户数据提交。
  • 示例：
<form action="/submit" method="post"><input type="text" name="username"><button type="submit">提交</button>
</form>

11. <div>

  • 定义：块级容器标签，用于分组其他元素。
  • 用途：结构化布局，结合 CSS 实现网页布局。
  • 示例：
<div style="background-color: lightgray;">这是一个容器
</div>

12. <span>

  • 定义：行内容器标签，用于包裹短小的内容。
  • 用途：结合 CSS，修改特定文本样式。
  • 示例：
<span style="color: red;">红色文本</span>

13. <h1>

  • 定义：标题标签，表示一级标题（最大）。
  • 用途：定义重要标题，对 SEO 有帮助。
  • 示例：
<h1>网站标题</h1>

14. <img>

  • 定义：图片标签，用于嵌入图像。
  • 用途：显示图片内容，需指定 src 和 alt 属性。
  • 示例：
<img src="image.jpg" alt="图片描述">

15. <a>

  • 定义：超链接标签，用于创建链接。
  • 用途：引导用户跳转到其他页面、资源或位置。
  • 示例：
<a href="https://example.com">访问网站</a>

HTML特性

  1. 自闭标签
    自闭标签是一种在HTML中常见的标签，它在打开标签的同时也关闭了标签，因此不需要额外的闭合标签。自闭标签通常用于表示不需要包含任何内容的元素，例如<img>、<br>、<input>等。例如：
<img src="example.jpg" alt="Example Image" />
<br />
<input type="text" name="username" />

2.标签嵌套
HTML中的标签可以嵌套，这意味着一个标签可以包含另一个标签。标签嵌套用于构建文档的层次结构，将内容组织成逻辑结构。例如，

元素经常用于嵌套其他元素，创建更复杂的布局和样式。嵌套的标签在HTML中必须正确地闭合，确保文档的结构正确。例如：

<div><p>This is a paragraph inside a div.</p><ul><li>Item 1</li><li>Item 2</li></ul>
</div>

在这个例子中，<div>标签包含了一个<p>段落和一个<ul>无序列表，而无序列表又包含了两个列表项<li>。

元素属性

id
name
class
等等

编辑器

关于常用搞IT的编辑器的介绍可以看下面

https://blog.csdn.net/m0_65134936/article/details/142827180

HTML元素分类

块级元素和内联元素

  • 块级元素：标签元素会以新行开始或结束 <h1> <p> <talble>等 ，当前元素标签要独占一行
  • 内联元素：显示数据不会以新行开始 <a> <img><td>，堆积在一起

其他：

  • <div> 块级元素，用于组合其他元素，方便统一设置属性或者样式
  • 布局：设计网页时，考虑到页面的美观。会设置页面的局部或者整体的一个布局
    <table> <div>

CSS

层叠式样式表，决定页面怎么显示元素。CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 创建方式

  • 引入方式：在当前的标签元素中直接使用style属性（行内样式）；
  • 内嵌方式，在<head>中写样式；
  • 外链式，<link> 引入外部CSS文件；使用@import在<head></head>之间应用（后两种需要XX.css文件 ）
    优先级：行内模式>内嵌方式>外链式

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

[外链图片转存中…(img-syFFFM87-1734704761149)]

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。
  • 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

选择器

  • id 选择器
    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
    以下的样式规则应用于元素属性 id=”para1”:

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ID选择器 Demo</title><style>/* 使用id选择器来设置样式 */#myText {color: white;background-color: blue;font-size: 24px;padding: 10px;border-radius: 5px;}#myButton {background-color: green;color: white;padding: 10px 20px;border: none;font-size: 16px;border-radius: 5px;}#myButton:hover {background-color: darkgreen;}</style>
</head>
<body><!-- 使用id选择器选择元素 --><p id="myText">这是一个使用ID选择器设置样式的文本。</p><button id="myButton">点击我</button>
</body>
</html>
  • class 选择器
    class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
    class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
    在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Class选择器 Demo</title><style>/* 使用 class 选择器来设置样式 */.highlight {color: white;background-color: orange;font-size: 18px;padding: 5px;border-radius: 3px;}.button {background-color: blue;color: white;padding: 10px 20px;border: none;font-size: 16px;border-radius: 5px;cursor: pointer;}.button:hover {background-color: darkblue;}.container {margin: 20px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;}</style>
</head>
<body><div class="container"><p class="highlight">这是一个使用 class 选择器设置样式的文本。</p><p class="highlight">另一个带有相同 class 的文本。</p></div><button class="button">点击我</button><button class="button">再点击我</button>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/64558.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

开发平台接口规范：北斗终端-＞北斗三号卫星-＞指挥机（北斗终端）-＞北斗短报文融合平台-＞客户平台（上行）| 时空信息产品

开发平台接口规范：北斗终端-＞北斗三号卫星-＞指挥机（北斗终端）-＞北斗短报文融合平台-＞客户平台（上行）| 时空信息产品

文章目录 引言I 技术架构和业务流程技术架构北斗终端信息流II 渠道接口验证签名白名单IP渠道配置表设计III 其他辅助功能TCP 发送消息到消息中心nginx转发网关服务异常捕获日志采集IV 知识扩展对请求参数进行校验引言 开发平台的应用场景：平台需要开发能力给下游平台需要接收上…
阅读更多...
知识分享第三十天-力扣343.(整数拆分)

知识分享第三十天-力扣343.(整数拆分)

343 整数拆分 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xff0c;并使这些整数的乘积最大化。 返回你可以获得的最大乘积。 示例 1: 输入: 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: 10 输出: 36 解释: 10 3 3 4, 3 3 4 36。 说明: 你可…
阅读更多...
C语言中回调函数的注册及使用

C语言中回调函数的注册及使用

1&#xff0c;回调函数类型定义 #include <stdio.h>// 定义回调函数类型 typedef void (*CallbackFunction)(int); 2&#xff0c;定义注册和调用回调函数的函数 // 存储回调函数的数组 CallbackFunction callbacks[10]; int callback_count 0;// 注册回调函数 void r…
阅读更多...
SQL Server 解决游标性能问题的替代方案

SQL Server 解决游标性能问题的替代方案

在 SQL Server 中&#xff0c;游标&#xff08;Cursor&#xff09;是一种用于逐行处理数据集的强大工具&#xff0c;但在某些情况下&#xff0c;它们可能会导致性能问题&#xff0c;尤其是在处理大量数据时。为了提高性能和可维护性&#xff0c;可以考虑使用其他替代方案。以下…
阅读更多...
Vue3路由跳转动画引发页面抖动问题的解决方案

Vue3路由跳转动画引发页面抖动问题的解决方案

在现代Web应用中&#xff0c;动画不仅提升了视觉效果&#xff0c;还显著改善了用户体验。Vue3作为前端框架的佼佼者&#xff0c;以其强大的生态和灵活的API为开发者提供了丰富的动画实现方式。然而&#xff0c;在Vue3中为路由跳转增加动画效果时&#xff0c;开发者可能会遇到页…
阅读更多...
【redis的使用、账号流程、游戏服Handler的反射调用】1.自增id 2.全局用户名这样子名字唯一 3.

【redis的使用、账号流程、游戏服Handler的反射调用】1.自增id 2.全局用户名这样子名字唯一 3.

一、web服 1)账号注册 // 用于唯一命名服务 com.xinyue.game.center.business.account.logic.AccountRegisterService#accountRegister public void accountRegister(AccountEntity account) {accountManager.checkUsername(account.getUsername());accountManager.checkPass…
阅读更多...
搭建Tomcat（六）---Response的实现

搭建Tomcat（六）---Response的实现

目录 引入 一、前端项目容器的搭建 重建项目: 1.创建一个新的项目&#xff1a; 2.创建HTML文件 3.将先前编写的所有tomcatJava文件挪过来 二、配置java文件 1.重启一下MyTomcat 2.配置两个工具包 ①FileUtil ②ResponseUtil&#xff08;响应头&#xff09; 三、处理…
阅读更多...
机械鹦鹉与真正的智能：大语言模型推理能力的迷思

机械鹦鹉与真正的智能：大语言模型推理能力的迷思

编者按&#xff1a; 大语言模型真的具备推理能力吗&#xff1f;我们是否误解了"智能"的本质&#xff0c;将模式匹配误认为是真正的推理&#xff1f; 本文深入探讨了大语言模型&#xff08;LLMs&#xff09;是否真正具备推理能力这一前沿科学问题&#xff0c;作者的核…
阅读更多...
.net winform 实现CSS3.0 泼墨画效果

.net winform 实现CSS3.0 泼墨画效果

效果图 代码 private unsafe void BlendImages1(Bitmap img1, Bitmap img2) {// 确定两个图像的重叠区域Rectangle rect new Rectangle(0, 0,Math.Min(img1.Width, img2.Width),Math.Min(img1.Height, img2.Height));// 创建输出图像&#xff0c;尺寸为重叠区域大小Bitmap b…
阅读更多...
VUE+Node.js+mysq实现响应式个人博客|项目初始化+路由配置+基础组件搭建

VUE+Node.js+mysq实现响应式个人博客|项目初始化+路由配置+基础组件搭建

Day 1 开发文档&#xff1a;项目初始化与基础架构搭建 一、项目初始化 1. 创建项目 首先&#xff0c;我们使用 Vite 创建一个基于 Vue 3 的项目&#xff1a; # 创建项目 npm create vitelatest my-blog -- --template vue # 这条命令会创建一个名为 my-blog 的新项目&#…
阅读更多...
短视频矩阵：构建多平台曝光的高效运营网络

短视频矩阵：构建多平台曝光的高效运营网络

在当今这个瞬息万变的数字化时代&#xff0c;短视频以其独特的魅力迅速占领了人们的视野&#xff0c;成为信息传播与娱乐消遣的重要一环。随着短视频平台的不断增多和用户群体的日益庞大&#xff0c;如何精准高效地利用短视频进行品牌推广和产品营销&#xff0c;成为了众多企业…
阅读更多...
ubuntu+ros新手笔记（三）：21讲没讲到的MoveIt2

ubuntu+ros新手笔记（三）：21讲没讲到的MoveIt2

系统ubuntu22.04 ros2 humble 1 安装MoveIt2 安装参照在ROS2中&#xff0c;通过MoveIt2控制Gazebo中的自定义机械手 安装 MoveIt2可以选择自己编译源码安装&#xff0c;或者直接从二进制安装。 个人建议直接二进制安装&#xff0c;可以省很多事。 sudo apt install ros-humbl…
阅读更多...
Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…
阅读更多...
蓝桥杯摆烂第三天

蓝桥杯摆烂第三天

小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 请计算这次考试的最高分、最低分和平均分。 输入描述 输入的第一行包含一个整数 n (1≤n≤104)&#xff0c;表示考试人数。 接下来 n 行&#xff0c;每行包…
阅读更多...
DotNetBrowser 3.0.0 正式发布！

DotNetBrowser 3.0.0 正式发布！

&#x1f6e0;️ 重要消息&#xff1a;DotNetBrowser 3.0.0 正式发布&#xff01; 我们很高兴向您介绍全新的 DotNetBrowser 3.0.0 版本。此次更新带来了多项重要功能与优化&#xff0c;进一步提升了 Web 开发的效率和体验。 &#x1f4e2; DotNetBrowser 3.0.0 包含哪些新功…
阅读更多...
C++ —— 使用指针

C++ —— 使用指针

C —— 使用指针 解引用指针用于函数的参数 解引用 声明指针变量后&#xff0c;在没有赋值之前&#xff0c;这时候不能使用指针。因为&#xff0c;此时我们不知道指针里面装的是什么。 在声明变量后&#xff0c;应该养成对变量赋初始值的好习惯。 指针存放的是变量的地址&…
阅读更多...
在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c

在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c

在 Visual Studio Code 中编译、调试和执行 Makefile 工程 llama2.c 1. Installing the extension (在 Visual Studio Code 中安装插件)1.1. Extensions for Visual Studio Code1.2. C/C1.2.1. Pre-requisites 1.3. Makefile Tools 2. Configuring your project (配置项目)2.1.…
阅读更多...
CSS Backgrounds(背景)

CSS Backgrounds(背景)

CSS Backgrounds(背景) Introduction(介绍) CSS backgrounds play a crucial role in web design, allowing developers to apply colors, images, and other decorative elements to the background of HTML elements. This enhances the visual appeal of web pages and he…
阅读更多...
Oracle 查询表占用空间（表大小）的方法

Oracle 查询表占用空间（表大小）的方法

目录 概述方法一&#xff1a;使用 dbms_space 包方法二&#xff1a;查询 dba_extents 视图方法三&#xff1a;查询 dba_segments 视图总结 1. 概述 在Oracle数据库管理中&#xff0c;了解特定表或索引所占用的空间对于性能调优、存储规划以及资源分配至关重要。本文档介绍了三…
阅读更多...
EfficientNet：对模型深度、宽度和分辨率的混合缩放策略

EfficientNet：对模型深度、宽度和分辨率的混合缩放策略

论文&#xff1a;https://arxiv.org/abs/1905.11946 项目&#xff1a;https://github.com/tensorflow/tpu/tree/master/models/official/efficientnet Pytorch实现&#xff1a;EfficientNet模型Pytorch版本具体实现-CSDN博客 一、概况 1、概述&#xff1a; 这张图可以清晰明…
阅读更多...
最新文章

Copyright @ 2022~2023