第一章节:HTML 基础

news/2024/9/13 0:36:04/ 标签: 网络安全

参考:https://github.com/qianguyihao/Web/tree/master/01-HTML

1)HTML 基础介绍

1.1)Web 万维网

Web(World Wide Web)即全球广域网,也称为万维网。
我们常说的 Web端 就是网页端。

网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。
我们在浏览器上输入网址后,打开的任何一个页面,都是属于网页。

浏览器 是网页运行的平台,常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera 等。

1.2)W3C 组织

W3C:World Wide Web Consortium,万维网联盟组织,用来制定web标准的机构(组织)。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。
W3C 组织就类似于现实世界中的联合国。
为什么要遵循WEB标准呢?因为很多浏览器的浏览器内核不同,导致页面解析出来的效果可能会有差异,给开发者增加无谓的工作量。因此需要指定统一的标准。

:::info
**注意:**我们在 **安全方面 **一般仅关注 HTML 与 JS 即可,CSS 不存在安全风险。因此不太关注。
:::
Web 标准:制作网页要遵循的规范。
**Web 标准:**不是某一个标准,而是由 W3C 组织和其他标准化组织制定的一系列标准的集合。
1、Web 标准包括三个方面

  • 结构标准(HTML):用于对网页元素进行整理和分类。
  • 表现标准(CSS):用于设置网页元素的版式、颜色、大小等外观样式。
  • 行为标准(JS):用于定义网页的交互和行为。

根据上面的 Web 标准,可以将 Web 前端分为三层,如下。

2、Web前端分三层

  • HTML( HyperText Markup Language ):超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
  • CSS( Cascading Style Sheets ):层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
  • JavaScript( 简称 JS ):从交互的角度描述页面的行为,实现业务逻辑和页面控制。相当于人的动作,让人有生命力。

3、打个比方:(拿黄渤举例)
HTML 相当于人的身体组织结构:

CSS 相当于人的衣服和打扮:

JS 相当于人的行为:

:::info
HTML( HyperText Markup Language ):超文本标记语言。从语义的角度 描述页面的结构。相当于人的身体组织结构。
CSS( Cascading Style Sheets ):层叠样式表。从审美的角度 美化页面的样式。相当于人的衣服和打扮。
JS:JavaScript。从交互的角度 描述页面的行为。相当于人的动作,让人有生命力。
:::

:::info
JS:JavaScript
一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。( 好吧,虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。 )
比如:通过 JS 限制用户在网页上复制内容等等操作。
:::
image.png
image.png

1.3)介绍浏览器

浏览器是网页运行的平台,常见的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。如下图所示:

image.png
**浏览器的组成:**浏览器分为两部分

  • 渲染引擎( 浏览器内核 )
  • JS 引擎
    :::info
    浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用于解析 HTML 和 CSS、布局、渲染 等工作。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
    渲染引擎 是浏览器兼容性问题出现的根本原因。
    :::

:::info
渲染引擎的英文叫做 Rendering Engine。通俗来说,它的作用就是:读取网页内容,计算网页的显示方式并显示在页面上。
:::

浏览器内核
chromeBlink
欧鹏Blink
360安全浏览器Blink
360极速浏览器Blink
SafariWebkit
Firefox 火狐Gecko
IETrident

**备注:**360的浏览器,以前使用的IE浏览器的Trident内核,但是现在已经改为使用 chrome 浏览器的 Blink内核。

:::info
JS 引擎
也称为 JS 解释器。 用来解析网页中的 JavaScript 代码,对其处理后再运行。
浏览器本身并不会执行 JS 代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时会逐行解释每一句源码(转换为机器语言),然后由计算机去执行。所以 JavaScript 语言归为脚本语言,会逐行解释执行。
:::

常见浏览器的 JS 引擎如下:

浏览器JS 引擎
chrome、欧鹏V8
Mozilla Firefox 火狐SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-)
SafariJavaScriptCore,也称为Nitro,是 WebKit 引擎的一部分
IETrident
EdgeChakra。此外,ChakraCore是Chakra的开源版本,可以在不同的平台上使用。
OperaLinear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-)

补充说明:
1、SpiderMonkey 是第一款 JavaScript 引擎,由 JS 语言的作者 Brendan Eich 开发。
2、先以 WebKit 为例,WebKit 上由两部分组成:

  • WebCore:负责解析 HTML 和 CSS、布局、渲染等工作。
  • JavaScriptCore:负责解析和执行 JavaScript 代码。

1.4)HTML 概念

HTML 全称为 HyperText Markup Language,译为超文本标记语言
HTML 不是一种编程语言,是一种描述性的标记语言
作用:HTML是负责描述文档语义的语言。

超文本
所谓的超文本,有两层含义:
(1)图片、音频、视频、动画、多媒体等内容,被称为超文本,因为它们超出了文本的限制。
(2)不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件进行连接。即:超级链接文本。

标记语言
HTML 不是一种编程语言,是一种描述性的标记语言。这主要有两层含义:
(1)标记语言是一套标记标签。比如:标签 表示超链接、标签 表示图片、标签

表示一级标题等等,它们都是属于 HTML 标签。
说的通俗一点就是:网页是由网页元素组成的,这些元素是由 HTML 标签描述出来,然后通过浏览器解析,就可以显示给用户看了。
(2)编程语言是有编译过程的,而标记语言没有编译过程,HTML标签是直接由浏览器解析执行。

:::info
HTML 是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件(就是用 txt 文件改名而成),用一些标签来描述语义,这些标签在浏览器页面上是无法直观看到的,所以称之为“超文本标记语言”。
接下来,我们需要学习 HTML 中的很多“标签对儿”,这些“标签对儿”能够给文本不同的语义。
比如,面试的时候问你,<h1> 标签有什么作用?

  • 正确答案:给文本增加主标题的语义。
  • 错误答案:给文字加粗、加黑、变大。

关乎“语义”的更深刻理解,等接下来我们学习了各种标签,就明白了。
:::

HTML 的历史
image.png

HTML 的专有名词
image.png

1.5)书写第一个 HTML 页面

image.png
HTML 基本框架

上面的内容,就是 HTML 页面的骨架。我们在此基础之上,新增几个标签,完整代码如下:( 内容编写在 body 标签以内 )

image.png

标签写完之后,我们 用 Chrome 浏览器打开上面这个 test.html 文件( 或者 Open With Live Server )
看看页面效果:到此,第一个简单的 HTML 页面就写完了。是不是很有成就感?

image.png

1.6)案例展示

:::info
**案例:**通过 a 标签编写暗链,引流提升 SEO
:::
:::info
暗链 是 SEO 手法中相当普遍的一种手段,笼统地说,它就是指一些人用非正常的手段获取的其它网站的反向链接,最常见的黑链就是通过各种网站程序漏洞获取搜索引擎权重或者 PR 较高的网站的 webshell,进而在被黑网站上链接自己的网站,其性质与明链一致,都是属于为高效率提升排名,而使用的作弊手法。
:::
image.png

浏览器内核会解析该标签,从而达到引流提升 SEO 的效果

image.png

:::info
典型的网络黑色产业链有哪些?
类型 2:在线博彩平台。随着在线支付和智能手机的普及,地下赌场已经迅速完成互联网“转型”,变为具备完整技术链条的在线博彩平台。制作团队专门负责快速开发赌博游戏 App;运维团队大量租用境外服务器保证赌博游戏持续在线;资金团队在境内开设大量空壳公司和金融账户收取并转移赌资;营销团队雇佣黑客入侵正规网站植入赌博暗链,以此提高赌博网站的搜索引擎排名。
:::
:::info
防护方法:

  1. 网页目录监控
  2. 漏洞扫描( DevSecOps )
  3. 企业蓝军( 第三方蓝军 )
  4. 外围防护( 网页防篡改,WAF,应用防火墙 )
    :::

1.7)HTML 结构详解

HTML 标签通常是 **成对出现 **的(双边标记),比如

;也有 少部分单标签单边标记),如:

等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。

:::info
HTML 骨架标签
:::

标签名定义说明
<html></html>HTML 标签页面中最大的标签,我们成为根标签
<head></head>文档的头部注意在 head 标签中我们必须要设置的标签是 title
<title></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体元素包含文档的所有内容,页面内容 基本都是放到 body 里面的

:::info
快速生成 HTML 的骨架
:::

方式1:在 VS Code 中新建 html 文件,输入html:5,按 Tab 键后,自动生成的代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>
</head>
<body></body>
</html>

参考:https://www.yuque.com/blogking/xiaodi/ftgcms8ge47z0psa

:::info

  1. 文档声明头( DOCTYPE )

任何一个标准的 HTML 页面,第一行一定是一个以 开头的语句。这一行,就是文档声明头,即 DocType Declaration,简称 DTD。
:::

<!DOCTYPE html>

:::info

  1. 页面语言( Lang )

下面这行标签,用于指定页面的语言类型:
:::

<html lang="en">

:::info

  1. 头标签( Head )
    1. 字符集:charset - 字符集编码方式
    2. 视口:viewport - 表示视口宽度等于屏幕宽度
    3. 关键字:Keywords - 这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你
    4. 页面描述:Description - 只要设置 Description 页面描述,那么百度搜索结果,就能够显示这些语句,这个技术叫做 SEO(search engine optimization,搜索引擎优化)
      :::
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="Keywords" content="马哥,马哥教育,IT培训,Linux,网络安全" /><meta name="Description" content="马哥教育是中国领先的互联网技术培训公司" />
<title>Document</title>
</head>
<body><h3> 我是个三级标签 </h3>    <img src="https://linux.wuhanjiayou.cn/upload/062146005838969.jpg" alt=""><a href="https://www.wuhanjiayou.cn">小王主页</a>
</body>
</html>

:::danger

  1. meta 标签 - 页面跳转( http-equiv 属性 )

上面这个标签的意思是说,1 秒之后,自动跳转到马哥教育页面。
:::

<meta http-equiv="refresh" content="1;http://www.magedu.com">

image.png
image.png

:::danger

  1. body 标签( 属性 ) - 填写在标签中
  2. body 标签( 元素 )- 填写在标签内部
    :::
    image.png
<body bgcolor="green">			# 属性: 填写在标签中<h3> 我是个三级标签 </h3>	# 内容: 填写在标签内部<a href="https://baidu.com">百度</a>	# 内容: 填写在标签内部
</body>

image.png
image.png

1.8)计算机编码介绍

:::info
参考:https://www.yuque.com/blogking/xiaodi/vg8dky0kl8a9qgn0
:::

计算机,不能直接存储文字,存储的是编码。
计算机只能处理二进制的数据,其它数据,比如:0-9、a-z、A-Z,这些字符

:::info
中文能够使用的字符集两种:

  • 第一种:UTF-8。UTF-8 是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……
  • 第二种:GBK(对GB2312进行了扩展)。gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。

字库规模: UTF-8(字很全) > gb2312(只有汉字)
:::
:::info
**重点 1:**避免乱码
我们用 meta 标签声明的当前这个 html 文档的字库,一定要和保存的文件编码类型一样,否则乱码(重点)。拿 sublime 编辑器举例,当我们不设置的时候,sublime 默认类型就是 UTF-8。而一旦更改为 gb2312 的时候,就一定要记得设置一下 sublime 的保存类型: 文件 → set File Encoding to → Chinese Simplified(GBK) 。VS Code 的道理一样。
:::
:::info
**重点 2:**UTF-8 和 gb2312 的比较
保存大小:UTF-8(更臃肿、加载更慢)> gb2312 (更小巧,加载更快)
总结:

  • UTF-8:字多,有各种国家的语言,但是保存尺寸大,文件臃肿;
  • gb2312:字少,只用中文和少数外语和符号,但是尺寸小,文件小巧。
    :::

列出 2 个使用情形:
1)某公司是做日本动漫的,经常出现一些日语动漫的名字,网页要使用 UTF-8。如果用 gb2312 将无法显示日语。
2)某公司就是中文网页,极度的追求网页的显示速度,要使用 gb2312。如果使用 UTF-8 将每个汉字多一个 byte,所以 5000 个汉字,多 5kb。

:::danger
我们是怎么查看网页的编码方式的呢?在浏览器中打开网页,右键,选择 “查看网页源代码”,找到 meta 标签中的 charset 属性即可。
:::
image.png

2)HTML 排版标签

参考:HTML标签:排版标签.md

02-HTML标签:排版标签.pdf

2.1)标题标签

标题使用

标签进行定义。

定义最大的标题,

定义最小的标题。
具有 align 属性,属性值可以是:left、center、right。

<body><h1>H1:马哥教育</h1><h2>H2:马哥教育</h2><h3>H3:马哥教育</h3><h4>H4:马哥教育</h4><h5>H5:马哥教育</h5><h6>H6:马哥教育</h6>
</body>

image.png
image.png

2.2)HTML 注释

HTML 注释的格式如下( VSCode 快捷键:Ctrl + / )

<!-- 我是 HTML 注释 -->

2.3)段落标签

段落,是英语 paragraph 缩写。
作用:可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来,离不开段落标签。就如同我们平常写文章一样,整个网页也可以分为若干个段落。

<body><p>This is a paragraph</p><p>This is another paragraph</p>
</body>

image.png
image.png

:::info
**属性:**align=“属性值” :对齐方式。属性值包括 left center right。
:::

<body><p align="center"> This is a paragraph </p><p align="center"> This is another paragraph </p>
</body>

image.png
image.png

参考:https://blog.csdn.net/qq_36213140/article/details/121169952

**注意:**HTML 标签是分等级的,HTML 将所有的标签分为两种:

  • **文本级标签:**p、span、a、b、i、u、em。文本级标签里只能放 文字、图片、表单元素。( a 标签里不能放 a 和 input )
  • **容器级标签:**div、h 系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习 p 的第一天开始,就要牢牢记住:**p 标签是一个文本级标签,p 里面只能放文字、图片、表单元素。**其他的一律不能放。

错误写法:(尝试把 h 放到 p 里)

	<p>我是一个小段落<h1>我是一级标题</h1></p>

网页效果
上图显示,浏览器不允许你这么做,我们使用 Chrome 的 F12 审查元素发现,浏览器自己把 p 封闭掉了,不让你去包裹 h1。
**PS:**Chrome 浏览器是 HTML5 支持度最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是 F12。

2.4)水平线标签

水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。

<body

http://www.ppmy.cn/news/1475346.html

相关文章

uniapp小程序连接蓝牙设备

uniapp小程序连接蓝牙设备 一、初始化蓝牙模块二、开始搜索三、连接蓝牙四、监听特征值变化五、调用示例utils.js文件 一、初始化蓝牙模块 这一步是必须的&#xff0c;在开发项目过程中&#xff0c;初始化蓝牙模块之后&#xff0c;紧接着就要开启一些监听的api&#xff0c;供后…

Python高级(四)_内存管理

Python高级-内存管理 第四章 内存管理 1、对象池 小整数池 系统默认创建好的,等着你使用 概述:整数在程序中的使用非常广泛,Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁内存空间。Python 对小整数的定义是 [-5, 256] ,这些整数对象是提前建立好的…

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.07.01-2024.07.05

文章目录&#xff5e; 1.LLM Internal States Reveal Hallucination Risk Faced With a Query2.Fine-Tuning with Divergent Chains of Thought Boosts Reasoning Through Self-Correction in Language Models3.Investigating Decoder-only Large Language Models for Speech-t…

TCP网络传输控制协议

目录 什么是TCP TCP的特点 TCP通信步骤 三次握手&#xff08;建立连接&#xff09; 数据传输 四次挥手&#xff08;连接释放&#xff09; 为什么要进行三次握手&#xff1f;两次握手行不行&#xff1f;一次握手行不行&#xff1f; 为什么是四次挥手&#xff1f;三次、两…

小红书后端

牛客网 - 找工作神器|笔试题库|面试经验|实习招聘内推&#xff0c;求职就业一站解决_牛客网 (nowcoder.com) 小红书推荐系统 题目&#xff1a; 思路&#xff1a; 尝试&#xff08;标题4&#xff09; import java.util.*;// 注意类名必须为 Main, 不要有任何 package xxx 信息…

社交论坛圈子系统APP开发社交圈子小程序系统源码开源,带语音派对聊天室/圈子社交论坛及时聊天

功能// 首页左右滑动切换分类 使用资讯类app常见的滑动切换分类&#xff0c;让用户使用更方便。 2信息卡片流展示 每条信息都是一个卡片&#xff0c;头像展示会员标签&#xff0c;单图自动宽度&#xff0c;多图九宫格展示&#xff0c;底部展示信息发布地址&#xff0c;阅读量、…

react VS vue

什么是react 用于构建用户界面的js库 什么是vue 用于构建用户界面的渐进式js库 react是基于mvvm设计还是mvc设计 1、react是基于mvc设计的&#xff0c;但也不是完整的mvc模式 2、react把自己定义为view 3、组件逻辑定义为Controller层 4、虽然react不是完整的mvc模式&a…

iPhone删除所有照片的高效三部曲

苹果手机用久了&#xff0c;系统缓存包括自己使用手机留下的内存肯定会越来越多。其中&#xff0c;相册中的照片数量可能会急剧增加&#xff0c;占据大量的存储空间。当用户们想要对相册进行彻底清理&#xff0c;实现iPhone删除所有照片时&#xff0c;不妨跟随以下详细的三部曲…

音频合并最简单的方法。将音频合并成一个的几种简单方法

音频合并最简单的方法。音乐是一种无声的语言&#xff0c;能够诉说情感、唤起记忆&#xff0c;为我们的生活增添了丰富的色彩。有时候&#xff0c;我们渴望将几段动人的音乐融为一体&#xff0c;创造出一个更为宏大、更为连贯的作品&#xff0c;以满足独特的需求或展示我们的创…

代码覆盖率的守护者:Gradle中配置覆盖率工具全指南

代码覆盖率的守护者&#xff1a;Gradle中配置覆盖率工具全指南 在软件开发的精细打磨中&#xff0c;代码覆盖率工具是确保质量的得力助手。Gradle&#xff0c;作为一款强大的构建工具&#xff0c;提供了与多种代码覆盖率工具的集成能力。本文将详细指导如何在Gradle中配置代码…

Python学习2---装饰器

装饰器是Python中的一种高级功能&#xff0c;允许您修改或增强函数或类的行为&#xff0c;而无需直接修改其源代码。 基本概念&#xff1a; 装饰器本质上是一个函数&#xff0c;它接受一个函数作为参数&#xff0c;并返回一个新的函数。 基本语法&#xff1a; decorator_fun…

中介者模式(大话设计模式)C/C++版本

中介者模式 C // 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显示得相互引用&#xff0c;从而使得其耦合松散&#xff0c;而且可以独立地改变他们之间得交互#include <iostream> #include <string>using namespace std;#d…

需求实现:字数限制500字

摘要&#xff1a; 在浩瀚的技术实现海洋中&#xff0c;每一个需求都如同一块磁石&#xff0c;吸引着多样化的解决策略与技术手段的汇聚。然而&#xff0c;无论选择多么丰富&#xff0c;核心始终在于对业务逻辑的深刻理解&#xff0c;以及为当前特定场景量身定制的最佳实践。本…

使用YOLO5进行模型训练机器学习【教程篇】

准备工作 YOLOv5 是目前非常流行的目标检测模型,广泛应用于各种计算机视觉任务,可以检测到图片中的具体目标。 我们借助开源的模型训练框架,省去了自己写算法的步骤,有技术的伙伴可以深入了解并自己写算法训练。 电脑要求: GPU ,内存 >12G python > =3.8 windows o…

抗量子密码算法:保障未来信息安全的新盾牌

随着量子计算的迅猛发展&#xff0c;传统加密算法正面临着前所未有的挑战。量子计算机利用量子比特的特殊性质&#xff0c;能在极短时间内破解目前广泛使用的公钥加密体系&#xff0c;如RSA、ECC等。这使得我国及全球的信息安全体系遭受严重威胁。为了应对这一挑战&#xff0c;…

STM32智能门禁系统教程

目录 引言环境准备智能门禁系统基础代码实现&#xff1a;实现智能门禁系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;门禁管理与优化问题解决方案与优化收尾与总结 1. 引言 智能门禁系统通过STM32嵌入…

5G与未来通信技术

随着科技的迅猛发展&#xff0c;通信技术也在不断演进。5G技术作为第五代移动通信技术&#xff0c;已成为现代通信技术的一个重要里程碑。本文将详细介绍5G及其对未来通信技术的影响&#xff0c;重点探讨超高速互联网和边缘网络的应用。 一、超高速互联网 1. 低延迟 5G技术最显…

富格林:正确击破暗箱稳健出金

富格林悉知&#xff0c;现在喜欢投资的人都在不断增加&#xff0c;在享受贵金属投资较高出金回报的同时&#xff0c;也该做好遭遇暗箱亏损情况的预防措施。对于新手投资者群体来说&#xff0c;如何客观地认识造成亏损的原因和暗箱&#xff0c;也是贵金属投资道路上必须克服的一…

GPT-4o在Excel的应用

引言 随着人工智能技术的不断进步&#xff0c;GPT-4o已成为许多领域中的重要工具。特别是在数据处理和分析方面&#xff0c;GPT-4o的强大功能可以大大提升工作效率&#xff0c;解放用户从繁琐的公式和手动操作中。本文将详细介绍如何利用GPT-4o在Excel中完成常见但复杂的任务&…

性能监控的革命:Eureka引领分布式服务监控新纪元

性能监控的革命&#xff1a;Eureka引领分布式服务监控新纪元 引言 在微服务架构中&#xff0c;服务的分布式性能监控对于维护系统健康和优化用户体验至关重要。Eureka作为Netflix开源的服务发现框架&#xff0c;为服务的注册与发现提供了强大支持&#xff0c;而结合其他工具&…