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. 前端性能优化：使用Array.prototype.join代替字符串连接

    来源:GBin1.com 有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法.在这个系列的第一篇中,我在代码中使用了基本字符连接: htmlS ...

  2. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何修改某个轴的数值单位

    在某个轴上双击,切换到Settings,然后可以再Unit中修改为角度,弧度,mm     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/aceta ...

  3. 算法笔记_051:荷兰国旗问题（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 现有n个红白蓝三种不同颜色的小球,乱序排列在一起,请通过两两交换任意两个球,使得从左至右的球依次为红球.白球.蓝球.这个问题之所以叫荷兰国旗,是因为 ...

  4. react 执行 yarn build 后 去除 .js.map 文件

    map文件是帮助我们查看报错的位置的. map文件由devtool属性控制,如果不想要map,注释掉就可以,大约webpack.config.prod.js第57行: // devtool: shou ...

  5. 让你的 wowza server提供 RESTful web 服务

            有时我们 nginx 须要和 wowza 服务器交互以进行一些 LB 事宜:有时我们的管理员须要实时了解 wowza 服务器的一些其它状态信息(比方一些自己定义对象的状态等等).而用 ...

  6. [moses笔记]编译含有nplm的moses解码器

    ACL2014的best paper Fast and Robust Neural Network Joint Models for Statistical Machine Translation在S ...

  7. java 状态对象

    package cn.itcast.hibernate.sh.state; import org.hibernate.Session; import org.hibernate.Transaction ...

  8. Java成员变量与局部变量同名

    看到成员变量和局部变量同名这个知识点的时候一开始有点懵逼,想了一下其实特别简单. 先来看一个简单的代码. 首先我定义了一个Person类. public class Person { private ...

  9. Windows Visual Studio 下配置OpenGL

    很多同学不是很清楚OpenGL的配置,一个个帮忙配置也不是办法,干脆就写一篇教程好了. 本人使用的是Visual Studio 2015版本,对于Visual Studio 2012版本的配置会稍有不 ...

  10. python selenum ---如何定位一组元素

    使用findElements方法定位一组对象 定位一组对象一般用于以下场景: · 批量操作对象,比如将页面上所有的checkbox都勾上 · 先获取一组对象,再在这组对象中过滤出需要具体定位的一些对象 ...