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

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

article 2024/12/25 5:04:29

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.kler.cn/a/450272.html

相关文章：

  • WEB UI 创建视图
  • Mysql高级部分总结（二）
  • zabbix监控山石系列Hillstone监控模版(适用于zabbix7及以上)
  • vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
  • Datawhale AI 冬令营学习笔记-零编程基础制作井字棋小游戏
  • 初学stm32 --- 定时器中断
  • idea2024创建JavaWeb项目以及配置Tomcat详解
  • 水利水电安全员考试题库及答案
  • 捋一捋相关性运算，以及DTD和NLP中的应用
  • 【超详细实操内容】django的身份验证系统之权限与权限管理
  • 【漏洞复现】CVE-2021-45788 SQL Injection
  • Ansible 批量管理华为 CE 交换机
  • 高性能卡尺找圆工具
  • http反向代理
  • ubuntu22.04安装PaddleX3
  • PyCharm专业版安装和学生认证教程
  • 没想到互联网大厂都喜欢问MySQL中的数据类型？
  • 《开启微服务之旅：Spring Boot Web开发》（三）
  • Nginx与Tomcat之间的关系
  • Python高性能web框架-FastApi教程：(10)Request对象
  • unity 选择图片点击确定保存，取消则不保存
  • 浅显易懂地介绍 llm.c [译]
  • C++设计模式：中介者模式(聊天室系统)
  • 线性控制算法与非线性控制算法阐述与区分
  • 谷歌浏览器“你使用的是不受支持的命令行标志:--no-sandbox。这会带来稳定性和安全风险。”解决方法
  • NestJS中使用DynamicModule构建插件系统