介绍

网络时代已经到来。现在对人们来说，每天上网冲浪已经成为一种最为常见的行为。

在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异，不同网站的网页也具有不同的外观和感受，以实现在网络上建立自己的身份品牌的目的。

如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的，那么这里正是你可以了解到这些知识的地方。让我们一起走进在浏览器中创建了这么多网页的两项核心技术HTML、CSS。

简单的说，HTML提供了页面基本的框架，而CSS丰富了页面的表现。俗话说：“一图胜千言”。下图1中也很好的诠释了应用CSS前后之间的差别。

应用CSS之前                                                 应用CSS之后

很早之前

HTML的诞生

时间回到1989年，一个CERN的年轻天才软件工程师Tim Berners-Lee ，发明了万维网。次年，他创作了奠定今天网络基础的三项技术：

  • HTML：超文本标记语言。用于构建、发布和链接网络文件的标准。

  • URL：统一资源标识符。分配给网络上每个资源一个独特的“地址”，以便更容易的访问。

  • HTTP：超文本传输协议。一个用于网络上定义网页与消息的格式与传输的通信协议。

顾名思义，HTML通过将内容嵌入在某些预定义的标签中，如<title>、<head>和<p>来标记网页上的每一个文本。任何浏览器都知道如何正确地显示括号标签中文本。

在网络迅速成长的同时，一些新的HTML标签，如<image>和<TABLE>也增加了进来，以便提高用户的网络体验。<table>标签最初是以数据表格的目的被引进的，但后来被用于格式化网页的布局。然而，这种混合结构的呈现方式，后来被发现是灾难性的。

混乱状态

随着网络的普及，许多不同的浏览器出现了。一个接一个，马赛克，网景，紧接着微软也进军浏览器市场，每一个都引入自己独有风格的标签来达到增加市场份额和迎合Web开发者需求的目的。HTML已经开始偏离原先作为纯粹的结构提供者的根本了。

20世纪90年代中期，浏览器战争爆发了，这也带来了网络的混乱，很多用户感到不满。网页中专属标签展现不同内容或者在对立的浏览器中无法展示完全都是常见的抱怨。混乱的状态也引起了浏览器的兼容性问题。

在90年代后期，这种混乱的状态终于在万维网联盟（W3C）的控制下结束。他们决定清理HTML，以使其回到原有结构提供者的角色。同时引入一种新技术，起到网页中展现的作用。这个明智的举动，促成了CSS的引进。

CSS的黎明

CSS的全名是层叠样式表。它是Web的展现语言。它通过向各个HTML标签分配字体、颜色或布局的值，来增加了网页的样式。然而，CSS是不只用于HTML，它也适用于任何基于XML标记的语言。

这种关注点的分离，带来了很多好处。这也使得从一个单个CSS页面将层叠样式应用到一个网站的不同页面成为了可能，避免了要在网站中的每一个页面艰难的编写相同的信息代码。换句话说，使用CSS极大的释放了网站的维护。

此外，这也使得不同环境中，在相同文件应用不同的CSS成为可能。例如大屏幕、小屏幕或者打印机，这些让使用者感觉欣喜。

HTML5和CSS3

HTML5是HTML的最新标准，取代了以前的HTML 4.01。

HTML5诞生于W3C和Web超文本应用技术工作组（WHATWG）之间的合作。HTML5的创建，是以以下三点为目标：

  • 减少对插件的依赖（如Flash）

  • 使用标记代替脚本

  • 独立的设备和平台

读取HTML设计原则，有助于更好地理解为什么HTML5就像是今天这个样子。

说到CSS，它的最新标准是CSS3，这与早期版本是完全向后兼容的。CSS3的规范是由W3C 开发的，目前仍处于开发阶段，其最新的版本是CSS Snapshot 2010。

HTML编辑器

要以原本的形式了解HTML的本质，我强烈建议使用文本编辑器如PC版的Notepad，Mac的TextEdit，或者任何开源文本编辑器如Notepad++。在这个阶段，远离那些承诺所见即所得的专业HTML编辑器，这些编辑器并非能帮你有效的学习。

来吧，现在启动你的文本编辑器。

  • 步骤1 - 请真实的键入以下图2中到文本编辑器。我特意挑选了截图文字显示的代码片段，请不要简单的复制和粘贴。

图2：编写HTML代码

  • 第2步 - 创建一个新的叫mysite的文件夹。此文件夹中，保存你新创建的以.htm或.html为文件扩展名的HTML文件。事实上，我建议你第一次创建这个文件夹时，就打开这个文件夹并保存你的文件。我选择将文件命名为hello.html

  • 第3步 - 双击你的HTML文件，并在浏览器中查看你的第一个网页（图3）。恭喜！你刚刚成功地创建HTML网页。

图3：查看关于浏览器

  • 第4步 - 将你的文本编辑器和浏览器并排放置，并交叉检查它们。在一侧你可以看到HTML源代码，另一侧可以看到浏览器是如何解释和渲染它。你将看到封闭在各自的标签内的内容显示在浏览器中，而标签并未显示。看起来有一个问题。为什么你“真实”键入的空格和缩进，没有显示出来？“Hello HTML”的标题标签显示在哪里？你能在浏览器页面中找到它吗？

请往下阅读

HTML基础

正如你所注意到的，HTML的内容都包含在标签对中，如<title> </ title>，<h1> </ h1>和<p> </ p>。让我们开始使用一些基本的HTML标签来熟悉一下。

<!DOCTYPE>

任何HTML文档都是以<!DOCTYPE>标签开始的第一行代码。这句代码会告诉浏览器页面中编写HTML代码的版本，以便浏览器能正确的渲染。从这个意义上来说，<!DOCTYPE>不是HTML标签。

HTML 4.01版本的<!DOCTYPE>看起来是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

我们示例文件中声明的<!DOCTYPE>为HTML5，这是HTML的最新标准。它比前面的版本更加简洁易读。

在W3C上可以找到更多<!DOCTYPE>的信息。

<html>

<html>标签意味着HTML文件的开始，同时在文件的最后一行必须以</ html>标签的文标签结束。

<head>

<head>开始标签和</ head>结束标签之间是作为其他标签的容器。例如<title>, <script>, <style> 和 <meta>。

<title>

开始标签<title>和结束标签</ title >之间的区域，用于放置HTML文档标题的地方。<title>标签的内容将会出现在浏览器的工具栏中。你也许已经注意到我们的例子中，“Hello HTML”出现在浏览器的工具栏中。当你收藏这个页面时，<title>标签的内容也会作为标签的名称。

<body>

开始标签<body>和结束标签</ body>之间的区域服务于浏览器窗的网页中的可视化内容部分，<body>标签类似于其它的HTML标签，如<h1>，<p>，<image>和<table>。

<h1>，<h2> ... <h6>

共有6个标题标签，从<h1>，<h2>到<h6>。在我们的例子中，我们已经使用了其中的4个，即<h1>，<h2>，<h4>和<h6>。它们必须与对应的结束标记配合使用。浏览器会自动的分别为每一行标题上面和下面添加额外的间距。

<p>

我们使用<p>标签来将网页内容分段，以便组织成段落的形式。每一个<p>标签必须以</ p>标签结束。我们的示例中有3个段落。就像标题标签一样，浏览器会自动添加为每个段落上面和下面添加额外的间距。我特意为段落添加了额外的空白，但是并未显示在浏览器中。你也许已经注意到了，标签之间的缩进和额外间距均没有显示出来。

结论是明确的：“额外的空白会被忽略。”

注意事项

下面总结一下这次学习的要点：

  • 额外的空白会被忽略
  • HTML的标签被包裹在尖括号中，比如<HTML>
  • HTML的标签通常成对出现，除少数例外
  • 每个结束标签前面都有一个斜杠，就像</ HTML>
  • HTML标签不区分大小写：<H1>和<h1>的含义相同。W3C建议小写。
  • 代码排版上错误的情况是不常见的。我们可以通过适当的代码缩进来避免这种代码排版上的问题。
  • 最后但同样重要的：据我观察，最常见的错误之一是忘记添加结束标签。我的解决办法是：写开始标签时，同时也写上结束标签，然后再花时间在两个标签之间添加内容。

第一次的学习就到这里。

学习完第一节HTML5和CSS3的基本知识，能够帮助我们更好的进行前端开发。同时，还可以借助一些前端开发工具。如Wijmo，这是一款大而全面的前端 HTML5 / JavaScript UI控件集，能为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。

原文链接：https://www.codeproject.com/Articles/751771/Beginners-Guide-to-HTML-CSS-Writing-Your-First-Cod

相关阅读：

开放才能进步！Angular和Wijmo一起走过的日子

Angular vs React 最全面深入对比

Wijmo已率先支持Angular4 & TypeScript 2.2

HTML5 & CSS3初学者指南(1) – 编写第一行代码的更多相关文章

  1. HTML5 & CSS3 初学者指南(4) – Canvas使用

    介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新 ...

  2. HTML5 & CSS3初学者指南(4) – Canvas使用

    介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件.在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力.HTML5的到来,带来了新 ...

  3. HTML5 & CSS3初学者指南(2) – 样式化第一个网页

    介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使 ...

  4. HTML5 & CSS3初学者指南(3) – HTML5新特性

    介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据 ...

  5. HTML5&amp;CSS3初学者指南

    介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自 ...

  6. python学习笔记1--python简介和第一行代码编写

    一.什么是python? python是一种面向对象,解释型语言,它语法简介,容易学习.本节博客就来说说本人学习python的心得体会. 二.python环境安装 目前python版本有python2 ...

  7. 《第一行代码——Android》

    <第一行代码——Android> 基本信息 作者: 郭霖 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115362865 上架时间:2014-7-14 出版日期:2014 ...

  8. 《Android第一行代码》笔记

    学习Android开发差点儿相同有两年时间了.期间也做了大大小小的一些项目.近来抽出闲暇想把Android基础强化一下,之前在网上看到了郭霖郭大神的几篇博客.从中受益不少.于是花了近一周时间看完了郭神 ...

  9. 用kotlin方式打开《第一行代码：Android》之开发酷欧天气（1）

    参考:<第一行代码:Android>第2版--郭霖 注1:本文为原创,例子可参考郭前辈著作:<第一行代码:Android>第2版 注2:本文不赘述android开发的基本理论, ...

随机推荐

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. 【组织级项目管理】P2 MSP P3O

    组织级项目管理--有你,有我,有大家 在过去的2年,无论对于企业来讲,还是对于我们个人都有很多大脑的冲击,有几个词大家应该特别耳熟能详:转型,变革,敏捷,互联网+,组织的项目化管理等.就是这些让我们的 ...

  4. C# 条形码操作【源码下载】

    本篇介绍通过C#生成和读取一维码.二维码的操作. 目录 1. 介绍:介绍条形码.条形码的分类以及ZXing.Net类库. 2. 一维码操作:包含对一维码的生成.读取操作. 3. 二维码操作:包含对二维 ...

  5. CoreCRM 开发实录——想用国货不容易

    昨天(2016年12月29日)发了开始开发的文章.本来晚上准备在 Coding.NET 上添加几个任务开始搞起了.可是真的开始用的时候才发现:Coding.NET 的任务功能只针对私有的任务开放.我想 ...

  6. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测

    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...

  7. PHP之用户验证和标签推荐的简单使用

    本篇主要是讲解一些最简单的验证知识 效果图 bookmark_fns.php <?php require_once('output_fns.php'); require_once('db_fns ...

  8. PHP-----文件系统的交互

    本文讲解php中于文件交互中所使用的函数 代码示例 <html> <head> <title> File Detail </title> </he ...

  9. 玩转spring boot——结合JPA事务

    接着上篇 一.准备工作 修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  10. 微信公众号开发（一）--验证服务器地址的Java实现

    现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...