基础结构
<!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
- 优先级：后面覆盖前面
<head> <link type="text/css" type="text/cs" href="css/style.css" /></head>``` ### style - id ```html<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 进行样式渲染
- ol: 有序列表
- ul: 无序列表
特殊符号
: 空格，一个汉字三个 nbsp& quot;: 双引号‘: 左单引号’: 右单引号×: 乘号÷: 除号>: 大于号<: 小于号&: &与符号—长破折号|: 竖线©: 版权符号
列表
有序列表
<ol type="属性值"> <li>1 数字（默认）</li> <li>a 小写字母</li> <li>A 大写字母</li></ol>无序列表
<ul type="属性值"> <li>disc 实心圆（默认）</li> <li>circle 空心圆</li> <li>square 正方形</li></ul>定义列表
<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 包裹）
<label><input type="属性" /></label>- 密码：password
- 单选框：radio（name 和 value 必须设置）
- 复选框：checkbox
- 单行文本：text
- 按钮
- 普通按钮：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
- target
报错
运行网上一实例时报错：Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.
原因：HTML 中涉及 iframe 跨域，而运行时是直接双击打开原文件，因安全原因被浏览器阻止。
解决：改用 Server 运行，如 VS Code 插件：Live Server，或者 Python 运行