HTML

Web

Web（World Wide Web），即万维网。

浏览器：网页运行的平台。

网页：一个网站的资源单位。

W3C: World Wide Web Consortium 万维网联盟组织，指定 web 标准的机构。

标准包括三部分：

结构 HTML
样式 CSS
行为 JavaScript

浏览器

浏览器的组成：

渲染引擎（浏览器内核）：读取 HTML、CSS 并渲染成网页上
JS 引擎 / JS 解释器

HTML 介绍

HTML：Hyper Text Markup Language，超文本标记语言

Hyper Text：除了文本，还有图片、音频、动画、多媒体等等。

Markup：是一种标记语言，也就是一种描述性语言。没有编译过程。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
</html>

名词

网页：由 HTML+CSS+JS 组成的页面

主页/首页：一个网站的起始页面。

标签 Tag：HTML 的基本单元，比如 <p> 成为开始标签，</p>称为结束标签。

元素 Element：HTML 的组成单元，比如 <p>Content</p> 成为元素

属性 Attribute：标签的辅助信息。比如 <a href="https://wukaipeng.com"> 其中 href 叫做属性

XHTML：符合 XML 语法标准的 HTML

XML：eXtensible Markup Language，可扩展标记语言

DHTML：Dynamic HTML，HTML+CSS+JS 的开发技术。

HTTP：Hypertext Transfer Protocol，超文本传输协议

HTTPS：HTTP + SSL/TSL，更加安全的 HTTP。

SMTP：Simple Mail Transfer Protocol，邮件传输协议

FTP：File Transfer Protocol，文件传输协议

暗链：网站中插入一些不易察觉的链接。目的可能是：

SEO。提高网站在 SERP 搜索引擎结果页的权重。

欺诈。

广告。

防护方法：

网页防篡改模块：监控网页目录

WAF。Web Application Firewall

漏洞扫描。

企业蓝军。网络攻防演练，企业当做蓝军（Blue Team）防守红军（Red Team），红军可以找专业的安全测试团队。

HTML 结构

双边标签：<div></div>

单边标签：<img />

文档声明头

DTD， Doc Type Declaration

HTLM5 极大简化了 DTD 的声明，不再支持 XHTML，目前只有：

<!DOCTYPE html>

语言

<html lang="en">

中文是 zh-CN

Head

<head>
  <meta charset="UTF-8">
  <meta name="generator" content="Docusaurus v2.4.1">
  <title>主页 | 楷鹏</title>
  <meta data-rh="true" name="twitter:card" content="summary_large_image">
  <meta data-rh="true" property="og:url" content="https://wukaipeng.com/">
  <meta data-rh="true" name="docusaurus_locale" content="en">
  <meta data-rh="true" name="docusaurus_tag" content="default">
  <meta data-rh="true" name="docsearch:language" content="en">
  <meta data-rh="true" name="docsearch:docusaurus_tag" content="default">
  <meta data-rh="true" property="og:title" content="主页 | 楷鹏">
  <meta data-rh="true" name="description" content="这是楷鹏的知识领域">
  <meta data-rh="true" property="og:description" content="这是楷鹏的知识领域">
  <link data-rh="true" rel="icon" href="/img/favicon.ico">
  <link data-rh="true" rel="canonical" href="https://wukaipeng.com/">
  <link data-rh="true" rel="alternate" href="https://wukaipeng.com/" hreflang="en-GB">
  <link data-rh="true" rel="alternate" href="https://wukaipeng.com/zh-CN/" hreflang="zh-CN">
  <link data-rh="true" rel="alternate" href="https://wukaipeng.com/" hreflang="x-default">
  <script type="text/javascript" async="" src="https://app.posthog.com/static/array.js"></script>
  <link rel="preload" href="/assets/js/runtime~main.a232d5a8.js" as="script">
  <link rel="preload" href="/assets/js/main.1f0d0795.js" as="script">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" data-rh="true">
</head>

<title> 网页的标题
<base> 指定了一个基本 URL，其他地方就可以通过相对路径来引用网站资源。
<meta> 网页的元信息
<link> 外部资源引用

注意有一种 <meta> 标签，如下，3 秒后会重新刷新并跳转 https://wukaipeng.com/

<meta http-equiv="refresh" content="3;https://wukaipeng.com/">

计算机编码

计算机底层也是二进制，它并不理解人类语言，需要通过编码去对应到我们的语言。

最早期的是 ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）编码，比如梓慕 a，它对应的二进制是 01100001

ASCII 缺点是只有一个字节，即八位，最大只能表示 127 个字符。

汉字的编码集：GB2313 → GBK → GB18030

目前常用的 Unicode，其中 UTF-8 最常用。

HTML 中声明编码：

<meta charset="UTF-8">

HTML 排版标签

标题标签

    <h1>楷鹏</h1>
    <h2>楷鹏</h2>
    <h3>楷鹏</h3>
    <h4>楷鹏</h4>
    <h5>楷鹏</h5>
    <h6>楷鹏</h6>

段落标签

<p>
  Hello, I am Kaipeng.
</p>

属性 align，分别为 left, right, center

`<div>` 和 `<span>`

<div>，division 的缩写，分割，块级元素

<span>，内联元素

超链接

Http 超链接

<a href="https://wukaipeng.com/">楷鹏</a>

邮件链接，不常用

<a href="mailto:wkpcoder@163.com">给楷鹏发邮件</a>

图片标签

HTML 不能插入图片，只能引用图片资源。

相对路径

<img src="./k.png">

绝对路径

<img src="https://wukaipeng.com/k.png">

列表

有序列表 order list： <ol>
无序列表 unordered list：<ul>
列表项 <li>

  <ul>
    <li>广东汕头</li>
    <li>湖南长沙</li>
    <li>产后抑郁</li>
  </ul>

  <ol>
    <li>网站：<a href="https://wukaipeng.com/">https://wukaipeng.com/</a></li>
    <li>slogan：吴楷鹏的技术领域</li>
    <li>备案号：粤ICP备2023085392号</li>
  </ol>

定义列表 definition list：<dl>
- definition title：<dt>
- definition description: <dd>

  <dl>
    <dt>吴楷鹏</dt>
    <dd>稳重吃肉的程序员</dd>
    <dd>身体低于 2 米</dd>
  </dl>

表格

表格 <table>
行 table row <tr>
表格头 table head <th>
表格内容 table data <td>

    <table>
      <tr>
        <th>姓名</th>
        <th>介绍</th>
        <th>特点</th>
      </tr>
      <tr>
        <td>吴楷鹏</td>
        <td>稳重吃肉的程序员</td>
        <td>身体低于 2 米</td>
      </tr>
      <tr>
        <td>邓紫棋</td>
        <td>歌手</td>
        <td>凳子齐</td>
      </tr>
    </table>

表单

表单 <form> 可以提交 Post 请求。

Get 和 Post 请求区别见：Get 和 Post 两者的区别？

    <form>
      姓名：<input type="text" name="name" /><br />
      密码：<input type="password" name="password" /><br />
      性别：<input type="radio" name="gender" value="man" id="man" /><label
        for="man"
        >男</label
      ><br />
      座右铭：<textarea name="motto" id="motto" cols="30" rows="10"></textarea><br />
      <input type="radio" name="gender" value="woman" id="woman" /><label
        for="woman"
        >女</label
      ><br />
      爱好：<input
        type="checkbox"
        name="hobby"
        value="penetration"
        id="penetration"
      /><label for="penetration">渗透</label>
      <input
        type="checkbox"
        name="hobby"
        value="development"
        id="development"
      /><label for="development">开发</label>
      <input
        type="checkbox"
        name="hobby"
        value="code_review"
        id="code_review"
      /><label for="code_review">代码审计</label>
    </form>

转义字符

转义：可以看做是一种编码，用其他字符组合来表示某一个字符。比如我们想要在网页上渲染 <p>，正常思路是：

<div>
  <p>
</div>

但是 <p> 会被当做 HTML 标签来渲染了，所以需要对 < 和 > 进行转义：

<div>
  &lt;p&gt;
</div>

工具推荐

👉 HTML 转义：https://t.he3app.com?2ii8

可利用转义字符进行 XSS（Cross Site Scripting，跨站脚本攻击），插入恶意脚本，在用户浏览器上运行

存储型：恶意脚本存储到目标网站后台中
反射型：诱导用户点击诱导链接，将恶意脚本作为参数发给目标网站，网站将恶意脚本返回给用户，用户解析并执行该脚本
DOM 型：在浏览器修改 DOM。

Web​

浏览器​

HTML 介绍​

名词​

HTML 结构​

文档声明头​

语言​

Head​

计算机编码​

HTML 排版标签​

标题标签​

段落标签​

<div> 和 <span>​

超链接​

图片标签​

列表​

表格​

表单​

转义字符​

Web

浏览器