HTML基础
2019-07-23 10:16:28 by冲冲
1. 简介
① 概念
HTML，超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。
- HTML 不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签 (markup tag)，使用标记标签来描述网页。
② 格式
HTML文档后缀名有 .html 和 .htm 。.htm 是超文本标记(Hypertext Markup)，.html 是超文本标记语言(Hypertext Markup Language)。.htm 是来源于古老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名，所以是 .htm。目前两者的效果没有差别。
③ 实例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单模板</title> 6 </head> 7 <body> 8 <h1>我的第一个标题</h1> 9 <p>我的第一个段落。</p> 10 </body> 11 </html>
标签解析：
- <!DOCTYPE html> 声明为 HTML5 文档。
- <html> 元素是 HTML 页面的根元素。
- <head> 元素是 HTML 页面的头部元素，包含了文档的元数据（meta），如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题。
- <body> 元素是HTML页面的主体元素，包含了可见的页面内容。
- <h1> 元素定义一个大标题。
- <p> 元素定义一个段落。
注意： 1、对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。 2、HTML中不支持空格、回车、制表符，它们都会被解析成一个空白字符。多个空格会被解析成单个空格。
④ 标签
- HTML 标签是由尖括号包围的关键词，比如 <html>。
- HTML 标签有两类：成对标签，比如 <b> 和 </b>；单体标签，比如<br />。
- 标签对中的第一个标签是开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。
- 格式：<标签>内容</标签>、<标签 />。
- 大多数 HTML 元素可以拥有属性。
- HTML 文档由嵌套的 HTML 元素构成。
⑤ 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，比如 <p>这是一个段落</p> 。
⑥ Web 浏览器
Web浏览器（Google，Internet Explorer，Firefox，Safari，Opera ...）是用于读取HTML文件，并将其作为网页显示的一种应用程序。
浏览器并不是直接显示的HTML标签，但是可以使用标签来决定如何展现HTML页面的内容给用户。
⑦ 版本
⑧ <!DOCTYPE> 声明
doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
1 <!DOCTYPE html> 2 <!DOCTYPE HTML> 3 <!doctype html> 4 <!Doctype Html>
在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
通用声明
HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. HTML元素
（1）标题元素（块级元素）
通过 <h1><h2><h3><h4><h5><h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。
<h1>一级标题，对应六号字体</h1> <h2>二级标题，对应五号字体</h2> <h3>三级标题，对应四号字体</h3> <h4>四级标题，对应三号字体</h4> <h5>五级标题，对应二号字体</h5> <h6>六级标题，对应一号字体</h6>
注意：请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。因为搜索引擎会使用标题标签为网页的结构和内容编制索引，以便用户可以通过标题来快速浏览您的网页，所以使用标题来呈现文档结构非常重要。通常应该将<h1>用作主标题（最重要的），其后是<h2>（次重要的），再其次是<h3>，以此类推。
（2）水平线元素（块级元素）
<hr /> 标签在 HTML 页面中创建水平线。<hr />元素可用于分隔内容。
（3）注释
<!-- 这是一个注释 -->
（4）段落元素（块级元素）
<p>这是第一个段落</p> <p>这是第二个段落</p>
（5）换行元素
<p>这个<br /> 段落<br /> 演示了分行的效果</p>
（6）文本格式化
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式化, 如：粗体 or 斜体。
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而，这些标签的含义是不同的：<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体, 不过未来浏览器可能会支持更好的渲染效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>简单模板</title> 6 </head> 7 <body> 8 <p><b>b标签</b></p> 9 <p><strong>strong标签</strong></p> 10 <p><i>i标签</i></p> 11 <p><em>em标签</em></p> 12 <p><small>small标签</small></p> 13 <p>求解:(x<sub>1</sub>) 14 <sup>2</sup>+2x<sub>2</sub>=100</p> 15 <p><ins>ins标签</ins></p> 16 <p><del>del标签</del></p> 17 </body> 18 </html>
