HTML文件是什么?

q  HTML表示超文本标记语言(Hyper Text Markup Language)。

q  HTML文件是一个包含标记的文本文件。

q  这些标记保速浏览器怎样显示这个页面。

q  HTML文件必须有htm或者html扩展名。

q  HTML文件可以用一个简单的文本编辑器创建。

想不想尝试一下?

假如你运行的是windows系统,打开记事本,在其中输入以下文本:

<html>
<head>
   <title>Title of
page</title>
</head>
   <body>
      This is my first homepage.
   <b>This text is bold</b>
   </body>

</html>

将此文件保存为“mypage.htm”。

启动浏览器。在文件菜单中选择“打开”(或者“打开页面”),这时将出现一个对话框。选择“浏览”(或者“选择文件”),定位到你刚才创建的HTML文件——“mypage.htm”,选择它,单击“打开”。然后在对话框中,你将看到这个文件的地址,比如说:“C:\MyDocuments\mypage.htm”。单击“确定”,浏览器将显示此页面。

例子解释:

HTML文档中,第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>,这个标签告诉浏览器这是HTML文档的终止。

在<head>和</head>标签之间文本的是头信息。在浏览器窗口中,头信息是不被显示的。

在<title>和</title>标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。

在<body>和</body>标签之间的文本是正文,会被显示在浏览器中。

在<b>和</b>标签之间的文本会以加粗字体显示。

关于HTML编辑器:

用一些所见即所得的编辑器,比如frontpage,dreamwaver,你可以很容易创建一个页面,而不需要在纯文本中编写代码。

但是假如你想成为一名熟练的网络开发者,我们强烈推荐你用纯文本编辑器编写代码,这有助于学习HTML基础。

常见问题:

问:我编写完了HTML文件,但是不能在浏览器中看见结果,为什么?
答:请确认你保存了文件,并且使用了正确的文件名和扩展名,例如:“c:\mypage.htm”,并且确认你用浏览器打开时使用同样的文件名。

问:我编辑了HTML文件,但是修改结果并没有在浏览器中显示,为什么?
答:浏览器缓存了你的页面,所以它不需要两次读取同样的页面。你修改了这个页面,浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。

HTML元素:

HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。

HTML标签:

HTML标签用来组成HTML元素。

HTML标签两端有两个包括字符:“<”和“>”,这两个包括字符被称为角括号。

HTML标签通常成对出现,比如<b>和</b>。一对标签的前面一个是开始标签,第二个是结束标签,在开始和结束标签之间的文本是元素内容。

HTML标签是大小写无关的,<b>跟<B>表示的意思是一样的。

HTML元素:

回忆一下上面的HTML例子:

<html>
<head>
   <title>Title of
page</title>
</head>
   <body>
      This is my first homepage.
   <b>This text is bold</b>
   </body>

</html>

下面是一个HTML元素:

<b>This text
is bold</b>

此HTML元素以开始标签<b>起始, 内容是:This text is bold,以结束标签</b>中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。

下面也是一个HTML元素:

<body>
This is my first homepage.
<b>This text is bold</b>
</body>

此HTML标签以开始标签<body>起始,终止于结束标签</body>。<body>标签的目的是定义一个HTML元素,使其包含HTML文档的主体。

为什么使用小写标签?

我们刚说过,HTML标签是大小写无关的:<B>跟<b>含义相同。当你上网的时候,你会注意到多数教程在示例中使用大写的HTML标签,我们总是使用小写标签。为什么?

假如你想投入到下一代HTML中,你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签,XHTML(下一代HTML)也需要小写标签。

标签属性:

标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。

标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性,你可以告诉浏览器:你页面的背景色是红色的,就像这样:

<body
bgcolor="red">

标签<table>定义了一个HTML表格。使用一个附加的border属性,你可以告诉浏览器:这个表格是没有边框的,代码是:

<table
border="0">

属性通常由属性名和值成对出现,就像这样:name="value"。属性通常是附加给HTML元素的开始标签的。

引号样式:

属性值应该被包含在引号中。双引号是最常用的,但是单引号也可以使用。
在很少情况下,比如说属性值本身包含引号,使用单引号就很必要了。
比如:name='John
"ShotGun" Nelson'。
注意:中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。

HTML 文档的基本结构的更多相关文章

  1. Linux 文档与目录结构

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  2. Linux之文档与目录结构 目录的相关操作 Linux的文件系统

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  3. Linux之文档与目录结构 (/ 用法, 相对路径,绝对路径)

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  4. Linux--2 Linux之文档与目录结构、shell基本命令

    一.Linux之文档与目录结构 1.Linux之文档与目录结构 Linux目录结构的组织形式和Windows有很大的不同.Linux没有“盘(如C盘.D盘.E盘)”的概念,而是建立一个根"/ ...

  5. 运维 03 Linux之文档与目录结构

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  6. LaTeX文档的基本结构

    正文提纲的构建代码及注释: 显示效果: 目录结构与换行的代码及注释: 显示效果: 具体的有关的信息可以具体查看ctex文档,可以在导言区进行全局的设置,比如标题居中设置等.

  7. Linux之文档与目录结构

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  8. 5,Linux之文档与目录结构

    Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到某一个目录下,用户通过操作目录来 ...

  9. linux文档与目录结构

    Linux文件系统结构 本文转自 https://www.cnblogs.com/pyyu/p/9213237.html Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“ ...

随机推荐

  1. BEA公司的weblogic是什么?有什么特点?

    转自:http://zhidao.baidu.com/link?url=J9obKwHhuh1sdLoBC3pILeaq1nz_tcpScggBNeS3D0GzAz9FI002vlS2xxJD4_z6 ...

  2. OpenCV 之 霍夫变换

    Hough 变换,对图像中直线的残缺部分.噪声.以及其它的共存结构不敏感,因此,具有很强的鲁棒性. 它常用来检测 直线和曲线 (圆形),识别图像中的几何形状,甚至可用来分割重叠或有部分遮挡的物体. 1 ...

  3. springMVC 头像裁剪上传并等比压

    第一次写头像裁剪上传,原本想着直接本地预览裁剪再上传,可是时间有限,jquery.jcrop貌似并没有对 假设是ie下图片预览效果是滤镜做的  做出对应处理,也没有时间去改;仅仅好将就一下先把图片上传 ...

  4. MP3中设置播放顺序的软件《闪存式MP3伴侣》

    给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...

  5. javascript脚本中使用json2.js解析json

    官方地址:https://github.com/douglascrockford/JSON-js   点击页面右下角“Download ZIP”下载   网页中引用json2.js,下面是一个简单的例 ...

  6. JMeter 十六:加密处理

    假设采用MD5进行加密 JMeter 内置的没有MD5加密方法.网上有说采用__MD5函数的,但是我在 Jmeter 2.13 以及 Jmeter 3.2 版本上都没有找到这个函数,官方文档也没有看到 ...

  7. 改动Dialog窗口的类名

     VS2013 的MFC project(project名: MobileLink).想要改动窗口的类名时,发现不是像设置窗口名一样调用一个函数能够实现的. 实现的注意问题,请看凝视. (1) 改 ...

  8. C Python类型互换

    从Python到C的转换用PyArg_Parse*系列函数,int PyArg_ParseTuple():把Python传过来的参数转为C:int PyArg_ParseTupleAndKeyword ...

  9. linux下的QQ执行玩法:pidgin-lwqq

    安装pidgin: sudo apt-get install pidgin 安装pidgin-lwqq: sudo add-apt-repository ppa:lainme/pidgin-lwqq ...

  10. 03-spring学习-自动装配

    自动装配 新建person类: package com.spring.bean.autowire; public class Person { private String name; private ...