65.9K
CodeProject 正在变化。 阅读更多。
Home

HTML 和 CSS 入门 - 第 1/12 部分

Guruprasad.K.Basavaraju
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.97/5 (18投票s)

2014年3月31日

CPOL

7分钟阅读

viewsIcon

23750

downloadIcon

421

本文是为 HTML 和 CSS 新手提供的入门套件。

引言

本文是我们将学习HTML5和CSS3的6篇文章系列中的第一篇。

本文旨在介绍HTML的基础知识和HTML的历史。我们将使用常用的HTML标签构建一个小的HTML页面。完整的标签列表可以在W3Schools找到。

什么是HTML（超文本标记语言）？

历史

HTML和WWW（万维网）都起源于欧洲核子研究组织（CERN），位于瑞士日内瓦的粒子物理实验室。对于WEB和HTML这样的技术来说，这是一个出乎意料的发源地。

蒂姆·伯纳斯-李爵士是WEB和HTML的发明者，他当时在CERN的计算服务部门工作，并提出了这个概念。当时的需求是将不同的研究成果相互链接/引用，主要是为了避免将研究论文下载到每台个人电脑上。这导致了一个由电子形式的信息组成的“网络”，信息存储在世界各地的计算机上。Tim的NeXT计算机原型Web浏览器于1990年问世。从那时起，HTML就成为浏览器能够理解的语言，并且HTML已经经历了多次更新，最新的是HTML5。

随着越来越多的浏览器进入市场，需要对HTML进行标准化。如果有人还记得，曾经有一个名为Netscape的浏览器，当时它是市场领导者。他们有像<marquee>和<blink>这样的标签，这些标签只在他们的浏览器上有效，而在其他任何浏览器上都无效。这是HTML标准化重要性的一個例子。W3C（万维网联盟）于1995年推出了HTML 2.0，为开发人员和所有浏览器遵循的HTML提供了标准。2.0之后是1997年的3.2，1999年的4.01，以及2014年的5。

HTML和CSS的用途：

正如我们之前看到的，HTML是一种所有浏览器都能理解的通用语言。所以我们使用HTML来告诉浏览器在网页/Web文档上显示什么，而另一个名为CSS（层叠样式表）的语言则更好地告诉我们如何显示它。

CSS旨在定义Web文档的外观和感觉，并将演示部分与内容分离开来。可以说CSS是Web文档的表示层，它定义了如何渲染，而HTML是文档的结构定义。

我需要准备什么才能开始？

HTML可以在任何可以编辑文本的编辑器中进行编辑。记事本是最容易获得的编辑器，我们就用它吧。

以下是一些也可以使用的编辑器。

Notepad++

Microsoft Expression Web

Adobe Dreamweaver

更多内容可以在这里找到

让我们开始吧！！

网页包含什么？

HTML页面包含三件重要的事情

  1. 要显示的文本
  2. 要显示的图片
  3. 以及页面的结构，它定义了文本和图片的显示位置和方式。

编写HTML文件就像撰写您想要显示的文本以及您希望它们显示的方式。所有HTML文档都有一个必需的结构，包括以下声明和标签：

  • Doctype - 用于指示Web浏览器正在使用哪个版本的HTML，并且位于HTML文档的最开头。
  • Html - 标记文档的开始和结束
  • Head - 用于概述任何元数据、文档标题以及指向任何外部文件的链接。包含在head标签中的任何上下文在实际网页本身中都是不可见的
  • Body - 要显示的网页内容
  • p - 段落标签，此标签定义一个段落。浏览器会在每个<p>元素之前和之后自动添加一些空格（边距）。可以使用CSS（使用margin属性）修改边距。
下面是一个简单的“Hello World”页面的示例。
<!--These are comments-->
<!--This signifies that the document should be parsed as HTML-->
<!DOCTYPE html>
<!--Beginning of the HTML document-->
<html>
<!--Head of the HTML-->
<head>
    <!--Title of the HTML Head - to be displayed as the page title-->
    <title>Hello World Page</title>
</head>
<!--Body of the HTML page - This will be the content of the page-->
<body>
    <p>Hello World!!</p>
</body>
<!--end of HTML page-->
</html>

标签具有简单的结构。它们以<字符开头，以>字符结尾。在<>字符之间是标签名称，可能还有一些属性，具体取决于标签。大多数属性还需要一个值。有些属性是必需的，有些是可选的。标签的一般形式是：

<tagname attribute1="value1" attribute2="value2" ... >

标签名称和属性名称不区分大小写，但某些属性值区分大小写。标签名称必须先出现，但属性的顺序无关紧要。所以你也可以这样写这个标签：

<TAGNAME ATTRIBUTE2="value2" ATTRIBUTE1="value1" ... >

DOCTYPE、HTML、Head、Body、P是上面代码中标签的示例。这些是HTML页面的一些基本标签。

保存和查看HTML页面

在看更多标签之前，让我们看看如何保存这段代码并查看HTML页面。

  1. 打开一个记事本实例，然后输入/复制粘贴上面的代码
  2. 将文件另存为C盘下的HelloWorld.Html
  3. 转到您计算机的C盘，然后双击HelloWorld.HTML
  4. 现在，HTML文件会在您的默认浏览器中打开，在本例中，它会像下面这样在Chrome中打开。

更多HTML标签。

让我们看看更多常用的HTML标签，并在我们的“Hello World”页面中使用它们。

正如我们之前看到的，Head标签包含其他不会在页面上显示的标签。以下是其中一些及其用法。

  1. Title - 正如我们在上面的示例中使用过的，它定义了你的页面标题会显示什么
  2. Style - 此标签用于定义HTML文档的样式信息。我们将在本系列的后续内容中深入介绍此标签。
  3. Base - 此标签指定文档中所有相对URL的基础URL/目标。整个HTML文档中只能有一个base标签。
  4. Link - 此标签定义HTML文档与外部文档之间的链接。最常用的是引用HTML文档中使用的样式表。
  5. Meta - 此标签提供有关文档的元数据信息。尽管它不会在页面上显示，但机器可以解析它。Meta元素通常用于指定页面描述、关键字、文档作者、最后修改日期和其他元数据。搜索引擎也经常使用它来搜索相关页面。

现在我们来看看一些常用的Body标签和属性

  1. Body属性
    1. text - 设置页面上的文本颜色
    2. bgcolor - 设置页面的背景颜色
    3. link - 设置页面上任何链接的颜色
    4. vlink - 设置页面上已访问链接的颜色
    5. alink - 设置活动链接（单击时）的颜色
  2. 文本标签
    1. <pre> - 创建预格式化文本
    2. <h1> - 此标签创建一个字体最大的标题，大小范围从H1到H6
    3. <b> - 此标签创建粗体文本
    4. <i> - 此标签使标签内的文本斜体化
    5. <font> - 此标签接受size、color等属性，并将其应用于标签内的文本。
  3. 链接
    1. <a href="URL"></a> - 创建一个超链接
    2. <a href="mailto:EMAIL"></a> - 创建一个mailto链接
    3. <a href="URL"><img src="URL"> </a> - 创建一个图像/链接
    4. <a name="NAME"></a> - 在文档中创建一个目标位置
    5. <a href="#NAME"></a> - 从文档中的其他位置链接到该目标位置
  4. 格式化
    1. <p></p> - 创建一个新段落
    2. <p align="left"> - 将段落左对齐（默认）、右对齐或居中对齐。
    3. <br> - 插入换行符
    4. <blockquote></blockquote> - 将文本缩进到两侧
    5. <ol></ol> - 创建一个编号列表
    6. <ul></ul> - 创建一个项目符号列表
    7. <li></li> - 在每个列表项之前，并根据所选列表类型添加编号或符号
    8. <img src="name"> - 添加图像
    9. <img src="name" align="left"> - 对齐图像：左、右、中；下、上、中
    10. <img src="name" border="1"> - 设置图像周围边框的大小
    11. <hr /> - 插入一条水平线
    12. <hr size="3" /> - 设置规则的大小（高度）
现在让我们尝试在“Hello World”页面中使用上述标签。
  • 以下是一些Head标签的示例，我已尝试在代码中使用注释标签进行解释。

<!--HTML头部-->

<head>
    <!--Title of the HTML Head - to be displayed as the page title-->
    <title>Hello World Page</title>
    <!-- Base tag to define the base folder for images-->
    <base href="C:/helloworld/images/" target="_blank" />
    <!--Meta tags with Meta data information-->
    <meta name="Author" content="Guru Prasad KB">
    <meta name="keywords" content="HTML">
    <meta name="description" content="HTML Beginners Guide">
</head>
  • 以下是一些Body标签的示例，我已尝试在代码中使用注释标签进行解释。
 <!--Body of the HTML page - This will be the content of the page-->
<body text ="green" bgcolor ="lightBlue" link ="blue" alink ="red" vlink ="purple">
    <br />
    
    <!--Heading Tag-->
    <h1> This is our main Heading</h1>
    
    <!--Paragraph--> 
    <p>
        Hello World!!
    </p>
    <!--:Line Break--> 
    <br />
    <!--Heading 2-->
    <h2> Link Tag Example</h2>
    <a href=""> Code Project HTML CSS articles</a>
    <br />
    <!--preformatted tag - preserves the format-->
    <pre>
        Text in a this element tag
        is displayed in a fixed-width
        font, and it preserves
        both      spaces and
        line breaks
    </pre>
    <!--Bold Tag and Italic Tag-->
    <br />
    <p>We are trying to Create a <b>Hello World</b> HTML page and this is really <i>FUN</i></p>
    <!--Text font tags-->
    <p><font size="25" color="red">I am some BIG sized text in RED Color</font></p>
    <!--Block quote to indent the following content from left and right of the Margins-->
    <blockquote>
    <!--Link tags examples-->
    <br />
    <a href="http:\\Codeprpoject.com"> Let's go to Code Project site, click here!!</a>
    <br />
    <a href="mailto:someone@codeproject.com">to Mail Mr.Someone at Codeproject, click here!!</a>
    <br />
    <a href="http:\\Codeproject.com"><img src="CodeprojectBob.png" /></a>
    </blockquote>
    <!--Ordered List Example-->
    <br />
    <p>My favorite fruits in order (Ordered List Example)</p>
    <ol>
        <li>Apples</li>
        <li>Oranges</li>
        <li>WaterMelons</li>
    </ol>
    <!--Horizantal line with size 3-->
    <hr size="3" />
    <!--Unordered Lists-->
    <p>States I have visited last year (UnOrdered List Example)</p>
    <ul>
        <li>Georgia</li>
        <li>Oregon</li>
        <li>Washington</li>
        <li>Nevada</li>
        <li>California</li>
    </ul>
</body>

参考文献

http://www.w3.org/People/Raggett/book4/ch02.html

https://w3schools.org.cn/html/DEFAULT.asp

https://w3schools.org.cn/html/html_intro.asp

http://www.jmarshall.com/easy/html/

© . All rights reserved.