网安入门|前端基础之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支持）。
oHTTP 的支持：HTTP 1.0 和 1.1 随之改进，使传输HTML文件更高效（例如，支持持久连接）。
2.多样化内容：HTML不再局限于简单的文本页面，还支持了图片、音频和视频等多媒体内容。
oHTTP 的适应：HTTP协议优化了数据传输方式，例如通过“内容类型”头字段传递多媒体资源。
三、矛盾：谁拖了谁的后腿
1.HTML 页面越来越复杂：
o动态网页的需求（如JavaScript）导致HTML文件越来越大，服务器负载增加。
oHTTP 1.x 的线性传输方式（队头阻塞）无法高效传输复杂网页。
o结果：用户抱怨网页加载速度慢，HTML指责HTTP技术落后。
2.HTTP 的瓶颈：
oHTTP 1.x 不支持并行请求，导致资源加载变慢。
oHTML 指责 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>
·定义：定义网页的元数据，提供描述性信息，不直接显示在页面中。
·用途：
o指定字符编码 (charset)。
o设置关键词 (keywords) 和描述 (description)。
o控制页面刷新或重定向。
<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>。
元素属性
idnameclass等等
编辑器
关于常用搞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 规则由两个主要的部分构成：选择器，以及一条或多条声明:
·选择器通常是您需要改变样式的 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>
原文始发于微信公众号（天启互联网实验室）：前端基础之HTML
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论