HTML笔记

发表于 2017-03-27 更新于 2022-08-07 本文字数： 1.9k 阅读时长 ≈ 7 分钟

整理了一些HTML笔记，日常速成计划 : )

HTML笔记

1 概念

1.1 定义

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

1.2 动态/静态网页

静态网页，无计算处理能力的网页，后缀名：.htm， .html， .shtml， .xml；
动态网页，有计算处理能力的网页，可提供交互反馈等，如 .asp， .jsp， .php， .perl， .cgi；

注意：动态/静态之分与网页画面是否在动无关

1.3 标记

HTML作为标记(Markup)语言，其核心组成元素是标记。
标记分为单标记和双标记；

1.3.1 单标记

<标记 />，简记<标记>
例子：
- <hr> - 横线（水平分隔线（horizontal rule））
- <br> - 换行（barter rabbet）

1.3.2 双标记

<标记>内容</标记>

1.3.3 注释


也可跨行

```html




### 1.4  结构

document

- html
  - head
    - title
      - meta
  - body
    - table
    - span
    - p

**注意**：HTML标记须按照结构组织，可以包含，但不得交叉，如 `<title>` 不得放入 `<body>` 内。



------



## 2  版面

### 2.1  标题

标题共6级，从1到6，字体有大到小，

```html
<h1>标题</h1>		// 最大
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>		// 最小

2.2 段落

1
2
3

<p>
段落
</p>

段落之间默认会有段距；

注意**：默认多个连续空格会合并成一个，多个连续空行会合并成一行。

增加空格： &nbsp ；
增加空行：
- 换行标记： <br />，简记为<br>；
- 段间距：<p></p>，简记为 <p>；
禁用换行：<nobr>段落</nobr> （不常用）；

2.3 对齐

标记的align属性：
- align="left" ，另有"right"，"center"；
居中标记：
- <center>内容</center>

2.4 列表

2.4.1 无序表

无序表标记为<ul>表</ul>

<ul>
	<li>表项1</li>
	<li>表项2</li>
</ul>

2.4.2 有序表

有序表标记为<ol>表</ol>

<ol type="1">
	<li>表项1</li>
	<li>表项2</li>
</ol>

有序表默认type属性为“1”，表示数字序标
- 另："A", "a", "i", "Ⅰ"；

2.5 特殊段

2.5.1 预解析

<pre>内容</pre>
- 只解析内容中的HTML标记，不合并空格、换行，保留源格式

2.5.2 不解析

<xmp>内容</xmp>
- 不对内容做任何解析，保留内容中的HTML标记，格式；

2.5.3 代码段

<code>代码段</code>
- 用于显示代码
</var>变量</var>
- 用于标记变量（会斜体显示）

3 字体

字体分物理字体和逻辑字体。

3.1 物理字体

粗体 - <b>粗体</b>
斜体 - <i>斜体</i>
下划线 - <u>下划线</u>
~~删除线~~ - <s>删除线</s>
^上标 - <sup>上标</sup>
_下标 - <sub>下标</sub>
打字机字体 - <tt>打字机字体</tt>

3.2 逻辑字体

强调 - <em>强调</em>
加重 - <strong>加重</strong>
代码 - <code>代码</code>
示例文字 - <samp>示例文字</samp>
键盘按键文字 - <kbd>键盘按键文字</kbd>
缩小 - <small>缩小</small>
放大 - <big>放大</big>

3.3 属性字体

更高级的字体设计可以使用属性字体标记实现：

<font>字体</font>

3.3.1 颜色

<font color="red">字体</font>
- 属性值为颜色名
<font color="#ff0000">字体</font>
- 属性值为RGB 十六进制值

3.3.2 大小

<font size="3">字体</font>
- size的值从1~7，由小到大

4 图像

4.1 引用图片

引用图片时： <img src="url">

4.2 属性

width="200px" px即像素
height="..px"
alt="解释"
- 光标停留时输出
- 图片加载失败时显示
align="bottom"
- 默认bottom，另top, middle；
border="1opx"
- 边框像素

5 链接

5.1 超链接

5.1.1 基本

<a href="example.html">内容</a>

内容可以是文字或图片等…

5.1.2 属性

target="_self"
- 默认"_self" 当前窗口打开
- _parent 父标签页打开
- _top 销毁当前标签页，顶层窗口打开
- _blank 新标签页打开

5.2 区域链接

通过map和area在图片中实现可点击的链接区域：

<img src="example.jpg" usemap="#face">
  <map name="face">
  	<area shape="rect" href="link1.html" coords="140, 20, 280, 60">
  	<area shape="ploy" href="link2.html" coords="100, 100, 180, 80, 200, 140">
  	<area shape="circle" href="link3.html" coords="80, 100, 60">
  </map>

5.3 页内链接

1
2
3

<a href="#item">跳转至item处</a>
……
<a href="item">item</a>

点击后，会在页面内跳转到item目标行

6 表单

6.1 表单框体

<form action="test.aspx" method="get">
  表项
  ……
</form>

action 表单发送目标url
method GET或POST报文

6.2 输入

6.2.1 文本框

<input type="text">
- 上限255字符

6.2.2 密码框

<input type="password">

6.2.3 按钮

<input type="submit" value="提交">
- 提交按钮
<input type="reset" value="重置">
- 重置按钮
<input type="button" value="自定义按钮">
- 自定义

6.2.4 上传

<input type="image" src="image.jpg" />
- 图片
<input type="file" />
- 上传文件，点击后会弹出文件选择框

6.2.5 隐藏信息

<input type="hidden" name="text" value="隐藏区域信息">

7 表格

7.1 表格框体

<table></table>
属性：
- border="1"
  - 边框粗细
- width
- height
- align

7.2 结构解析

<table>
  <tr>
    <th>table head1</th>
    <th>table head2</th>
  </tr>
  <tr>
    <td>table data1</td>
    <td>table data2</td>
  </tr>
</table>

表格框体内，逐行，行内逐列
表行、表头、表项都有诸如align 的属性，可调整对齐方式，如"center"居中

7.2.1 表行

```html 列信息


#### 7.2.2  表头

- ```html
  <th>
    表头值
  </th>

7.2.2 表项

```html 表项值




### 7.3  表格版面

#### 7.3.1  跨行

- `rowspan=3`
  - 当前元素跨3行

#### 7.3.2  跨列

- `colspan=3`
  - 当前元素跨3列

#### 7.3.3  对齐

- 表行、表头、表项都有诸如`align` 的属性，可调整对齐方式：
  - `"center"`居中；
  - `"right"` 右对齐。



------



## 8  框架

### 8.1  概念

- 一个页面可以包含frameset，一个frameset可以包含多个frame，每个frame显示一个page。
- 框架用途：
  - 常驻导航栏，导航栏中显示多个板块链接，方便用户在显示框架中切换到不同页面



### 8.2  框架集

```html
<frameset cols="25,50,25">
  <frame src="http://a.com" />
  <frame src="http://b.com" />
  <frame src="http://c.com" />
</frameset>

1:2:1 分三列显示三个页面
<frameset frameborder="yes">
- 另有 "no" 或 1或0
- 控制框架集边框显示

注意：<frameset> 不得与 <body> 并列。

8.3 框架

<frame src="http://c.com" />
- <frame /> 是单标记
禁用调节：使框架大小无法被用户调节
- <frame noresize="noresize">
滑动条
- <frame src="http://a.com" scrolling="auto">
  - 另有： "yes" 或 "no"，可启用或禁用滚动条

8.4 分栏

框架集属性 cols， rows

8.4.1 多列分栏

cols 属性表示分配列向分栏比例

8.4.2 多行分栏

rows 属性分配行向分栏比例

8.4.3 表格分割

复合使用cols和rows属性可以实现表格分割

8.5 内联框架

<iframe src="a,html" />

嵌入在网页的一个独立网页框
属性：类似<frame>

9 多媒体嵌入

9.1 嵌入标记

<embed src=url>
可嵌入音频、视频
url 是需要嵌入多媒体的URL
依赖浏览器协同的音视频播放器 Windows Media Player

9.2 属性

autostart=true/false
- 自动播放
loop=true/false
- 循环播放
hidden=true/false(no)
- 隐藏播放器显示
height
width
- 默认单位px
bgcolor
align

10 动态效果

10.1 滚动

10.1.1 滚动标记

内容

<marquee>内容</marquee>
- 默认从右向左滚动

10.1.2 属性

direction=left
- 滚动方向
- 另 "right"， "up"， "down"
scrollamount
- 滚动量（滚动速度）
behavior=“scroll”
- 滚动方式，默认scroll 来回滚动
- 另 alternate 来回滚动， slide 一次滚动
loop="5"
- 循环次数，此处为循环5次
scrolldelay
bgcolor
width
height

11 区块

11.1 行块span

11.1.1 标记

1	<span>内容</span>>

11.1.2 特点

span是跨度，宽度，从一头到另一头义
顾名思义，span块的宽度为内容宽度，且内容单行，不换行

11.2 区块div

11.2.1 标记

1
2
3

<div>
  内容
</div>

11.2.2 特点

宽度默认为父容器宽度
行、段等其它元素均可放置在div内，<div>标记使用范围广，与CSS紧密相关