乌徒帮技术范儿技术中心HTML代码 › HTML网页标记语言:网页撰写的开始

HTML网页标记语言:网页撰写的开始

分类:HTML代码

HTML是我们接触网站建设的第一步,了解HTML的工作,就打开了网页和网站建设的大门,可以窥见网站建设的一些道道。但在进行学习之前,你需要有一些说教式的理解,本文会告诉你一些曾经理解起来比较复杂,而读完之后变得清晰的问题。

更为重要的是,从本文开始,乌徒帮将带着你开始进行一些代码的撰写和操作,也就是实战中。乌徒帮更注重入门,让初学者可以有效的掌握知识,这包括告诉你怎么做和怎么去思考。

一、HTML代码的实用化理解

百度百科对HTML的解释侧重于“超文本链接”“标准”两个概念,而乌徒帮更喜欢从技术层面去理解它。你或许在读书的时候学过C语言,也或许学过类似的机器编译语言,硬件通过软件中的程序得到不同的电流,最后返回给使用者惊人的行为动作,如果从代码的角度去猜测的话,HTML也是这样。

HTML代码是网页的标记代码,去除CSS和Javascript,HTML可以看成用来表达网页的结构的一串字符代码,这些代码中,有的用来表示内在元素的存在级别,例如<p><div><h1>等等,有些用来表示元素要表达的修饰,例如<strong><small><center>等,在HTML5中,这些标记代码开始语义化,例如<article>表示一个独立的可以算作是文章的区域,<header>表示头部或页面的首部,<aside>表示附属信息,<time>表示时间等等,HTML5的知识将在今后的文章中讲解,本文不述。

这只是HTML的表象,你所能看到的东西。靠它们,你不能让用户看到不同的颜色,巧妙的布局,可爱的动作,这些要靠浏览器来完成。

浏览器的工作就是解释这些代码(包括CSS和Javascript,本文中不再强调,这些知识将在之后的文章中被理解),将它们在浏览器界面中进行渲染,让用户看到不同的布局、颜色、线条、动画、元素、动作。相同的一个HTML文本,内部的代码一摸一样,给它赋予不同的CSS和Javascript,它就变成完全不同的一个摸样,这被称为样式。我们打开一个网页,右键点击,选择“查看源代码”,可以查看这个网页的HTML代码结构。对于浏览器来说,不单单识别HTML代码,还可以打开图片、txt文档等文件,然而只有HTML是超文本文件格式,可以实现各种链接、页面的渲染,是能被浏览器识别翻译成我们看到网页的唯一文件格式。

这里,你要区别HTML和php、jsp,甚至其他后缀结束的网址格式,例如.do、.action等,网址的结束格式和php文件与HTML的两个层级的不同概念,浏览器只会渲染HTML代码,PHP通过将内部程序解释为HTML代码传送给浏览器,浏览器才能将其解释为我们看到的页面。你甚至可以把浏览器当做HTML的编译器(这是完全错误的)。

二、让你的网页起作用

能让浏览器顺利打开你的网页,你需要让你的文件满足以下几个条件:

1)网页文件格式:例如.html,.htm,.xhtml,shtml等等,xml不是本节HTML要讲的范畴。

2)你的HTML代码符合一定的标准,这个标准非常复杂,你需要在之后的学习中慢慢积累经验。

3)用能够使你解释你的HTML代码的浏览器打开该文档,你可以阅读这里写一个静态的HTML文件。

三、开始撰写HTML代码

1、首先让我来写一个HTML文件,预览一下文档的结构。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这是一个测试文档</title>
</head>

<body>
<h1>我的一篇文章</h1>
<p>p标记表示一个段落,是paragraph的意思</p>
<p>通过不同的标记代码,将网页的内容写进去,而非常关键的是,我们还可以使用<a href="http://www.utubon.com">乌徒帮</a>来创建一个连接,这是作为超文本文件的重要标志。</p>
</body>
</html>

上面的代码是一个网页的基本结构代码,包括<!DOCTYPE html>声明部分、<html>标签对、<head>标签对、<meta>页面信息元素标签、<title>网页标题标签对、<body>标签对,以及在<body>标签对中加入网页内容的其他标签。

2、HTML的标签的概念

就像其他语言一样,HTML也有自己固有的结构形式,这是由早期HTML语言开发者确定的,我们并不清楚为什么他们如此规定这种标记形式,我们只管这样去使用它们。标签是在HTML中比较重要的概念,它大概是说表示网页内的一个最基本的元素,例如<title>网页标题、<p>一个段落,这些最基本的元素不能再进行拆分了。另外还有一些标签表示网页元素的一种修饰,例如在<p>标签对中加入<br>表示换行,用<span>将一个词语包裹起来对该词语进行修饰,以前还可以用<font>将一个词语包裹起来,对该文字的字体、颜色、粗细进行规定,不过现在<font>标签已经不再使用了。

HTML的标签对是一个重要的概念,有些标签成对出现,有些单个出现,成对出现的标签必须两个都有,例如有了<p>就必须有</p>,否则就是一个错误,你可以理解为程序错误,最终造成页面的错乱。

不同的标签起到不同的作用,特别是修饰性的标签,例如<strong>让被包裹的词语加重变粗,<a href="">让被包裹的词语带上链接。而存在性的层级标签也有自己的功效,例如<ul>列表,将一组<li>对包裹起来,表示组没有顺序的序列,不做任何修饰的话,每个<li>前面都会有一个标记,例如:

  • 列表元素一
  • 列表元素二

总之,HTML标签是HTML独特的能够实现网页结构布局的最基本概念。HTML标签不仅写html代码,在任何html网页形式中都需要,当然xhtml,xml是不同的,不过在学他们之前,你需要学习HTML。

3、HTML都有哪些标签,它们都有什么效果

W3School是全世界最好最权威的在线学习网页技术的免费网站,中文版符合我们的阅读习惯,深入浅出的介绍了网站建设的入门级别的知识点。(这并不代表乌徒帮的入门介绍没有价值,恰恰相反的是,乌徒帮会直接略过w3school上已经有的知识目录,通过链接让读者自己去阅读,从而将目光注重在一些理解性的知识点上。)乌徒帮将直接引用w3school中的知识点介绍。

按字母顺序排列

DTD:指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset.

标签 描述 DTD
<!--...--> 定义注释。 STF
<!DOCTYPE> 定义文档类型。 STF
<a> 定义锚。 STF
<abbr> 定义缩写。 STF
<acronym> 定义只取首字母的缩写。 STF
<address> 定义文档作者或拥有者的联系信息。 STF
<applet> 不赞成使用。定义嵌入的 applet。 TF
<area> 定义图像映射内部的区域。 STF
<b> 定义粗体字。 STF
<base> 定义页面中所有链接的默认地址或默认目标。 STF
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 TF
<bdo> 定义文字方向。 STF
<big> 定义大号文本。 STF
<blockquote> 定义长的引用。 STF
<body> 定义文档的主体。 STF
<br> 定义简单的折行。 STF
<button> 定义按钮 (push button)。 STF
<caption> 定义表格标题。 STF
<center> 不赞成使用。定义居中文本。 TF
<cite> 定义引用(citation)。 STF
<code> 定义计算机代码文本。 STF
<col> 定义表格中一个或多个列的属性值。 STF
<colgroup> 定义表格中供格式化的列组。 STF
<dd> 定义定义列表中项目的描述。 STF
<del> 定义被删除文本。 STF
<dir> 不赞成使用。定义目录列表。 TF
<div> 定义文档中的节。 STF
<dfn> 定义定义项目。 STF
<dl> 定义定义列表。 STF
<dt> 定义定义列表中的项目。 STF
<em> 定义强调文本。 STF
<fieldset> 定义围绕表单中元素的边框。 STF
<font> 不赞成使用。定义文字的字体、尺寸和颜色。 TF
<form> 定义供用户输入的 HTML 表单。 STF
<frame> 定义框架集的窗口或框架。 F
<frameset> 定义框架集。 F
<h1> to <h6> 定义 HTML 标题。 STF
<head> 定义关于文档的信息。 STF
<hr> 定义水平线。 STF
<html> 定义 HTML 文档。 STF
<i> 定义斜体字。 STF
<iframe> 定义内联框架。 TF
<img> 定义图像。 STF
<input> 定义输入控件。 STF
<ins> 定义被插入文本。 STF
<isindex> 不赞成使用。定义与文档相关的可搜索索引。 TF
<kbd> 定义键盘文本。 STF
<label> 定义 input 元素的标注。 STF
<legend> 定义 fieldset 元素的标题。 STF
<li> 定义列表的项目。 STF
<link> 定义文档与外部资源的关系。 STF
<map> 定义图像映射。 STF
<menu> 不赞成使用。定义菜单列表。 TF
<meta> 定义关于 HTML 文档的元信息。 STF
<noframes> 定义针对不支持框架的用户的替代内容。 TF
<noscript> 定义针对不支持客户端脚本的用户的替代内容。 STF
<object> 定义内嵌对象。 STF
<ol> 定义有序列表。 STF
<optgroup> 定义选择列表中相关选项的组合。 STF
<option> 定义选择列表中的选项。 STF
<p> 定义段落。 STF
<param> 定义对象的参数。 STF
<pre> 定义预格式文本。 STF
<q> 定义短的引用。 STF
<s> 不赞成使用。定义加删除线的文本。 TF
<samp> 定义计算机代码样本。 STF
<script> 定义客户端脚本。 STF
<select> 定义选择列表(下拉列表)。 STF
<small> 定义小号文本。 STF
<span> 定义文档中的节。 STF
<strike> 不赞成使用。定义加删除线文本。 TF
<strong> 定义强调文本。 STF
<style> 定义文档的样式信息。 STF
<sub> 定义下标文本。 STF
<sup> 定义上标文本。 STF
<table> 定义表格。 STF
<tbody> 定义表格中的主体内容。 STF
<td> 定义表格中的单元。 STF
<textarea> 定义多行的文本输入控件。 STF
<tfoot> 定义表格中的表注内容(脚注)。 STF
<th> 定义表格中的表头单元格。 STF
<thead> 定义表格中的表头内容。 STF
<title> 定义文档的标题。 STF
<tr> 定义表格中的行。 STF
<tt> 定义打字机文本。 STF
<u> 不赞成使用。定义下划线文本。 TF
<ul> 定义无序列表。 STF
<var> 定义文本的变量部分。 STF
<xmp> 不赞成使用。定义预格式文本。

读者可以通过上面的表格查阅每个标签的使用方法和效果。这是按照字母顺序排列,使用中,我们常常按照功能进行查阅

作为初学者,需要通读所有的标签的作用,如果你愿意的话,因为这是建立你的基础知识的关键一步,连基础都没有,无从谈起之后乌徒帮将结束的后台开发语言。

4、标签的属性

每一个标签都可以在第一个<>内增加一些附带的字符串表示它的属性,例如可以增加一个id属性表示这个标签的记号号码,可以增加一个class属性标记这个标签是什么样式,还可以用style属性来直接为标签所对应元素添加一些样式。例如<h1 id="post-129" class="post first-article" style="color:red;">文章一</h1>

为什么要标签属性呢,这是当代计算机语言的普遍规则,虽然HTML谈不上计算机语言。利用这些属性,我们可以给标签添加抽象的角色、记号,从而在之后的css中选择它,给它赋予一些样式。每一个标签所拥有的属性不同,有些标签的属性很多,有的很少。而属性不应该去考虑“不同的标签可以有同样的属性”这样的问题,我们可以说这个瓶子是红的,那个瓶子是蓝色的,颜色是他们都有的属性,红、蓝是属性值,然而我们不能说“颜色是他们共有的属性”,属性只属于某一个物体,只属于这个标签。当然,在了解了一些标签的属性之后,你会发现其他标签的属性也会很容易掌握。例如了解了<p>标签的style属性之后,其他标签的style属性基本也就解决了。阅读

5、事件

和属性一样,标签还能发生一些事件,例如当我们的鼠标放到某个元素上面的时候onmouseover事件,页面加载好的时候onload事件,总之事件就是存在于时间流中的一些动态动作特性。如果把时间当做属性的话,事件属性的属性值基本都是一些javascript动作代码。具体你需要阅读这里

6、其他知识

HTML的知识有很多很复杂,本章的重点在于先掌握各个标签的使用及效果,以后再回头掌握HTML事件。

这是w3school中另外的一些关于HTML基础的知识点,你可以尝试阅读,但对于入门者,颜色、HTML文本结构可以适当再阅读。

HTML代码的基本知识就介绍到这里,这只是简单的入门级介绍,在今后的讨论中,乌徒帮将会列出更多的专题列表,解决初学者在实际操作中遇到的和标准发生冲突的问题。

上一章:主机和域名

下一章:CSS-层叠样式表

填写个人信息,赶快回复吧!