目录
  1. 1. 前言
  2. 2. HTML基础
    1. 2.1. 标题 Heading
    2. 2.2. 段落
    3. 2.3. 链接
    4. 2.4. 图像
  3. 3. HTML元素
  4. 4. html元素
    1. 4.1. body元素
    2. 4.2. p元素
    3. 4.3. TIPS
  5. 5. HTML属性
  6. 6. HTML标题
    1. 6.1. 标题
    2. 6.2. 水平线
    3. 6.3. 注释
  7. 7. HTML段落
    1. 7.1. HTML折行
  8. 8. HTML样式
    1. 8.1. 背景颜色
    2. 8.2. 字体、颜色、尺寸
    3. 8.3. 文本对齐
  9. 9. HTML格式化
    1. 9.1. 文本格式化
    2. 9.2. 预格式文本
    3. 9.3. 文字方向
    4. 9.4. 块引用
    5. 9.5. 删除字和插入字
    6. 9.6. 其他
  10. 10. HTML引用
  11. 11. HTML CSS
    1. 11.1. HTML中的样式
    2. 11.2. 没有下划线的链接
    3. 11.3. 链接到一个外部样式表
    4. 11.4. 内部样式表
    5. 11.5. 内联样式
  12. 12. HTML链接
    1. 12.1. 文本链接
    2. 12.2. 图像作为链接
    3. 12.3. target属性打开新窗口
    4. 12.4. name属性规定锚anchor的名称
    5. 12.5. 发送邮件
  13. 13. HTML图像
    1. 13.1. 插入图像
    2. 13.2. 背景图片
    3. 13.3. 排列图片
    4. 13.4. 浮动图像
    5. 13.5. 调整图片尺寸
    6. 13.6. 为图片显示替换文本
    7. 13.7. 制作图像链接
    8. 13.8. *创建图像映射
    9. 13.9. *把图像转为图像映射
  14. 14. HTML表格
    1. 14.1. 表格
    2. 14.2. 表格边框
    3. 14.3. 表格表头
    4. 14.4. 表格中的空单元格
    5. 14.5. 带标题的表格
    6. 14.6. 跨行或跨列的表格单元格
    7. 14.7. 表格内嵌套标签
    8. 14.8. 单元格边距 Cell padding
    9. 14.9. 单元格间距 Cell spacing
    10. 14.10. 表格添加背景颜色和图像
    11. 14.11. 单元格添加背景颜色和图像
    12. 14.12. 在表格单元中排列内容
    13. 14.13. *框架(frame)属性
  15. 15. HTML列表
    1. 15.1. 无序列表
    2. 15.2. 不同类型的无序列表
    3. 15.3. 有序列表
    4. 15.4. 不同类型的有序列表
    5. 15.5. 定义列表
    6. 15.6. 嵌套列表
    7. 15.7. 列表标签汇总
  16. 16. HTML块
    1. 16.1. 块元素
    2. 16.2. 内联元素
    3. 16.3. 元素
    4. 16.4. 元素
  17. 17. HTML类
  18. 18. HTML布局
    1. 18.1. 使用div元素的HTML布局
    2. 18.2. 使用HTML5的网站布局
    3. 18.3. 使用表格的HTML布局
  19. 19. 响应式设计
    1. 19.1. 定义
  20. 20. HTML框架
    1. 20.1. 垂直框架
    2. 20.2. 水平框架
    3. 20.3. 混合框架
    4. 20.4. 导航框架
    5. 20.5. 内联框架
  21. 21. HTML内联框架
  22. 22. HTML背景
    1. 22.1. 设置背景颜色的三种方式:
    2. 22.2. 背景图像
  23. 23. HTML脚本
    1. 23.1. script元素
    2. 23.2. noscript元素
  24. 24. HTML文件路径
    1. 24.1. 绝对文件路径
    2. 24.2. 相对文件路径
  25. 25. HTML头部
    1. 25.1. HTML头部元素
    2. 25.2. head元素
    3. 25.3. base元素
    4. 25.4. link元素
    5. 25.5. meta元素
  26. 26. HTML实体
    1. 26.1. 前言
    2. 26.2. 不间断空格
    3. 26.3. HTML中的所有字符实体
  27. 27. HTML URL
  28. 28. HTML URL编码
  29. 29. HTML文档类型
  30. 30. HTML语言代码
  31. 31. HTML表单
    1. 31.1. form元素
    2. 31.2. input元素
    3. 31.3. Action属性
    4. 31.4. Method属性
    5. 31.5. Name属性
    6. 31.6. 用fieldset组合表单数据
  32. 32. HTML表单元素
    1. 32.1. input元素
    2. 32.2. select元素(下拉列表)
    3. 32.3. textarea元素(文本域)
    4. 32.4. button元素
    5. 32.5. HTML5表单元素
  33. 33. 参考链接
前端三剑客速查笔记之HTML5

前言

本文是速查表,用于快速查询基础用法、标签释义等。
REF: w3school.com.cn

HTML基础

标题 Heading

1
<h1></h1> ... <h6></h6>

段落

1
<p> This is a paragraph. </p>

链接

1
<a herf="https://ajioy.cn">Ajioy's World</a>

图像

1
<img src="https://ajioy.cn/img/avatar.jpg" width="200" height="200" />

HTML元素

html元素

定义了整个HTML文档。

body元素

定义了HTML文档的主体。

p元素

定义了HTML文档中的一个段落。

TIPS

  • <br/>是长远的保障,勿用<br>
  • 标签对大小写不敏感,但建议用小写。

HTML属性

1
<a href="https://ajioy.cn">Ajioy's World</a>

HTML标签可以拥有属性,通常都是以名称/值对的形式出现。如href=“url”。

1
2
<h1 align="center">中心对齐</h1>
<body bgcolor="yellow">

class、id、style、title

HTML标题

标题

  • 通过<h1> - <h6>等标签进行定义。
  • h1最大标题,h6最小标题。
  • 默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,如段落、标题元素前
    后。
  • 使用标题醒目,文章结构清晰,搜索引擎可以结构化网页。

水平线

<hr />标签创建水平线,用于分割内容。

1
2
3
4
5
<p> hello, ajioy </p>
<hr />
<p> you are the one </p>
<hr />
<p> please save the world... </p>

注释

1
<!-- This is a comment -->

HTML段落

通过<p>标签定义。

HTML折行

不产生一个新段落的情况下进行换行,使用<br \>

1
<p>This is <br /> a para<br />graph with line breaks</p>
  • 浏览器会忽略源代码中的排版,省略掉多余的空格的换行。

HTML样式

style属性用于改变HTML元素样式。

更多样式设定,参见CSS教程。

不赞成使用的标签和属性。

  • 标签

    • <center>:居中
    • <font><basefont>:字体
    • <s><strike>:删除线
    • <u>:下划线
  • 属性

    • <align>:对齐
    • <bgcolor>:背景颜色
    • <color>:文本颜色

背景颜色

style属性淘汰了旧的bgcolor属性。

background-color

1
2
3
4
5
6
<html>

<body style="background-color:yellow">
<h2 style="background-color:red"> This is a heading </h2>
<p style="background-color:green"> This is a paragraph.</p>
</html>

字体、颜色、尺寸

font-family、color、font-size

1
2
3
4
5
6
7
8
9
<html>

<body>
<h1 style="font-family:verdana"> A heading </h1>
<p style=font-family:arial;color:red;font-size:20px;"> A paragraph. </p>

</body>

</html>

文本对齐

text-align

1
2
<h1 style="text-align:center"> This is a heading </h1>
<p> The heading above is aligned to the center of this page.</p>

HTML格式化

标签 描述
<b> 粗体
<big> 大号字
<em> 着重文字
<i> 斜体
<small> 小号字
<strong> 加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除符
<s>、<strike> 不建议,使用替换
<u> 不建议,使用style代替
<bdo> 文字方向
<pre> 预格式文本
<blockquote> 长的引用
<q> 短的引用

文本格式化

1
2
3
4
5
6
7
8
<b> bold text </b>
<strong> strong text </strong>
<big> big text </big>
<em> emphasized </em>
<i> italic text </i>
<small> small text </small>
This text contains X<sub>2</sub>
X<sup>superscript</sup>

预格式文本

1
2
3
4
5
6
7

<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>

文字方向

bi-directional override(bdo)
从右向左输出。

1
2
3
<bdo dir="rtl">
Here is some Hebrew text
</bdo>

块引用

使用blockquote元素,浏览器会插入换行和外边距,而q元素不会有任何特殊的呈现。

1
2
3
4
5
6
7
8
长引用:
<blockquote>
这这是长引用。这是长引用。这是长引用。这是长引用。是长引用。这是长引用。
</blockquote>
短引用:
<q>
这是短引用。
</q>

删除字和插入字

1
<del>delete</del> <ins>底部下划线</ins>

其他

HTML引用

标签 描述
<abbr> 缩写或首字母缩略语
<address> 文档作者或拥有者的联系信息
<bdo> 文本方向
<blockquote> 长引用
<dfn> 缩略词的定义
<q> 短的行内引用
<cite> 著作的标题

HTML CSS

所有格式化代码均可移出HTML文档,放入一个独立的样式表中。

HTML中的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style stype="text/css">
h1 {color: red}
p <color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p> A paragraph </p>
</body>

</html>

没有下划线的链接

1
<a href="https://ajioy.cn" style="text-decoration:none">这是一个url</a>

链接到一个外部样式表

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>
<h1>通过外部引用的样式表格式化。</h1>
<p> 效果是一样的 </p>
</body>

内部样式表

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color:red}
p {margin-left: 20px}
</style>
</head>

内联样式

1
2
3
<p style="color:red; margin-left: 20px">
this is a paragraph
</p>
标签 描述
<style> 定义样式定义
<link> 定义资源引用
<div> 定义文档中的节或区域(块级)
<span> 定义文档中的行内的小块或区域
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式
<basefont> 定义基准字体。不赞成使用。请使用样式
<center> 对文本进行水平居中。不赞成使用。请使用样式

HTML链接

文本链接

网站页面的链接

1
<a href="/index.html">点我进去</a>

外部网站链接

1
<a href="https://ajioy.cn">点我进去</a>

图像作为链接

1
<a href="https://ajioy.cn"><img border="0" src="/img/avatar.jpg" /></a>

target属性打开新窗口

使用target,可以定义被链接的文档在何处显示。

下面这行会在新窗口打开文档。

1
<a href="https://ajioy.cn" target="_blank">Visit Ajioy's World</a>

name属性规定锚anchor的名称

通常用来创建文章目录用

  • 使用name属性创建HTML页面中的书签。
  • 书签对读者不可见。
  • 使用命名锚(named anchors)时,可以创建直接跳至该命名锚(某个小节)的链接。
1
2
3
<a name="tips">锚(显示在页面上的文本)</a>
<a href="#tips">有用的提示</a>
<a href="https://ajioy.cn/tools/markdown-guide.html#tips">有用的提示</a>

发送邮件

%20代表空格

1
2
3
4
<a href="mailto:ajioy@hotmail.com?
cc=someoneelse@hotmail.com&&bcc=andsomeoneelse2@hotmail.com&&
subject=Hello%20again&&
body=You%20are%20hero!">发送邮件</a>

HTML图像

插入图像

1
2
3
<img src="gif/mouse.gifs" width="50" height="50" />
<img src="https://ajioy.cn/gif/mouse.gifs" width="50" height="50" />
<img src="gif/mouse.gifs" alt="i hate cat" width="50" height="50" />

背景图片

  • gif和jpg文件都可以用作HTML背景。
  • 如果图像小于页面,图像会进行重复。
1
2
<body background="/img/eg_background.jpg">
<p> gif和jpg文件都可以用作HTML背景。</p>

排列图片

  • 默认是bottom对齐
  • bottom/middle/top

图像与文本同在一行时。

1
2
3
4
5
6
7
8
9
<body>
<h2>未设置对齐方式的图像:</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像:</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意,bottom 对齐方式是默认的对齐方式。</p>
</body>

浮动图像

  • left浮动在文本的左侧
  • right浮动在文本的右侧
1
2
<img src="i/eg_cute.gif" align="left">带有图像的一个段落。
<img src="i/eg_cute.gif" align="right">带有图像的一个段落。

调整图片尺寸

1
<img src="i/eg_cute.gif" width="200" height="200" />

为图片显示替换文本

alt 标签作用,在浏览器无法载入图像时,替换文本属性告知失去的信息。

1
<img src="/i/eg_gogo.gif" alt="turn left" />

制作图像链接

1
<a href="https://ajioy.cn"><img border="0" src="/i/eg_buttonnext.jpg" /></a>

*创建图像映射

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<body>

<p>请点击图像上的星球,把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

*把图像转为图像映射

标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。

HTML表格

表格

  • table开头
  • tr 行
  • td 列
  • th 表头
  • border 边框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</tb>
<td>200</tb>
<td>300</tb>
</tr>
<tr>
<td>400</tb>
<td>500</tb>
<td>600</tb>
</tr>

</table>

表格边框

  • border=“1” 边框
1
2
3
4
5
6
<table border="2">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>

表格表头

  • th

  • 列表头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Heading</th>
<th>Author Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
  • 行表头
1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<th>name</th>
<td>Ajioy</td>
</tr>
<tr>
<th>phone</th>
<td>18888888888</td>
</tr>
</table>

表格中的空单元格

  • 在一些浏览器中,没有内容的表格单元显示不友好。如果某个单元格是空的,浏览器可
    能无法显示出这个单元格的边框。
  • 为了避免上述情况发生,在空单元格中添加一个空格占位符就行了。
1
2
3
4
5
6
<table>
<tr>
<td>&nbsp;</td>
<td>row2,cell2</td>
</tr>
</table>

带标题的表格

  • caption
1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

跨行或跨列的表格单元格

  • colspan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<h4>合并两列单元格</h4>
<table border="1">
<tr>
<th>name</th>
<th colspan="2">phone</th>
</tr>
<tr>
<td>Ajioy</td>
<td>18888888888</td>
<td>18888888888</td>
</tr>
</table>


<h4>合并两行单元格</h4>
<table border="1">
<tr>
<th>name</th>
<td>Ajioy</td>
</tr>
<tr>
<th rowspan="2">phone</th>
<td>18888888888</td>
</tr>
<tr>
<td>18888888888</td>
</tr>

</table>

表格内嵌套标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

单元格边距 Cell padding

  • cellpadding

创建单元格内容与其边框之间的空白。

1
2
3
4
5
6
7
8
9
10
<table border="1" cellpadding="10">
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr>
<td>third</td>
<td>the last one</td>
</tr>
</table>

单元格间距 Cell spacing

  • cellspacing
    单元格之间的距离。

表格添加背景颜色和图像

  • bgcolor
  • background
1
2
3
4
5
6
7
8
9
10
<h4>背景颜色:</h4>
<table border="1" bgcolor="red">
<tr><td>111</td><td>222</td></tr>
<tr><td>333</td><td>444</td></tr>
</table>
<h4>背景图片:</h4>
<table border="1" background="/img/avatar.jpg">
<tr><td>111</td><td>222</td></tr>
<tr><td>333</td><td>444</td></tr>
</table>

单元格添加背景颜色和图像

1
2
3
4
5
6
7
8
9
10
11
12
13
<h4>单元背景:</h4>  
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/i/eg_bg_07.gif">
Second</td>
<td>Row</td>
</tr>
</table>

在表格单元中排列内容

  • align=left/right
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table width="400" border="1">
<tr>
<th align="left">消费项目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>

*框架(frame)属性

略,查看(https://www.w3school.com.cn/html/html_tables.asp)

表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

total: 2小时50分钟

Begin 10:40-

HTML列表

无序列表

  • 无序列表始于<ul>标签,每个列表项始于<li>标签。
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

不同类型的无序列表

  • desc
  • circle
  • square
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h4> Desc 项目符号列表:</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

<h4> Circle 项目符号列表:</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

<h4> Square 项目符号列表:</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>

有序列表

  • 有序列表始于<ol>
  • 计数可以用start指定。
1
2
3
4
5
6
7
8
9
10
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li></li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li></li>
</ol>

不同类型的有序列表

  • 默认是数字列表
  • 字母列表A
  • 小写字母列表a
  • 罗马字母I
  • 小写罗马字母i
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<h4>数字列表:</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>

<h4>字母列表:</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>

<h4>小写字母列表:</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>

<h4>罗马字母列表:</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>

<h4>小写罗马字母列表:</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ol>

定义列表

  • <dl>标签开始,自定义列表项以<dt>开始,自定义列表项的定义以<dd>
1
2
3
4
5
6
7
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>

<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

嵌套列表

1
2
3
4
5
6
7
8
9
10
<ul>
<li>咖啡</li>
<li>
<ul type="circle">
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>

列表标签汇总

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 定义定义项目
<dd> 定义定义的描述
<dir> 已废弃。使用<ul> 代替它
<menu> 已废弃。使用<ul> 代替它

HTML块

大多数HTML元素被定义为块级元素(block level element)或内联元素(inline
element)。

块元素

  • 块级元素在浏览器显示时,通常会以新行来开始和结束。
  • <h1>, <p>, <ul>, <table>

内联元素

  • 内联元素在显示时通常不会以新行开始。
  • <b>,<td>,<a>,<img>

元素

  • div是块级元素,可用于组合其他HTML元素的容器。
  • div元素没有特定的含义。由于它属于块级元素,浏览器会在其前后显示折行。
  • 如果与CSS一同使用,div元素可用于对大的内容块设置样式属性。
  • div元素也可用于文档布局。

元素

  • span是内联元素,可用作文本的容器。
  • span也没有特定的含义。
  • 当与CSS一起使用时,span元素可用于为部分文本设置样式属性。

HTML类

对HTML进行分类(设置类),使得可以为元素的类定义CSS样式。
为相同的类设置相同的样式,不同的类设置不同的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
.intro {
color:yellow;
}
</style>
</head>
<div class="cities">
<h2>London</h2>
<p class="intro">
London is the capital city of England.
It is the most popular city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p> another intros </p>
</div>

HTML布局

使用div元素的HTML布局

div元素常用作布局工具,因为能够轻松地通常CSS对其进行定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<head>
<style>
<head>
<style>
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}

#nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}

#section {
width: 350px;
float: left;
padding: 10px;
}

#footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>

<body>
<div id="header">
<h1>City Gallery</h2>
</div>

<div id="nav">
London<br />
Paris<br />
Wuhan<br />
</div>

<div id="section">
<h2>London</h2>
<p>London is a capital city of the England. Bla bla bla bla bla bla bla...</p>
</div>

<div id="footer">
Copyright Ajioy.cn
</div>
</body>

使用HTML5的网站布局

H5提供的新语义元素定义了网页的不同部分。

标签名 作用
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details 元素的标题

比起上个例子,只有两点不同:

  1. CSS样式中,不用加.或#;
  2. 标签名替换div标签;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
...
</head>

<body>
<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

...
</body>

使用表格的HTML布局

  • table元素不是作为布局工具而设计的。
  • table元素的作用是显示表格化的数据。
  • 使用table元素能够取得布局效果,通过CSS设置表格元素的样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
<style>
table.lamp {
width: 100%;
border: 1px solid #d4d4d4;
}
table.lamp th, td {
padding: 10px;
}
table.lamp th {
width: 40px;
}
</style>
</head>

<body>
<table class="lamp">
<tr>
<th>
<img src="/img/avatar.jpg" alt="avatar" style="height:32px;
width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>

响应式设计

定义

  • RWD指的是响应式WEB设计(Responsive Web Design)。
  • RWD能够以可变尺寸传递网页。
  • RWD对于平板和移动设备是必需的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>

<body>

<h1>Demo</h1>
<h2>Resise this responsive page!</h2>
<br>

<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p> It is the most populous city in the United Kingdom</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital city of French.</p>
<p> It is the most populous city in the French</p>
</div>

<div class="city">
<h2>Wuhan</h2>
<p>Wuhan is the capital city of Hubei Province.</p>
<p> It is the most populous city in China.</p>
</div>

</body>

HTML框架

通过框架,可以在同一个浏览器容器中显示不止一个页面。每份HTML文档称为一个框架,
并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档。
  • 很难打印出整张页面。

框架结构标签

  • frameset
  • cols 列屏幕占比
  • rows/columns 列屏幕占比
  • frame
  • noresiez=“noresize”
  • 自动推算比例 “50%, *, 25%”

垂直框架

1
2
3
4
5
<frameset cols="25%, 50%, 25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

水平框架

1
2
3
4
5
<frameset rows="25%, 50%, 25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

混合框架

1
2
3
4
5
6
7
8
9
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

导航框架

1
2
3
4
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>

内联框架

1
2
3
4
5
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持,iframe 是不可见的。</p>
</body>

HTML内联框架

添加iframe的语法,URL指向隔离页面的位置。

1
<iframe src="URL"></iframe>

设置高度和宽度

1
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

删除边框

1
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe作为链接的目标。

1
2
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://ajioy.cn" target="iframe_a">Ajioy's World</a></p>

HTML背景

设置背景颜色的三种方式:

1
2
3
<body bgcolor="#d0d0d0" text="black">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景图像

  • 如果图像尺寸小于浏览器窗口,图像将在整个浏览器窗口进行复制。
1
2
<body background="cloud.gif">
<ody background="https://ajioy.cn/img/clouds.gif">

TIPS:

  1. 背景图像是否增加了页面的加载时间。图像文件不应超过10k。
  2. 背景图像是否与页面中的其他图像搭配良好。
  3. 背景图像是否与页面中的文字颜色搭配良好。
  4. 图像在页面中平铺后,看上去还行吗?
  5. 对文字的注意力被背景图像喧宾夺主了吗?
标签中的背景颜色bgcolor、背景background和文本text属性在最新的HTML标准( HTML4和XHTML)中已被废弃。应该使用层叠样式表CSS来定义HTML元素的布局和显示属性。

HTML脚本

script元素

1
2
3
<script type="text/javascript">
document.write("Hello World")
</script>

noscript元素

noscript标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:

1
2
3
4
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML文件路径

路径 描述
<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到。

  • 网页
  • 图像
  • 样式表
  • Javascript

绝对文件路径

1
<img src="https://ajioy.cn/img/avatar.jpg" alt="avatar">

相对文件路径

  • 相对路径指向了相对于当前网站根目录中imgs文件夹里的一个文件。
1
<img src="/imgs/picture.jpg" alt="flower">
  • 相对路径指向了位于当前文件夹imgs文件夹中的一个文件。
1
<img src="imgs/picture.jpg" alt="flower">
  • 相对路径指向了位于当前文件夹上一级目录中的一个文件。
1
<img src="../imgs/picture.jpg" alt="flower">

总结:使用相对路径是个好习惯。网页就不会与当前的基准URL进行绑定。

HTML头部

HTML头部元素

标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。

head元素

  • head元素是所有头部元素的容器。
  • head内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等。
  • 可添加到head部分的标签,title\base\link\meta\script\style。

base元素

  • base标签为页面上的所有链接规定默认地址(目录)或默认属性(target)。
  • base标签针对所有的a元素起作用。
  • base标签必须在head标签中使用。
  • base标签全局地址(href指定的地址)是针对相对链接的a标签起作用。
  • base标签全局属性(target属性)是针对所有没有设置该属性(target属性)的a标签起
    作用。
  • base标签全局地址也可以是相对地址。
1
2
3
4
5
6
7
8
9
10
11
12
<head>
<base target="_blank" />
</head>
<body>

<p>
<a href="https://ajioy.cn" target="_blank">这个连接</a> 将在新窗口中加载,因为 target 属性被设置为 "_blank"。
</p>

<p>
<a href="https://blog.csdn.net/ajioy">这个连接</a> 也将在新窗口中加载,即使没有 target 属性。
</p>

link元素

link标签定义文档与外部资源之间的关系。常用于连接样式表。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystlye.css" />
</head>

<++>

meta元素

针对搜索引擎的关键词。
一些搜索引擎会利用meta元素的name和content属性来索引页面。

1
<meta name="description" content="Free Web tutorial on HTML, CSS, XML" />

下面的meta元素定义页面的关键词。name和content属性作用是描述页面的内容。

1
<meta name="keywords" content="HTML,CSS,XML" />

HTML实体

前言

  • 在HTML中,某些字符是预留的。
  • 在HTML中,不能使用小于号和大于号,因为浏览器会误以为它们是标签。
  • 如果希望正确地显示预留字符,必须在HTML源码中使用字符实体(character entities)。
1
2
3
&entity_name;
or
&#entity_number;

使用实体名而不是数字的好处是便于记忆。坏处是浏览器不支持所有实体名称,对实体数
字支持却非常好。

不间断空格

(non-breaking space)是HTML常用字符实体。
浏览器总是会截断HTML页面中的空格。如果在文本中写10个空格,在显示该页面之间,浏
览器会删除它们中的9个,如需增加空格的数量,需要使用&nbsp;字符实体。

HTML中的所有字符实体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 显示结果 | 描述              | 实体名称 | 实体编号 |
|:---------|:------------------|:---------|:---------|
| `+` | 空格 | &nbsp; | &#160; |
| `<` | 小于号 | &lt; | &#60; |
| `>` | 大于号 | &gt; | &#62; |
| `&` | 和号 | &amp; | &#38; |
| `"` | 引号 | &quot; | &#34; |
| `'` | 撇号 | &apos; | &#39; |
| `¢` | 分(cent) | &cent; | &#162; |
| `£` | 镑(pound) | &pound; | &#163; |
| `¥` | 元(yen) | &yen; | &#165; |
| `€` | 欧元(euro) | &euro; | &#8364; |
| `§` | 小节 | &sect; | &#167; |
| `©` | 版权(copyright) | &copy; | &#169; |
| `®` | 注册商标 | &reg; | &#174; |
| `™` | 商标 | &trade; | &#8482; |
| `×` | 乘号 | &times; | &#215; |
| `÷` | 除号 | &divide; | &#247; |

更多实体参见 https://www.w3school.com.cn/tags/html_ref_entities.html

HTML URL

URL - Uniform Resource Locator 统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

1
scheme://host.domain:port/path/filename
  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机(http 的默认主机是 www)
  • domain - 定义因特网域名,比如 w3school.com.cn
  • :port - 定义主机上的端口号(http 的默认端口号是 80)
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称

HTML URL编码

  • URL只能使用ASCII字符集来通过因特网进行发送。
  • URL通常会包含ASCII字符集以外的字符,URL必须转换为有效的ASCII格式。
  • URL编码使用%,其后跟随两位的十六进制数来替换非ASCII字符。
  • URL不能包含空格。URL编码通常使用+来替换空格。
1
2
3
4
€ %80
£ %A3
© %A9
® %AE

更多参见https://www.w3school.com.cn/tags/html_ref_urlencode.html

HTML文档类型

<!DOCTYPE>声明帮助浏览器正确地显示网页。它不是HTML标签,只是为浏览器提供一
项信息,即HTML是用什么版本编写的,因为HTML有多个不同的版本。

1
<!DOCTYPE html>  HTML5

HTML语言代码

通过lang属性来对每张页面中的主要语言进行声明,如:

1
2
3
4
<html lang="en">
<html lang="zh-cn">
...
</html>

中国 zh

HTML表单

HTML表单用于收集用户输入。

form元素

form元素定义HTML表单。表单元素指的是不同类型的input元素、复选框、单选按钮、提
交按钮等。

1
2
3
4
5
<form>
...
form elements
...
</form>

input元素

  • text: 定义常规文本输入。
  • radio: 定义单选按钮。
  • submit: 定义提交按钮,提交表单。
1
2
3
4
5
6
7
8
9
10
<form>
First Name: <br>
<input type="text" name="firstname">
<br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female" >Female
<br>
<input type="submit" value="Submit">
</form>

Action属性

  • action属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按
    钮。通常,表单被会提交到WEB服务器上的网页。
  • 如果省略action属性,则action会被设置为当前页面。
1
<form action="action_page.php">

Method属性

  • method属性规定在提交表单时所有的HTTP方法(GET或POST)
  • GET时,表单数据在页面地址栏中是可见的,适合少量数据的提交。
  • POST时,表单数据在地址栏中不可见,安全性强。
1
2
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

Name属性

  • 如果要正确地被提交,每个输入字段必须设置一个name属性。

用fieldset组合表单数据

  • fieldset元素组合表单中的相关数据。
  • legend元素为fieldset元素定义标题。
1
2
3
4
5
6
7
8
9
10
11
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>
属性 描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)
action 规定向何处提交表单的地址(URL)(提交页面)
autocomplete 规定浏览器应该自动完成表单(默认:开启)
enctype 规定被提交数据的编码(默认:url-encoded)
method 规定在提交表单时所用的 HTTP 方法(默认:GET)
name 规定识别表单的名称(对于 DOM 使用:document.forms.name
novalidate 规定浏览器不验证表单
target 规定 action 属性中地址的目标(默认:_self)

HTML表单元素

input元素

见上一节

select元素(下拉列表)

  • select元素定义下拉列表。
  • option元素定义待选择的选项。
1
2
3
4
5
6
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

textarea元素(文本域)

  • 定义多行输入字段。
1
2
3
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button元素

1
<button type="button" onclick="alert('hello,ajioy')">Click me</button>

HTML5表单元素

HTML5增加以下表单元素:

  • datalist
  • keygen
  • output

参考链接

to be continued…

本文历史

  • 2019年12月23日 完成初稿,整理笔记花时5小时以上。
文章作者: Ajioy张品茗
文章链接: https://ajioy.cn/frontend/html5-cheat-sheet/
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ajioy's World
打赏
  • 微信
  • 支付宝

评论