胖蔡说技术HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=”zh-CN”‘,不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：
<!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> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body>
</body>
</html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
html标签特点：
html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：
<!-- 成对出现的标签 -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>
<!-- 单个出现的标签 -->
<br />
<img src="..." />
<input type="..." />
<!-- 标签之间的嵌套 -->
<p>
<span>...</span>
<a href="...">...</a>
</p>
<div>
<h3>...</h3>
<div>
<span>...</span>
<p>...</p>
</div>
</div>常见语义化标签
- <title>：定义文档的标题（注：只能在head标签内出现）。
- <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
- <ul>：无序列表。
- <ol>：有序列表。
- <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。
- <nav>：标记导航。
- <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
- <article>：定义外部的内容，其中的内容独立于文档的其余部分。
- <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
- <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
- <footer>：页脚，只有当父级是body时，才是整个页面的页脚。
- <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
- <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
- <em>：将其中的文本表示为强调的内容，表现为斜体。
- <mark>：使用黄色突出显示部分文本。
- <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
- <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
- <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
- <blockquoto>：定义块引用，块引用拥有它们自己的空间。
- <q>：短的引述（跨浏览器问题，尽量避免使用）。
- <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
- <abbr>：简称或缩写。
- <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
- <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
- <del>：移除的内容，定义文档中已被删除的文本。
- <ins>：添加的内容，定义文档中添加的文本。
- <code>：标记代码。
- <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
- <progress>：定义运行中的进度（进程）。
