html

基础结构

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>长的风</title>
5
  </head>
6
  <body>
7
    <p>Hello World</p>
8
  </body>
9
</html>

head

title
meta

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

link

优先级：后面覆盖前面

1
<head>
2
<link type="text/css" type="text/cs" href="css/style.css">
3
</head>
4
    ```
5

6
### style
7

8
- id
9

10
```html
11
<head>
12
<style type="text/css">
13
  /* CSS 样式 */
14
</style>
15
</head>

script

1
<head>
2
<script>
3
  /* JavaScript 代码 */
4
</script>
5
</head>

元素

自闭合标签

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

块元素

块元素独立成行，可容纳行内元素

h1~h6: 标题
p: 段落，用于文字分段
div (division)：分区，主要用于划分区域，配合 CSS 进行样式渲染
ol: 有序列表
ul: 无序列表

特殊符号

 : 空格，一个汉字三个 nbsp
& quot; : 双引号
‘: 左单引号
’: 右单引号
×: 乘号
÷: 除号
>: 大于号
<: 小于号
&: &与符号
— 长破折号
|: 竖线
©: 版权符号

列表

有序列表

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

无序列表

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

定义列表

1
<dl>
2
<dt>名词</dt>
3
<dd>描述</dd>
4
</dl>

表格

1
<table>
2
<caption>标题</caption>
3
<thead> <!-- 划分表头 -->
4
  <tr> <!-- 行 -->
5
    <th rowspan="2">表头</th> <!-- 合并行 -->
6
  </tr>
7
</thead>
8

9
<tbody> <!-- 划分表身 -->
10
  <tr>
11
    <td colspan="2">单元格</td>  <!-- 合并列 -->
12
  </tr>
13
</tbody>
14

15
<tfoot> <!-- 划分表脚 -->
16
</tfoot>
17
</table>

表单

如果表单元素不需要与服务器进行交互，可以不必放在form标签内。

1
<form>
2
</form>

form 属性
- name: 名称
- method：方法（post 和 get）
input 标签（一般用 label 包裹） <label><input type="属性" /></label>
- 密码：password
- 单选框：radio（name 和 value 必须设置）
- 复选框：checkbox
- 单行文本：text
- 按钮
  - 普通按钮：button
  - 提交按钮：submit
  - 重置按钮：reset

多行文本：textarea

下拉列表

1
<select>
2
  <option>选项一</option>
3
</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