1.基本HTML简介
HTML或超文本标记语言是一种用于描述网页结构的标记语言。它使用特殊的语法或符号来组织有关页面的信息并将其提供给浏览器。元素通常具有围绕内容并赋予内容含义的开始和结束标签。例如，可以在文本周围放置不同的标签选项，以显示它是标题，段落还是列表。
例如：
<h1>Top level heading: Maybe a page title</h1>
<p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
<ol>
<li>Number one on the list</li>
<li>Number two</li>
<li>A third item</li>
</ol>
成为：
Top level heading: Maybe a page title
A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.
- Number one on the list
- Number two
- A third item
2.元素
大多数HTML元素都有一个开始标记和一个结束标记。
开头标签如下所示：<>
结束标签如下所示：</>
打开和关闭标签之间的唯一区别是关闭标签的打开括号后的正斜杠。
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
3.属性
属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。
4.注释
<!-- 要注释的内容 -->
5.标题（<h1> - <h6>）
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
6.段落（<p>）
p元素是网站上段落文本的首选元素。p是“段”的缩写。
您可以这样创建一个段落元素：
<p>I'm a p tag!</p>
7.占位符文本
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
这只是一段用来测试排版效果的占位文字，没有实际的含义。
8.图片
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 “pulpit.jpg” 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
9.链接（<a>）
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
外部网页的示例：
<a href="url">链接文本</a>
href 属性描述了链接的目标。
页面内部：
要创建内部链接，请将链接的href属性分配给哈希符号，#再加上id要内部链接的元素的属性值，通常是在页面的更下方。然后，您需要向id链接的元素添加相同的属性。An id是唯一描述元素的属性。
以下是内部锚链接及其目标元素的示例：
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
可以将链接嵌套在其他文本元素中。
<p>
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>
10.列表(<ul><li></ul>,<ol><li></ol>)
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签，</ul>结束。每个列表项始于 <li> 标签，</li>结束。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
- Coffee
- Milk
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签，</ol>结束。每个列表项始于 <li> 标签，</li>结束。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器中显示如下：
- Coffee
- Milk
11.表单
可以通过在form元素上指定一个操作来做到将数据提交。
<form>
...
</from>
12.文本字段
input 元素是从用户那里获取输入的便捷方法。
多数情况下输入标签（<input>）是被用到的表单标签。
输入类型是由类型属性（type）定义的。
您可以这样创建文本输入：
<input type="text">
请注意，input元素是自闭合的。
您可以这样创建占位符文本：
<input type="text" placeholder="this is placeholder text">
占位符文本是input用户输入任何内容之前在元素中显示的内容。
密码字段通过标签<input type="password"> 来定义。
注意:密码字段字符不会明文显示，而是以星号或圆点替代。
13.单选按钮
单选按钮是input的一种。
您的每个单选按钮都可以嵌套在其自己的label元素中。通过将input元素包装在label元素内部，它将自动将单选按钮输入与其周围的label元素相关联。
所有相关的单选按钮应具有相同的name属性以创建单选按钮组。通过创建单选按钮组，选择任何一个单选按钮将自动取消选择同一组中的其他按钮，从而确保用户仅提供一个答案。
这是一个单选按钮的示例：
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
通过将label元素上的for属性设置为与关联输入元素的id属性匹配，显式定义复选框输入与其对应标签之间的关系被认为是最佳实践。例如：
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
14.复选框
复选框是input的一种。
您的每个复选框都可以嵌套在自己的label元素中。通过将input元素包装在元素label内部，它将自动将复选框输入与其周围的标签元素相关联。
所有相关的复选框输入应具有相同的name属性。
通过将label元素上的for属性设置为与关联输入元素的id属性匹配，显式定义复选框输入与其对应标签之间的关系被认为是最佳实践。
这是一个复选框示例：
<label for="loving">
<input id="loving" type="checkbox" name="personality"> Loving
</label>
15.提交按钮
让我们在表单中添加一个提交按钮。单击此按钮将数据从表单发送到使用表单的操作属性指定的URL。
下面是一个提交按钮示例：
<button type="submit">this button submits the form</button>
16.必填字段
您可以要求特定的表单字段，以便您的用户在填写表单之前无法提交表单。
例如，如果要使文本输入字段成为必需字段，则只需在input元素中添加required属性，如下所示：
<input type="text" required>
17.value属性
提交表单时，数据将发送到服务器，并包含所选选项的条目。类型为radio和checkbox的输入从value属性报告其值。
例如：
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
这里，有两个radio输入。当用户提交选择了“indoor”选项的表单时，表单数据将包括行：indoor-outdoor=indoor。这来自“indoor”输入的名称和值属性。
如果省略value属性，则提交的表单数据将使用默认值（on）。在这种情况下，如果用户单击“indoor”选项并提交表单，则生成的表单数据将为indoor outdoor=on，这是没有用的。因此，需要将value属性设置为标识选项的值。
18.单选复选默认情况
您可以使用checked属性设置默认情况下选中的复选框或单选按钮。
为此，只需在输入元素的内部添加单词“ checked”。例如：
<input type="radio" name="test-name" checked>
19.div元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
就像其他任何非自动关闭元素一样，您可以使用打开一个div元素<div>并将其关闭在另一行上</div>。
20.声明HTML文件类型
在文档顶部，您需要告诉浏览器页面正在使用哪个HTML版本。HTML是一种不断发展的语言，并且会定期进行更新。大多数主流浏览器都支持最新的规范，即HTML5。但是，较旧的网页可能会使用该语言的早期版本。
您可以通过在第一行添加<!DOCTYPE ...>标签来告知浏览器该信息，其中第一…部分是HTML的版本。对于HTML5，请使用<!DOCTYPE html>。
该 “!” 和大写 DOCTYPE 是很重要的，特别是对于旧的浏览器。在html不区分大小写。
接下来，其余的HTML代码需要包装在html标记中。开头<html>位于该<!DOCTYPE html>行的正下方，而</html>结尾位于页面的末尾。
这是页面结构的示例：
<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
21.头部和正文
您可以在HTML文档的HTML标记中添加另一个层次的组织，其中包含head和body元素。任何包含页面信息的标记都会进入head标记。然后，任何带有页面内容（为用户显示的内容）的标记都将进入body标记。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.
这是页面布局的示例：
<!DOCTYPE html>
<html>
<head>
<!-- 头部 -->
</head>
<body>
<!-- 正文 -->
</body>
</html>
参考：
4551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
