网安入门|前端基础之HTML、CSS

举报
天启互联网工作室 发表于 2024/12/25 14:50:23 2024/12/25
【摘要】 前端基础之HTML

网安入门|前端基础之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.0

Web 2.0

Web 3.0

内容生成

静态，由网站提供

动态，由用户生成

语义化，机器和用户共同生成

互动性

低

高（社交、评论等）

极高（智能和个性化体验）

技术核心

HTML、HTTP

AJAX、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 随之改进，使传输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>之间应用（后两种需要css文件 ）优先级：行内模式>内嵌方式>外链式

CSS语法

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


  • 选择器通常是您需要改变样式的 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>

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入