html

2021-05-17

基础结构

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>长的风</title>
5
</head>
6
<body>
7
<p>Hello World</p>
8
</body>
9
</html>
  • title
  • meta
1
<head>
2
<meta name="keywords" content="网页关键字" />
3
<meta name="description" content="网页描述" />
4
<meta charset="utf-8" />
5
<!-- 定义编码 HTML5 简写 -->
6
<meta http-equiv="refresh" content="3;url=https://immwind.com" />
7
<!-- 跳转 -->
8
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
<!-- 自动缩放页面 -->
10
</head>
  • 优先级:后面覆盖前面
1
<head>
2
<link type="text/css" type="text/cs" href="css/style.css" />
3
</head>
4
``` ### style - id ```html
5
<head>
6
<style type="text/css">
7
/* CSS 样式 */
8
</style>
9
</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;: 空格,一个汉字三个 nbsp
  • & quot; : 双引号
  • &lsquo;: 左单引号
  • &rsquo;: 右单引号
  • &times;: 乘号
  • &divide;: 除号
  • &gt;: 大于号
  • &lt;: 小于号
  • &amp;: &与符号
  • &mdash; 长破折号
  • &#124;: 竖线
  • &copy;: 版权符号

列表

有序列表

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>
3
标题
4
</caption>
5
<thead>
6
<!-- 划分表头 -->
7
<tr>
8
<!-- 行 -->
9
<th rowspan="2">表头</th>
10
<!-- 合并行 -->
11
</tr>
12
</thead>
13
14
<tbody>
15
<!-- 划分表身 -->
16
<tr>
17
<td colspan="2">单元格</td>
18
<!-- 合并列 -->
19
</tr>
20
</tbody>
21
22
<tfoot>
23
<!-- 划分表脚 -->
24
</tfoot>
25
</table>

表单

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

1
<form></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 运行