更新时间: 2018-08-17 17:06:12       分类: 教程


简介

浏览器是你接触web世界最为重要的窗口,这节课将使你明白你通过浏览器所看到的华丽的网页,究竟是如何被渲染出来的。

目标

任务

预期用时


HTML

HTML(HyperTextMarkupLanguage)-- 超文本标记语言,是一种用于构建网页的世界通用的标准标记语言,它并不是一门编程语言,你可以理解为,这是一种特殊格式的文本文件(就像word文件一样),使用浏览器打开它,就能看到网页了(我们也称html为“网页源码”)。

版本问题

HTML从指定至今已经拥有多个版本,目前最为流行和通用的版本为HTML5,接下来的教程全部基于这个版本。

0.实践:动手创建属于你的第一个网页

请跟随下面的步骤创建一个最为简单的页面,注意理解页面渲染的概念,以及html的结构化

  1. 新建一个文本文档(demo.txt),然后使用一个文本编辑器打开它(如果你没有合适的文本编辑器,就使用记事本吧)

  2. 将下面的内容复制粘贴到新建的文本文档中

     <!DOCTYPE html>
     <html>
     <head>
     <meta charset="utf-8">
     <title>我的网页</title>
     </head>
     <body>
    	<h1>我的第一个标题</h1>
    	<p>我的第一个段落。</p>
     </body>
     </html>
    
  3. 按下 CTRL + S 快捷键保存内容(请在脑海中自动生成时刻保存的概念)

  4. 修改这个文本文档的后缀为html(demo.html),如果你不知道怎么修改文件的后缀,请点击我百度

  5. demo.html文件上右键,选择打开方式为任意一个浏览器,然后观察

如果一切顺利你将会在浏览器中看到以下画面:

没错,刚才你所写下的html代码,被浏览器渲染(转换)成为了可视化的网页。

1.基础:了解HTML的结构

基本骨架

在上面的代码中,可以看到最终实际被渲染成网页内容的部分只有“我的第一个标题”和“我的第一个段落”两句话,剩下的部分都是html代码的结构化标记,如果你仔细观察,你可以发现html是一个层层包裹的结构,最外面的很大一部分是html的基本骨架,也就是下面这部分:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
    ....	
</body>
</html>

基本上所有的html都拥有同样的结构,我们一般要做的事情只是在中间省略号的部分书写自己想要的代码,顺带一题,<title></title>两个标记中间所包含的文字,最终将被渲染成浏览器选项卡上的文字(称之为网页标题)。

你不用急于理解上面这个骨架的内容,先把它们复制在你的剪贴板上,然后随时准备复制它。

标签和元素

你一定注意到了html中处处可见的尖括号<>,这被称为标签,绝大多数的标签都是成对出现的:分为起始标签和结束标签,夹在两个标签中的内容被称为元素

举一个最简单的实例

<p>这是一个段落</p>

上面的内容声明了一个段落(p标签)元素,内容是“这是一个段落”。

接下来你将会意识到,编写一个网页基本上就是通过不断的增加各种标签,给页面添加各种元素的过程。

点击这里学习html标签和元素

2.入门:了解并使用标签

四个基本实例

下面的教程将会带你了解4个最为基础的html元素:

你可以尝试在刚才创建的html文件中应用它们,或者在下面的网页中使用“尝试一下”来查看效果

(因为html原生不支持回车换行,所以br标签还是很常用的)

属性

每个标签都可以拥有属性,属性是一些用于更好的描述元素的附加信息。下面用一个易于理解的形容来描述属性和标签以及元素的关系:

请看我臆造的这段“html”代码:

<苹果 颜色 = "红色" 口感 = "还不错">A</苹果>

它的语义是:A是一个红色的,口感还不错的苹果

标签描述了A是个苹果,属性描述了A是个什么样的苹果

点击下面的链接来深入学习a标签和img标签,并尝试使用它们的属性:

(!)实践任务

编写一个a标签,跳转到http://cn.bing.com/,并且设置为点击后在新窗口打开 (href + target 属性)

编写一个img标签,src设置为http://cdn.marklux.cn/17-6-18/75443832.jpg,(你也可以引入本地的图片,这可能需要你了解一下相对路径和绝对路径),尝试调整width和height属性来修改它的显示效果。

3.进阶:区块和模块化

div标签

接下来我们来认识html中最最最常用的一个标签:<div>

被包裹在<div></div>中间的内容被称为一个区块,区块和区块之间互相独立,一个区块内的所有其他元素可以拥有相同的样式和某些属性。区块也可以进行嵌套。

因为拥有独立性和继承性,因此我们可以利用div对网页进行模块化,模块化是一个重要的编程思想,在这里,你可以想像一个网页是由许许多多的小矩形(div)拼凑在一起成为一个整体的,我们先写好一个个小矩形,最终再把他们合理的布局在一起,这样就形成了一个结构清晰样式美观的网页了。

看看下面这个网页,我用红框标记出了里面主要的div元素,试着体会一下模块化的思想

div划分

点我学习div

布局*

通过现在已经把网页分层了若干个矩形,这些矩形需要合理的排列才能变得美观,因此需要进行布局, 布局是一道比较复杂和繁琐的工序,牵扯到了一些更为深入的知识,也需要一些CSS的相关知识。

查看下面的链接了解布局(请无视使用表格的布局方式):

HTML布局

对布局有兴趣的同学可以自行搜索和了解下面的相关话题:

布局在传统的web页面开发中是一项比较繁琐的工作,不过现在已经涌现出一大批优秀的解决方案(比如响应式布局,栅格系统,弹性布局),这些话题将会在进阶篇的前端路径部分进行讨论,因此你现在可以不必过分追究布局问题。

4.继续学习

上面的内容为你揭示了html的基本结构和元素,如果你想要更多的了解html的相关知识,下面为你提供一些可以进阶学习的网站和教程

本套课程的后续部分不会对html相关知识有太多的要求,当前阶段你只需要明白html的基本结构,知道网页是用html写的,并且能尝试自己写一些简单的页面元素就OK了。

浏览器

简介

浏览器是啥我觉得不必过多赘述了,毕竟大家天天都在用嘛。不过在你了解了html之后应该对浏览器有一些新的认知,至少应该明白页面其实是由html源码加工渲染而来的,在这个阶段,你可以把浏览器简单的理解成为一个html的渲染器。

调试工具

浏览器的调试工具对于开发者来说实在是不可多得的利器,我个人十分推荐chrome浏览器的开发调试工具(火狐也还凑合),下面的教学将会基于chrome浏览器进行。

打开

在页面空白处点击右键选择“检查”或者按下F12快键键(OSX下不可用)就可以进入调试工具界面了,如下图所示:

查看元素(源码)

在页面元素的显示部分可以快速查看整个网页的源码,并且选中某一部分的源代码后还会在左侧的视图中加亮显示,看到有趣的网站不妨就利用这个查看一下源代码,说不定还能拷贝其中的一部分元素为己所用(扒源码)

审查元素

点击审查元素按钮后再将鼠标移动到页面上,将会动态高亮显示页面上的元素,并在页面元素栏中显示它的源码(有点不好描述,自己使用一下应该会比较好理解),大概是下面这样的

这个功能在调试页面时相当有用!

其他

调试工具拥有许多更加有用和高级的功能,我们将会在以后的课程中陆续讲述

小结

第一小节的内容到此就告一段落了,也许你还不是太理解网页究竟如何运作,也许你觉得这一堆铺面而来的新知识有些突兀,不必担心,尝试慢慢地理解和接受吧。

你可以访问之前给出的进阶学习教程链接去进一步了解html的相关知识。

当然不要忘记进行一定量的实践,始终记得:实践是编程的基础。

任务与实践

综合利用之前讲到的所有标签写一个简单的页面


评论

还没有评论