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

HTML5/CSS3 初学者指南 - 第 2 部分，共 12 部分

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.99/5 (33投票s)

2014 年 3 月 30 日

CPOL

17分钟阅读

viewsIcon

96418

downloadIcon

366

构建基础

介绍 

本文是《HTML5/CSS3 初学者指南》系列的第 2 部分。本文将立即通过互动示例向您解释基本的 HTML 元素、它们的结构和实现。我们还将探讨一些基本的 HTML5 标签。

内容包括哪些？

图片和不同类型的超链接

图像

标签语法 标签限制 它有什么作用？ 演示
<img> 开始标签：必需，结束标签：不必需 只是创建一个空间来显示指定来源的图像。

上面显示的 BOB 的代码是...

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" />

这里 src 是 BOB 的位置 URL。

图像属性 - （摘自 此处）

New：HTML5 中的新功能。

Attribute 值 描述
align 顶部
底部
中间
左侧
右侧		 HTML5 不支持。
根据周围元素指定图像的对齐方式
alt 文本 指定图像的替代文本
border 像素 HTML5 不支持。
指定图像周围边框的宽度
crossoriginNew 匿名
使用凭证		 允许来自允许跨域访问的第三方网站的图像与画布一起使用
height 像素 指定图像的高度
hspace 像素 HTML5 不支持。
指定图像左右两侧的空白
ismap ismap 将图像指定为服务器端图像映射
longdesc URL HTML5 不支持。
指定包含图像长描述的文档的 URL
src  URL  指定图像的 URL
usemap  #mapname 指定图像为客户端图像映射
vspace  像素 HTML5 不支持。
指定图像顶部和底部的空白
width 像素 指定图像的宽度

如果您想了解有关这些属性的更多信息，可以点击它们了解更多。HTML5 中包含一个新属性 crossorigin，让我详细讨论一下。

crossorigin

其值为 anonymous 和 use-credentials。此属性指示图像是否使用 CORS (跨域资源共享) 获取。支持 CORS 的图像可以在 <canvas> 元素中重复使用而不会被污染。

  • 匿名
    执行跨域请求，但不发送凭据。如果服务器未向源站点提供凭据（通过未设置 Access-Control-Allow-Origin: HTTP header），图像将被污染，并且其使用将受到限制。
  • 使用凭证
    执行跨域请求并发送凭据。如果服务器未向源站点提供凭据，图像将被污染，并且其使用将受到限制。

如果图像不存在，则在没有 CORS 请求的情况下获取资源。如果图像无效，则将其视为 anonymous。要了解更多信息，请参阅 CORS 启用图像

超链接

超链接是数据的引用，可点击。有三种类型的 超链接，如下所述。

标签语法 标签限制 它有什么作用？ 演示
<a> 开始标签：必需，结束标签：必需 超链接指向整个文档或文档中的特定元素。 这是一个超链接，点击我可以在新窗口中打开我

其代码是...

<a href="https://codeproject.org.cn/Members/taditdash" target="_blank" title="Tadit Dash - Professional Profile">This is a Hyperlink, click me to open me on a new Window</a>

我们来详细讨论一下重要属性。

HTML 链接语法

链接的 HTML 代码是...

<a href="url">Link text</a>

href 属性指定链接的目的地。

示例
<a href="https://codeproject.org.cn/">Let's go to CodeProject</a>

它将显示为：我们去 CodeProject。

一个重要的事情是“链接文本”可以是图像或任何其他 HTML 元素。

示例
<a href="https://codeproject.org.cn/"><img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" /></a>

现在图像变成了链接，点击图像即可跳转到 Code Project 主页。

target 属性

值是

  • _blank - 在新窗口或新标签页中打开链接文档。
  • _parent - 在父框架中打开链接文档。
  • _self - 在与点击时相同的框架中打开链接文档（这是默认值）。
  • _top - 在窗口的整个主体中打开链接文档。
  • framename - 在命名框架中打开链接文档。

target 属性指定在哪里打开链接文档。以下示例将在新的浏览器窗口或新的标签页中打开链接文档

示例
<a href="https://codeproject.org.cn/" target="_blank">Let's go to CodeProject on a new Tab or Window</a>

它将显示为：让我们在新标签页或新窗口中前往 CodeProject

id 和 name 属性

id 或 name 属性可用于在 HTML 文档中创建书签。这些书签不显示，对读者不可见。

示例

本文中的所有标题都是一个带有 name 属性的 anchor。

<a name="Images and different kinds of hyperlinks">Images and different kinds of hyperlinks</a> 

如您所见，在本文中，标题被简单地解释，没有任何特殊效果。要创建指向同一文档中“图像和不同类型的超链接”标题的链接（正如我在“内容包括哪些？”标题下所做的那样），我们需要这样做：

<a href="#Images and different kinds of hyperlinks">Take me to "Images and different kinds of hyperlinks"</a>

它将显示为：带我去“图像和不同类型的超链接”。

从另一个页面/网站创建指向“图像和不同类型的超链接”的链接

<a href="https://codeproject.org.cn/Articles/750601/Beginners-Guide-to-HTML-CSS-Part-of#Images and different kinds of hyperlinks">Images and different kinds of hyperlinks</a>

锚点也可以通过 id 属性创建，例如

<a id="ImagesAndDifferentKindsOfHyperlinks">Images and different kinds of hyperlinks</a>

要创建指向此的链接，我们可以这样做

<a href="#ImagesAndDifferentKindsOfHyperlinks">Take me to "Images and different kinds of hyperlinks"</a> 

其他与 HTML 页面关联文档的标签

<link> 标签

  • 出现在 HTML 文档的 head 部分。
  • 该标签定义了文档和外部资源之间的关系。
  • 该标签最常用于链接到样式表。（它是一个文件，其中包含为 HTML 元素定义的所有样式属性。）
示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Link Tag Example</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css">
    <link rel="stylesheet" type="text/css" href="StyleSheet2.css">
    <link rel="stylesheet" type="text/css" href="StyleSheet3.css">
</head>
...the rest of the document... 

此处关系由 rel 属性定义，type 表示文档的 MIME (Multipurpose Internet Mail Extensions) 类型。您可以看到三个样式表链接到 HTML 页面。这些样式表中定义的样式或CSS属性将应用于 HTML 页面中相应的元素。

<Base> 标签

  • 出现在 HTML 文档的 head 部分。
  • 该标签指定文档中所有相对 URL（请参阅以下示例）的基本 URL/目标。
  • 一个文档中最多可以有一个元素。
示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Link Tag Example</title>
    <base href="http://www.somewebsite.com/somecategory/default.html" />
<body>
    <p>Have you seen this <a href="../someothercategory/someimage.gif"> Image</a>
</body>
</html>

相对 URI "../someothercategory/someimage.gif" 将解析为

http://www.somewebsite.com/someothercategory/someimage.gif

列表和表格

列表

为了在我们的 HTML 页面中表示信息列表，我们可以借助为它们定义的某些标签。所有列表都必须包含一个或多个列表元素。这仅仅意味着列表可以嵌套。让我们看一下不同类型的列表及其语法。

标签语法 标签限制 它有什么作用？ 演示
无序列表 - <ul> 开始标签：必需，结束标签：必需 列表以有序、无序或描述性方式表示信息列表。
  • 项目 1
  • 项目 2
  • 项目 3
有序列表 - <ol> 开始标签：必需，结束标签：必需
  1. 项目 1
  2. 项目 2
  3. 项目 3
描述列表 - <dl> 开始标签：必需，结束标签：必需
描述 1
项目1
描述 2
项目 2

我们来一一探讨。

无序列表

无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。

示例
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul> 

请参阅上表中“演示”列，了解它在浏览器中的渲染方式。

有序列表

有序列表以 <ol> 标签开始。每个列表项以 <li> 标签开始。列表项以数字标记。

示例
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

请参阅上表中“演示”列，了解它在浏览器中的渲染方式。

定义

描述列表是术语/名称的列表，每个术语/名称都有一个描述。<dl> 标签定义了一个描述列表。<dt> - 定义术语/名称，<dd> - 描述每个术语/名称。

示例
<dl>
    <dt>Description 1</dt>
    <dd>Item1</dd>
    <dt>Description 2</dt>
    <dd>Item 2</dd>
</dl>

请参阅上表中“演示”列，了解它在浏览器中的渲染方式。

表格

标签语法 标签限制 它有什么作用？ 演示
<table> 开始标签：必需，结束标签：必需 HTML 表格用于将数据（文本、预格式化文本、图像、链接、表单、表单字段、其他表格等）排列成行和列的单元格。

简单 HTML 表格。

塔迪特 虚线 印度
代码 项目 Canada

带有页眉、页脚。

这是页眉部分。
塔迪特 虚线 印度
代码 项目 Canada
这是页脚部分。

带标题。

名字 姓氏 国家
塔迪特 虚线 印度
代码 项目 Canada

我们来详细讨论一下 HTML 表格。

  • 表格用 <table> 标签定义。
  • 一个表格被分成多行，使用 <tr> 标签。（tr 代表表格行）
  • 行中的每个小框称为单元格，用 <td> 标签定义。（td 代表表格数据）
  • 行也可以用 <th> 标签分成标题。（th 代表表格标题）
  • <td> 元素是表中的数据容器。
  • <td> 元素可以包含各种 HTML 元素，如文本、图像、列表、其他表格等。

简单 HTML 表格

可以用 <table>、<tr> 和 <td> 标签定义。

示例
<table>
    <tr>
        <td>Tadit</td>
        <td>Dash</td>
        <td>India</td>
    </tr>
    <tr>
        <td>Code</td>
        <td>Project</td>
        <td>Canada</td>
    </tr>
</table>

请参阅上面表格的演示列，了解它在浏览器中的渲染方式。

带页眉和页脚的 HTML 表格

可以使用 <table>、<tr>、<td> 和 <th> 标签以及 <thead>、<tfoot> 和 <tbody> 标签来定义。

示例
<table>
    <thead>
        <tr>
            <th colspan="3">This is the Header Section.</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tadit</td>
            <td>Dash</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Code</td>
            <td>Project</td>
            <td>Canada</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">This is the Footer Section.</td>
        </tr>            
    </tfoot>
</table>

这里 colspan="3" 属性定义了该单元格将跨越表格的所有三列。

请参阅上面表格的演示列，了解它在浏览器中的渲染方式。

带标题的 HTML 表格

可以用 <table>、<tr> 和 <td> 以及 <th> 标签定义。

示例
<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Tadit</td>
        <td>Dash</td>
        <td>India</td>
    </tr>
    <tr>
        <td>Code</td>
        <td>Project</td>
        <td>Canada</td>
    </tr>
</table>

请参阅上面表格的演示列，了解它在浏览器中的渲染方式。

强调标签（粗体、删除线、斜体等）

这些标签用于强调文本。

标签语法 标签限制 它有什么作用？ 演示

删除线 - <s>

 开始标签：必需，结束标签：必需 指定删除线文本。以前使用 <strike> 来实现此目的，HTML5 中不再支持。 别划掉我。
强调 - <strong> 开始标签：必需，结束标签：必需 它定义了重要文本（通常是粗体），但允许通过 CSS 控制实际样式。因此在现代网页中首选。<b> 标签在以前的 HTML 版本中用于粗体文本，HTML5 规范建议不要使用。 我很重要，而且是粗体。
强调/斜体 - <em> 开始标签：必需，结束标签：必需 它呈现为强调文本（通常是斜体），但允许通过 CSS 控制实际样式。因此在现代网页中首选。<i> 标签在以前的 HTML 版本中用于斜体，HTML5 建议不要使用。 我被强调了。

其他常用标签和 HTML5 中的新基本标签

常用标签

以下是一些常用标签。

标签语法 标签限制 它有什么作用？ 演示
大号 - <big> 开始标签：必需，结束标签：必需 指定大号文本。内容以大字体显示。
<big> 标签在 HTML5 中不再支持。请改用 CSS。		 我是大。
块引用 - <blockquote> 开始标签：必需，结束标签：必需 指定斜体文本。内容显示为缩进块；仅应在长引用中使用。
我引用了。
换行 - <br> 开始标签：必需，结束标签：不必需 在段落内强制换行。 这是换行前的一行。
现在这一行在换行后。
居中 - <center> 开始标签：必需，结束标签：必需 内容在页面上居中（可以包括段落等）。
<center> 标签在 HTML5 中不再支持。请改用 CSS。
我在中间。
删除 - <del> 和插入 - <ins> 开始标签：必需，结束标签：必需 用于表示从文档的先前版本中删除的内容。通常与 ins (插入) 结合使用，ins 标记新版本。以删除线字体显示，如 <S>。 我是一个 行 单元格。
分隔 - <div> 开始标签：必需，结束标签：必需 一个 Division 包含元素，这些元素定义了一个组。Division 可以使用 CSS 样式进行设计。
我在一个背景颜色为红色的 div 里。
字体 - <font> 开始标签：必需，结束标签：必需 用于根据属性（例如 SIZE、COLOR、FACE）定义字体特性。
SIZE 设置大小，1-7，例如 SIZE="5"。
COLOR 设置文本颜色，例如 <font color="#FF0000"> 使文本变为红色。
Face，例如 face="Verdana"。
<font> 标签在 HTML5 中不再支持。请改用 CSS.		 我的尺寸是 5。
我的颜色是红色。
我的字体是 Verdana
标题 -
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>		 开始标签：必需，结束标签：必需 标题（1-6 级，即 h3 是 h2 副标题下的副标题）。

我是标题 1。

我是标题 2。

我是标题 3。

我是标题 4。

我是标题 5。
我是标题 6。
标记每个标题的大小。
注意：这里额外样式由 Code Project 样式应用。
水平线 - <hr> 开始标签：必需，结束标签：不必需 在页面上绘制水平线；用于指示不同部分之间的分隔。
属性：width，例如 width="50%" 使线条变为页面大小的一半；
size，例如 size="3" 使线条厚度为 3 像素
HTML5 中不支持任何布局属性。请改用 CSS。

水平线 -

宽度为 50% 的水平线 -
段落 - <p> 开始标签：必需，结束标签：必需 一段话。

我在一个背景颜色为绿色的段落里。
预格式化 - <pre> 开始标签：必需，结束标签：必需 预格式化文本。 
I am Pre-formatted.
小字 - <small> 开始标签：必需，结束标签：必需 内容以较小的字体显示 我是 小字。
跨度 - <span> 开始标签：必需，结束标签：必需 一个虚拟元素，包含行内内容。它与样式表一起使用。 我在一个背景颜色为金色的 Span 中。
下标 - <sub> 开始标签：必需，结束标签：必需 下标 我是 下标。
上标 - <sup> 开始标签：必需，结束标签：必需 上标 我是 上标。
下划线 - <u> 开始标签：必需，结束标签：必需 下划线文本。
注意：HTML 5 规范提醒开发者，其他元素几乎总是比 <u> 更合适。.		 我被下划线了。

HTML5 中的新基本标签

新的 <canvas> 元素

<canvas> 是一个 HTML 元素，可用于使用脚本（通常是 JavaScript）绘制图形。<canvas> 标签只是图形的容器，您必须使用脚本才能实际绘制图形。

示例

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var c= document.getElementById('myCanvas');

    var ctx = c.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0,0,80,100);
</script>

每个 canvas 都有一个绘图上下文。一旦我们在 DOM 中找到 <canvas> 元素（通过使用 document.getElementById() 或任何其他方法），那么我们应该调用它的 getContext() 方法。您必须将字符串 "2d" 传递给 getContext()。

演示此处

要了解更多关于 canvas 的信息，请查阅 HTML Canvas 参考 和博客 - LET’S CALL IT A DRAW(ING SURFACE)。

语义元素

新的 headers、footers、menus、sections 和 articles 元素。在 HTML5 之前，我们必须在页面中排列分区（divs），并使用其 ID 属性应用样式。现在，我们为页面的特定区域提供了特定标签。

以下是与 HTML4 设计的网页结构比较示例

  

HTML5 表单元素

标签语法 标签限制 它有什么作用？ 演示
数据列表 - <datalist> 开始标签：必需，结束标签：必需 定义输入控件的预定义选项。 演示 此处

注意： Internet Explorer 9 及更早版本或 Safari 不支持 datalist 标签。
Keygen - <keygen> 开始标签：必需，结束标签：不必需 定义密钥对生成器字段（用于表单）。 演示 此处

加密

注意：Internet Explorer 不支持 keygen 标签。
输出 - <output> 开始标签：必需，必需 定义计算结果。 演示 此处

注意：Internet Explorer 不支持 output 标签。
进度 - <progress> 开始标签：必需，必需 定义任务的进度。 演示 此处

下载进度


注意：Internet Explorer 9 及更早版本不支持 progress 标签。
度量 - <meter> 开始标签：必需，必需 在已知范围内定义标量测量（一个量规）。 演示 此处

显示仪表
10 分之 2

60%

注意：Internet Explorer 不支持 meter 标签。

新输入类型

HTML5 中引入了新的输入类型。以前为了获得这些类型的输入，我们必须实现脚本或 jQuery 插件，但现在有了这些类型，它减少了开发人员的工作量。

这些类型最有趣的地方在于，验证也是隐式处理的。作为开发人员，我们知道需要做多少工作才能验证输入字段中的数据。

因此，让我们详细讨论这些类型。新的输入类型如下。

  • color
    颜色类型用于从弹出颜色选择器中选择颜色。

    示例 
    Select a color: <input type="color" name="favcolor">
  • date
    日期类型允许用户选择日期。

    示例 
    Your Date Of Birth: <input type="date" name="bday">
  • datetime
    datetime 类型允许用户选择日期和时间（带时区）。

    示例 
    Select Date Time: <input type="datetime" name="daytime">
  • 本地日期时间
    datetime-local 类型允许用户选择日期和时间（无时区）。

    示例 
    Select Local Date Time: <input type="datetime-local" name="daytime">
  • email
    email 类型用于可以包含电子邮件地址的输入字段。

    示例 
    E-mail: <input type="email" name="email">
  • month
    month 类型允许选择月份和年份。

    示例 
    Select Month and Year: <input type="month" name="daymonth">
  • number
    number 类型用于可以包含数值的输入字段。

    示例 
    Select Number : <input type="number" name="quantity" min="1" max="5">
  • range
    range 类型用于可以包含一系列数字中某个值的输入字段。

    示例 
    <input type="range" name="points" min="1" max="10">
  • search
    search 类型用于搜索字段，但行为与文本字段相同。

    示例 
    Search: <input type="search" name="searchbox">
  • 电话
    tel 类型用于应包含电话号码的输入字段。

    示例 
    Telephone: <input type="tel" name="telephone">
  • 时间
    time 类型允许用户选择时间。

    示例 
    Select a time: <input type="time" name="yourTime">
  • url
    url 类型用于生成可包含 URL 地址的输入字段。在提交表单时，url 字段的值会自动验证。

    示例 
    Add your URL: <input type="url" name="homepage>
  • 周
    week 类型允许用户选择一周和年份。

    示例 
    Select a week: <input type="week" name="week_year">

媒体元素

标签语法 标签限制 它有什么作用？ 演示
音频 - <audio> 开始标签：必需，结束标签：必需 定义声音或音乐内容 演示 此处
视频 - <video> 开始标签：必需，结束标签：不必需 定义视频或电影内容。 演示 此处

来源 - <source>

 开始标签：必需，必需 定义计算结果。 演示 此处

嵌入 - <embed>

 开始标签：必需，必需 定义外部应用程序（如插件）的容器。 演示 此处

使用注释

注释标签用于在源代码中插入注释。注释不会在浏览器上渲染。注释通常用于解释代码，这在您以后编辑源代码时会有所帮助。当您有大量代码时，这对于管理代码非常有用。

语法

<!-- I am a comment. -->

因此，<!-- --> 中的任何内容都被浏览器解释为注释。

代码结构和可读性提示

好的代码总是格式良好的。因此，请确保您的代码通过正确的缩进看起来美观。如果您使用任何开发工具，请搜索该工具是否包含自动格式化代码的功能。

有一个在线工具可以为您做到这一点，那就是 jsfiddle。将 HTML 代码写入 HTML 框，然后点击菜单中的 “TidyUp” 选项。让我们看看它是如何工作的。

整理前

查看代码，看起来未格式化。

整理后

点击 TidyUp 菜单后，它会以正确的缩进和间距格式化代码。

在 Microsoft Visual Studio 中进行开发时，您可以使用快捷键 Control(Ctrl)-K-D。您需要一次按下此组合键。它将格式化您的代码并为您进行缩进，前提是代码语法正确。

浏览器支持 

HTML5 尚未完全被所有浏览器支持。这是因为浏览器正在按计划实现新的规范。

因此，当您编写任何 HTML5 代码时，请确保它在不同浏览器中都受支持。要了解这一点，您可以参考：

  • HTML5 Test - 提供 HTML5 分数以及可使用的详细信息
  • Can I Use - 提供主要浏览器不同功能的表格比较

您也可以在从 W3Schools 阅读每个 HTML 标签时，查看其“浏览器支持”部分。

关注点

首先，感谢 Code Project 举办的比赛，否则这篇小文章就不会诞生。

在研究这个主题的过程中，我学到了很多东西。每当我发现有趣和有用的东西时，我都会更新这个空间。

参考文献

http://www.w3.org/[^]
https://w3schools.org.cn/[^]
https://caniuse.cn/[^]
http://html5test.com/[^]
HTML5 快速启动 Web 应用程序[^]

历史 

2014 年 3 月 31 日 - 初始版本。

© . All rights reserved.