前端基础-HTML 基础篇
HTML是什么？什么是HTML？
中文名： 超文本标记语言
英文名： Hyper Text Markup Language
简称： HTML
HTML 不是一门编程语言，而是一种用于定义内容结构的 标记语言（前端不是程序员实锤）。
HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
个人理解： 用HTML元素标签对内容进行标记，浏览器根据这些标记来显示不同类型内容，因为不只是针对文字内容，所以叫 超文本标记语言，标签可以改变文字内容的样式，但是更多的是实现 语义化 。
HTML语义化优点：
- 有利于
SEO（重要面试考点）。 - 便于团队开发和维护。
- 方便其他设备解析: 如
屏幕阅读器、盲人阅读器、移动设备等。 - 在没有CSS的情况下，依然可以呈现很好地内容结构。
HTML元素
一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签。
元素组成
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
元素属性（Attribute）：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
元素分类
嵌套元素
把 元素 放到 其它元素 之中——这被称作 嵌套
<p>我非常的<strong>强壮</strong></p>
strong标签标记后意味着这个文本被着重强调，显示会加粗
注意：所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现
块级元素和内联元素（ HTML4.01 标准）
块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。注意：一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素<a>或者强调元素：<em>和<strong>。
<!-- em是内联元素会排成一排 -->
<em>第一</em><em>第二</em><em>第三</em>
<!-- p是块级元素会独占一行 -->
<p>第四</p><p>第五</p><p>第六</p>
页面效果如下：
注意：HTML5 重新定义了元素的类别，见 内容分类。
空元素
不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素 <img> 是用来在元素 <img> 所在位置插入一张指定的图片。示例如下：
<img src="http://mms0.baidu.com/it/u=3376452539,1784922231&fm=253&app=138&f=JPEG&fmt=auto&q=75&fmt=auto&q=75?w=500&h=500">
HTML文档组成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="http://mms0.baidu.com/it/u=3376452539,1784922231&fm=253&app=138&f=JPEG&fmt=auto&q=75&fmt=auto&q=75?w=500&h=500" alt="测试图片">
</body>
</html>
声明文档类型
在 HTML 中，文档类型 doctype 的声明是必要的，放在HTML文档的头部。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式 (兼容模式)”的渲染模式。确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
<html>元素
HTML 的顶级标签，也被称为 根元素 ，所有元素都必须包含在 <html> 元素 中。
<head>元素
HTML 的 <head> 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<head> 元素 只能包含在<html> 元素中。
<head> 元素 中至少包含一个 <title> 元素 来指定文档的标题信息，除非标题已经从更高等级协议中指定（<iframe>）。
<title>元素
<title>元素 定义文档的标题，显示在浏览器的标题栏或标签页上。
注意：
<title>元素应该只包含文本，它包含的任何标签都将被忽略。- 一个
<head> 元素只能包含一个<title> 元素。 - 页面标题的内容可能对搜索引擎优化（SEO）具有重要意义，详见 使用说明 。
<meta> 文档级元数据元素
<meta> 元素 可以表示那些不能由固有的 元相关（meta-related）元素（<base>、<link>、 <script>、<style> 、 <title>）表示的元数据信，可以理解为 HTML 文档元数据的扩展。
- 这是一个
空元素，没有元素内容
meta 元素 定义的元数据的类型包括以下几种：
- 如果设置了
name属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。 - 如果设置了
http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。 - 如果设置了
charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。 - 如果设置了
itemprop属性，meta 元素提供用户定义的元数据。
感觉这块内容比较复杂，后面单写一篇。
<base> 文档根 URL 元素
<base> 元素 指定用于一个文档中包含的所有相对 URL 的 baseUrl。
一份文档中只能有一个 <base> 元素 ，如果指定了多个 <base> 元素 ，只会使用第一个 href 和 target 值，其余都会被忽略。
属性：
href：baseUrl地址，用于文档中相对URL地址的基础URL，允许绝对和相对URL。target：默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接<a>或表单<form>导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框<iframe>），设置全局默认的target。_self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。_blank: 载入结果到一个新的未命名的浏览上下文。_parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。_top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。
<link> 外部资源链接元素
外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接 样式表 ，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
常用属性：
href：此属性指定被链接资源的URL。URL可以是绝对的，也可以是相对的。rel：此属性命名链接文档与当前文档的关系。该属性必须是 链接类型值 的用空格分隔的列表。type：这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等 MIME 类型 。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。
示例：
<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<style>
<style> 元素 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。
<script>
<script> 元素用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。
<noscript>
如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则显示 <noscript> 元素 中定义的替代内容。
<body> 文档主体元素
body 元素 表示文档的内容。HTML 文档的主体内容都应该放在 body 元素 内。
参考文档：MDN Web Docs
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
