初学者 HTML 中级开发

HTML5 和 CSS3 新手指南 - 编写你的第一个代码（系列 1/12）

Ranjan.D

4.79/5 (54投票s)

2015年8月13日

CPOL

11分钟阅读

78120

1026

分多个部分学习HTML5和CSS3，从基础到高级。

下载文章源码

引言

在本文中，我们将简要了解HTML和CSS的历史，并学习一些基础知识。

HTML和CSS的简要历史
HTML和CSS的用途是什么？HTML和CSS有何不同？
开始编程需要准备什么？工具/编辑器
基本HTML语法和结构化基本HTML文档
基本标签：DocType, Head, Title, Body, Headings, Paragraphs
如何保存和查看网页

HTML和CSS的简要历史

引用：以下HTML历史是参考[1]编译而成

HTML（超文本标记语言）最初是由一位名叫Tim Berners-Lee的物理学家于1989年初开发的。HTML 1.0的第一个版本最初作为一种发布语言发布。

Tim Berners-Lee创建的第一个HTML版本可以在http://www.w3.org/History/1991-WWW-NeXT/Implementation/HyperText.m找到。原始版本的HTML（HTML 1.0）非常基础且有限，只有22个HTML标签。

HTML 2.0于1995年发布。它增加了一些新功能，与HTML 1.0相比，差异不大。

随着HTML 3.0的流行，Web变得越来越普及。Web得到了增强，引入了更多的标签和功能。HTML 3.0草案规范的创建包括了为Web开发人员创建网页的许多新功能和机会。然而，由于Web浏览器在实现新功能和能力方面进展缓慢，该草案被放弃了。Netscape是市场领导者，它推出了自己的标签，这些标签仅适用于Netscape浏览器。这时，专有标签开始被引入。

W3C（万维网联盟）于1994年发布了HTML 3.2规范。专有标签被移除，HTML 3.2的正式规范于1997年发布。引入了几个用于文本和链接样式设置的标签。

HTML 4.0于1997年推出，并于1998年正式成为标准。它带来了巨大的变化，是Web HTML演变中的一大步。参与构建规范的人们意识到，HTML 3.2中引入的样式标签最好不要成为HTML规范的一部分，而应该独立成一门语言。因此，样式标签被移除了。此外，HTML 4.0还引入了用于样式表、框架、嵌入式对象等的标签。

HTML 4.01作为HTML 4.0的修订版本发布。虽然没有大的改动，但进行了一些小的改动或修正。引入了<noframe>标签，用于不支持框架或未启用框架的浏览器。此外，还引入了包含target属性的frame标签，作为对先前HTML 4.0规范的修正。

之后推出了XHTML（可扩展标记语言）规范，该规范于2000年1月随HTML 4.01一起成为标准。XHTML并非与HTML完全不同的语言，但它比之前的HTML规范版本更严格、更简洁、更高效。规则包括定义XHTML标签时必须遵循的语义代码。XHTML标签必须闭合且正确嵌套，标签必须是小写。

CSS的历史

引用： CSS的简要历史基于[2]

CSS1于1996年由W3C发布。CSS1包含基本的样式功能，如字体、颜色和背景图像。大多数当前浏览器都完全支持CSS1。

CSS2于1998年发布，在CSS1的基础上增加了一些功能。CSS2包含用于页面元素定位以进行页面布局的功能，提供了对可下载字体的支持，并允许页面针对打印进行格式化。CSS2中引入了屏幕和打印的样式。

CSS3仍在进行中，并非所有功能都得到浏览器供应商的支持。已引入动画、文本效果、2D和3D转换等功能。

HTML和CSS的用途是什么？HTML和CSS有何不同？

HTML是用于描述网页结构的语言。使用HTML标记可以创建网页。换句话说，HTML用于创建Web文档。每个HTML文档包含三个主要部分：head、title和body。

head元素<head>包含title<title>，它指定了网页的标题。此外，head还可以包含script、style、link、meta数据等的标签。

HTML body可能包含脚本、表格、框架、表单、图像、注释等，这些构成了Web文档的结构。

CSS（层叠样式表）用于样式化Web文档。它旨在定义Web文档的外观和感觉。CSS将文档内容与其表示分离。CSS充当表示层，定义内容应如何显示或渲染，与定义文档结构的HTML不同。CSS还可以用于针对各种渲染机制（如打印、屏幕等）对HTML文档进行样式化。

开始编程需要准备什么？工具/编辑器

记事本可以用作基本的HTML编辑器。以下是专业HTML编辑器的列表

Notepad++是一款免费开源编辑器。它是Windows记事本的轻量级替代品。

http://notepad-plus-plus.org/

http://download.cnet.com/Notepad/3000-2352_4-10327521.html

Adobe Dreamweaver – 提供试用版，但它是付费软件。

https://creative.adobe.com/products/dreamweaver

Microsoft Expression Web – 以下是免费版本

http://www.microsoft.com/en-us/download/details.aspx?id=36179

CoffeeCup HTML Editor – 提供免费版和付费的完整版。

http://www.coffeecup.com/free-editor/

Windows, Mac和Linux的免费Web编辑器

http://webdesign.about.com/od/windowshtmleditors/tp/free-windows-editors.htm

http://webdesign.about.com/od/macintoshhtmleditors/tp/free-macintosh-editors.htm

http://webdesign.about.com/od/htmleditors/tp/Free-HTML-Editors-Linux-UNIX.htm

必备HTML5编辑器

1. Sublime Text 2
2. Aloha Editor
3. Dreamweaver CS5
4. Maqetta
5. MacFlux
6. BlueGriffon

http://www.htmlgoodies.com/html5/tutorials/five-essential-html5-editors.html

在线HTML和CSS编辑器

http://www.awwwards.com/10-html-css-online-code-editors-for-web-developers.html

基本HTML语法和结构化基本HTML文档

首先，我们来看一些创建简单HTML文档所需的基本标签。

Tag	描述
<html>	Html标签用于创建HTML文档。
<head>	Head标签用作页面头部信息的容器。
<title>	Title标签用于指定页面的标题。
<body>	Body标签用于定义HTML文档的实际内容。
<p>	开始一个新段落。您应该使用</p>标签来结束段落，但并非必需。
<br>或<br />	开始新的一行。
<b></b>	创建粗体文本。
<i></i>	创建斜体文本。
<u></u>	用于下划线文本。
<pre></pre>	这些标签之间的文本是“预格式化”的。空格和换行符将按在pre中输入的显示。
<img src="imagefilename" title="text" alt=””>	用于创建图像。
<a href="filename" target="_blank">点击这里</a>	创建一个新链接。点击链接时，由于target设置为blank，将打开一个新窗口。
<ul></ul>	创建一个无序列表，每个列表项都以项目符号显示。
<ol></ol>	创建一个有序列表，列表中的每个项都有编号。
<table></table>	创建一个表格。您可以使用<tr>创建新行，并使用<td>在表格行内创建列。
<input type="text" name="textboxName"/>	创建一个单行文本框。
<input type="checkbox" name="checkboxName"/>	创建一个复选框项。
<input type="radio" name="radiobuttonName" value="1"/>	创建一个单选按钮，在本例中其值为1。
<input type="submit" value="label"/>	创建一个提交按钮。用于将所有表单数据发布或提交到服务器。
<textarea rows="4" cols="40" name="parameter" />	创建一个文本区域（多行文本框），高度为4行，宽度为40列。
<input type="hidden" name="parameter" value="1"/>	创建一个隐藏输入，在本例中其值为隐藏值=1。
<select name="parameter"> <option>Red</option> <option selected>Green</option> </select>	创建一个下拉框，包含Red和Green两个选项 (已选择)

这是一个简单的HTML文档，包含基本的HTML标签。

<html>
<head>
  <title> HTML document structure </title>
  <meta name="Keywords" content="Free source code, tutorials, html, css" />
  <meta name="application-name" content="HTML sample" />
</head>
<body>
<h1>Heading</h1>

<p>A paragraph</p>

<!--Creates a pre formatted text-->
<pre> “ This is a pre formatted text “ </pre>

<!--Creates a unordered List-->
<ul>
      <li>Red</li>
      <li>Blue</li>
</ul>

<!--Creates a ordered List-->
<ol>
      <li>Red</li>
      <li>Blue</li>
</ol>

<!--Creates a table-->
<table border="1">
<tr>
   <td>Row 1, Cell 1</td>
   <td>Row 1, Cell 2</td>
</tr>
</table>

<!--Creates a link to an external page-->
<a href=”https://codeproject.org.cn/WebServices/ArticleRSS.aspx?cat=1>Link to View CodeProject Latest Articles</a>

<!--Creates CodeProject Bob-->
<img id="bob" title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;">

</body>
</html>

当HTML页面在浏览器中渲染时，它看起来是这样的。

HTML文档可以被视为一个文档树，根节点是<html>。head和body是它的分支。下面是一个示例文档。

(来源：图像引用自 - http://reference.sitepoint.com/html/page-structure)

基本标签：DocType, Head, Title, Body, Headings, Paragraphs

我们将简要介绍基本的HTML标签。以下HTML标签灵感来自[3]

DocType标签：

DocType（DTD）声明应该是Web文档中的第一个项目。浏览器将根据文档中设置的DTD渲染HTML内容。此外，浏览器会根据文档中定义的DTD来识别标记的版本。

DocType声明如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD中的PUBLIC告知浏览器DTD是一个公开可用的资源。

请注意，HTML5的文档类型已得到改进，非常简单易于定义。

<!DOCTYPE html>

浏览器渲染完全取决于Web文档中定义的DTD。

Head标签

head元素描述了文档及其相关的资源，例如使用的脚本和样式表。

head包含title元素，它代表文档的标题。您可以看到文档标题出现在浏览器的标题栏中。除了title之外，head还可以包含以下内容。

<html>
<head>
  <title>HTML basic tutorials</title>
</head>
</html>

base

base定义了页面上链接或资源的基准URL，以及用于打开链接内容的窗口。您可以在head中一次性设置base URL，然后可以在文档中的所有链接中使用此base URL。

这是一个例子。您会注意到下面的图像标签不需要包含图像的完整路径。

<head>
    <title>Code Project</title>
    <base href="https://codeproject.org.cn/" />
</head>
<body>
    <img src="/images/one.gif" /> 
</body>

link

link指向某种类型的资源，通常是一个样式表，它提供了关于如何为网页中的各种元素设置样式的说明。

 <link href="/css/main.min.css" rel="stylesheet" type="text/css">

meta

元数据提供了有关页面的额外信息。例如，页面使用的字符编码、页面内容的摘要等。

HTML中的元数据主要由搜索引擎使用。它让搜索引擎了解页面或站点的内容。元数据的示例如下。

<meta name="description" content="HTML5 basics">

<meta name="keywords" content="HTML, introduction, basics, head, body, course, class, tutorial, beginners, guide, beginner, beginners, programming, program, learn, beginner, html, page, webpage, website, guide">

object

object元素代表一个多功能容器，用于嵌入音频、视频、PDF、Flash等媒体对象。

Example: <object width="500" height="500" data="htmlTutotial.swf"></object>

script

script标签用于嵌入或引用外部脚本。脚本用法的示例如下。

<script type="text/javascript" src="/js/jquery.js" async="async"></script>
  
<script type="text/javascript" src="/js/script.js" async="async"></script>

样式

style标签提供了一个用于定义页面特定CSS样式的区域。下面是一个内联样式的示例，当页面在浏览器中渲染时应用。

<html>
<head>
    <style>
         h1 {color:orange;}
        p   {color:red;}
    </style>
</head>
<body>
    <h1>A Heading tag</h1>
    <p>A paragraph tag</p>
</body>
</html>

Body标签

引用：以下定义参考自[4]

HTML中的body标签充当文档可渲染内容的容器。

在body中，您将看到大多数HTML标签，如图像、段落、超链接、表格、div、span等元素。

示例

<html>
<head>
    <title>Html basic tutorials</title>
</head>
<body>
    <p> The Web Page content goes here </p>    
</body>
</html>

Heading标签

引用：以下内容参考自[5]

HTML标签<h1>到<h6>用于定义HTML标题。h1标签主要用作主标题。

<h1>标签创建24磅的标题。
<h2>标签创建18磅的标题。
<h3>标签创建14磅的标题。
<h4>标签创建12磅的标题。
<h5>标签创建10磅的标题。
<h6>标签创建8磅的标题。

示例

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Paragraph标签

引用：以下定义参考自 [6]

段落通过<p>标签定义。

HTML 4或5与XHTML在段落标签的使用上有一个小的区别。HTML 4或5不需要结束标签，而XHTML需要。

示例

<p>This is a paragraph of text</p>

段落标签的属性

id – id属性必须是页面唯一的。id也可以在css样式表中用于为段落设置特定的格式。

class – class属性用于为段落应用样式。

lang – lang属性定义段落中使用的语言。

引用：以下定义参考自 [7]

style – 当您想为段落应用特定样式时，使用style属性。

如何保存和查看网页

HTML页面必须以*.html保存。假设您使用记事本构建一个简单的HTML文档，只需选择“文件”→“保存”，然后选择“所有文件”，然后您可以指定文件名，例如：“htmltutorial.html”。

为了查看HTML页面，只需双击已保存的html文件即可。它应该会在Web浏览器中打开。

如果您想获得真正的体验来理解和查看HTML网页，您可以下载本文中的示例并在浏览器中查看它们。

参考文献

[1] http://www.landofcode.com/html-tutorials/html-history.php

[2] http://www.cssneuse.net/the-history-of-css.php

[3] http://reference.sitepoint.com/html

[4] http://www.htmlquick.com/reference/tags/body.html

[5] https://w3schools.org.cn/tags/tag_hn.asp

[6] https://w3schools.org.cn/tags/tag_p.asp

[7] http://www.htmlbasictutor.ca/paragraph-tag.htm

关注点

在撰写本文期间，我复习了许多内容并学到了很多东西！:) 感谢CodeProject举办这个文章竞赛，这样我们都可以学习并为社区做出贡献。我非常享受撰写这篇文章的每一个环节。

历史

版本 1.0 - HTML5和CSS3系列文章第1部分 - 2014年3月29日

版本 1.1 - 添加文章参考文献 - 2015年8月12日