html

基础结构

<!DOCTYPE html>
<html>
  <head>
    <title>长的风</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

head

title

meta

<head>
  <meta name="keywords" content="网页关键字" />
  <meta name="description" content="网页描述" />
  <meta charset="utf-8" /> <!-- 定义编码 HTML5 简写 -->
  <meta http-equiv="refresh" content="3;url=https://immwind.com" /> <!-- 跳转 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 自动缩放页面 -->
</head>

link id:: 611f3d18-4968-4222-8a86-625c748142f5 优先级：后面覆盖前面

<head>
  <link type="text/css" type="text/cs" href="css/style.css">
</head>

style id:: 611f3d18-ad6c-40e6-a1c3-befa62a02a12

<head>
  <style type="text/css">
    /* CSS 样式 */
  </style>
</head>

script

<head>
  <script>
    /* JavaScript 代码 */
  </script>
</head>

自闭合标签
- 换行：<br/>
- 水平线：<hr/> id:: 611bd3ca-0045-4399-acda-80cd6e3085e7
- 表单：<input/>
- 图片：<img src="路径" alt="描述(搜索引擎)" title="描述(鼠标显示)" />
块元素

块元素独立成行，可容纳行内元素
- h1~h6: 标题
- p: 段落，用于文字分段
- div (division)：分区，主要用于划分区域，配合 CSS 进行样式渲染
- ((611bd3ca-0045-4399-acda-80cd6e3085e7))
- ol: 有序列表
- ul: 无序列表
特殊符号 collapsed:: true
-  : 空格，一个汉字三个 nbsp
- & quot; : 双引号
- ‘: 左单引号
- ’: 右单引号
- ×: 乘号
- ÷: 除号
- >: 大于号
- <: 小于号
- &: &与符号
- — 长破折号
- |: 竖线
- ©: 版权符号

列表

有序列表 collapsed:: true

<ol type="属性值">
  <li>1 数字（默认）</li>
  <li>a 小写字母</li>
  <li>A 大写字母</li>
</ol>

无序列表 collapsed:: true

<ul type="属性值">
  <li>disc 实心圆（默认）</li>
  <li>circle 空心圆</li>
  <li>square 正方形</li>
</ul>

定义列表 collapsed:: true

<dl>
  <dt>名词</dt>
  <dd>描述</dd>
</dl>

表格

<table>
  <caption>标题</caption>
  <thead> <!-- 划分表头 -->
    <tr> <!-- 行 -->
      <th rowspan="2">表头</th> <!-- 合并行 -->
    </tr>
  </thead>
 
  <tbody> <!-- 划分表身 -->
    <tr>
      <td colspan="2">单元格</td>  <!-- 合并列 -->
    </tr>
  </tbody>
 
  <tfoot> <!-- 划分表脚 -->
  </tfoot>
</table>

表单如果表单元素不需要与服务器进行交互，可以不必放在form标签内。
```
<form>
</form>
```
- form 属性
  - name: 名称
  - method：方法（post 和 get）
- input 标签 <label><input type="属性" /></label> input 一般用 label 包裹
  - 密码：password
  - 单选框：radio（name 和 value 必须设置）
  - 复选框：checkbox
  - 单行文本：text
  - 按钮 collapsed:: true
    - 普通按钮：button
    - 提交按钮：submit
    - 重置按钮：reset
- 多行文本：textarea
- 下拉列表
```
<select>
  <option>选项一</option>
</select>
```
行内元素
- 粗体：strong、b
- 斜体：i、em、cite
- 划线：s
- 下划线：u
- 上标：sup
- 下标：sub
- 小字号：small
- 大字号：big
- 超链接：<a href=https://immwind.com>长风</a> href 可指向 ID 属性（页内跳转）
  - target
    - _self：原页面打开（默认）
    - _blank：新标签
    - _parent
    - _top

报错

运行网上一实例时报错：Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

原因：HTML 中涉及 iframe 跨域，而运行时是直接双击打开原文件，因安全原因被浏览器阻止。

解决：改用 Server 运行，如 VS Code 插件：Live Server，或者 Python 运行

Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross

长风的数字花园

html

报错

Graph View

Backlinks

长风的数字花园

html

报错 §

Graph View

Backlinks

报错