Web基础关键_001_HTML（一）
目 录
一、概述
二、第一个 HTML 实例
三、HTML 与 XHTML
1.HTML
2.XHTML
四、标签
1.元标签
（1）!DOCTYPE html
（2）html
（3）head
（4）meta
（5）title
（6）body
2.标题标签
3.段落标签
五、属性
1.布尔属性
2.实体引用
六、列表
1.无序列表
2.有序列表
一、概述
- Hyper Text Markup Language：超文本标记语言；
- 在 HTML 发展过程中，还经历过 XHTML。XHTML 要求使用 XML 语法，该语法更为严格。
二、第一个 HTML 实例
<html><head><title>HTML</title></head><body><p>HTML语法更为松散</p></body>
</html>
三、HTML 与 XHTML
1.HTML
在 HTML 中，删掉部分标签，不会影响展示效果。
<body><p>HTML语法更为松散</p>
</body>
2.XHTML
但是，在 XHTML 中，丢掉标签就会报错。将文件后缀名改为 xhtml，结果如下。
四、标签
- HTML 标签不区分大小写，但是最好仅使用小写字母；
- 组成：
- 开始标签：包含元素的名称，被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方；
- 内容：元素的内容；
- 结束标签：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。
- 分类：
- 按照结构划分：
- 围堵标签：<></>；
- 自闭合标签：<>。
- 按照效果划分：
- 行内标签；
- 块级标签。
1.元标签
（1）!DOCTYPE html
声明文档类型。早期的 HTML文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。但是现在只需要知道【<!DOCTYPE html>】是最短的有效文档声明。
（2）html
包裹了页面中所有的内容，有时被称为根元素。
（3）head
包含了所有想包含在 HTML 页面中，但不在 HTML 页面中显示的内容。这些内容包括：在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等。
（4）meta
代表了不能由其他 HTML 元相关元素表示的元数据，如 <base>、<link>、<script>、<style>、<title>。
该标签的属性可以设置文档的 字符集、作者信息、关键词、描述 。
（5）title
设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。
（6）body
包含了访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。
2.标题标签
一共有六种标题标签：h1、h2、h3、h4、h5、h6。每个元素代表文档中不同级别的标题。
<html><head><title>Test HTML</title>
</head><body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body></html>
3.段落标签
在 HTML 中，每个段落是通过 <p> 元素定义的。
<html><head><title>Test HTML</title>
</head><body><p>第一自然段</p><p>第二自然段</p><p>第三自然段</p>
</body></html>
五、属性
- 属性包含元素的额外信息，这些信息不会出现在实际的内容中；
- 属性语法：
- 一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔；
- 属性名称，后面跟着一个等于号；
- 一个属性值，由一对引号（""）引起来。
- 只有一个属性时，属性值的引号可以省略，但是不建议省略；
- 同类型引号不能嵌套。
<html><head><title>Test HTML</title>
</head><body><!-- href是链接，title是提示信息，target是打开方式，_blank在新窗口打开 --><a href="https://www.baidu.com/">百度</a><a href="https://www.taobao.com/" title="Taobao.com">淘宝</a><a href="https://www.jd.com/" title="JD.com" target="_blank">京东</a>
</body></html>
1.布尔属性
属性没有属性值，也可以具有同样的效果，该类属性称为布尔属性。布尔属性只能有一个值，值一般与属性名称相同。
<html><head><title>Test HTML</title>
</head><body><!-- disabled 就是布尔属性，可以忽略值 --><input type="input" disabled> 确定</input>
</body></html>2.实体引用
在 HTML 中，字符【 <、>、"、' 、&
】是特殊字符，必须使用字符引用表示字符的特殊编码。每个字符引用以符号 【&】 开始，以【;】结束。
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
<html><head><title>Test HTML</title>
</head><body><p>1 < 2</p><p>4 > 3</p><p>"秋风清，秋月明"</p><p>'落叶聚还散，寒鸦栖复惊'</p><p>&&&&&&</p>
</body></html>
六、列表
1.无序列表
<html><head><title>Test HTML</title>
</head><body><ul type="circle"><li>王建</li><li>李光</li><li>邱钰红</li></ul><ul type="square"><li>花花</li><li>来福</li><li>旺财</li></ul><ul type="disc"><li>杨树</li><li>柳树</li><li>松树</li></ul>
</body></html>
2.有序列表
<html><head><title>Test HTML</title>
</head><body><ol type="a"><li>王建</li>a<li>李光</li><li>邱钰红</li>o</ol><ol type="A"><li>花花</li><li>来福</li><li>旺财</li></ol><ol type="i"><li>杨树</li><li>柳树</li><li>松树</li></ol><ol type="I"><li>苹果汁</li><li>葡萄汁</li><li>橙汁</li></ol><!-- 默认是1、2、3 --><ol type="1"><li>宫保鸡丁</li><li>鱼香肉丝</li><li>红烧茄子</li></ol>
</body></html>