您的位置:首页 > Web前端

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

GinkWang 2017-06-27 14:27 204 查看
公司最近人手极度空缺,领导一声令下,让我和另一个 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>


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

元素:

元素定义了 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 标题

标题是通过 h> - 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 换行

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

<!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 引文、引用及标签定义



13ad0

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>
<img src="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>
<img src="D:\Personal\WallPaper\mountains-on-mars.png" alt:"替换文本">
</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>
<img src="D:\Personal\WallPaper\mountains-on-mars.png" alt="替换文本" width="600" height="400">
</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 中常用字符实体还有不间断空格( ),因为浏览器总是将多个空格删除,只留一个,所以如果想留下多个空格,就必须使用字符实体( )。

更多 HTML 字符实体,请查看HTML 实体参考手册

16. 总结

HTML 的基础知识大致上已经捋了一遍了,当然,肯定不能全部都涉及到,一个是时间短,再一个是即便都看全,我也不能全记住。我只把大致的语法和控件以及用法记住就好了,更多的知识还是要活学活用。

这整个过程下来,让我对 HTML 有了更加具象的理解。之前一直听说 HTML 简单,学了以后发现,确实是不难,但用好它还是要下一番功夫的。HTML 的功能我感觉和 Markdown 语法类似,实现的效果也都差不多。是,我肯定我说的这句话在以后会被打脸,因为我才接触前端多点的知识啊。但我现在这是看到的冰山一角,所以我只能对这一角进行描述,等有天我把冰山的全貌都摸透,回过头来再嘲笑现在的自己吧~

这一整个学习过程是在菜鸟教程上进行的,整个步骤和许多释义都是按照上面的理解进行记录的。但里面的各个例子都是我自己手敲了一遍。学的过程中,发现了鼎鼎有名的前端学习网站 W3school,两个教程的学习步骤和知识讲解都差不多,但有的地方 W3school 确实比菜鸟教程上面讲得细。但当时已经跟着菜鸟学了大半了,就没照着 W3school 上学。打算下一步学习 H5、CSS 和 Js 时,参照着 W3school 上面进行学习。

就到这吧。

17. 参考

http://www.runoob.com/

标签: