HTML简介与文本（学习中）
HTML简介
- HTML--HyperText Markup Language
使用标签来表述页面的内容和结构。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>这是内容</h1>
</body>
</html>
- HTML的产生
1989年，互联网之父Tim Berner-Lee在欧洲的实验室里，想通过一种语言来描述文档，他人可通过某种工具来访问文档，以实现文档共享。而他在写完HTML语言之后，还发明了访问工具即浏览器、服务器和HTTP。
HTML1.0：1991年产生。
HTML2.0：1994年产生。
HTML3.2：1997年产生，W3C接管了HTML标准化。
HTML4.01：1998年产生，重要改进是实现样式与内容分离，支持CSS，以及引入Doctype。
XHTML1.0：2000年产生，用XML语法重新定义HTML，语法要求更加严格。
XHTML2.0： 不兼容历史版本；去除样式类标签；去除img、a；彻底修改Form。导致开发者不愿意使用，浏览器也不支持。
HTML5：与XHTML2.0同步发展。在2004年继续发展，在2008年，W3C发布HTML5标准。HTML5好在它能够兼容已有的内容，避免不必要的复杂性，可以解决现实存在的问题等等。
---（HTML4.01）Doctype作用：
- 指定HTML页面使用的标准和版本
- 浏览器根据Doctype决定使用哪种渲染模式（怪异模式、准标准模式、标准模式）
提示：如果不写Doctype，浏览器会自动选择怪异模式，会导致页面显示与标准模式有甚大的差异。因此建议在写HTML时，第一行都写上Doctype，HTML版本可自选，推荐HTML5。
--- HTML5语法：
- 标签不区分大小写，但是推荐小写
- 空标签可以不闭合，比如input、meta
- 属性不必引号，但是推荐有属性值时加上双引号
- 某些属性值可以省略，比如required、readonly
HTML文本
- <p>标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>1989年，互联网之父TimBerner-Lee在欧洲的实验室里，想通过一种语言来描述文档，他人可通过某种工具来访问文档，以实现文档共享。而他在写完HTML语言之后，还发明了访问工具即浏览器、服务器和HTTP。</p>
</body>
</html>
- <h1>~<h6>标签
<h1> 定义最大的标题。<h6> 定义最小的标题。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>hello world!</h1>
<h2>hello world!</h2>
<h3>hello world!</h3>
<h4>hello world!</h4>
<h5>hello world!</h5>
<h6>hello world!</h6>
</body>
</html>
- <hr>标签
<hr> 标签在 HTML 页面中创建一条水平线。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>hello world!</p>
<hr>
<p>hello world!</p>
</body>
</html>
- 列表
1.有序列表---<ol>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>世界电影票房排行榜</h1>
<ol start="1">
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
</body>
</html>
2.无序列表---<ul>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<ul>
<li>西瓜</li>
<li>矿泉水</li>
<li>牛奶</li>
<li>垃圾袋
<ul>
<li>大号垃圾袋</li>
<li>小号垃圾袋</li>
</ul>
</li>
</ul>
</body>
</html>
3.自定义列表---<dl>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h3>送你一朵小红花</h3>
<dl>
<dt>导演：</dt>
<dd>韩延</dd>
<dt>主演：</dt>
<dd>易烊千玺</dd>
<dd>刘浩存</dd>
<dt>上映时间：</dt>
<dd>2020-12-31</dd>
</dl>
</body>
</html>
- 长段落引用---<blockquote>
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<blockquote cite="https://baike.so.com/doc/29778971-31330455.html">
<p>《送你一朵小红花》是由韩延执导，易烊千玺、刘浩存领衔主演，朱媛媛、高亚麟主演，夏雨特别出演，岳云鹏友情出演的患癌伤痛主题剧情片。</p>
</blockquote>
</body>
</html>- 短引用---<q>
浏览器经常在引用的内容周围添加引号。<q> 标签在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。
- 参考文献引用---<cite>
<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。按照惯例，引用的文本将以斜体显示。
- 预格式化文本---<pre>
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>第一行 空 格
第二行</p>
<pre>第一行 空 格
第二行</pre>
</body>
</html>
- 代码---<code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p><code>const</code>声明创建一个只读的常量</p>
<pre><code>
const add = (a,b) => a + b;
const multiply = (a,b) => a * b;
</code></pre>
</body>
</html>
- 图表---<figure>
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption> 标签定义 figure 元素的标题。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<figure>
<figcaption>定义一个函数</figcaption>
<pre><code>
function add(x,y){
var total = x + y;
return total;
}
</code></pre>
</figure>
<figure>
<img src="https://baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=29778971&sid=31330455" alt="送你一朵小红花">
<figcaption>送你一朵小红花海报</figcaption>
</figure>
</body>
</html>
- 强调
- strong：重要性、严重性和紧急性
- em：从一句话中突出某个词语
- b：将词语从视觉上和其他部分区分，比如一篇论文摘要中的关键词
- i：换一种语调去说一句话时，比如其他语言翻译，对话中的旁白
- 定义与缩写---<dfn>、<abbr>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p><dfn>HTML是HyperText Markup Language的简称，一种用户创造网页的标记语言</dfn></p>
<p><abbr title="HyperText Markup Language">HTML</abbr>标准由<abbr titile="World Wide Web Consortium">W3C</abbr>制定与修改。</p>
</body>
</html>
- 定义键盘文本---<kbd>
<kbd>表示文本是从键盘上键入的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>按下<kbd>F12</kbd>打开浏览器开发者工具</p>
</body>
</html>
- 上标和下标---<sup>、<sub>
<sup> 标签可定义上标文本。
<sub> 标签可定义下标文本。
提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>E = MC<sup>2</sup></p>
<p>CO<sub>2</sub></p>
</body>
</html>
- 定义带有记号的文本---<mark>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p><mark>mark</mark>标签定义带有记号的文本。</p>
</body>
</html>
- 插入与删除---<ins>、<del>
<del>定义文档中已被删除的文本。
<ins> 标签定义已经被插入文档中的文本。与<del>一同使用，来描述文档中的更新和修正。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p>但是，该属性<del>目前还没有浏览器支持</del></p>
<ins>更新：最新版本的Safari 6.1已经支持</ins>
<p><del>原价：299元</del><ins>双十一特价：188元</ins></p>
</body>
</html>
- 换行---<wbr>
<wbr>规定在文本中的何处适合添加换行符。
提示：如果单词太长，或者担心浏览器会在错误的位置换行，可以使用 <wbr>来添加单词换行时机。
- 实体字符（部分）
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| '' | 引号 | " |
| ￥ | 元 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ™ | 商标 | ™ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |