HTML学习笔记

最新推荐文章于 2024-08-02 06:15:47 发布

weixin_34130389

最新推荐文章于 2024-08-02 06:15:47 发布

阅读量117

点赞数 1

文章标签： xhtml

摘自：http://www.w3school.com.cn/html/

HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

注释：在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

注释：图像的名称和尺寸是以属性的形式提供的。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签。

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

HTML 文本格式化实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本 此例演示如何使用 pre 标签对空行和空格进行控制。

“计算机输出”标签此例演示不同的“计算机输出”标签的显示效果。

地址此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写此例演示如何实现缩写或首字母缩写。

文字方向 此例演示如何改变文字的方向。

此例演示如何实现长短不一的引用语。

删除字效果和插入字效果 此例演示如何标记删除文本和插入文本。

文本格式化标签

“计算机输出”标签

引用、引用和术语定义

HTML CSS

实例

HTML中的样式

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

没有下划线的链接

本例演示如何使用样式属性做一个没有下划线的链接。

链接到一个外部样式表

本例演示如何 <link> 标签链接到一个外部样式表。

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例

创建超级链接

本例演示如何在 HTML 文档中创建链接。

将图像作为链接

本例演示如何使用图像作为链接。

在新的浏览器窗口打开链接 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。

链接到同一个页面的不同位置 本例演示如何使用链接跳转至文档的另一个部分

跳出框架 本例演示如何跳出框架，假如你的页面被固定在框架之内。

创建电子邮件链接 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

创建电子邮件链接 2 本例演示更加复杂的邮件链接。

HTML 链接标签

 HTML 超链接（链接）
 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 
 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 
 我们通过使用 <a> 标签在 HTML 中创建链接。 
 有两种使用 <a> 标签的方式：  
  通过使用 href 属性 - 创建指向另一个文档的链接 
通过使用 name 属性 - 创建文档内的书签 
HTML 链接语法
 链接的 HTML 代码很简单。它类似这样：

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

 提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
 HTML 链接 - target 属性
 使用 Target 属性，你可以定义被链接的文档在何处显示。 
 下面的这行会在新窗口打开文档：

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

 提示：锚的名称可以是任何你喜欢的名字。 
 提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。 
 实例
 首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

然后，我们在同一个文档中创建指向该锚的链接：

 您也可以在其他页面中创建指向该锚的链接：

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

基本的注意事项 - 有用的提示：

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

HTML 图像

通过使用 HTML，可以在文档中显示图像。

实例

插入图像

本例演示如何在网页中显示图像。

从不同的位置插入图片本例演示如何将其他文件夹或服务器的图片显示到网页中。

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

 URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
 替换文本属性（Alt）
 alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

图像标签

 HTML 表格
 实例 
   
    
    表格 
    
    
    这个例子演示如何在 HTML 文档中创建表格。

表格边框本例演示各种类型的表格边框

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

在浏览器显示如下：

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

在浏览器显示如下：

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

浏览器可能会这样显示：

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

在浏览器中显示如下：

没有边框的表格本例演示一个没有边框的表格。

表格中的表头(Heading) 本例演示如何显示表格表头。

空单元格本例展示如何使用 " " 处理没有内容的单元格。

带有标题的表格本例演示一个带标题 (caption) 的表格

跨行或跨列的表格单元格本例演示如何定义跨行或跨列的表格单元格。

表格内的标签本例演示如何显示在不同的元素内显示元素。

单元格边距(Cell padding) 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

单元格间距(Cell spacing) 本例演示如何使用 Cell spacing 增加单元格之间的距离。

向表格添加背景颜色或背景图像本例演示如何向表格添加背景。

向表格单元添加背景颜色或者背景图像本例演示如何向一个或者更多表格单元添加背景。

在表格单元中排列内容本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。

框架(frame)属性本例演示如何使用 "frame" 属性来控制围绕表格的边框。

表格标签

weixin_34130389

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

摘自：http://www.w3school.com.cn/html/ HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 &lt;html&gt; HTML 标签通常是成对出现的，比如 &lt;b&gt; 和 &lt;/b&gt; 标签对中的...
复制链接

扫一扫