前端入门 —— HTML 基础知识一勺烩

作者: GinkWang | 来源:发表于2017-06-27 14:55 被阅读104次

公司最近人手极度空缺，领导一声令下，让我和另一个 Android 小伙去支援 Java 组开发。秉承着“一块砖”的精神，我完全服从领导安排。做什么都是做，就怕自己停滞不前。羽哥也安慰我说：“技不压身”。但赶鸭子上架做了一周之后，发现根本不行。这一周下来，我连自己做了什么、怎么做的、原理流程都是什么一点都不知道。这样不行，只会复制粘贴可不行，况且大多数时候，从哪复制粘贴到哪我都不清楚。
于是下决心先入个门吧。我们过去主要就是改一些前端页面，那我就先从前端知识开始吧。
HTML，就是你了。就从你先开始！

HTML 是一种标记语言，它是用来描述网页格式的。虽然它本身不能显示在浏览器中，但经过浏览器的解释和编译，在浏览器中就可以正确显示 HTML 的格式。

1 HTML 元素

HTML 文档是由一个个元素拼凑而成的，元素的构成分为三部分：

开始标签（opening tag）
元素内容
结束标签（closing tag）

1.1 元素语法

以开始标签起
以结束标签止
元素内容即开始标签与结束标签中的内容
某些 HTML 元素可具有空内容
空元素在开始标签中进行关闭
大多数元素都具有属性

1.2 元素实例及解析

下面看一个 HTML 实例：

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

上面的实例用到了三个元素：

<p> 元素：
<p> 元素定义了 HTML 文档中的一个段落。
<body> 元素：
HTML 文档的主题。
<html> 元素：
<html> 元素定义了整个 HTML 文档。

然后，看一下在浏览器中显示的效果：

GG，出现了中文乱码的问题。这种问题的解决方法在网上一搜一大把，我的解决方法是限定了一下编码格式：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<body>
<p>这是第一个段落。</p>
</body>

</html>

重新运行一下：

解决！

1.3 注意：

<!DOCTYPE> ：
上面的元素解析中没有提到 !DOCTYPE ，因为它并不是元素的一部分，它只是一份声明，因为网络上有很多不同的文件，声明正确的 HTML 版本，让浏览器能够正确显示网页。
完整的网络声明类型：DOCTYPE 参考手册
别忘记结束元素标签：
虽然即便不写结束标签，大多数浏览器也能够正确的显示内容，但还是不要依赖这种写法。
建议使用小写标签：
HTML 标签对大小写不敏感：<P> 等同于 <p>。但是万维网联盟（W3C）在 HTML 4 中推荐使用小写，并且在未来 (X)HTML 版本中强制使用小写。

2. HTML 属性

属性是 HTML 元素的附加信息，一般在元素的开始菜单中进行描述，并且属性总是以名称/键值对的形式出现。

2.1 属性实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 属性</title>
</head>

<body>
<a href="http://www.baidu.com">这是一个链接</a>
</body>
</html>

看代码说话，上面代码中定义了一个链接，HTML 中链接由 <a> 标签定义，链接地址写在 href 属性中，其中 href="http://www.baidu.com"
即为元素的属性。
然后属性始终在括号内，属性值一般用双引号标注，单引号也可以。但是如果属性值中有双引号存在，那么属性值就必须用单引号标注。
看一下浏览器中运行效果：

2.2 属性参考手册大全

HTML 标准属性参考手册

3. HTML 标题

标题是通过 <h1> - <h6> 标签进行定义的，<h1> 是最大的标题，<h6> 是最小的标题。

3.1 标题实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 标题</title>
</head>

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

效果：

3.2 HTML 水平线

<hr> 标签可以在 HTML 中创建水平线，可用于分割内容。
在代码中使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 标题</title>
</head>

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>

<body>
<p>hr 水平线：</p>
 <hr />
 <p>段落1</p>
 <hr />
 <p>段落2</p>
 <hr />
 <p>段落3</p>
</body>
</html>

运行效果：

3.3 HTML 注释

HTML 中的注释与 Java 有所不同，是这样使用注释的：
``

4. HTML 段落

HTML 可以将文档分割成若干段落，方便阅读。

4.1 使用段落

段落是通过标签 <p> 进行定义的，在之前的代码中使用过，就不演示了。

4.2 换行

如果你不想将一段长文在产生一个新段落的情况下进行换行，就使用
标签进行分割。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 段落</title>
</head>

<body>
<p>演示换<br>行效果</p>
</body>
</html>

效果：

4.3 注意：

在 HTML 代码中不能通过添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

5. HTML 文本格式化

文本格式化部分没有什么好说，直接看代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 文本格式化</title>
</head>

<body>
<b>文本加粗</b><br><br>
<i>文本斜体</i><br><br>
<code>电脑自动输出</code><br><br>
<sup>上标</sup> 和 <sub>下标</sub>
</body>
</html>

效果：

代码释义很简单，就不讲了。

5.2 HTML 文本化标签

下面看一下常用的 HTML 文本化标签：

5.3 HTML 计算机输出标签

5.4 HTML 引文、引用及标签定义

6. HTML 链接

HTML 使用标签 <a> 来实现超链接。超链接可以是一个字、一组词甚至是一张图片。

6.1 使用

上文中已经使用过链接，这里就不具体展出了。只需要知道格式就可以：
<a href="url">*链接文本*</a>

6.2 target属性

使用 target 属性，可使被链接的文档在何处被打开：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 链接</title>
</head>

<body>
<a href="http://www.baidu.com" target="_blank">这是一个链接</a>
</body>
</html>

上面的代码实现在新窗口中打开链接：

6.3 id 属性

id 属性可用于在一个 HTML 文档中创建标记。
具体实现：

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

7. HTML 头部

7.1 `<head>` 元素

head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

7.2 `<title>` 元素

title 元素定义了不同文档的标题，包含浏览器工具栏的标题、收藏夹的标题以及搜索结果页面的标题。

7.3 `<base>` 元素

base 元素定义了基本的链接地址，该标签作为文档中所有链接的默认目标。

7.4 `<link>` 元素

link 标签定义了文档与外部资源的关系，通常用于链接到样式表。

7.5 `<style>` 元素

style 元素定义了文档引用的样式文件的地址，也可在 style 中直接定义样式来渲染 HTML 文档。

7.6 `<meta>` 元素

meta 元素描述了文档中的一些基本的元数据。这些元数据不显示在浏览器页面上，但会被浏览器解析。META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

7.7 `<script>` 元素

通常用于加载 script 文件。

8. HTML 图像

8.1 图像标签和源属性

图像由 <img> 标签定义，<img> 是空标签，即没有闭合标签。然后要在页面上显示图像，还要使用源属性——src，即图像的 url 地址。
定义图像的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 链接</title>
</head>

<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

效果：

显示成功！

8.2 alt 属性

alt 属性用来为图像定义一串可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
使用也十分简单，就在 img 元素中添加即可：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 链接</title>
</head>

<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

8.3 高度与宽度

可以看到，刚才显示的图像太大了，那么这里就可以通过设置图像的宽高来进行限定。
height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 链接</title>
</head>

<body>
![](D:\Personal\WallPaper\mountains-on-mars.png)
</body>
</html>

效果：

9. HTML 表格

表格由 <table> 标签来定义，每个表格均有若干行（由 <tr> 标签定义），每行又被分为若干格（由 <td> 标签定义）。
先看一个表格实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>

<body>
<table>
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

9.1 边框

表格的边框由 border 属性定义：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>

<body>
<table border="1">
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

9.2 表头

表头由 <th> 标签定义：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 表格</title>
</head>

<body>
<table border="1">
 <tr>
       <th>表头1</th>
       <th>表头2</th>
   </tr>
 <tr>
  <td>第 1 行, 第 1 列</td>
       <td>第 1 行, 第 2 列</td>
 </tr>
 
 <tr>
  <td>第 2 行, 第 1 列</td>
       <td>第 2 行, 第 2 列</td>
 </tr>
</table>
</body>
</html>

效果：

关于表格就介绍这么多，更多样式的还是要在项目中活学活用。下面是表格标签：

10. HTML 列表

HTML 列表分为有序列表和无序列表。

10.1 无序列表

无序列表使用 <ul> 标签进行描述，每个列表项始于 <li> 标签，使用小黑点进行标记。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>

<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</body>
</html>

效果：

10.2 有序列表

有序列表使用 <ol> 标签进行描述，每个列表项始于 <li> 标签，使用数字进行标记。
在上面的代码中添加有序列表：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>

<body>
<p>无序列表</p>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</body>

<br><br>

<body>
<p>有序列表</p>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ol>
</body>
</html>

效果：

10.3 自定义列表

除此之外，HTML 还支持自定义列表。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML 列表</title>
</head>

<body>
<p>无序列表</p>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ul>
</body>

<br><br>

<body>
<p>有序列表</p>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
</ol>
</body>

<br><br>

<body>
<p>自定义列表</p>
<dl>
<dt>香蕉</dt>
<dd>- 芭蕉科芭蕉属植物，又指其果实。</dd>
<dt>苹果</dt>
<dd>- 美国的一家高科技公司。</dd>
<dt>橘子</dt>
<dd>- 是芸香科柑桔属的一种水果。</dd>
</dl>
</body>
</html>

效果：

11. HTML 区块

大多数 HTML 元素都被定义为块级元素和内联元素。

11.1 区块元素

块级元素在浏览器中显示时，会以新行开始和结束。
实例: <h1>, <p>, <ul>, <table>

<div> 元素
<div> 元素就是块级元素。它没有特定的含义，只是将 HTML 各元素组合起来。<div> 元素另一个用途是替代 <table> 进行表格布局，<table> 元素只显示表格化数据使用。

11.2 内联数据

内联数据显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>

<span> 元素
<span> 是内联元素，它也没有任何特定含义，可用作文本的容器。另外，与 css 一同使用时，<span> 元素可用于为一些文本设置文本属性。

12. HTML 表单

表单使用 <form> 标签来设置，表单元素允许用户在表单中输入数据，如文本域、下拉列表、单选/复选框等。
多数情况下被用到的表单标签是输入标签 <input>，输入类型由 type 类型属性定义，大多数被用到的输入类型如下。

12.1 文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<input type="text", name="first_name">

12.2 密码

密码字段通过标签<input type="password"> 来定义:
<input type="password", name="pwd">

12.3 单选按钮

单选按钮通过 <input type="radio"> 来设置：
<input type="radio" name="sex" value="是">是

12.4 复选按钮

复选按钮通过 <input type="checkbox"> 来设置：
<input type="checkbox" name="vehicle" value="评论">评论<br>

12.5 按钮

按钮通过 <input type="button"> 来设置：
<input type="button" value="登陆">

综合以上表单输入类型，来看一下最终在浏览器上的实现效果：

13. HTML iframe

Iframe 标记，又叫浮动帧标记，你可以用它将一个 HTML 文档嵌入在另一个 HTML 中显示。

13.1 使用

iframe 语法为：
<iframe src="URL"></iframe>

看一下使用方法，我们以之前显示图像的 HTML 文档为例，将他显示在 iframe 文档中：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>

<body>
<iframe src="C:\Users\Wang-gk\Desktop\临时\HTML HTML5 codes\图像.html"></iframe>
</body>
</html>

效果：

13.2 宽高设置

可以看到，上面显示的 HTML 文档显示的不全，那么也可以像设置图像宽高一样，设置其宽高：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>

<body>
<iframe src="C:\Users\Wang-gk\Desktop\临时\HTML HTML5 codes\图像.html"
  width="600" height="400"></iframe>
</body>
</html>

效果：

这次显示效果好多了。

13.3 移除边框

如果你嫌显示边框很丑，那么你可以移除它。

frameborder="0"

效果：

13.4 显示目标链接

iframe 也可以显示一个目标链接的页面，但链接的属性必须使用 iframe 的属性。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HEML iframe</title>
</head>

<body>
<iframe src="C:\Users\Wang-gk\Desktop\临时\HTML HTML5 codes\图像.html"
  width="600" height="400" frameborder="0" name="iframe_id"></iframe>

<p><a href="http://www.baidu.com" target="iframe_id">百度一下</a></p>
</body>
</html>

上面代码结合了这几个 iframe 的示例，通过代码可以看出，点击百度一下
链接，会在 iframe 上面显示百度页面。看一下效果：

14. HTML 脚本

脚本可以使 HTML 页面具有更强的动态性和交互性。

14.1 `<script>` 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

14.2 `<noscript>` 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容。

15. HTML 字符实体

html 中的预留字符必须被替换为字符实体，一些在键盘上找不到的字符也可以用字符实体来替换。
在 HTML 中，某些实体是预留的，例如小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
HTML 中常用字符实体还有不间断空格（&nbsp），因为浏览器总是将多个空格删除，只留一个，所以如果想留下多个空格，就必须使用字符实体（&nbsp）。
更多 HTML 字符实体，请查看 HTML 实体参考手册。

16. 总结

HTML 的基础知识大致上已经捋了一遍了，当然，肯定不能全部都涉及到，一个是时间短，再一个是即便都看全，我也不能全记住。我只把大致的语法和控件以及用法记住就好了，更多的知识还是要活学活用。
这整个过程下来，让我对 HTML 有了更加具象的理解。之前一直听说 HTML 简单，学了以后发现，确实是不难，但用好它还是要下一番功夫的。HTML 的功能我感觉和 Markdown 语法类似，实现的效果也都差不多。是，我肯定我说的这句话在以后会被打脸，因为我才接触前端多点的知识啊。但我现在这是看到的冰山一角，所以我只能对这一角进行描述，等有天我把冰山的全貌都摸透，回过头来再嘲笑现在的自己吧~
这一整个学习过程是在菜鸟教程上进行的，整个步骤和许多释义都是按照上面的理解进行记录的。但里面的各个例子都是我自己手敲了一遍。学的过程中，发现了鼎鼎有名的前端学习网站 W3school，两个教程的学习步骤和知识讲解都差不多，但有的地方 W3school 确实比菜鸟教程上面讲得细。但当时已经跟着菜鸟学了大半了，就没照着 W3school 上学。打算下一步学习 H5、CSS 和 Js 时，参照着 W3school 上面进行学习。
就到这吧。

17. 参考

http://www.runoob.com/