【 HTML 基础教程】

最新推荐文章于 2024-04-18 05:00:00 发布

Hey_Coder

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量1.3k

点赞数 1

分类专栏：【HTML】文章标签： html基础教程 html标签教程 html标签 html教程

本文链接：https://blog.csdn.net/VickyTsai/article/details/88534854

版权

【HTML】专栏收录该内容

26 篇文章 11 订阅

订阅专栏

HTML 基础教程

★ HTML 标签的参考列表
1. 什么是 HTML?
- 1.1 HTML 是什么意思? (超文本标记语言)
- 1.1 “超文本”是什么意思?
2. HTML 标签
- 2.1 HTML 标签的特点
- 2.2 HTML 标签的分类 (双标签,空标签/单标签)
- 2.3 标签之间的关系
- 2.4 标签的语义化
3. HTML 文档
- 3.1 HTML 文档的骨架/ 结构
- 3.2 定义文档类型 (< !DOCTYPE> 声明)
4. HTML 元素
- 4.1 HTML 元素语法
5. HTML 属性 (元素的附加信息/特征信息)
- 5.1 属性的基本介绍
- 5.2 适用于大多数标签的属性 (全局属性)
- 5.3 定义标签的样式的属性
6. HTML 输出规则
7. 如何进行 HTML 注释? (< !-- 注释内容 -->)
8. CSS 层叠样式表的分类 (外部,内部,内联)
9. HTML 4 中被废弃的标签和属性
10. 可用于排版的标签
- 10.1 h1~h6 文档内容的标题
- 10.2 hr 水平线
- 10.3 p 段落
- 10.4 br 换行
11. 文本格式化输出的标签 (改变文本外观)
- 11.1 用于文本格式化的标签 (b,big,small,em,i,strong,sub,sup,ins,del)
- 11.2 表示计算机输出的标签 (code,samp,kbd,tt,var,pre)
- 11.3 指定字体样式的标签 (tt,i,b,big,small)
- 11.4 有样式+拥有确切含义的短语元素 (em,strong,dfn,code,samp,kbd,var,cite)
- 11.5 用于引用和术语定义的标签 (abbr,acronym,address,bdo,blockquote,q,cite,dfn)
- 11.6 表示计算机代码的标签 (code,kbd,samp,var,pre 标签)
- ★ 小结: 能够改变文本外观的标签分类 (基于内容,物理)
12. 其他的 html 标签
- ⑴ a 表示链接(锚)
- ⑵ img 表示图像
- ⑶ table 表示表格 (搭配 tr,th,td 标签)
- ⑷ 列表 (搭配 ul ,ol , dl ,li ,dt,dd 标签)
- ⑸ 表示框架 (framset,frame,noframes 标签)
- ⑹ iframe 表示内联框架
- ⑺ form 表示表单和表单元素
- ⑻ head 文档的头部
- ⑼ script 使用脚本
13. 响应式 Web 设计 (RWD,尺寸可变)
14. 实体
- 14.1 什么是实体,实体的意义是什么? (预留字符/特殊字符)
- 14.2 常用的字符实体
15. URL
- 15.1 什么是 url ?
- 15.2 URL 编码
16. 如何表示颜色 ?
17. XHTML
- 17.1 什么是 XHTML ? (可扩展超文本标记语言)
- 17.2 HTML 和 XHTML 有什么区别?
- 17.3 如何从 HTML 转换到 XHTML ?
18. HTML5
- 18.1 HTML5 是什么?
- 18.2 HTML5 浏览器支持
- 18.3 如何把 HTML4 网页变成 HTML5 网页 ?
- 18.4 HTML5 样式指南和代码约定有哪些?
19. HTML5 中新增的标签
- ⑴ section 文档的节
- ⑵ article 表示独立的自包含内容
- ⑶ header 为文档或节规定页眉
- ⑷ footer 为文档或节规定页脚
- ⑸ nav 表示导航链接的集合
- ⑹ aside 表示页面主内容之外的某些内容
- ⑺ figure 组合图片和标题
20. HTML 图形
- ⑴ canvas 在网页上绘制图形
- ⑵ svg 表示用于网络的基于矢量的图形
- ★ HTML 5 画布和可伸缩矢量图形
21. 媒体
- ⑴ 多媒体
- ⑵ object 向页面添加多媒体 /嵌入对象
- ⑶ 如何在 HTML 中播放声音和视频 ?
22. API
- ⑴ HTML5 如何进行地理定位 ?
- ⑵ 拖放
♣ 结束语和友情链接

★ HTML 标签的参考列表

① 【HTML 标签的参考列表 (按字母排列)】
② 【HTML 标签的参考列表 (按功能分类排列)】
简单/系统性的介绍: 下面的知识, 是 html 的入门知识, 是简单,系统的介绍以下 html 知识
标签的详细使用方法: 需要了解各个标签的详细使用,请点击上方的参考列表(推荐使用【HTML 标签的参考列表 (按功能分类排列)】的,这样能够把相关联的标签,在一起系统地学习.)
开发工具推荐: 【Sublime Text3 的使用方法】

1. 什么是 HTML?

1.1 HTML 是什么意思? (超文本标记语言)

HTML
- HyperText Markup Language
- ['haɪpɚ’tɛkst]
- 超文本 标记语言
- 标记语言的作用是什么? 标记的什么?
  - 通过标记符号(各个标签) 来标记要显示的 网页中的各个部分,比如网页中显示的文字,图片,音乐,视频等,都是用标签来表示的,标签表示的内容,浏览器就能认识和解析.
- 标签/标记的意义
  - 描述网页: 告诉浏览器 如何显示 其中的内容 (让浏览器能够显示各种类型的网页内容)
- 网页文件(.html) 的本质
  - 一种文本文件,代码内容就是文本,音乐,图片,视频之类的,都是通过这些文本式的标签来实现的.
HTML 是一种编程语言吗?
- 不是编程语言, 而是一种 标记语言 (markup language)
- 标记语言是一套 标记标签 (markup tag)

1.1 “超文本”是什么意思?

① 超, 文本中包含了“超链接”
- 超链接 是什么?
- 本质:不同 元素之间的连接.
- 指从一个网页指向一个目标的连接关系, 网页—> 一个目标
  - 这个目标可以是什么?
    - 另一个网页，相同网页上的不同位置，一个图片，一个电子邮件地址，一个文件，一个应用程序等,而不仅仅是文本.
② 指页面内可以包含 图片、链接，甚至音乐、程序等 非文字元素。(如何包含,使用超链接)

2. HTML 标签

2.1 HTML 标签的特点

HTML tag
- ① 由尖括号 包围的关键词
  - 比如 <html>
② 通常是 成对出现 的
- 比如<b>和 </b>
③ 什么是开始标签和结束标签?
- 第一个标签<b>是开始标签, 第二个标签 </b>是结束标签
  - 也称为开放标签和闭合标签

2.2 HTML 标签的分类 (双标签,空标签/单标签)

按照标签是否成对来分类
- ① 双标签
  - <b>和 </b>
- ② 单标签(空标签)
  - <br />
    - / 前有一个空格
    - 数量比较少
按照元素前后是否会换行
- ① 块级元素
  - block level element
  - 块元素显示时有什么特点?
    - 显示时会前后换行
- ② 内联元素
  - 内联元素显示时的特点是?
    - 不会前后换行
一般用什么标签来组合其他元素?
- div 标签
  - 没有特定含义
  - 块级元素
一般用什么标签做容器为部分文本设置样式?
- span 标签
  - 没有特定含义
  - 内联元素

2.3 标签之间的关系

① 嵌套关系
- html 是所有标签的根标签.
- 父子关系: head标签,是title的父标签. head > title
- 书写时缩进: 书写的时候,进行缩进,这样看起来更清晰明了.
② 并列关系
- 兄弟关系: head和body,是并列的,就是兄弟关系.

在这里插入图片描述

<!-- html 文档的基本结构 -->

<!-- 根标签 -->
<html> 
	
	<!-- 文档的 头部标签 -->
	<head>
		<!-- 网站的标题 -->
		<title>学习视频的练习网站</title>
	</head>
	<!-- 主体 标签,页面内容 都写在这里 -->
	<body>
		学习视频的练习网站
	</body>

</html>

2.4 标签的语义化

html 标签,有的是有具体含义的,有的是没有具体含义的
- 有语义的标签: 比如段落p标签,一级标题 h1标签,开发者一看就知道是什么含义,里面包含了什么内容.
- 没有语义的标签: 比如块分区div标签,行内分区 span标签,知道是分区标签,但是看标签,不能了解标签内容的含义.
语义化标签的好处
- 标签,应该尽量能体现出标签内容的含义.
- 利于搜索引擎
- 利于浏览器解析

3. HTML 文档

HTML 文档 = 网页
- 就是网页的别称
HTML 文档的用途是什么?
- 描述网页
网页包含什么?HTML 文档是什么组成的 ?
- HTML 标签和纯文本
如何读取 HTML 文档,以网页的形式显示它们?
- 使用浏览器
- 浏览器根据 HTML标签来解释页面的内容

3.1 HTML 文档的骨架/ 结构

快速生成 html 骨架: 在 sublime text3 中,输入 !或者 html:5 ,然后按下 tab 按键,即可生成
- (注意,文档的类型,一定要是 html(即,后缀名 .html),纯文本不行)
- ① 文档头部分（head标签）
  - “头”部提供关于 网页的信息
- ② 文档主体部分（body标签）
  - “主体”部分提供网页的 具体内容。
文档的基本结构

<!-- html 文档的基本结构 -->

<!-- 根标签 -->
<html> 
	
	<!-- 文档的 头部标签 -->
	<head>
		<!-- 网站的标题 -->
		<title>学习视频的练习网站</title>
	</head>
	<!-- 主体 标签,页面内容 都写在这里 -->
	<body>
		学习视频的练习网站
	</body>

</html>

3.2 定义文档类型 (< !DOCTYPE> 声明)

使用 <!DOCTYPE> 声明
- 使用的版本号: 告诉浏览器我们用的是哪个版本的 html (因为 html 有很多版本,如, html:xt,html 4等)
  - 目前最新的是 html5 版本,向下兼容其他的 html 版本.
  - html 5 的文档类型声明: <!DOCTYPE html>
- 浏览器解析: 浏览器,按照指定的文档类型,进行解析的.
定义文档的类型的意义
- 帮助浏览器 正确地显示网页
声明: <!DOCTYPE> 是 HTML 标签吗 ?
- 不是 . 是为浏览器提供的一项信息（声明）
声明版本号: 向浏览器说明 HTML 是用哪个版本 编写的
- 使用 <!DOCTYPE> 声明
HTML (超文本标记语言) 的版本

版本	年份
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

各版本的文档类型和结构的快捷输入
- ① html: html:4s (sublime text3 中,输入后, 按 tab 键)
- ② xhtml: html:xt
- ③ html5: !或 html:5
html 4.01 版本

    <!-- html 4,01 版本 ,几乎没人用了-->

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>

xhtml 1.0 版本

    <!-- xhtml 版本 (这个还有人在用,一些政府官网,但用的最多的 还是 html 5.0) -->

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>

html 5 版本

<!-- 最新的版本, html 5 版本 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body>
	
</body>
</html>

4. HTML 元素

元素= 开始标签 到结束标签的所有代码 (包括标签的内容)

词汇补充
- 标签的不同叫法
开始标签 = 开放标签
- strat tag = opening tag
结束标签 =闭合标签
- end tag = closing tag

4.1 HTML 元素语法

元素的开始
- 开始标签,如 <body>
元素的结束
- 结束标签,如 </body>
元素的内容
- 开始标签和结束标签之间的内容
空内容
- empty content
- 有的元素 没有内容,比如水平线 <hr />,没有结束标签,也没有标签内容
空元素/空标签
- 没有内容的元素,仅包含属性.
- 如<br />就是没有关闭/结束标签的空元素
区分结束标签和空标签的写法
- / 的位置不同,
- 一个是在标签名前面 </body>
- 一个是在标签名后面 <hr />
空元素/空标签的关闭
- 在开始标签中关闭
- 在开始标签中,标签名后面+空格 + 斜杠
  - 比如 <br /> ,/ 前有一个空格
元素的嵌套
- 一个元素放在另一个元素之中

<head>
    <meta charset="UTF-8" />
    <title>视频学习的练习网站</title>
</head>

★ 使用注意事项
- 正确关闭: 不要漏写结束标签
  - 所有元素 必须被关闭
    - 双标签: <h1></h1>
    - 单标签(空标签): <br />
- 正确嵌套: 元素要正确嵌套
  - 子元素,要放在开始和结束标签之间: <li> <a href=""></a> </li>
- 标签和属性名小写: 标签名和属性名,都使用小写
  - 所有标签名,都有使用小写
  - 所有的标签的属性名,使用小写
- 加引号: 所有属性的属性值,一定要引号
  - <img src="star.jpg" alt="天上的星星" />

5. HTML 属性 (元素的附加信息/特征信息)

5.1 属性的基本介绍

元素的附加信息/特征信息:
- 为 HTML 元素提供 附加信息,比如颜色,宽高,位置等
属性的形式
- 属性名称=“属性值”
- name ="value"
标签的属性的位置
- 总是写在 开始标签中,标签名的后面.
  - <img src="star.jpg" alt="天上的星星" />
  - <label for="birthdata">出生日期:</label>
属性值的引号
- 一定要有 引号
  - 双引号是最常用，使用单引号也可以 (使用哪种,就全部是那种,不要混用,除非必要)
  - 比如, 属性值本身就含有双引号，则必须使用单引号,避免冲突
多个属性之间的间隔
- 用空格分隔
多个属性的顺序
- 属性之间,不分先后顺序
属性的默认值
- 任何标签的属性都有默认值,省略属性,则该属性取默认值.

示例1: 设置水平线的颜色,宽度.

<hr color="red" width="300" />

在这里插入图片描述

5.2 适用于大多数标签的属性 (全局属性)

用途	属性名
① 规定元素的类名	`class`
② 元素唯一的 id	`id`
③ 元素的行内样式	`style`
④ 元素的提示信息(额外信息)	`title`

5.3 定义标签的样式的属性

HTML 单独的标签的样式使用什么属性来定义和改变?
- 使用标签的 style 属性

6. HTML 输出规则

算作一个空格: 所有的 连续的空格和空行 会怎样处理?
- 被算作 一个空格
- 浏览器移除多余的空格和空行

快速查看网页的代码: 在浏览器的页面中,按下 F12 即可
- 谷歌浏览器中,按一下 ctrl+shift+c,可以选中指定位置,显示相关代码,相当于选中下方按钮

7. 如何进行 HTML 注释? (< !-- 注释内容 -->)


- 浏览器会显示注释的内容吗?
  - 不会
html 注释有什么用?
- 用于说明文档代码,纠错等
- 可以一次注释一行 HTML 代码，以搜索错误：
多注释: 多使用注释标签,是很好的习惯,几个人合作开发网站的时候,注释有利于理解.
浏览器不解析: 注释的内容,是给开发者看的,浏览器是不解析的.
html 注释的快捷键:
- 单行注释: ctrl + / (可先选中要注释的区域)
- 多行注释: ctrl+shift+ / (可先选中要注释的区域)

<!-- 此刻不显示图片：
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

定义只在 IE 中执行的 HTML 代码
- 使用 条件注释
- 条件注释的开始如何表示? 和普通注释的区别是什么?
  - 
  - 连字符前面 ,多了个 !+方括号+ endif,多了个![endif]
示例1: 在 CSDN的博客中,可以看到的条件注释

<!--[if lte IE 11]>
    <meta name='csdn-browser-upgrade'  content='为了获得更好的写作体验，建议更换<a href="https://www.google.cn/chrome/">Chrome</a>或<a href="http://www.firefox.com.cn/">FireFox</a>最新版浏览器'>
    <![endif]-->

    <!--[if lte IE 11]>
      <script src="https://g.csdnimg.cn/browser_upgrade/1.0.2/browser_upgrade.js"></script>
    <![endif]-->

在这里插入图片描述

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

浏览器会显示被注释的内容吗?
- 不显示 注释的内容
注释的作用是什么?
- 适当的解释说明, 提高 代码可读性

8. CSS 层叠样式表的分类 (外部,内部,内联)

样式表有哪些分类?
⑴ 外部样式表
- 特点,可以使用在 多个网页中
- 外部样式表的用途
  - 通过更改一个文件,可以来改变整个站点的外观
- 使用外部样式表的方法
  - 使用 <link> 标签,链接外部样式表.
⑵ 内部样式表
- 内部样式表,可以使用在多个网页吗?
  - 不可以. 使用在 单个网页 中
- 如何使用内部样式表 ?
- 在网页的 <head> 标签内通过 <style>标签来使用
⑶ 内联样式表
- 内联样式表可以使用在其他网页或者整个网页内吗?
- 不可以. 只能使用在 单个元素中
- 如何使用内联样式表?
- 在单个元素中使用 style 属性
总结:
- 样式适用于: (外部,内部,内联) 多个网页 → 单个网页 → 单个元素
- 使用样式: <link> 标签 → <style>标签 →style 属性

9. HTML 4 中被废弃的标签和属性

标签和属性被废弃是什么意思?
- deprecated ['dɛprə,ketɪd]
- 在以后的 HTML 中和 XHTML 中不支持了
被废弃的标签和属性的处理方式
- 最好不要使用

用途	被废弃的标签名
① 文本居中	`center`
② 字体	`font/basefont`
③ 删除线	`s/strike`
④ 下划线	`u`

用途	被废弃的属性名
① 文本的对齐	`align`
② 背景颜色	`bgcolor`
③ 文本的颜色	`color`

被废弃的标签和属性的共同点
- 都是用于 样式的
被废弃的样式类的标签和属性用什么替代?
- 用 CSS 样式替代

10. 可用于排版的标签

排版标签
- 可以和 css 搭配,显示 网页结构,是 网页布局 最常用的标签
- ① 标题标签: h1~h6
  - 语义: 作为标题使用,根据重要性,依次递减,从一级标题,到六级标题.一级标题h1最重要,最小到六级标题 h6.
  - 因为 h1重要程度很高,一个页面只使用一个.
- ② 段落标签: p
  - 语义: 网页中的文字,有条理的显示出来,分成一个一个的段落.标签内容,一般是文本,也可以包含其他的标签在里面.
    - 一个段落,使用一个p标签.
  - 段落内容会自动换行.
- ③ 水平线标签: <hr />
  - 语义: 将段落和段落之间隔开,使得文档结构,更加清晰明了.
- ④ 换行标签: <br />
  - 语义: 在希望手动换行的地方,强制换行,而不是等浏览器的自动换行.
- ⑤ 块分区标签: div
  - 语义: 本身没有语义
- ⑥ 行内分区标签: span
  - 语义: 本身没有语义

示例1: 使用了以上的排版的标签的文档

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>视频学习的练习网站</title>
    <style>
    body {
        width: 500px;
    }
    span {
        color: green;
    }
    </style>
</head>

<body>
    <h1>哪吒</h1>

    <p>哪吒（ nézhā），中国古代神话传说人物，道教护法神。 哪吒信仰兴盛于道教与民间信仰；在道教的头衔为中坛元帅、通天太师、威灵显赫大将军、三坛海会大神等；尊称太子爷、三太子、善胜童子。</p>



    <p>主要记载源于元代宗教神话典籍《三教搜神大全》，活跃于明代神魔系列小说名著《西游记》、《南游记》、《封神演义》等多部古典文学作品。 [3-5]</p>
    <hr />

    <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/whfpf%3D360%2C280%2C50/sign=db23091746ed2e73fcbcd56ce13c92bd/c9fcc3cec3fdfc037f1c052bd83f8794a4c22639.jpg" alt="哪吒" />

    <p>-----------哪吒尊称----------</p>
    <!-- 手动换行,使用 br 标签,如果使用 p 标签的话,上下垂直距离 会更大些 -->

    1. 火轮天王
    <br />2. 莲花太子
    <br />3. 哪吒天尊
    <br />4. 天庭三太子
    <hr />

    <div>

        封神—
        <span>元始</span>钦点大先锋，从小洗澡闹海屠龙、天宫隐身殴打龙王，抽筋送父 削肉救母、翠屏显圣 百姓敬拜、反抗父权 顺应天命、保周灭商 打仗杀敌、完成使命 肉身成圣。搜神—奉
        <span>玉帝</span>圣命下凡除魔 灭怪，从小战东海 杀九龙、天门截杀
        <span>龙王</span>、杀魔头石记（石矶）、诛群魔，拜师世尊，伏尽天下各种孽龙和妖魔鬼怪 恶兽，灵山封太师，天庭加封天帅。西游—自幼大闹龙宫水府 踩倒水晶宫 降龙，降伏九十六名妖魔，反父精神，拜
        <span>佛祖</span>干爹，当上天庭太子 成为三坛海会大神，统领神兵荡除邪魔，擒牛魔王，收降地涌夫人等。南游—兵胜华光，缴获三角金砖。家庭美满，从古至今英雄事迹传遍天下 受众欢迎，后于影视化传颂。

    </div>



</body>

</html>

在这里插入图片描述

10.1 h1~h6 文档内容的标题

定义标题使用什么标签?
- <h1>-<h6>标签
- 如何定义最大的标题?
  - 一级标题 <h1>
- 如何定义最小的标题?
  - 六级标题 <h6>
自动添加空行＝自动换行＝独占一行
- 浏览器自动在 标题的前后 添加空行＝独占一行
- 默认情况下,浏览器会自动在 块级元素前后 添加一个 额外的空行＝独占一行
  - 如 p h1等元素前后
能不能为了产生粗体和大号的文本而使用标题?
- 不能.
- 搜索引擎会使用标题做什么?
  - 为网页的结构和内容 编制索引
  - h1主标题,h2次要的,重要性依次递减.

10.2 hr 水平线

水平线使用什么标签定义?
- <hr />
水平线的作用是什么?
- 分隔内容

10.3 p 段落

使用什么标签定义段落?
- <p>
段落的作用是什么?
- 把文档 分隔成若干段落
能不能为了实现换行效果而插入空段落 ?
- 不能 . 换行使用换行标签<br />

10.4 br 换行

使用什么标签进行换行?
- <br />
换行标签是一个空元素吗?
- 是一个空的元素,没有元素内容.
可以使用换行标签<br /> 去创建列表吗?
- 不可以,因为有专门的列表标签.

11. 文本格式化输出的标签 (改变文本外观)

文本格式化
预格式化
计算机输出标签
地址
缩写和首字母缩写
文字的方向
引用标签
删除字效果和插入字效果

11.1 用于文本格式化的标签 (b,big,small,em,i,strong,sub,sup,ins,del)

用途	标签名
① 粗体文本	`b`
② 大号字	`big`
③ 小号字	`small`
④ 着重文字	`em`
⑤ 斜体字	`i`
⑥ 加重语气	`strong`
⑦ 下标字	`sub`
⑧ 上标字	`sup`
⑨ 插入字	`ins`
⑩ 删除字	`del`

被废弃的文本格式化的标签有哪些?
s / strike / u/ big
- s / strike是删除线的标签,使用del标签代替
- u是下划线标签,现在不使用了,因为一般只有超链接才加下划线
- big大号字标签，也已经被弃用
词汇补充
- 下标
  - subscript ['sʌbskrɪpt]
- 上标
  - superscript ['sju:pəskript]
- 打字机
  - typewriter
- 变量
  - variable
上标 sup 标签 的内容高度是多少?
- 当前文本中 字符高度的一半
上标 sup 标签 的内容的字体和字号是怎样的?
- 与当前文本文字的 字体和字号一样
- 上标 sup 标签一般用在哪里?
  - 如,添加脚注,方程式的指数
ins 标签 的作用是什么?
- 表示被插入文档中的文本
del 标签 的作用是什么?
- 文档中 已被删除的文本
如何描述文档中的 更新和修改?
- 使用<ins>和 <del>标签


    3<sup>2</sup>＝9
    <br />
    <ins>这是临时插入的字 ins</ins>
    <del>我是被删除的字 del</del>

    <b>我是粗体文本b</b>
    <br />
    <big>我是大号字 big，big 标签已经被弃用</big>
    <br />
    <small>我是小号字 small</small>
    <br />
    <em>我是被着重的文字 em</em>
    <br />
    <strong>我是加重语气的文字 strong</strong>
    <br />
    <i>我是斜体字 i</i>
    <br />
    B<sub>2</sub>，2 是下标字 sub
    <br />
    3 <sup>2</sup>，2 是上标字 sup

显示效果

显示效果和推荐使用的标签

标签	显示效果	推荐使用
`b , strong`	加粗	`strong`,代表强调非常重要的加粗文本,`b`只是加粗文本.
`i. em`	斜体	`em`,代表强调内容的斜体文本,`i`只是斜体文本.
`s/strike`(已废弃),`del`	删除线	推荐使用 `del` 标签.
`u`(已废弃),`ins`	下划线	推荐使用`ins`,表示插入的内容

示例1: 使用文本样式化的标签

    <i>需要斜体显示的文本 ,用 i 标签 </i>
    <br />
    <em>需要强调的内容 , 用 em 标签</em>
    <br />
    <hr />

    <b>需要粗体显示的文本,用 b 标签</b>
    <br />
    <strong>需要强调的 很重要的内容,用 strong 标签</strong>
    <br />
    <hr />

    <s>删除的内容,用 s 标签 (此标签 已废弃)</s>
    <br />
    <del>被删除的内容,用 del 标签(推荐使用)</del>
    <br />
    <hr />

    <u>给内容 加下划线,用 u 标签 (此标签 已废弃)</u>
    <br />

    <ins>表示 插入的内容,用 ins 标签</ins>

在这里插入图片描述

11.2 表示计算机输出的标签 (code,samp,kbd,tt,var,pre)

用途	标签名
① 定义计算机的代码	`code`
② 计算机代码样本	`samp`
③ 定义键盘码	`kbd`
④ 打字机代码(等宽的文本)	`tt`
⑤ 变量	`var`
⑥ 预格式文本(保留空格,换行)	`pre`

废弃的计算机输出标签有哪些?
- listing , plaintext , xmp

pre 标签 的作用是什么?
- ① 文本 保留空格和换行符
- ② 呈现等宽的字体
- ③ 制表符 tab 起作用( 但别使用 )
  - 每个制表符占据多少字符的位置?
    - 8个字符的位置
  - 建议在 <pre> 标签中使用 tab 制表符吗?
    - 不建议.
    - 理由是: 不同的浏览器中,tab的实现不相同,即浏览器兼容问题
- ④ 在<pre> 标签中如何表示特殊字符?
  - 使用 符号实体 来表示特殊字符，如 "<"代表 “<”
<pre> 标签一般用于哪里?
- 表示 计算机的源代码
pre中绝不能包含的元素 有哪些?
- 导致 段落断开的标签
  - 如,标题h1-h6,段落p,地址address等
  - 因为这类的标签，会影响预格式化显示，如下例 ↓
pre中能包含的元素 有哪些?
- 物理样式和基于内容的样式标签
- 链接a,图像img,水平分割线hr

      <pre>
        咏      鹅

        【作者】骆宾王 【朝代】唐

        鹅鹅鹅，曲项向天歌。
        白毛浮绿水，红掌拨清波。
        <hr />

        &lt;尖括号&gt;
    </pre>


    <pre>
        <h2>咏      鹅</h2>

        【作者】骆宾王 【朝代】唐

        <p>鹅鹅鹅，曲项向天歌。</p>
        <b>白毛</b>浮绿水，红掌拨清波。
        <hr />

        &lt;尖括号&gt;
    </pre>

显示

在这里插入图片描述

11.3 指定字体样式的标签 (tt,i,b,big,small)

只是想要改变文本的样式效果,推荐使用标签来实现吗?
- 不推荐.
- 理由是 : CSS 是专用于表示样式, 应该使用 CSS 来改变样式效果.
  - 等宽,斜体,粗体,大号字,小号字
  - 所以,下列这些标签,尽量不要使用.

用途	标签名
① 打字机代码(等宽的文本)	`tt`
② 斜体字	`i`
③ 粗体文本	`b`
④ 大号字	`big`
⑤ 小号字	`small`

11.4 有样式+拥有确切含义的短语元素 (em,strong,dfn,code,samp,kbd,var,cite)

短语元素有什么共同特征?
- ① 定义的文本会有特殊样式
- ② 短语元素都拥有 确切的含义
可以为了样式效果而使用短语元素吗?
- 不建议.使用 CSS 来实现样式才更专业合理.
短语元素

用途	标签名
① 把文本定义为强调的内容	`em`
② 语气更强的文本	`strong`
③ 一个定义项目	`dfn`
④ 计算机代码	`code`
⑤ 代码样本文本	`samp`
⑥ 键盘码文本(文本从键盘键入的)	`kbd`
⑦ 变量(与pre,code标签搭配使用)	`var`
⑧ 引用(书籍的标题等,定义对文献的引用)	`cite`

11.5 用于引用和术语定义的标签 (abbr,acronym,address,bdo,blockquote,q,cite,dfn)

用途	标签名
① 缩写	`abbr`
② 首字母缩写	`acronym` [ˈækrənɪm]
③ 地址	`address`
④ 文字方向	`bdo`
⑤ 长引用	`blockquote`
⑥ 短引用	`q`
⑦ 引用,印证	`cite`
⑧ 定义项目	`dfn`

⑴ q,blockquote 表示引用

引用
- quotation [kwo’teʃən]
如何表示短的引用?
- <q>标签
- <q>标签的内容浏览器一般会如何显示?
  - 一般会为 <q> 元素的内容 加引号

这使用了一个q标签

如何表示长的引用?
- <blockquote> 标签
- <blockquote> 标签的内容浏览器一般会如何显示?
  - 浏览器一般会对 <blockquote>的元素内容进行 **缩进 ** 处理
  - 在谷歌，IE，火狐中测试，只有缩进，没有背景色，如下图↓

⑵ abbr , acronym 表示缩写的标签

如何表示缩写或首字母缩写?
- ① 缩写 abbr
- ② 首字母缩写 acronym
表示缩写的标签作用是什么?
- 能够为浏览器、翻译系统以及搜索引擎 提供有用的信息

⑶ dfn 定义一个项目或作为定义

<dfn>标签
<dfn> 的用法
- 区分项目和定义
  - <dfn>包含abbr标签与否
  - <dfn>带不带title属性与否
⑴ 如果设置了 <dfn>元素的 title 属性，则定义项目
- <p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
⑵ <dfn> 元素包含具有标题的 <abbr> 元素，则 abbr的title 定义项目?
- <p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
⑶ 否则，<dfn> 文本内容即是项目，并且父元素包含定义
- p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>
看看对 WHO 这个缩写的解释/定义，写在什么位置，dfn 标签的具体用法，在标签的详解博客里看，这个是个概述，不是很详细，大概了解下即可，看得不是很懂没关系。

⑷ address 文档或文章的联系信息,如作者,版权等

使用 address标签
address 标签的显示,通常是怎样的?
- 通常以斜体显示。
- 大多数浏览器会在此元素 前后添加折行。
  <address></address>
我是 address 标签的内容

⑸ cite 著作的标题 / 作品名

使用什么标签来定义作品名?
- cite 标签
浏览器通常会怎样显示 cite元素的内容?
- 以斜体显示元素
- The Scream - 这标题是斜体 by Edward Munch. Painted in 1893.

⑹ bdo 文本的方向

bdo标签
- 又称 双向重写
- bi-directional override
如何设置方向?
- bdo的dir属性实现
有几个方向,分别是什么?
两个方向, 从右向左,从左向右（英文的书写方向，正常情况下，是从左到右的，这里反向了，从右到左，那么第一个字母，就放在了原本的最后的位置）。
- <bdo dir="rtl">This text will be written from right to left</bdo>
- <bdo dir="ltr">This text will be written from right to left</bdo>

11.6 表示计算机代码的标签 (code,kbd,samp,var,pre 标签)

通常,字母的尺寸和字母之间的间距是可变的
计算机代码 的字母的尺寸和字母之间的间距是可变的吗?
- 不是.是固定的
有哪些标签支持固定的字母 尺寸和间距?
- kbd,samp,code
- 键盘码/代码样本/代码

表示计算机代码的标签

用途	标签名称
① 计算机代码文本	`code`
② 键盘文本	`kbd`
③ 计算机代码示例	`samp`
④ 变量	`var`
⑤ 预格式化文本	`pre`

⑴ kbd 定义键盘的输入

使用 kbd 标签定义键盘的输入
tab按键,使用了 kbd标签

    <kbd>kbd 键盘输入文本</kbd>
    <p>HTML kbd 元素表示键盘输入：</p>

    <p><kbd>File | Open...</kbd></p>

显示结果:

⑵ samp 计算机输出的示例

定义计算机输出的示例
samp 标签

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

 <pre>
     <samp>
     demo.example.com login: Apr 12 09:10:17
     Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
     </samp>
 </pre>

显示结果： samp 本身是不保留空格和换行的，可以搭配 pre 预格式化标签

⑶ code 计算机代码的示例

code 标签
code 标签的显示有什么特点?
- 不保留多余的空格和换行
如何保留多余的空格和换行?
- 加一个pre 标签,代码放在<pre>中

<!-- 不保留空格和换行-->
    <code>

        var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }

    </code>
    
<!-- 保留空格和换行-->        
    <code>
        <pre>
        var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }
        </pre>
    </code>

显示结果

⑷ var 表示变量

使用 var 标签来表示变量

<p>爱因斯坦的公式：</p>
<p><var>E</var> = <var>m</var> <var>c</var><sup>2</sup></p>

显示结果：变量，是斜体的

★ 小结: 能够改变文本外观的标签分类 (基于内容,物理)

能够改变文本的外观的标签分为哪两类?
- ⑴ 基于内容的样式（content-based style）标签
  - 基于内容的样式标签的作用是什么?
    - 会告诉浏览器它所包含的文本具 有特定的含义、上下文或者用法.
    - 特点是: 重含义,而不是样式.
    - 基于内容的带样式的标签有哪些?
      - ① <abbr> （正常）
      - ② ~~<acronym>~~ (已废弃),用 abbr 替代
      - ③ <cite>（斜体）
      - ④ <code>（等宽）
      - ⑤ <dfn>（斜体）
      - ⑥ <em>（斜体）
      - ⑦ <kbd>（等宽）
      - ⑧ <samp>（等宽）
      - ⑨ <strong>（粗体）
      - ⑩ <var>（斜体）
- ⑵ 物理样式（physical style）的标签
  - 物理样式的标签特点是什么?
    - 重样式,而非含义.
  - 是否推荐使用物理样式的标签?
    - 不推荐.
    - 理由: 标签应该尽可能地向浏览器提供上下文信息(含义)，并使用基于内容的样式.
  - 物理样式的标签有哪些?
    - <b>（粗体）
    - <big>（大号字，已废弃）
    - <i>（斜体）
    - ~~<s>~~ 已废弃（删除线）
    - <small>（小号字）
    - ~~<strike>~~ 已废弃
    - <sub>
    - <sup>
    - <tt>

    <abbr title="world health organization">WHO（abbr 标签，加了 title 属性，会有一个下划线）</abbr>
    <cite>巴黎圣母院 cite 标签</cite>
    <code>code 标签的样式</code>
    <dfn>dfn 标签的样式</dfn>
    <em>em 标签的样式</em>
    <kbd>kbd 标签的样式</kbd>
    <samp>samp 标签的样式</samp>
    <strong>strong 标签的样式</strong>
    <hr />
    
    <b>b 粗体标签的样式</b>
    <big>big 大号字标签的样式，已废弃</big>
    <i>i 斜体标签的样式</i>
    <s>s 删除线标签的样式</s>
    <small>small 小号字的样式</small>
    <strike>strike 删除线的样式，已废弃</strike>
    B <sub>2 sub 标签的样式</sub>
    3 <sup>2 sup标签的样式</sup>

显示结果

12. 其他的 html 标签

这里只是了解个大概,标签的详细介绍,请参见文档开始时的标签参考列表.

⑴ a 表示链接(锚)

使用 a 标签
a 标签的中文如何称呼?
- 超链接（hyper text）或者锚（anchor）
- 如何区别叫什么?
  - 可以把提供热点和 超链接地址 的锚看作“链接”
  - 而用于标记文档的目标部分 的锚称为“锚”
a 标签的用途有哪些 ?
- ① 如何跳转到 新页面 ?
  - 使用 a 标签
  - 可分为
    - 外部链接(别的网站)
    - 内部链接(本网站)
- ② 锚点定位: 如何跳转到页面的其他位置?
  - 使用 a 标签
a 标签的内容浏览器显示是怎样的?
- 当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
a 标签的使用方式有哪些?
- ① 如何创建指向另一个文档(网页) 中的某位置的链接?
  - href="url#id" （id = 要跳转到的标签的 id 属性值）
- ② 如何创建文档(网页)内的书签 ?
  - a 标签的href="#id" （id = 要跳转到的那个位置的标签的 id 属性值）
- ③ 如何创建指向另一个文档(网页) 的链接?
  - href="url"(可以是绝对 url,也可以是相对 url)
a 链接标签的标签内容可以是什么?
- 文本
- 其他标签

如何定义被链接的文档的显示位置?
- target 属性

 <a href="https://www.baidu.com" id="" target="_blank">百度一下，你就知道</a>

默认是在 当前标签页中打开链接，
- 如果把链接的 target 属性设置为 "_blank"，该链接会在 新的标签页中打开。
显示结果

在这里插入图片描述

锚的名称如何定义?
- name 属性
书签有没有特殊形式,读者可以看到书签吗?
- 书签无特殊形式
- 书签对读者 不可见
如何无需滚动页面直接跳转到被命名的链接寻找需要的信息?
- 使用a 标签的name 属性
  - 可以使用 id 属性来替代 name 属性，命名锚同样有效
  - 跳转到其他标签使用目标位置的 name属性，不跳转，
  - 只有跳转到另一个a标签，使用该a 标签的 name 才行，所以，建议统一使用 id属性的属性值，这样不限制标签。
  - href="#name" → href="#id"
    - （此处的name和id 是指要跳转到的目标位置的标签的属性值，不是跳转的起始位置 a的属性值。）


<!--    跳转的起始位置，点击此处开始跳转-->
    <a href="#start">点击此处开始跳转</a>

<!--       跳转到的 目标位置，name 属性，仅限于另一个 a 标签-->
    <p id="start">我是页面的开始位置，测试a 标签的页面跳转</p>
        
    <a name="start">我是要跳转到的位置</a>

如何跳转到页面的某一位置?
- 跳转到的目标标签的 id属性（建议） or name属性（不建议）
如何跳转到某指定 id的标签的位置?
- 使用在a标签的href属性来关联
- 使用什么符号来关联 指定目标位置的 id ?
  - #
- 如何跳转到本页面的某位置?
  - a 标签的href="#id"
- 如何跳转到其他页面的某位置?
  - href="url#id"
  - 将 # 符号和锚名称添加到 URL 的末端多个url
如果浏览器找不到已定义的命名锚会怎样?
- 会定位到文档的顶端,或者无反应，不会有错误发生.
如何在大型文档开始位置上创建目录?
- ① 为指定位置的标签,定义 id 属性
- ② 定义a标签放到文档的上部
- ③ 使用a标签的href="#id"链接到指定标签的位置.
- (例如,百度百科，几乎每个词条都是采用这样的导航方式)

<!--跳转的开始 点击位置，点了会跳转，必须用 a 标签，相当于目录位置-->
<a href="#tips">有用的提示</a>


<!--要跳转到的位置的 标签的 id，无标签限制，相当于详情位置-->
<h1 id="tips">基本的注意事项 - 有用的提示</h1>
<p id="tips">基本的注意事项 - 有用的提示</p>


<!--  a 使用 name 属性，可以跳转到此处  <a name="start">我是要跳转到的位置</a>-->
<!--  h1使用 name 属性，不会跳转到此处  <h1 name="start">我是要跳转到的位置</h1>-->

⑵ img 表示图像

使用 <img> 标签表示图像
<img> 是空标签吗?
- 是的.
空标签
- 只包含属性
- 没有闭合标签,自闭合.<img src="" alt="" />
指明图像的地址
- 资源地址 src 属性
  - src 指 “source”
  - 属性值是图像的资源地址 url
  - 这个图像的存放地址，是相对于当前.html文件的位置。
图片替代文本: 如何在浏览器无法载入图像时，显示替代的文本?
- 使用替换文本属性 Alt
- 图像地址有问题等,图像不显示的时候,显示图片替代文本,告诉用户失去的是什么信息.

       <img src="images/四叶草背景.png" alt="四叶草">

显示结果
图像资源地址错误时，显示 alt 的属性值

⑶ table 表示表格 (搭配 tr,th,td 标签)

<table> 标签
如何表示表格中的行?
- tr 标签
  - table row:tr
如何表示表格的 表头(表格的标题)?
- th 标签
  - table heading
- 表头一般显示为什么样式?
  - 一般显示为粗体
- 放在tr中
如何表示行中的单元格 (数据) ?
- td 标签
  - table data: td
  - 即,表格数据
- 空单元格没有元素内容,浏览器会怎么显示 ?
  - 浏览器可能无法显示出这个单元格的边框（有的浏览器会显示）
- 如何让空单元格显示边框?
  - 在单元格中添加一个空格占位符，就可以将边框显示出来
    - <td>&nbsp ;</td>，没有用空格占位谷歌，火狐，IE都显示了边框。
td 单元格的元素内容可以是什么?
- 文本,图片,列表,段落,表单,表格等
如果不定义 边框属性，表格会显示边框吗?
- 表格将不显示边框.要显示边框,要定义边框属性.（默认是没有边框的）
表格元素的嵌套顺序是怎样的?
table 表格（框架→行→列（标题/数据单元格））
- tr 表格行
  - th 表格标题
  - td 表格数据单元格

<!--表格-->
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td></td>
        </tr>
    </table>

显示结果：表格和数据单元格，整体都默认是没有边框的
加个边框属性<table border="1">
显示结果

⑷ 列表 (搭配 ul ,ol , dl ,li ,dt,dd 标签)

列表的特点: 使文字内容,或者图表等, 显示得非常整齐, 有序. (就像排成方队一样)
列表的 3 个分类
- 无序,有序,定义
- 无序列表
  - ul标签
  - 一个项目的列表
  - 使用 项目符号标记
- 有序列表
  - ol标签
  - 使用数字标记
- 列表项
  - li标签
  - 定义列表的项目,用于ul和ol中
- 定义列表
  - dl 标签
    - 项目和项目的定义(注释)
    - 如何定义列表的术语名?
      - dt
    - 如何表示术语的描述(定义)?
      - dd

⑸ 表示框架 (framset,frame,noframes 标签)

什么是框架?
- 一个页面(文档) 算是一个框架,每个框架都独立于其他的框架
如何在一个窗口显示多个页面
- 使用框架集标签 frameset
如何分割框架和定义分割的行列?
- frameset
- <frameset cols="25%,75%"> </frameset>
如何指定每个框架中的具体页面 ?
- 框架标签 frame
如何禁止用户拖动边框改变大小?
- 在 <frame> 标签中加入：noresize="noresize"
对于不支持框架标签的浏览器如何进行兼容处理?
- 添加 <noframes> 标签
能将 <body></body> 标签与 <frameset></frameset> 标签同时使用吗?
- 不能.
<noframes> 标签要显示文本，还需要其他标签吗?
- 需要.必须嵌套于 <body></body> 标签内
框架相关的标签嵌套顺序是怎样的?
- ① <frameset>
  - <frame>
- ② <noframes>
  - <body>
    - 浏览器无法处理框架的提示
如下,两列的框架


<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

提示： framset,frame,noframes 三个框架标签，在 html 5 中已经被废弃。

⑹ iframe 表示内联框架

如何在网页内显示网页?（类似画中画的感觉）
iframe 标签
iframe 的语法
- <iframe src="URL"></iframe>
- srciframe 内联框架中默认显示的页面
如何定义是否显示 iframe 周围的边框?
- frameborder 属性
如何让 a 标签指定链接的网页显示在iframe的位置?
- <a> 标签的 target 属性值 = <iframe> 的 name 属性值
- a-target = iframe-name，
- 点击a标签的内容，在iframe原本的位置，会显示的 a-href 指向的网页，覆盖掉初始的 iframe-src 原本指向的页面。


<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

⑺ form 表示表单和表单元素

如何搜集用户输入 ?
- 使用 <form> 标签
表单元素有哪些 ?
- 不同类型的 input 元素、复选框、单选按钮、提交按钮等等
password 字段中的字符在浏览器中会怎样显示?
- 一般会被做 掩码处理（显示为 星号或实心圆）
什么是表单处理程序?
- （form-handler）
- 通常是包含处理输入数据的脚本的 服务器页面
如何省略了提交按钮的 value 属性会怎样处理?
- 该按钮将获得 默认文本
如果老式 web 浏览器不支持的输入input类型会怎样处理?
- 会被视为 输入类型 text

Input 属性
如何规定输入字段的 初始值 ?
- 使用 <input> 标签的value 属性
如何规定输入字段为只读（不能修改）?
- 使用 readonly 属性
如何禁用输入字段 ?
- 使用 disabled 属性
被禁用的元素一般会有什么特征 ?
- 不可用
- 不可点击
- 不会被提交

⑻ head 文档的头部

所有的头部元素放在什么标签中?
- head 标签
可以放在head 标签中的标签有哪些?
- ① meta
- ② title
- ③ link
- ④ script
- ⑤ style
- ⑥ base
如何表示文档的标题?
- 使用 title 标签
title 标签是必需的吗?
- 是的,文档中不能少的标签
title 标签的内容一般有什么用?
- ① 浏览器 工具栏的标题
- ② 页面 被收藏时的标题
- ③ 搜索引擎结果中的 页面标题

如何指定页面中的所有链接 的默认链接地址 或默认打开的目标位置?
- base 标签


<head>
	<base href="http://www.w3school.com.cn/images/" />
	<base target="_blank" />
</head>

如何 指明文档与外部资源之间的关系?
- link 标签
  - 如何链接外部样式表 ?
    - 使用 link 标签

如何 定义页面的样式 ?
- style 标签

如何表示 关于页面的数据的信息?
<meta> 标签,元数据标签.
- 什么是元数据?
  - 关于数据的数据 (文档本身是数据,关于网页数据的数据)
<meta> 标签的内容显示在页面上吗?
- 不会，但是对于机器是可读的.
<meta> 元素的用途有哪些?
- 如何表示对页面的描述?
  - <meta> 元素
- 如何定义关于页面的关键词?
  - <meta> 元素
- 如何描述文档的作者?
  - <meta> 元素
- 如何定义最后修改时间?
  - <meta> 元素
一些搜索引擎会利用什么来索引页面?
- <meta> 元素的 name 和 content 属性来索引页面
<meta> 标签的什么属性是描述页面的内容的?
- name 和 content 属性
  - 两个属性搭配使用,content 属性值关联 name的属性值

下面的 meta 元素定义 页面的 描述：

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

下面的 meta 元素定义 页面的 关键词：

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

⑼ script 使用脚本

如何定义客户端脚本，比如 JavaScript ?
- 使用 script 标签
  定义脚本有哪几种方式?
  - ① 在 script 标签中 ,包含 脚本语句
  - ② 使用标签的 src 属性, 指向 外部脚本文件
无法使用脚本时的 , 如何设置替代内容来提示?
- noscript 标签
什么时候会显示 noscript 元素中的内容?
- 在浏览器 禁用脚本时，或浏览器 不支持客户端脚本，进行提示。

当老式的浏览器不识别 <script> 标签，并把 <script> 标签所包含的内容将以文本方显示在页面上时,该如何处理 ?
- 将 脚本隐藏 在注释标签 当中
  - 老的浏览器 会忽略被注释内容
  - 新的浏览器 将读取这些脚本 并执行它们，即使代码被嵌套在注释标签内.
如何 注释脚本 👇?
- 把 <script> 标签中的 JavaScript 代码注释 , 在结束的连字符前加两个斜杠 //
  -

JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>

13. 响应式 Web 设计 (RWD,尺寸可变)

响应式 Web设计的英文和英文缩写是什么?
- Responsive Web Design
  - RWD （美 /rɪˈspɑːnsɪv/），响应式网页设计
响应式 web 设计有什么特点?
- 网页的 尺寸可变
- 平板和移动设备是必需的
如何创建响应式布局?
- 自己创建
- 使用 bootstrap

14. 实体

14.1 什么是实体,实体的意义是什么? (预留字符/特殊字符)

字符实体的英文是什么 ?
- character entities
  - [ˈentitiz]
为什么 HTML 中的 预留字符 必须被替换为 字符实体 ?
- 因为浏览器会 误认为 它们 是标签
- 如,不能使用小于号（<）和大于号（>）,这两个一般用于表示标签.
字符实体的格式 一般是怎样的?
- ① &entity_name; 名字
- ② &#entity_number; 数字
如果想显示小于号，应该怎样写?
- 必须写：<或 <
使用实体名和实体数字有什么区别 ?
- ① 使用 实体名易于记忆
- ② 实体名 区分大小写
- ③ 浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

14.2 常用的字符实体

字符实体,主要用于 .html 网页文件中的 预留字符和特殊字符
- 目的：避免和 html 本身标签代码冲突.

显示结果	描述	实体名称	实体编号
	空格	&nbsp ;	&#160 ;
<	小于号	&lt ;	&#60 ;
>	大于号	&gt ;	&#62 ;
&	和号	&amp ;	&#38 ;
"	引号	&quot ;	&#34 ;
’	撇号	&apos ; (IE不支持)	&#39 ;
￠	分	&cent ;	&#162 ;
£	镑	&pound ;	&#163 ;
¥	日圆	&yen ;	&#165 ;
€	欧元	&euro ;	&#8364 ;
§	小节	&sect ;	&#167 ;
©	版权	&copy ;	&#169 ;
®	注册商标	&reg ;	&#174 ;
™	商标	&trade ;	&#8482 ;
×	乘号	&times ;	&#215 ;
÷	除号	&divide ;	&#247 ;

日元和人民币符号的区分
- 一横，日元，两横，人民币，但是，在很多字体中，把这个统一显示为两横了，所以，很容易搞混淆
- 国际标准化组织，为了对人民币符号与日元符号，加以区分，将日元记为 JPY￥，将人民币记为 CNY¥。

在这里插入图片描述

点此查看更多实体和实体名缩写来源

15. URL

15.1 什么是 url ?

url 是什么意思?
- Uniform Resource Locator
- 统一 资源定位器
url 统一资源定位器的语法是怎样的 ?
- scheme://host.domain:port/path/filename
  - 服务类型://主机.域名:端口号/路径/文件名
- scheme [skim] 是什么意思 ?
  - 定义因特网服务的类型(传输协议)。
    - 最常见的因特网服务类型是什么?
      - http
- host 是什么意思?
  - 定义主机
    - http 的默认主机是什么?
      - www
- domain 是什么意思?
  - 定义因特网域名
  - 比如 w3school.com.cn
- :port 是什么意思 ?
  - 定义主机上的端口号
    - http 的默认端口号是什么?
      - 80
- path 是什么意思?
  - 定义服务器上的路径
  - （如果省略，则文档必须位于网站的根目录中）。
- filename 是什么意思 ?
  - 定义文档/资源的名称
http://www.w3school.com.cn/html/html_urlencode.asp

最流行的 scheme 服务类型 有哪些 ?

Scheme(服务类型,传输协议 )	访问	用于
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		计算机上的文件。

15.2 URL 编码

url 是不是只能包含 ASCII 字符集?
- 是的.为什么?
- ASCII 是什么意思 ?
- 美 /ˈæski/
- abbr. 美国 信息交换 标准码（American Standard Code for Information Interchange）
不属于 ASCII 字符集的字符要如何处理?
- 要转换为有效的 ASCII 格式
- HTML 和 XHTML 用标准的 7 比特 ASCII 代码 在网络上 传输数据
7 比特 ASCII 代码可提供 128 个不同的字符值
- 任何特殊的字符（那些不是简单的七位 ASCII，如汉字）将以百分符%用十六进制编码，当然也包括象 =,&；，和 % 这些特殊的字符。
- 其实 url 编码就是一个字符 ascii 码的十六进制。只不过稍微有些变动，需要在前面加上“%”。
如何替换非 ASCII 字符?
- URL 编码使用 “%” ，其后跟随 ASCII 编码中的两位的十六进制数 来替换→%十六进制数
URL 能包含空格吗 ?
- 不能. URL 编码通常使用 + 来替换空格
点击查看，ASCII 字符集的存在原因和 ASCII 编码表
- 在计算机中，所有的数据，在存储和运算时，都要使用二进制数表示（因为计算机用高电平和低电平，分别表示 1和0）
- 统一规定了,常用符号用哪些 二进制数来表示,即编码，即 ASCII 存在的原因
- 查看 url 编码
- url 编码详解
url 编码示例

ASCII Value	URL-encode
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3a
;	%3b
<	%3c
=	%3d
>	%3e
?	%3f
@	%40
A	%41
B	%42
Y	%59
Z	%5a
a	%61
b	%62
y	%79
z	%7a

0-9 的数字，对应的 url 编码： %30~%39
- 因为对应的 ASCII 十六进制是 0x30~0x39
- 点击查看 0x开头的数字，十六进制数的详解
- 以 0x 开始的数据，表示 16 进制
  - 0 是数字 0，不是字母 O
  - 16 进制，就是逢 16 进 1，但我们只有 0~9 这十个数字，所以我们用 A，B，C，D，E，F 这六个字母来分别表示 10，11，12，13，14，15。字母，不区分大小写。
  - 一个十六进数 0x2AF5, 那么如何换算成 10 进制呢？
    - 5 * 16^0 + F * 16^1 + A * 16^2+2 * 16^3 = 5 * 1+15 * 16+ 10 * 16 * 16 + 2 * 16 * 16 * 16=10997

在这里插入图片描述

大写字母:%41~%5a
小写字母:%61-%7a
常见 ASCII 码的大小规则：0~9<A~Z<a~z。
- 数字，比字母要小。如 “7”<“F”；
- 数字 0 比数字 9 要小，并按 0到9 顺序递增。如 “3”<“8” ；
- 字母A 比字母Z要小，并按 A到Z 顺序递增。如“A”<“Z” ；
- 同个字母的大写字母，比小写字母要小 32（指的是 ASCII 编码表中的十进制）。如“A”<“a” 。

16. 如何表示颜色 ?

颜色是如何组成的?
- 由 红绿蓝 三原色混合而成
如何定义颜色?
- ① 由一个 十六进制符号来定义
- ② 由红、绿和蓝色的值（RGB）
- ③ 颜色名
十六进制颜色
- 十六进制中每种颜色的 最小值 是什么?
  - 0（十六进制：#00）
- 十六进制中每种颜色的 最大值 是什么 ?
  - 255（十六进制：#FF）
  - 16 进制转换成 10进制：ff=15×16^1 + 15× 16^0= 240+15=255
仅有多少种颜色名被 W3C 的 HTML4.0 标准 所支持 ?
- 16 种
  - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
如果除了 16 种颜色名想使用其它颜色的话，该怎样处理?
- 可以使用 十六进制的颜色值
- 颜色名和对应的颜色

17. XHTML

17.1 什么是 XHTML ? (可扩展超文本标记语言)

xhtml 的英文全称是什么 ?
- EXtensible HyperText Markup Language
  - [ɪk’stɛnsəbl]
xhtml 是什么意思 ?
- ① 以 XML 格式 编写的 HTML.
  - 正确标记格式良好的 HTML 版本
- ② 可扩展 超文本标记语言
  - 与 HTML 4.01 几乎是相同的
- ③ 是 2001 年 1 月发布的 W3C 推荐标准
  - XHTML 得到所有主流浏览器的支持
XML 是什么 ?
- 可扩展标记语言
- 一种 必须正确标记 且格式良好的 标记语言

17.2 HTML 和 XHTML 有什么区别?

文档结构
- 6个必须有:
  - ① 文档类型
    - XHTML DOCTYPE 是强制性的
      - 必须进行 XHTML 文档类型声明 （html 中一般也要声明的）
  - ② <html> 的 xmlns 属性 (xml 命名空间)
    - <html> 中的 XML namespace属性是强制性的
      - 使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间
      - <html xmlns="http://www.w3.org/1999/xhtml">
  - ③ 4 个必需标签
    - <html>、<head>、<title> 以及 <body>（html 中也必须要有的）
元素语法
- XHTML 元素必须 正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素名必须小写
- XHTML 文档必须有 一个根元素
属性语法
- XHTML 属性名必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性必须 有属性值
以上，可以看出 xhtml 的格式，更加的严谨一些，其他方面，其实区分并不是很大。

17.3 如何从 HTML 转换到 XHTML ?

① 向每张 页面的第一行 添加 XHTML <!DOCTYPE> 文档声明
② 向每张页面的根标签 html 标签添加 xmlns 属性
③ 把所有标签名,属性名改为小写
④ 关闭所有空元素
⑤ 为所有属性值 加引号

18. HTML5

18.1 HTML5 是什么?

HTML5 有哪些特点 ?
新标准,丰富 web 内容,新语义,图形,多媒体元素,跨平台
- ① 最新的 HTML 标准 版本
- ② 专门为承载丰富的网页内容而设计的
- ③ 无需额外插件
- ④ 新的语义、图形以及多媒体元素
- ⑤ 新元素和新的 API
- ⑥ 简化了网页应用程序的搭建
- ⑦ HTML5 是 跨平台的
  - 被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

HTML5 中 默认的字符编码 是什么?
- 是 UTF-8 编码
- utf-8 编码详解
  - （8 位元，Universal Character Set/Unicode Transformation Format），统一码转换格式是针对 Unicode（n. 统一的字符编码标准）的一种 可变长度 字符编码。
  - utf-8 可以用来表示 Unicode 标准 中的任何字符，而且其编码中的第一个字节仍与 ASCII 相容，使得原来处理 ASCII 字符的软件无须或只进行少部份修改后，便可继续使用。
  - 因此，utf-8 逐渐成为电子邮件、网页及其他存储或传送文字的应用中，优先采用的编码。
    - Unicode，为了统一所有文字的编码，Unicode 应运而生。Unicode 把所有语言都统一到一套编码里，这样就不会再有 乱码问题了。
  - UTF 后的数字，代表 编码的最小单位，如 UTF-8 表示最小单位 1字节（=8 bits）,所以它可以使用 1、2、3字节等进行编码，UTF-16 表示最小单位 2字节，所以它可以使用 2、4字节进行编码。
HTML5 新的属性语法有哪些 ?
- 允许 4 种不同的属性语法
  - 简写属性(不写属性值)
    - Empty
  - 无引号
    - Unquoted
  - 双引号
    - Double-quoted
  - 单引号
    - Single-quoted

HTML5 的新特性 有哪些 ?
新语义,新表单控件,图像,多媒体,新API
- ① 新的 带语义的标签
  - 比如 <header>, <footer>, <article>, and <section>。
- ② 新的 表单类的控件
  - 比如数字、日期、时间、日历和滑块。
- ③ 强大的 图像支持
  - <canvas> 和 <svg>
- ④ 强大的 多媒体支持
  - <video> 和 <audio>
- ⑤ 强大的 新 API
  - 比如用 本地存储 取代 cookie。

html5 中被删除的标签有哪些 ?
- ① <acronym>首字母缩写标签
- ② <applet>小程序标签
- ③ <basefont> 基础字体
- ④ <big> 大号字
- ⑤ <center> 居中
- ⑥ <dir> 目录
- ⑦ <font> 字体
- 框架类
  - ⑧ <frame> 框架
  - ⑨ <frameset> 框架集
  - ⑩ <noframes> 不支持时框架的提示
- ⑪ <strike> 删除线
- ⑫ <tt> 打字机等宽字体
在 webstorm 软件中测试，确实都提示已经废弃了

18.2 HTML5 浏览器支持

现代浏览器对 HTML5 的支持如何?
- 都支持 HTML5
所有浏览器，无论新旧，如何处理识别不了的元素 ?
- 自动把未识别元素当做 行内元素 来处理
HTML5 定义了几个新的语义 HTML 标签 ?
- 8个
- header, section, footer, aside, nav, main, article, figure
新的语义元素有什么共同点 ?
- 都是 块级元素。
对于这些块级的新语义元素, 如何确保老式浏览器中正确的行为 ?
- 把 CSS display 属性设置为 block
- header, section, footer, aside, nav, main, article, figure { display: block;
  }

18.3 如何把 HTML4 网页变成 HTML5 网页 ?

如何在不破坏原始内容和结构的情况下把 HTML4 网页变成 HTML5 网页 ?
① 换标签
- 把一些 div 标签换成 HTML5 中相对应语义的标签
② 修改 文档类型声明 为 HTML5
- HTML4 文档类型声明
  - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  - 修改为 HTML5 doctype：
    - <!DOCTYPE html>
③ 更改为 HTML5 编码 meta 标签
- 修改编码信息，从 HTML4：
  - <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- 改为 HTML5：
  - <meta charset="utf-8">
④ 添加 条件注释,解决 IE 兼容问题. 添加 shiv
- 所有现代浏览器都支持 HTML5 语义元素。
- 此外,需要告诉老式浏览器如何处理“未知元素”。
  - 为 IE 支持而添加的 shiv
  - shiv 是什么意思 ?
  - 一种针对 IE 解决兼容的方案名称
shiv 代码如下 :

HTML4 中可以替换成对应语义的 HTML5 标签有哪些 ?

典型的 HTML4	典型的 HTML5
`<div id="header">`	`<header>`
`<div id="menu">`	`<nav>`
`<div id="content">`	`<section>`
`<div id="post">`	`<article>`
`<div id="footer">`	`<footer>`

18.4 HTML5 样式指南和代码约定有哪些?

如何保持样式智能、整洁、纯净、格式良好 ?
- 使用格式良好的 “近似 XHTML 的”语法
⑴ 使用正确的文档类型
- 在文档的首行声明文档类型：
  - <!DOCTYPE html>
- 如果坚持小写标签，那么可以使用：
  - <!doctype html>

⑵ 标签名必须小写
- HTML5 允许在标签名中使用混合大小写字母
  - 不建议大小写混合.
    - 因为小写更起来更纯净，小写更易书写
⑶ 标签必须关闭
- 是否需要关闭的区别 ?
  - 在 HTML5 中
    - 不必关闭所有元素.在 HTML5 中，关闭空标签是可选的.
  - 在 XHTML 和 XML 中
    - 空标签中的斜杠（/）是必需的 , 关闭标签是必须的.
- 为什么写代码时. 必须关闭标签. 空标签也要关闭 ?
  - 这样代码正确性更高,更易读.
  - 使 XML 软件也可以访问页面
⑷ 属性名必须小写
- HTML5 允许大小写混合的属性名。
- 为什么建议属性名必须小写 ?
  - 小写属性名看起来更纯净 , 代码干净利落。
  - 小写属性名更易书写。

⑸ 属性值必须加引号
- HTML5 允许不加引号的属性值。
- 为什么建议属性值必须加引号 ?
  - 如果属性有属性值 , 则必须使用引号
  - 加引号的值更易阅读
  - 混合的样式 ,属性值一会加引号,一会不加,代码不干净利落.
⑹ 属性的等号两边不要有空格
- 属性等号两边的空格是合法的吗?
  - 是合法的.
  - <link rel = "stylesheet" href = "styles.css">
- 为什么建议等号两边不要有空格 ?
  - 代码更精简 , 更易阅读，而且多打两个空格更繁琐，更浪费时间。
⑺ 为 img 标签设置 必需的属性
- 图像<img>标签,必须使用 alt 属性。
  - 为什么 alt 属性对<img>标签是必须的 ?
  - 当图像无法显示时,这个属性会告诉用户丢失图片的相关信息。
  - <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- 图像<img>标签,必须设置尺寸: 宽高
  - 为什么一定要设置图片的宽高 ?
    - 可以减少闪烁。
    - 浏览器会在图像加载之前 为图像预留空间
  - <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

⑻ 代码行不要太长
- 为什么一行代码不要太长?
  - HTML 编辑器中，通过左右滚动来阅读 HTML 代码很不方便，左右拖动看代码，很麻烦。
- 一行代码建议多少字符以内 ?
  - 不超过 80 个字符

⑼ 合理使用空行和缩进
- 能毫无理由地增加空行 ?
  - 不建议.
- 为什么要增加空行来分隔大型或逻辑代码块 ?
  - 为了提高代码的可读性
- 一般缩进几个空格 ?
  - 两个空格。请勿使用 tab键，因为不同的浏览器，解析tab 键，可能会是不同的空格数，会造成浏览器兼容问题。
⑽ 必须的标签 : <html> 和 <body> <head> <title> 标签
- 在 HTML5 标准中，能够省略 <html> 标签和 <body> 标签吗 ?
  - 可以，但最好不要省略，会让浏览器产生错误。
- 什么是文本的根标签 ?
  - <html> 标签
- 一般在哪个标签中指明页面语言 ?
  - 根元素 <html> 中
  - <html lang="en-US">
    - lang:language 的缩写
- 为什么要指明网页的语言 ?
  - 对于可访问应用程序（屏幕阅读器）和搜索引擎有用
- 为什么 HTML5 标准中可以省略 <html> 或 <body>,实际写代码时却不能省略 ?
  - 省略了会让 DOM 和 XML 软件崩溃
  - 在老式浏览器中会产生错误
能省略 <head>吗？
- 在 HTML5 标准中，<head> 标签也可以被省略
- 默认地，浏览器会把 <body> 之前的所有元素添加在哪里 ?
  - <head> 标签中
- 虽然通过省略 <head> 标签，可以降低 HTML 的复杂性,但是不建议省略.不省略,代码更易读和规范.

<title> 元素在 HTML5 中是必需的
- title标签的内容一般用在哪里?
  - 用户收藏网页时会使用
  - 浏览器窗口的标题也会显示网页的主题
为什么在文档中 语言和字符编码 越早指明越好?
- 确保恰当的解释
- 正确的 搜索引擎索引
在哪个标签中指明网页的字符编码 ?
- <meta>标签中的 charset 属性
必须的标签的嵌套关系
- ① <!DOCTYPE html>
- ② <html lang="en-US">
  - ③ <head>
    - ④ <meta charset="UTF-8">
    - ⑤<title>
  - ⑥<body>

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

⑾ 文件名小写
- 大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：
  - 不能以 london.jpg 访问 London.jpg。
- 一些 web 服务器（微软，IIS）对大小写不敏感：
  - 能够以 london.jpg 或 London.jpg 访问 London.jpg。
- 如果使用混合大小写，为什么必须保持高度的一致性 ?
  - 因为如果从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏网站
- 为什么建议小写文件名 ?
  - 避免因为不同服务器大小写敏感不同,而造成网站的错误。
⑿ 文件扩展名的规范有哪些 ?
- HTML 文件: 应该使用扩展名 .html（而不是 .htm）。
- CSS 文件: 应该使用扩展名 .css。
- JavaScript 文件：应该使用扩展名 .js。

样式表
- 网页中如何链接样式表（type 属性不是必需的）：
  - <link rel="stylesheet" href="styles.css">
  - <link>标签的rel属性和 href 属性

body {
 background-color: lightgrey;
 font-family: "Arial Black", Helvetica, sans-serif;
 font-size: 16em;
 color: black;
}

⒀ CSS 样式表的格式
CSS 样式中 , 空格一般用在什么位置 ?
- 开括号之前（选择器后面）,
- 冒号之后(属性和属性值之间的),
- 逗号之后（属性值和属性值）
开括号与选择器的位置关系一般怎么安排?
- 在同一行
属性之间的分隔符：在每个属性值对结束之后使用什么符号 ?
- 分号 ;（属性和属性之间的分隔），写完一个属性，要用分号结尾，再写下一个属性。
属性值之间的分隔符：
- 一个属性，有多个属性值，属性值之间，使用，逗号分隔，这个逗号后面，还可以加一个空格显得不拥挤。
属性值对前面一般缩进几个字符?
- 2个
属性值 什么时候使用引号 ?
- 属性值 包含空格时 ,属性值使用引号 ;。
闭括号一般放在哪里 ?
- 新的一行，之前不用空格

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

如何在 HTML 中加载外部脚本 js 文件 ?
- <script> 标签的 src 属性指明 js 文件的地址。（type 属性不是必需的）
  - <script src="myscript.js">

HTML 如何进行注释 ?
短注释应该在单行中书写
- 并在  之前增加一个空格：
长注释，跨越多行
- 应该通过  在 独立的行中书写


<!-- This is a comment,短注释 -->

<!-- 
  长注释 .This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

19. HTML5 中新增的标签

语义标签
语义标签是什么意思 ?
- 拥有语义的标签 , 会清楚地向浏览器和开发者 描述标签内容的意义,有确切的含义 .
语义标签和非语义标签有什么区别 ?
- 非语义标签的例子：<div> 和 <span>
  - 无法提供 关于标签的内容的信息,只是个容器.
- 语义标签的例子：<form>、<table> 以及 <img>
  - 清晰地 定义标签的内容,有确切含义。一看到标签，就能确定标签里面包含的是什么类型的标签内容。

⑴ section 文档的节

如何将网站首页划分为简介、内容、联系信息等节 ?
- 使用 <section> 标签
节（section）是什么意思 ?
- 有主题的 内容组，通常具有标题 .
  - 一组内容,有一定的主题.

⑵ article 表示独立的自包含内容

如何规定独立的自包含内容 ?
使用 <article> 标签
<article> 标签的内容有什么特点 ?
- ① 可独立阅读
  - 可以独立于网站其他内容进行阅读
- ② 文档有其 自身的意义
论坛, 博客 ,新闻一般使用什么标签 ?
- 相当于需要独立阅读的内容, 使用 <article> 元素 .
如何定义完整的 相关元素自包含块 ?
- 使用 <article> 标签
如何定义为相关元素块 ?
- <section> 标签
<article> 元素和 <section> 元素可以嵌套吗 ?
- 必要时,两者可以互相嵌套

⑶ header 为文档或节规定页眉

如何为 文档或节 规定页眉 ?
- 使用 <header> 页眉元素
使用什么标签作为 介绍性内容的容器 ?
- 使用 <header> 页眉元素
  - 在电子文档中，一般称每个页面的顶部区域为页眉。
  - 常用于显示文档的附加信息，可以插入时间、图形、公司微标、文档标题、文件名或作者姓名等。
一个文档中可以有多个 <header> 页眉元素吗 ?
- 可以 .

⑷ footer 为文档或节规定页脚

如何为文档或节规定页脚 ?
- 使用 <footer> 元素
提供有关其包含元素的信息 一般使用什么标签 ?
- 使用 <footer> 元素
包含文档的作者、版权信息、使用条款链接、联系信息等一般使用什么标签 ?
- 使用 <footer> 页脚元素
  - 页脚，是文档中每个页面的底部的区域。
  - 在电子文档中，常用于显示文档的附加信息，可以在页脚中插入文本或图形，例如，页码、日期、公司徽标、文档标题、文件名或作者名等，这些信息通常打印在文档中每页的底部。
可以在一个文档中使用多个 <footer> 元素吗 ?
- 可以 .

⑸ nav 表示导航链接的集合

如何表示导航链接的集合 ?
- 使用 <nav> 元素
一般表示大型的导航链接块使用什么标签 ?
- 使用 <nav> 元素
是不是文档中所有链接都应该位于 <nav> 元素中 ?
- 不是 .

⑹ aside 表示页面主内容之外的某些内容

如何表示页面主内容之外的某些内容（比如侧栏）?
- 使用 <aside>标签
- 与周围内容相关

⑺ figure 组合图片和标题

如何为图片添加可见的解释 ?
- 使用图片标题（caption）<figcaption> 元素
如何组合图片和标题 ?
- 使用 <figure> 元素
- 美 /ˈfɪɡjər/，n. 图形
如何表示图像?
- <img> 元素
如何表示图片的标题 ?
- <figcaption> 图片标题元素
组合图片和标题的嵌套关系
- <figure> 组合图像
  - <figcaption> 图像标题
    - “figcaption” 元素的位置该如何处理?
      - 应该被置于 “figure” 元素的 第一个或最后一个子元素 的位置。因为是标题，要么放在图像的最上方，要么放在图像的最下方，就是这个意思。
  - <img /> 图像

<!--    组合图像和图像标题-->
    <figure>
        <figcaption>四叶草</figcaption>
        <img src="images/四叶草背景.png" alt="四叶草" width="50" height="50">
    </figure>

显示结果

20. HTML 图形

⑴ canvas 在网页上绘制图形

如何在网页上绘制图形 ?
- 使用 <canvas> 标签
  - ['kænvəs] 画布标签
画布标签 <canvas>的区域是什么形状?
- 一个矩形区域
- 可以控制画布标签中的每一像素吗?
  - 是的.
canvas 标签本身可以绘图吗 ?
- 不可以.
- 如何进行绘图 ?
  - 使用 canvas 标签的JavaScript 方法
    - 从左上角开始 (0,0) ,在画布上绘制 150x75 的矩形如何实现 ?
      - fillRect 方法设置参数 (0,0,150,75)。
      - ctx.fillRect(0,0,150,75);

<!DOCTYPE html>
<html>
	<head>
		<script>
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			ctx.fillRect(0,0,150,75);
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.
		</canvas>
	</body>
</html>

⑵ svg 表示用于网络的基于矢量的图形

用于
- 如何表示用于网络的基于矢量的图形 ?
- 使用 <svg>标签
- svg 的全称是什么 ?
  - scalable vector graphics
    - ['skeləbl] ['vɛktɚ] ['græfɪks]
    - 可伸缩矢量图形
使用什么格式定义矢量图形 ?
- 使用 XML 格式
SVG (可伸缩矢量)图像有什么特点 ?
- 在放大或改变尺寸的情况下其图形质量 不会有损失
- SVG 是万维网联盟的标准
SVG 的优势有哪些 ?
- ① SVG 图像可通过文本编辑器来创建和修改
- ② 可被搜索、索引、脚本化或压缩
- ③ 可伸缩的
- ④ 可在任何的分辨率下被高质量地打印
- ⑤ 可在图像质量不下降 的情况下 被放大
哪些浏览器支持 svg 标签 ?
- IE 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG
在 HTML5 中，能将 SVG 元素 直接嵌入 HTML 页面中吗?
- 可以.


<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

显示结果，是不是很强大？

★ HTML 5 画布和可伸缩矢量图形

画布 canvas 和可伸缩矢量图形 svg 有什么共同点 ?
- 都允许 创建图形
SVG 可伸缩矢量图形的特点有哪些 ?
- SVG 是一种使用 XML 描述 2D 图形的语言。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。
  - 您可以为某个元素附加 JavaScript 事件处理器。
- 在 SVG 中，每个 被绘制的图形 均被视为对象。
  - 如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
Canvas 画布的特点有哪些 ?
- Canvas 通过 JavaScript 来绘制 2D 图形。
  - Canvas 是逐像素 进行渲染的。
- 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。
  - 如果其位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 画布	SVG 可伸缩矢量图形
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 `.png` 或 `.jpg` 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

21. 媒体

⑴ 多媒体

Web 上的多媒体指的是什么 ?
- 音效、音乐、视频和动画
多媒体格式有哪些 ?
- 视频格式
- 音频(声音)格式
视频格式

格式	文件扩展名	描述
① AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
② WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
③ MPEG	.mpg.mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
④ QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
⑤ RealVideo	.rm .ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
⑥ Flash	.swf.flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
⑦ Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式	文件扩展名	描述
① MIDI	.mid.midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
② RealAudio	.rm.ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
③ Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
④ WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod（美 /aɪˈpɒd/，苹果公司音乐播放器）。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
⑤ MP3	.mp3.mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。

音频格式的选择使用哪种格式？
WAVE 是因特网上最受欢迎的 无压缩声音格式，所有流行的浏览器都支持它。
如果需要 未经压缩的声音（音乐或演讲），应该使用那种音频格式 ?
- WAVE 格式，文件扩展名.wav
MP3 是最新的 压缩录制音乐格式
如果从事录制音乐，选择哪种音频格式?
- MP3

⑵ object 向页面添加多媒体 /嵌入对象

如何定义一个 嵌入的对象 ?如何向页面 添加多媒体 ?
- 使用 <object>元素
用什么标签 包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash ?
- <object> 标签
可由浏览器启动的程序称之为什么?
- 辅助应用程序（helper application）
  - 也称为插件。
使用什么 播放音频和视频 Java applets、ActiveX、PDF 以及 Flash
- 插件
如何加载插件 ?
- 使用 <object>标签
使用辅助程序(插件) 播放视频和音频的优势有哪些 ?
- 允许用户来控制 部分或全部 播放设置。
  - 大多数辅助应用程序允许对音量设置和播放功能吗 ?
  - 是的 .（比如后退、暂停、停止和播放）的手工（或程序的）控制。

⑶ 如何在 HTML 中播放声音和视频 ?

如何在 HTML 中播放声音和视频 ?
- 使用插件
- 什么是浏览器插件 ?
  - 一个扩展程序. 一种扩展浏览器标准功能的小型计算机程序
播放音乐、显示地图、验证银行账号，控制输入等一般是怎样实现的 ?
- 使用插件
- 如何将插件添加到 HTML 页面 ?
  - 可使用 <object> 或 <embed> 标签
- 如何定义资源（通常非 HTML 资源）的容器 ?
  - 使用 <object> 或 <embed> 标签
- 插件的显示是如何的 ?
  - 根据类型，它们即会由浏览器显示，也会由 外部插件显示。
如何定义外部 (非 HTML) 内容的容器 ?
- 使用 <embed> 元素
  - （这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
    - 如何显示嵌入网页中的 MP3 文件 ?
    - 实例 : embed 标签 3 个属性,宽高资源
      - <embed height="100" width="100" src="song.mp3" />
      - <embed> 标签在 HTML 4 中是无效的。
        会导致页面无法通过 HTML 4 验证。

如何定义外部（非 HTML）内容的容器 ?
- 使用 <object> 元素
- <object height="100" width="100" data="song.mp3"></object>
- <audio> 是一个 HTML5 元素,在 HTML 4 中是无效的。
  - 会导致页面无法通过 HTML 4 验证 ,如何解决 ?
    - 使用 <!DOCTYPE html> (HTML5 文档声明) 解决验证问题
- 为什么必须把音频文件转换为 不同的格式 ?
  - 使音频格式支持更广泛
- <audio> 元素在老式浏览器中 不起作用。
嵌套关系
- audio
  - source
  - embed

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

最好的 HTML 解决方法
- 使用了两个不同的音频格式。
- HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。
  - 如果失败，代码将回退尝试 <embed> 元素

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

使用超链接
- 如果网页包含指向媒体文件的超链接，大多数浏览器会使用“插件” 来播放文件吗 ?
  - 是的.
  - <a href="song.mp3">Play the sound</a>
如果想在网页中播放视频该怎么做 ?
- 把视频上传到优酷等视频网站
- 在您的网页中插入 HTML 代码 即可播放视频.


<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

22. API

⑴ HTML5 如何进行地理定位 ?

如何定位用户的位置 ?
- HTML5 geolocation（地理定位）
- 为什么需要用户同意 ?
  - 该特性可能侵犯用户的隐私，所以需要用户同意.
  - 如果用户不同意,用户位置信息是不可用的.
哪些浏览器支持 geolocation（地理定位）?
- IE 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
  - 对于拥有 GPS（全球定位系统（Global Position System））的设备，比如 iPhone，地理定位更加精确。
如何获得用户的位置 ?
- 使用 getCurrentPosition() 方法
- 可返回什么 ?
  - 用户位置的 经度和纬度

⑵ 拖放

如何抓取某物并拖入不同的位置 ?
- 拖放（Drag 和 Drop）
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
如何把元素设置为 可拖放 ?
- 把元素的 draggable 属性设置为 true：
- <img draggable="true">
如何指定被拖放的内容 ?
- ondragstart 和 setData()
  然后，规定当元素被拖动时发生的事情。
如何指定拖动什么数据 ?
- ondragstart 属性调用了一个 drag(event)函数
  - <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

如何设置被拖动数据的数据类型和值 ?
- dataTransfer.setData()方法

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

如何规定被拖动的数据能够被放置在哪 (拖到何处)?
- ondragover 事件
默认地，数据/元素无法被放置到哪里?
- 其他元素中。
为了实现拖放，我们必须阻止元素的这种默认的处理方式。
这个任务由 ondragover 事件的 event.preventDefault()方法完成：
event.preventDefault()

♣ 结束语和友情链接

捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团表示鼓励和支持吧~❤
捐助二维码:

参考文档
- W3School 教程

友情链接
- ① 【HTML 标签的参考列表 (按字母排列)】
- ② 【HTML 标签的参考列表 (按功能分类排列)】

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/88534854
- 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ASCII Value	URL-encode
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3a
;	%3b
<	%3c
=	%3d
>	%3e
?	%3f
@	%40
A	%41
B	%42
Y	%59
Z	%5a
a	%61
b	%62
y	%79
z	%7a

ASCII Value	URL-encode
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3a
;	%3b
<	%3c
=	%3d
>	%3e
?	%3f
@	%40
A	%41
B	%42
Y	%59
Z	%5a
a	%61
b	%62
y	%79
z	%7a

【 HTML 基础教程】

HTML 基础教程

★ HTML 标签的 参考列表

1. 什么是 HTML?

1.1 HTML 是什么意思? (超文本 标记语言)

1.1 “超文本”是什么意思?

2. HTML 标签

2.1 HTML 标签的特点

2.2 HTML 标签的分类 (双标签,空标签/单标签)

2.3 标签之间的 关系

2.4 标签的 语义化

3. HTML 文档

3.1 HTML 文档的 骨架/ 结构

3.2 定义 文档类型 (< !DOCTYPE> 声明)

4. HTML 元素

4.1 HTML 元素语法

5. HTML 属性 (元素的 附加信息/特征信息)

5.1 属性的基本介绍

5.2 适用于 大多数标签的属性 (全局 属性)

5.3 定义 标签的样式的 属性

6. HTML 输出 规则

7. 如何进行 HTML 注释? (< !-- 注释内容 -->)

8. CSS 层叠样式表的 分类 (外部,内部,内联)

9. HTML 4 中 被废弃的标签和属性

10. 可用于排版的 标签

10.1 h1~h6 文档内容的 标题

10.2 hr 水平线

10.3 p 段落

10.4 br 换行

11. 文本格式化输出 的标签 (改变 文本外观)

11.1 用于 文本格式化 的标签 (b,big,small,em,i,strong,sub,sup,ins,del)

11.2 表示 计算机输出 的标签 (code,samp,kbd,tt,var,pre)

11.3 指定 字体样式 的标签 (tt,i,b,big,small)

11.4 有样式+拥有 确切含义的 短语元素 (em,strong,dfn,code,samp,kbd,var,cite)

11.5 用于 引用和术语定义的标签 (abbr,acronym,address,bdo,blockquote,q,cite,dfn)

⑴ q,blockquote 表示 引用

⑵ abbr , acronym 表示 缩写 的标签

⑶ dfn 定义一个项目 或作为 定义

⑷ address 文档 或文章的 联系信息,如 作者,版权等

⑸ cite 著作的标题 / 作品名

⑹ bdo 文本的方向

11.6 表示 计算机代码 的标签 (code,kbd,samp,var,pre 标签)

⑴ kbd 定义 键盘的输入

⑵ samp 计算机输出的示例

⑶ code 计算机代码的示例

⑷ var 表示变量

★ 小结: 能够改变 文本外观的 标签分类 (基于内容,物理)

12. 其他的 html 标签

⑴ a 表示 链接(锚)

⑵ img 表示 图像

⑶ table 表示 表格 (搭配 tr,th,td 标签)

⑷ 列表 (搭配 ul ,ol , dl ,li ,dt,dd 标签)

⑸ 表示 框架 (framset,frame,noframes 标签)

⑹ iframe 表示 内联框架

⑺ form 表示 表单和表单元素

⑻ head 文档的头部

⑼ script 使用脚本

13. 响应式 Web 设计 (RWD,尺寸可变)

14. 实体

14.1 什么是实体,实体的意义是什么? (预留 字符/特殊字符)

14.2 常用的字符实体

15. URL

15.1 什么是 url ?

15.2 URL 编码

16. 如何表示 颜色 ?

17. XHTML

17.1 什么是 XHTML ? (可扩展 超文本标记语言)

17.2 HTML 和 XHTML 有什么区别?

17.3 如何 从 HTML 转换到 XHTML ?

18. HTML5

18.1 HTML5 是什么?

18.2 HTML5 浏览器支持

18.3 如何把 HTML4 网页 变成 HTML5 网页 ?

18.4 HTML5 样式指南和代码约定 有哪些?

19. HTML5 中 新增的标签

⑴ section 文档的节

⑵ article 表示 独立的 自包含内容

⑶ header 为文档或节 规定页眉

⑷ footer 为文档或节 规定页脚

⑸ nav 表示 导航链接 的集合

★ HTML 标签的参考列表

1.1 HTML 是什么意思? (超文本标记语言)

2.3 标签之间的关系

2.4 标签的语义化

3.1 HTML 文档的骨架/ 结构

3.2 定义文档类型 (< !DOCTYPE> 声明)

5. HTML 属性 (元素的附加信息/特征信息)

5.2 适用于大多数标签的属性 (全局属性)

5.3 定义标签的样式的属性

6. HTML 输出规则

8. CSS 层叠样式表的分类 (外部,内部,内联)

9. HTML 4 中被废弃的标签和属性

10. 可用于排版的标签

10.1 h1~h6 文档内容的标题

11. 文本格式化输出的标签 (改变文本外观)

11.1 用于文本格式化的标签 (b,big,small,em,i,strong,sub,sup,ins,del)

11.2 表示计算机输出的标签 (code,samp,kbd,tt,var,pre)

11.3 指定字体样式的标签 (tt,i,b,big,small)

11.4 有样式+拥有确切含义的短语元素 (em,strong,dfn,code,samp,kbd,var,cite)

11.5 用于引用和术语定义的标签 (abbr,acronym,address,bdo,blockquote,q,cite,dfn)

⑴ q,blockquote 表示引用

⑵ abbr , acronym 表示缩写的标签

⑶ dfn 定义一个项目或作为定义

⑷ address 文档或文章的联系信息,如作者,版权等

11.6 表示计算机代码的标签 (code,kbd,samp,var,pre 标签)

⑴ kbd 定义键盘的输入

★ 小结: 能够改变文本外观的标签分类 (基于内容,物理)

⑴ a 表示链接(锚)

⑵ img 表示图像

⑶ table 表示表格 (搭配 tr,th,td 标签)

⑸ 表示框架 (framset,frame,noframes 标签)

⑹ iframe 表示内联框架

⑺ form 表示表单和表单元素

14.1 什么是实体,实体的意义是什么? (预留字符/特殊字符)

16. 如何表示颜色 ?

17.1 什么是 XHTML ? (可扩展超文本标记语言)

17.3 如何从 HTML 转换到 XHTML ?

18.3 如何把 HTML4 网页变成 HTML5 网页 ?

18.4 HTML5 样式指南和代码约定有哪些?

19. HTML5 中新增的标签

⑵ article 表示独立的自包含内容

⑶ header 为文档或节规定页眉

⑷ footer 为文档或节规定页脚

⑸ nav 表示导航链接的集合

⑹ aside 表示页面主内容之外的某些内容

⑺ figure 组合图片和标题

⑴ canvas 在网页上绘制图形

⑵ svg 表示用于网络的基于矢量的图形

⑵ object 向页面添加多媒体 /嵌入对象

⑶ 如何在 HTML 中播放声音和视频 ?

⑴ HTML5 如何进行地理定位 ?

♣ 结束语和友情链接

ASCII Value	URL-encode
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3a
;	%3b
<	%3c
=	%3d
>	%3e
?	%3f
@	%40
A	%41
B	%42
Y	%59
Z	%5a
a	%61
b	%62
y	%79
z	%7a