面向初学者的HTML:今天学习编码HTML

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


从小企业主到创建班级项目的学生,甚至是个人博客或在线个人项目,HTML知识都非常有用。尽管必须学习编程语言的前景确实令人望而生畏,但好消息是HTML使用常用词,因此提取起来相当简单.

在本指南中,我们(希望)以易于理解的方式介绍了基础知识,非常适合初学者。但是,我们不会止步于基本知识,即使是经验丰富的网站管理员也会找到有用的技巧来扩展您的HTML知识。我们甚至将深入探讨XHTML,DHTML和HTML5中的最新内容.

初学者HTML

Contents

HTML 1-4的简要历史

HTML是Tim Berners-Lee在1980年代末和1990年代初发明的。首次“公开”发布于1991年。它基于较早的标记语言SGML(标准化通用标记语言).

HTML的主要创新是对超链接的使用。现在我们已经习惯了这一点,以至于很难理解当时这个想法是多么的革命.

该超链接允许任何文档引用任何其他文档,并提供对该其他文档的立即访问。超链接使万维网成为网络,而不仅仅是图书馆或数据库.

IETF采纳了HTML作为标准,并于1993年发布了第一个HTML提案。1995年,发布了第一个完整的正式规范HTML 2.0。到1997年,W3C接管了该标准的管理工作,并且发布了HTML 3.2。.

HTML 4.0于1997年底发布,第二年又进行了一些更新。此版本的标准及其三种变体(严格,过渡和框架集)在接下来的十年中定义了HTML.

它是网络上最具标志性的属性兴起时使用的版本:维基百科,谷歌,Facebook,WordPress,Myspace和AOL。如果您在2008年之前学习了如何构建网页,则几乎可以肯定学习了该版本.

除了HTML 4.0,还有一个名为XHTML的相关项目。它于2000年和2001年首次发布,作为基于XML的HTML 4.0实现。由于XML的语法比HTML严格,并且可以通过XML解析器轻松验证,因此认为引入XHTML会迫使Web内容作者创建更精确的文档.

在大多数情况下,这没有发生。实际上,XHTML以及HTML4的三种变体以及浏览器渲染的疯狂变化,导致了关于什么是“标准” HTML以及哪些不是“标准” HTML的普遍困惑。.

XHTML的显着效果是您必须用斜杠“关闭”空标签的想法。如果你有打字的习惯
而不只是
, 您可以感谢XHTML-这是XML语法要求,必须关闭所有标签.

通用HTML

通用HTML

从下面开始阅读,或使用右侧的导航跳到特定主题.

HTML基础

本节介绍HTML(用于编写网页的语言),并提供一些有关其历史和使用原因的背景知识.

什么是HTML?

HTML是超文本标记语言,一种用于创建文档和网页的格式。它最初由Tim Berners-Lee于1990年代初发明,并基于一种称为SGML(标准通用标记语言)的早期标记语言,该语言基于IBM在2000年开发的一种称为GML(通用标记语言)的早期格式。 1960年代.

HTML主要由匹配成对的,用括号括起来的成对的,有意义的文本标签组成(如此类)。标签提供含义,上下文和显示信息,以包围它们.

什么是标记语言?

想象一下您曾经阅读过的任何基于文本的文档:网站,书籍,PDF,Word文档,教堂公告。当然有文本,但还有其他内容:如何显示文本。有些字会变大或变小,有些会变成斜体或粗体,有些会变成不同的颜色或字体.

这些文档之一保存到的文件必须包含人类可读的文本以及有关显示的信息。已经尝试了许多不同的方法来完成此操作,最方便的方法是根据文本本身存储信息.

因此,例如,如果您想将某些文本设为粗体或斜体,则可以执行以下操作:

我想将[开始粗体]这些词加粗[结束粗体],将[开始斜体]这些词改为斜体[结束斜体].

从理论上讲,应该产生如下内容:

我要实现 这些话大胆 以及其他斜体字.

这些内联匹配的样式声明对称为标记,类似这样的东西几乎是每种标记语言的基础。但是上面显示的这种格式不是HTML,它只是一个小例子.

上面的示例存在很多问题,HTML(以及SGML和GML)的发明者提出了类似的建议,但要好得多:

  • 方括号通常用在文本中,因此保留它们以用于标记中可能会引起问题。相反,HTML使用尖括号: < 和 >.
  • 一遍又一遍地写开始和结束是非常乏味的。 HTML通过使用标记名称本身作为“开始”声明来简化此操作。前面带有斜杠(/)的标签名称用作结尾标签.
  • HTML并非使用完整的单词“粗体”和“斜体”,而是使用缩写来使键入速度更快,阅读起来也不太麻烦.

因此,考虑到这些因素,上面的示例将如下所示:

我要实现 这些话大胆斜体字.

我要实现 这些话大胆 以及其他斜体字.

最近,从明确声明印刷细节(例如 胆大 和斜体),而是使用标记来传达含义,而不仅仅是外观。因此, 不再建议使用标签。相反,首选标签是 和(强调)。因此,在当代文献中,上述句子为:

我要实现 这些话脱颖而出 并强调这些话.

我要实现 这些话脱颖而出 并强调这些话.

HTML的核心,没有什么比一组定义的标记标签更复杂的了.

什么是超文本?

超文本是一个在1960年代发明的单词,用于描述包含链接的文档,这些链接使读者可以跳转到文档中的其他位置或完全跳转到另一个文档。这些链接现在已经在现代网络中被视为理所当然,当计算机第一次成熟时,这是一个很大的问题.

内部和外部链接的“超级”概念对于在互联网上组织内容的方式如此具有革命性,以至于这个词在很多地方都可以看到:

  • HTML是“超文本标记语言”
  • http://代表“超文本传输​​协议”
  • 从一页到另一页的链接称为“超链接”,而指定链接指向的位置的数据属性称为“超引用”。

在何处以及如何使用HTML?

HTML几乎用于所有网页。您正在阅读的网页现在使用HTML。它是网站的默认语言.

它也可以用于其他类型的文档,例如电子书.

HTML文档是由Web浏览器(用于阅读此页面的应用程序)呈现的。 HTML呈现将隐藏所有标签,并根据这些标签显示的内容来更改其余内容的显示.

我需要学习HTML才能运行我的网站吗?

除非您打算成为网络开发人员并从头开始构建页面,否则您无需了解HTML的所有复杂细节。.

如果您仅使用博客平台,网站建设者或其他人设置的内容管理系统(CMS),则可能无需任何HTML就可以轻松通过–提供了可添加内容的“图形”编辑器到类似于用Mic​​rosoft Word或电子邮件撰写的博客.

但是,有时这些图形编辑器无法以正确的方式工作,有时您会想要做一些事情而又不明白为什么不能这样做。因此,强烈建议您如果要为网络写作,甚至只是常规的博客文章和公告,都应该对HTML基本概念有很好的了解。.

此外,还有有关如何构造HTML文档的详细信息,这些文档会对诸如搜索引擎优化(SEO)和数据聚合之类的事情产生影响。如果您有兴趣了解非人类访客如何浏览您的网站,了解HTML是一项重要技能.

同样,网站可访问性-具有视觉或其他障碍的人成功浏览网站的能力-越来越重要。盲人依靠计算机屏幕阅读器将网站转换为声音,并且底层HTML文档的质量和结构对屏幕阅读器正常工作的能力有很大影响.

在大多数情况下,HTML是当代互联网的通用底层语言。如果您想了解世界的运作方式,那么至少要熟悉HTML是一个好主意.

HTML的底线

HTML(超文本标记语言)是用于创建网页和其他基于Web的文档的语言。它主要由匹配的成对的带括号的标记对组成,其中包含有意义的文本部分。 Web浏览器未显示的标签用于提供有关如何显示文本和页面的信息.

HTML元素和标签

本节将仔细研究标记,它们是HTML的基本构建块。它涵盖了它们的工作方式,正常工作方式的一些例外情况以及关于标签属性的简短讨论.

标签结构

通常,匹配的标签对围绕它们所影响的文本部分。两对匹配的标记以及它们所包围的内容称为“元素”。

该元素以 "强大" 标签.

开头标签可以包含其他属性,这些属性提供有关标签内容以及如何显示它们的更多信息。这些属性被编写为名称-值对,并用等号(=)分隔,并将值放在引号中.

href ="http://example.com">这是一个链接。标签是一个 "一个" 对于 "锚," href属性(超级引用)指定链接指向的位置.

匹配对中不会出现一些标签,因为它们用于插入内容而不是描述文本。这些称为“空”或“空”标记,最常见的是用于插入图像的标记。 src属性用于指定图像的URL.

src ="images / html-for-beginners-learn-to-code-html-today.png" />

请注意,没有结束标记,因此没有封闭的文本。最后一个尖括号前的斜线(/> )用于“自动关闭”标签。这不是绝对必需的,但它很好地提醒您,以下内容将不包含在内。 (XHTML是必需的,XHTML将在本文后面进行讨论。)

还有其他几个空标签。两个很简单,很常见.

  • 插入换行符.
  • 插入水平线(线)分隔符.

其他人则不会插入视觉内容,而是用来提供有关页面本身的信息.

rel ="样式表" 类型="文字/ css" href ="theme.css" />

名称="描述" 内容="此页标题." />

此外,标记(用于向页面添加Javascript)可以为空,但不必为.

(有关,,和标签的更多信息,将在本指南的后面提供。)

块级与内联

除了提供有关文档本身信息的标签外,HTML标签分为两类:阻止和内联.

块元素

块元素表示内容的矩形块。他们之前和之后都有隐含的换行符。块元素包括段落内容,如段落(

),部门()和标题(

,

, 等等).

通常的做法是在其内容上方和下方的各行上键入大多数块级标签:

这是一个div.

但是,这并非总是如此,尤其是在标题上:

这是页面的标题

这是一个主要部分

段落中的一些内容.

块级元素可以嵌套,但是某些块级元素不能包含其他块级元素:

文章标题

文章的第一段.

段落和标题不能包含其他块级元素.

内联元素

内联元素是文本内使用的元素。胆大 ( ),斜体()和链接()都是内联元素.

内联元素有时称为“跨级别”元素。还有一个通用的span级别元素,简称为span()。它本身并不能做很多事情,但是可以通过使用元素来创建自定义类型的文本显示.

类="特殊文字">这文字很特别.

(有关如何制作class =的信息,请参见CSS部分。"特殊文字" 以特殊格式显示。)

有时这没有意义

图片 ( )感觉就像是块级元素—它们是矩形的,具有确定的尺寸,通常显示在文本流之外.

但是,它们实际上是内联元素。这样做的原因主要是保留了较不复杂的Web设计阶段的结果,但现在一直坚持下去。可以很容易地避免这种奇怪的含义,但是很容易知道。 (请参阅有关图像的部分以及有关CSS的部分。)

还有其他类似的怪异问题,当它们出现时将在本指南的后面部分进行介绍。.

有关属性的更多信息

几乎每个元素标签都可以包含属性。许多元素具有它们支持的一组特定属性(例如 和src =属性),但是所有元素类型都全局支持一些元素.

两种重要的属性类型是class和id.

href ="http://example.com" 类="示例链接" id ="链接27">该定位标记具有三个属性.

类属性

类属性用于将一个或多个元素标记为属于特定的“类”或组-可以用于以相同方式显示它们.

例如,通常使用无序列表(

    )作为菜单,并制作列表项(
  • )指向当前页面的外观看起来与同一列表中的所有其他链接不同.

    类="菜单">
    类="菜单项">
    href ="/家">家

  • 类="当前项目">
    href ="/关于">关于

    类="菜单项">
    href ="/联系">联系

一个元素可以具有多个类。多个类由class元素内的空格分隔.

类="第一首">
这是第一段,也是首字下沉类的一部分.

由于类之间用空格分隔,因此类名称中不得包含空格.

在CSS,JavaScript和其他语言中,元素的类在名称前用点号表示.

/ * CSS * /

.首先{
颜色:绿色;
}

上面的CSS代码意味着,在具有第一类的任何元素中,文本颜色应显示为绿色.

ID属性

ID属性的作用类似于Class属性,但是在概念上有所不同。它不是表示组中元素的成员身份,而是唯一地标识该元素。因此,任何给定页面上只能有一个具有任何特定ID的元素.

id ="页面标题">这是页面的标题

ID较少用于影响显示,而更多用于功能目的.

ID可以用于文档的内部链接,例如Wikipedia文章中的目录.

  1. href ="#介绍">介绍
  2. href ="#history_of_topic">主题历史

id ="介绍" 类="标头">介绍

介绍部分的文字.

id ="history_of_topic" 类="标头">

关于这个话题的一些历史.

请注意,这些部分的链接包括标签名称,并以井号或井号(#)开头。这是引用元素ID的标准方法:

/ * CSS * /

#介绍 {
font-size:14px;
}

其他属性

每个HTML标记都有与其特定用途有关的自己的可用属性集。例如,定义超链接的标签包括href(超引用)属性,该属性指定要链接到的URL。.

当我们在后面的部分中分别查看每个标签时,将更详细地介绍这些属性。.

还有许多“全局”属性-任何元素都可以具有的属性。随着它们的使用变得越来越相关,这些也将在后面详细介绍。.

评论标签

基本HTML标记中要覆盖的最后一点是注释。注释以尖括号开头,后跟一个感叹号和两个破折号。它们以两个破折号和一个尖括号括起来.

评论可能是多行.

何时使用

标签被搜索引擎认为是页面上最重要的标题,并从中寻找有关页面内容的线索。因此,如果可能的话,它应该与标签中的标签内容相匹配,并且它们只能是一个

任何页面上的元素.

在首页和博客索引页上,最好将您的网站标题放在

标签以及博客索引中文章的标题

标签.

但是,在单个文章页面上,帖子标题或文章本身应位于

标签,并在

甚至

标签.

同样,在基于类别或基于标签的存档页面上,通常最好将类别或标签名称放在

标签.
等级组织

将文章分成逻辑部分,并在文章内容中使用适当的标题标记,对SEO(对SEO)(对读者而言)非常(对读者而言)非常好。标题标记应以分层方式使用-如果

遵循

标记,它应该是下级部分的标题.

字幕

带有字幕的标题应 使用了两个不同的标题标签:

而是将整个标题和副标题放在单个标题标签中,并使用另一个标签定义关系:

本文的主要标题:
该文章的副标题

本文的主要标题: 类=“字幕”>该文章的副标题

小部件标题

侧边栏部分或小部件需要标题,但是从内容(SEO)角度来看,这些标题通常不相关。消息灵通的设计师使用

为此目的的标签,保留

,

, 和

与关键字相关的内容.
 

最近的帖子

  • href =“#”>帖子标题
  • href =“#”>帖子标题
  • href =“#”>帖子标题

封存

  • href =“#”>2015年6月
  • href =“#”>2015年5月
  • href =“#”>2015年4月

但是,如果您的页面内容中经常有很多小节需要使用

在您的主标题中,使用标题并没有什么不好
甚至
在侧边栏标题中.
标题作为链接目标

在一个特别长的文档中,最好不仅可以链接到整个页面,还可以链接到特定部分.

过去,只有锚标记( )可以用作链接的目标,但现在不再如此-任何元素都可以成为页面位置特定链接的目标.

此类链接的自然候选者是标题标签,因为它们用于标识各节的开头.

完成这项工作所需要做的就是添加一个唯一的 ID 标头元素的属性。指向该部分的链接只是页面URL,后跟井号( )和ID.




 id =“一些标题”>页面中途出现一些标题
href =“ http://example.com/page#some-headline”>点击这里去那里.
  • 这不好.
  • 这是错的.
  • 不支持.
  • 订购清单

    有序列表是编号或字母的列表。外部元素是

      , 和
    1. 标签再次用于每个项目.

      1. 收集内裤.
      2. ???
      3. 利润.
      1. 收集内裤.
      2. ???
      3. 利润.

        元素支持几个属性,这些属性会更改列表的编号方式.

        type属性可用于将默认的阿拉伯数字(1、2、3)更改为字母或罗马数字(大写或小写).

        类型="一世">
      1. 小写罗马数字1.
      2. 小写罗马数字2.
      3. 小写罗马数字3.
      1. 小写罗马数字1.
      2. 小写罗马数字2.
      3. 小写罗马数字3.

      类型选项包括:

      • 1-阿拉伯数字(1、2、3)-这是默认设置.
      • A-大写字母(A,B,C)
      • a-小写字母(a,b,c)
      • I-大写罗马数字(I,II,III)
      • i —小写罗马数字(i,ii,iii)

      start属性可用于以1以外的数字开始列表编号。此属性可用于数字或其他类型.

      开始="10">
    2. 巧克力
    3. 香草
    4. 机油
    类型="一世" 开始="8">
  • Telesphorus
  • gin
  • 皮乌斯
  • ice属
    1. 巧克力
    2. 香草
    3. 机油
    1. Telesphorus
    2. gin
    3. 皮乌斯
    4. ice属

    最后,reversed属性可用于按相反顺序对列表项进行编号。可以将其与其他任何一个属性(或两者)结合使用.

    走出起跑门!

    开始="-3">
  • 等一下.
  • 等一下.
  • 等一下.
  • 走!
  • 十大理由

    开始="10" 倒转>
  • 因为.
  • 因此,因此.
  • 优质教育
  • 等等.
  • 走出起跑门!

    1. 等一下.
    2. 等一下.
    3. 等一下.
    4. 走!

    十大理由

    1. 因为.
    2. 因此,因此.
    3. 优质教育
    4. 等等.

    关于这两个示例的注意事项:

    1. 开始属性可以为负.
    2. 即使列表颠倒,起始值为 第一 清单编号.
    3. 反向属性不需要指定值。这是因为它只有两个可能的值:true(存在)或false(不存在).
    4. 前十个(或类似倒计时)列表不需要以1结尾的开始属性,除非另行指定,否则它始终是反向列表中的最后一个数字。上面的示例实际上没有包含十个项目,因此有必要指定.
    5. 默认行为是增加每个后续列表项的数量。因此,如果要从负数“倒数”,则应 包括反向属性.
    说明/定义列表

    描述列表(或称“定义”列表,因为它们更通俗的称呼)与有序列表和无序列表有些不同。它们用于提供带有描述的术语列表,例如在词汇表中.

    整个列表都包装在标记中。列表中的每个术语都带有标记(“定义术语”),并且每个术语后面都带有一个或多个元素(“定义说明”).

    清单类型

    订购清单 项目编号列表. 无序列表 项目符号列表. 定义清单 带有相关定义的术语列表. 每个术语可以具有一个或多个定义描述.

    清单类型

    订购清单 项目编号列表. 无序列表 项目符号列表. 定义清单 带有相关定义的术语列表. 每个术语可以具有一个或多个定义描述.

    描述列表的明显用途是词汇表或字典,但这不是唯一的标准用法.

    姓名列表:说明中包含联系信息。音轨标题列表:说明中有详细的音轨信息。产品供应清单:说明中包含有关产品的信息。统计信息列表:以统计信息名称为术语,并在说明中提供统计信息值

    任何时候只要您有一个需要更多细节的项目列表,说明列表就是一个好主意.

    定义列表的功能甚至比您可能已经意识到的还要强大,因为标记(描述)可以包含任何其他元素:段落,图像,其他列表。这意味着,只要您有单独的项目,而每个项目都需要任何种类的其他详细信息,则描述列表可能是内容非常丰富的标记方案.

    描述列表还有一种现成的用法,这颇有争议。它已作为示例包含在HTML4规范中,但已被HTML5删除:类似于脚本的对话.

    读者 您最喜欢的HTML实体是什么? 作者 有趣的你应该问!这是说明清单. 读者 真?有什么很棒的? 作者 它是如此的灵活.

    这看起来不好

    1. 第一项
    2. 第二项
      1. 子项目A.
      2. 子项目B.
        1. 子项目i.
        2. 子项目ii.
        3. 子项目iii.
      3. 子项目C.
    3. 项目三

    这是你必须要做的

    1. 第一项
    2. 第二项
      1. 子项目A.
      2. 子项目B.
        1. 子项目i.
        2. 子项目ii.
          1. 在层次结构中下降.
          2. 有谁需要这么多的列表级别?
            1. 这太荒谬了.
        3. 子项目iii.
      3. 子项目C.
    3. 项目三

    嵌套列表可以混合列表类型.

    这是一个有序列表:
    1. 蛋糕.
    2. 派.
    3. 蛋糕是一个谎言.
    这是一个无序列表,列出了列表类型:
    • 有序列表
    • 无序列表
    • 说明清单
    这是嵌套在有序列表内部的无序列表,该有序列表位于此描述列表的内部:
    1. 第一项.
    2. 第二项.
    3. 第三项,即嵌套列表.
      • 叉子
      • por
      • 筷子
    4. 这第四项只是为了更好地构筑嵌套列表.
    这是一个有序列表:
    1. 蛋糕.
    2. 派.
    3. 蛋糕是一个谎言.
    这是一个无序列表,列出了列表类型:
    • 有序列表
    • 无序列表
    • 说明清单
    这是嵌套在有序列表内部的无序列表,该有序列表位于此描述列表的内部:
    1. 第一项.
    2. 第二项.
    3. 第三项,即嵌套列表.
      • 叉子
      • por
      • 筷子
    4. 这第四项只是为了更好地构筑嵌套列表.

    请注意,列表不能嵌套在段落元素内(

    )。这是因为所有列表都是块级元素,而段落(也是块)只能包含跨度级元素.

    这有时可能很烦人,因为在正常的书面文本中,有时出于完全很好的理由,希望将列表包含在段落中。但是它根本不起作用.

    块引号和内联引号

    如果要引用某人或某物,请使用两个HTML quote元素之一.

    块引用

    块引用更为常见。这是由于通常的印刷约定:

    • 块引号(多行引号或摘录)以特殊方式显示(通常是缩进,有时是斜体),
    • 内联引号只是简单地标记为删节.
    是或不是,这就是问题.

    是或不是,这就是问题.

    无论引用的内容是文学作品,歌曲,其他博客文章的摘要还是您要回复的电子邮件,都可以使用Blockquotes引用大量的引用材料。.

    如果您想引用报价的来源,可以采用两种方法。可以给该元素一个cite属性,或者可以在源标题周围添加带标签的标签。您也可以同时做.

    引用="http://www.gutenberg.org/ebooks/2265"> 是或不是,这就是问题.
    —哈姆雷特,莎士比亚

    是或不是,这就是问题.
    —哈姆雷特,莎士比亚

    应当注意的是,标签应包含引用的原始作品的标题,并可以选择包含作者的姓名和其他信息(例如页码或行为和场景编号).

    如果将引号放在元素内部,并且引文本身链接到原始资料,则可以更好地标识引号结尾的引文。这样做会使标记内的cite属性变得多余,因此请删除它。最后,添加一个段落标签并删除破折号(-),以便仅包含信息,而不显示详细信息。.

    引用="http://www.gutenberg.org/ebooks/2265">

    是或不是,这就是问题.

    href ="http://www.gutenberg.org/ebooks/2265">哈姆雷特,威廉·莎士比亚

    块引用也可以包含,可以用来引入引号本身或引用原始标头信息.

    内联报价

    较少使用的引用元素是内联引用, .

    我在《哈姆雷特》中最喜欢的那句话是他说的时候cite ="http://www.gutenberg.org/ebooks/2265"> 是或不是,这就是问题.

    我在哈姆雷特(Hamlet)中最喜欢的一句话是,他说:“成为还是不成为”.

    这是不经常使用的,因为已经有一种完美的方式来表明您引用了某些内容-使用引号.

    但是,使用标签代替简单的引号有一些优点.

    • 可以通过CSS更改引号的显示,这对国际化很有帮助,因为并非所有国家/地区都使用相同的引号符号.
    • 文本是从其他来源引来的事实在语义上很明确,而引号可能出于其他原因而使用:
      • 口头上的“恐吓行情”
      • 提一个词或措辞
      • 报告没有源文本的真实对话
    • 包含引用引文链接到报价原始来源的机会.

    超连结

    HTML中最重要的标签之一是锚标记(),它定义了超链接。将文档链接到连接网络的能力是网络的本质,也是“超文本”的定义。

    该元素称为“锚”,因为它用于将链接的URL锚定到页面上的某些特定文本。 (这与连接整个文档而不是文本的特定部分的标签相反。)

    元素内的文本称为“锚文本”,链接的URL在href属性中指定.

    href ="http://example.com">这是到example.com的链接 这是到example.com的链接

    标签与href一起具有几个重要属性.

    • target指定在哪个窗口(或浏览器选项卡)中打开链接。默认值为同一窗口。如果您要打开一个新的标签集,target ="_空白".
    • 标题设置链接的工具提示或悬停文本。当用户将鼠标悬停在锚文本上时,这会显示在一个小的弹出窗口中。提供有关用户将要单击的内容的一些其他信息很有用.
    • rel报告链接文档和当前文档之间的关系。它具有几个可能的值:
      • 替代—链接的文档具有与当前文档相同的内容,但是格式为替代。最常用于链接到RSS feed.
      • 作者-链接的文档是当前文档或文章作者个人资料的主页.
      • 书签—指向文档中特定点的链接(例如,在创建页面上的目录时).
      • help —链接的文档为当前文档提供帮助文档.
      • 许可证—链接的文档是当前文档的许可证文本.
      • next —链接的文档是分页系列的下一部分。某些浏览器会预提取链接文档的内容,以便在用户最终单击它时加快呈现速度.
      • nofollow —链接的文档是 不认可 由当前文档的作者撰写。用于防止使SEO受益的链接页面。默认情况下,注释系统通常将此添加到用户输入的链接中.
      • noreferrer —用于防止用户单击链接时在HTTP请求标头中发送引用信息。通常,HTTP请求将指定用户的来源(当前页面)。这要求浏览器客户端忽略该信息.
      • 预取-与下一个类似,但不暗示实际的顺序关系。这要求浏览器在用户单击链接页面之前先获取它的内容,以便导航到下一页似乎是瞬时的.
      • prev — next的倒数,此值指定链接的文档是分页系列中的上一页。某些浏览器可能会预取内容.
      • 搜索-链接页面提供专门用于搜索当前文档和相关文档的界面.
      • 标签—链接的文档提供有关当前页面主题的上下文.

    rel属性未被非技术性网站创建者使用,这是一种以搜索引擎,聚合器和屏幕阅读器可以理解的方式将丰富的语义信息带入标记的好方法.

    例如:Google使用rel ="作者" 链接(如果已链接到Google+个人资料),以显示同一作者在搜索结果中指向其他内容的链接。 – Google图像搜索包括按许可证搜索,查找知识共享许可内容以供重复使用的功能。该功能部分取决于rel ="执照" 属性用于知识共享和其他开放许可的链接。几个搜索引擎和新闻聚合站点使用rel =的锚文本和引用页面"标签" 链接以确定给定页面的主题.

    rel标签也可以用于微格式,这是在现有HTML属性(通常为rel和class)中包含其他语义信息的简单方法.

    例如,XFN微格式建议在链接到与您有关系的人的主页或个人资料页面时使用rel属性.

    下个月,我将在与href =的会议上度过整个周末"http://example.com/kami-profile" rel ="同事">香美会议在我家乡附近,所以我希望能够与href =一起吃午餐"http://example.com/dave-profile" rel ="父母">我爸.

    还有其他几种使用rel标签的微格式,以及将这种语义信息包含在网站标记中的其他方法。这些将在“语义HTML”部分中介绍。.

    文字装饰

    在段落或其他元素中有许多用于基本文本标记的简单标签.

    胆大

    有两个可用于制作文本的标签 胆大.

    • 建议用于标记“重要”文本。它使包裹的文本显示为粗体,但也带有语义(该文本本身在某种程度上很重要).
    • 只是粗体显示文本而没有暗示任何特定的语义.
    斜体

    喜欢 胆大, 有两种方法可以使文本以斜体显示.

    • 表明包装文本以某种方式“强调”.
    • 只是斜体,没有附加特定的语义.
    强调

    尽管最近它不太流行,但是超链接()的标准文本显示是在其下划线。因此, 非链接下划线 不会经常使用。但是,有标记标签.

    • 是用于在文本下划线的通用标签。规范提出的用例强调了拼写错误的单词。 HTML5规范还希望您知道其他元素通常更合适,如果可能将其误认为是链接,请不要使用此元素.
    • 表示已插入的文本,通常与标记结合使用,以显示对文本所做的更改.

    该节目将在7:00 pm 8:00 pm开始.

    该节目将在7:00 pm 8:00 pm开始

    直通

    有两个元素标记要通过行进行对齐的文本。每个都有不同的含义.

    • 用于要被理解为已删除或更改的文本,并与上述标记一起使用.
    • 用于不再正确或不再相关的文本.

    HTML4中还有一个标记.

    尽管规格说明和的规格在理论上稍有不同,但专家们并未就差异的实际细节达成共识,或者在什么情况下需要一种而不是另一种.

    源代码和未处理的文本

    有两个元素用于显示您不想由浏览器呈现的文本或代码,而只是将“原始”显示为.

    • —用于代码块或未处理的文本.
    • —当您需要在文本中包含简短的单词或代码短语时使用.

    它们默认都以等宽字体(通常是Courier)显示,保留空白,并且不呈现任何标签。.

    本指南大量使用和元素来显示源代码示例和讨论元素标签名称。.

    文字大小

    您可以使用两个没有特殊含义的元素来任意放大或缩小文本:

    大小调整元素最常见的用途是将页面或文章的字幕放入嵌套在标题标签内的元素中.

    通用元素

    如果您出于语义或样式目的需要标记特定长度的文本,但是没有一个现有的标签有意义,则可以使用通用元素以及类属性(和某些CSS)来创建所需的效果.

    我不确定为什么没有讽刺标签。也许只是不需要,因为class ="讽刺">音调很容易在互联网上阅读.

    / * CSS * / .讽刺{ 颜色:紫色; 字体样式:斜体; }

    .讽刺{
    颜色:紫色;
    字体样式:斜体;
    }

    我不确定为什么没有讽刺标签。也许不需要,因为在互联网上音色很容易阅读.

    分离器

    HTML提供了两个标签,用于在文本内添加分隔符.


    • 插入换行符
    • 插入一条水平线

    这两个元素均不需要结束标记,因为它们不包含任何文本。如果它可以帮助您更好地阅读源代码,则可以使用自动关闭的斜杠:
    和 .

    当您需要硬换行但需要其他解决方案(例如多个)时,换行符特别有用

    标签没有意​​义。诗歌或歌曲的歌词和地址是两个很好的例子.

    玫瑰是红色的
    紫罗兰是蓝色的
    押韵很难
    HTML5很棒.

    主大街123号.
    沃思堡,TX 76148

    玫瑰是红色的
    紫罗兰是蓝色的
    押韵很难
    HTML5很棒.

    主大街123号.
    沃思堡,TX 76148

    比看起来容易

    所有这些看起来似乎很复杂,但实际上并非如此。您经常需要使用的大多数标签都很容易记住:标题,段落,无序列表。您无需记住每个选项后面的所有不同选项或含义。只是要记住,任何常规的印刷项目(例如标题,列表,段落或链接)都可能具有现有的HTML标记来实现。如果您牢记这一点,则可以只写而不关注这些内容,然后查找您不记得的特定项目.

    也不要试图陷入困境。重要的是,您的标记应尽可能有意义,而又不会过于复杂。如果您不能确定两个或多个选项中的哪一个是最佳选择,请询问哪个更有意义。如果您找不到答案,请问哪个更简单。如果您仍然不能决定,请选择一个-如果它们看起来相似,那么它的工作方式可能不会有很大的不同.

    结构化HTML

    本节说明HTML文档的整体结构,包括和中包含的信息类型。它还说明了如何组织典型网页的各个部分。下面的HTML5部分将提供更多信息.

    基本的HTML文档结构

    HTML文档(网页)需要遵循一些基本的结构规则,才能正常工作并被网络浏览器正确读取.

    该文档必须首先声明DOCTYPE。这些年来,已经使用了几种不同的HTML(及相关)标准,因此,重要的是指定您的文档使用的是哪种类型的文档(哪种HTML标准)。.

    通常,今天,正确的DOCTYPE就是html。因此,HTML文档应以以下内容开头:

    html>

    这并不是正确意义上的HTML标记,而是告诉浏览器如何解释其后的所有其他标记.

    在DOCTYPE声明之后,开始标签是标签。标签的结尾将是文档的最后一行.

    在HTML标记内,您可以指定文档的语言(在这种情况下为英语).

    html> lang ="恩"> . . . . .

    标记中嵌套了两个部分,即和和。正文包含所有可见的内容,而标题包含有关文档本身的信息。这两个部分都没有.

    html> lang ="恩"> . . . . . .

    这是每个HTML文档的基本结构。一切基本上都是多余的.

    内容

    html文档的元素通常包含浏览器正确呈现文档所需的所有信息,以及描述内容的其他信息(以促进聚合器和漫游器的使用).

    元数据

    标签在中多次使用,以指定各种元数据(有关文档的数据).

    元标记是空标记,不需要结束标记。您可以使用自动关闭斜杠(/>),但这不是必需的(有些人甚至不建议这样做).

    字符编码

    有几种不同的通用方法可以对计算机内存中的字符(字母,数字和标点符号)进行编码。如果您未指定使用的是哪个,则网络浏览器可能会混乱并显示一些错误的字符.

    这些天,大多数时候,您要指定UTF-8字符集.

    (另一种常见的编码ASCII并未包含所有扩展字符,例如破折号和弯引号。如果您曾经见过奇怪的类型小故障,其中引号或撇号已替换为看似随机的字符,那是因为文档是用UTF-8,但使用ASCII显示-这意味着有人未在文档中指定正确的字符集。)

    字符集="utf-8">
    说明,作者和关键字

    有关文档的基本信息(由谁撰写以及文档的内容)也通过标签传达。它们每个都有两个属性:标签名称和标签内容.

    名称="描述" 内容="有关HTML的页面."> 名称="关键字" 内容="HTML,标签,元数据"> 名称="作者" 内容="亚当·迈克尔·伍德">

    对于SEO而言,这类信息尤其重要。它不再在SEO中扮演重要角色,但确实会影响它。更重要的是,在这些元素中拥有正确且详细的信息有助于建立语义网,其中所有内容都可以通过机器轻松找到和解析。.

    (如果使用内容管理系统,则通常在这些元标记中显示在编辑器屏幕中编写的标记和帖子描述。)

    标题

    标签出现在头部,通常没有任何属性。它包含标题.

    这是页面的标题.

    标题应该准确,并且如果可能,应与页面上可见的标题相匹配(通常在

    要么

    标题标签)。标题的内容通常显示在浏览器窗口顶部的标签中.

    它是 最好在标题中嵌套其他标签(例如 要么 ),因为它们通常无法正确显示.

    一个HTML文档只能指定一个标题.

    CSS链接

    用CSS(级联样式表)语言编写的样式表是单独的文档,它们提供有关如何在浏览器中显示页面的信息。有关大小,颜色,位置和字体的信息都包含在样式表中。将这些详细信息与主HTML文档分开可以更轻松地更改它们,而不会影响文档本身的内容.

    使用标签将CSS样式表链接到HTML文档中。 href属性指定样式表文件的URL,而rel属性指定该链接是样式表链接(还有其他类型的链接).

    href ="/css/style.css" rel ="样式表">
    RSS信息

    RSS —丰富的站点摘要,或称为Real Syndicate Syndicate,是一种向订阅者提供站点更新源(如新博客帖子)的方式,以便在发布新内容时通知他们,并可以从RSS中读取内容。读者而无需访问您的网站.

    如果您使用的是内容管理系统,它通常会为您创建一个RSS feed,这是一个XML文档,可通过其自己的URL获得。该URL应从您的博客主索引页面的链接到,以便RSS阅读器和Web浏览器可以轻松找到它。.

    rel ="备用" 类型="应用程序/ rss + xml" 标题="的RSS" href ="/feed.xml" />

    rel ="备用" 属性表示链接的URL包含相同的内容(博客文章列表),但是格式是另一种。 type属性指定格式的类型(RSS).

    其他资讯

    有关文档的许多其他详细信息经常出现在中。这些将在后面的相关部分中详细介绍。.

    Javascript链接

    可以从头链接到JS文件,这是一种常见的做法。但是,通常最好将它们放在文档的末尾.

    元素已完成的HTML文档示例

    html> lang ="恩"> 字符集="utf-8"> 名称="描述" 内容="有关HTML的页面."> 名称="关键字" 内容="HTML,标签,元数据"> 名称="作者" 内容="亚当·迈克尔·伍德"> href ="/css/style.css" rel ="样式表"> HTML指南 rel ="备用" 类型="应用程序/ rss + xml" 标题="的RSS" href ="/feed.xml" /> . . . .

    内容

    标签是HML文档的主要部分,可能包含各种内容.

    通常,HTML正文的结构可以分为几个部分,每个部分可能包含一个或多个子部分:

    • 标头
      • 徽标/品牌/网站标题
      • 主导航
      • 搜索栏
    • 主要内容
      • 一篇或多篇文章
      • 文章标题
      • 文章内容
      • 文章元数据(作者,标签,发布日期)
    • 侧边栏
      • 小部件
      • 辅助导航(按日期,类别或标签归档)
    • 页脚
      • 版权/许可信息
      • 第三导航
      • 联络方式
      • 地址/电话
      • 社会联系

    并非所有这些部分都将包含在每个页面中或以相同的方式出现。但是,这提供了一个很好的起点,为一个示例说明如何将这些不同的部分放到文档中.

    元素

    用于构造网页的最通用的块级元素是。曾经用于页面内容的每个部分和子部分.

    这导致了很多嵌套标签.

    类="标头"> 类="商标"> 类="主导航"> 类="搜索栏"> 类="页面内容"> 类="主要"> 类="文章"> 类="文章标题">

    文章标题

    类="文章元"> 类="文章内容">

    文章.

    内容.

    类="页脚"> 类="注释"> 类="侧边栏"> 类="页脚"> 类="执照"> 类="联系信息">

    由于最新的HTML标准(HTML5)中扩展了结构标签集,因此对于搜索引擎和其他从页面提取信息的系统(例如盲人屏幕阅读器)来说,可以更轻松地阅读到更有意义的内容.

    HTML表格

    本节介绍HTML表,包括有关如何标记各种用例的所有知识。涵盖了所有主要的表格元素和属性,包括表格标题,页脚,正文和列。本节提供一些具体建议,以解决表格标记内置的一些困难,并介绍实际操作.

    什么是桌子?

    HTML中的表格是一种呈现“表格数据”的方式-可以在电子表格中表示的信息。 HTML中的表是具有行和列的二维表.

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41

    表格数据有多种形式。与诸如定义列表之类的不同语法相反,判断是否应该在表中进行存储的最简单方法是问自己:“作为电子表格,这有意义吗?”

    如果将数据作为电子表格有意义,那么它是表的理想选择.

    表语法

    基本语法

    所有表都使用

    元素,表格行( )元素和表格单元格( 一次).

    )元素.

    仅这三个元素就足以构成一个简单的表。一张桌子建一排(

    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    表格标题:选项1

    通常希望将标题放在表的顶部。一种方法是替换普通表单元格( )和表格标题单元格().

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41

    这种方法的好处是它不会影响整个行,只会影响那些被指定为标题的单元格。那就是–如果那是您想要发生的事情,那么这是一个好处.

    表标题(和正文):选项2

    制作表格标题的另一种方法是将整个第一行(或什至几行)包装在一个table-head()元素中.

    完成此操作后,其余内容通常包装在table-body()元素中.

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41

    这样做可以对整个标题行进行样式设置.

    Thead { 背景颜色:黑色; 白颜色; font-weight:粗体; }

    #thead-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41

    也许更有趣的是,这还允许在不影响头部的情况下对桌子的主体进行样式设置.

    tbody tr:nth-​​child(odd){ 背景颜色:#eee; } tbody tr:nth-​​child(even){ 背景颜色:#fff; }

    #tbody-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }
    #tbody-example tbody tr:nth-​​child(odd){
    背景颜色:#eee;
    }
    #tbody-example tbody tr:nth-​​child(even){
    背景颜色:#fff;
    }

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    表格页脚

    除了表头和表主体,您还可以将一个或多个行定义为表脚()。如果您需要用不同的方式设置最后一行的样式,这很有用。最常见的是,如果最后一行是基于其上方各行的求和或计算,则可以使用此方法.

    Thead { 背景颜色:黑色; 白颜色; font-weight:粗体; } tbody tr:nth-​​child(odd){ 背景颜色:#eee; } tbody tr:nth-​​child(even){ 背景颜色:#fff; } foot脚{ 背景颜色:#222222; 白颜色; 字体样式:斜体; } 名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67

    #tfoot-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }
    #tfoot-example tbody tr:nth-​​child(odd){
    背景颜色:#eee;
    }
    #tfoot-example tbody tr:nth-​​child(even){
    背景颜色:#fff;
    }

    #tfoot-example tfoot {
    背景颜色:#222222;
    白颜色;
    字体样式:斜体;
    }

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67
    表格栏

    有时您需要设置表格列的样式。这可以通过使用列标记(在某种程度上)来实现.

    在HTML中,列的工作方式有些奇怪。由于表是由一系列行编写的,因此列被定义为表上的辅助覆盖.

    在表格的顶部,该元素定义如何在表格上放置列。里面是使用元素的各个列定义。每个跨一个或多个列并定义一个可样式化的实体.

    样式="背景色:青色;"> 样式="背景颜色:黄色;"> 样式="背景颜色:红色;"> 名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67
    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67

    上面的示例中的每个跨越一列表格单元格。如果我们想将样式作为一个单元应用于两个名称列,则可以使跨两个单元格列.

    span ="2" 样式="背景色:青色;"> 样式="背景颜色:黄色;"> 名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67
    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67

    不幸的是,使用标记存在一些问题:

    • 仅支持与背景,宽度,边框和可见性相关的样式。例如,这意味着您无法在中设置表的第一列的样式 胆大.
    • 因为既不是任何表节(head,body,footer)的父元素也不是子元素,所以您不能将目标定位到节中的特定列.
    • 此外,表格节和表格行比元素更具体,因此应用于节的样式将覆盖应用于节的样式。

    由于这些问题,对表样式的用途有限.

    有两种常见的解决方案:类属性和第n个子选择器.

    要使用类属性,只需将特定于列的类应用于每个 (和/或)元素.

    类="col1">名字 类="col2">姓 类="col3">年龄 类="col1">约翰 类="col2">史密斯 类="col3">31 类="col1">简 类="col2">白色 类="col3">32 类="col1">特里 类="col2">琼斯 类="col3">41 类="col1"> 类="col2">平均年龄 类="col3">34.67

    当然,这增加了很多严格要求的标记。更好的方法是使用:first-child,:nth-​​child和:last-child CSS选择器.

    例如,如果我们希望“名字”列为粗体,并且年龄以红色等宽字体显示,以及之前定义的其他页眉和页脚样式,该怎么办??

    Thead { 背景颜色:黑色; 白颜色; font-weight:粗体; } tbody tr:nth-​​child(odd){ 背景颜色:#eee; } tbody tr:nth-​​child(even){ 背景颜色:#fff; } foot脚{ 背景颜色:#222222; 白颜色; 字体样式:斜体; } td:第一个孩子{ font-weight:粗体; } td:last-child { 字体家族:等宽字体; 红色; 名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67

    #pseudocolumns-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }
    #pseudocolumns-example tbody tr:nth-​​child(odd){
    背景颜色:#eee;
    }
    #pseudocolumns-example tbody tr:nth-​​child(even){
    背景颜色:#fff;
    }

    #pseudocolumns-example tfoot {
    背景颜色:#222222;
    白颜色;
    字体样式:斜体;
    }

    #pseudocolumns-example td:first-child {
    font-weight:粗体;
    }

    #pseudocolumns-example td:last-child {
    字体家族:等宽字体;
    颜色:#a20000;
    }

    #pseudocolumns-example tfoot td:last-child {
    颜色:#ff3e3e;
    }

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67
    打破网格:rowspan和colspan

    有时,表格数据不能完全适合表创建的网格。如果您需要一个表格单元格来跨越两列或更多列,请使用colspan属性。如果需要跨越多个行,请使用rowspan.

    例如,我们的年龄表中的页脚行带有“平均年龄”标签。无需将其压缩到第二列。如果标签跨越最后一列的前两个单元格,看起来会更好.

    colspan ="2"> 平均年龄: 34.67

    #colspan-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }
    #colspan-example tbody tr:nth-​​child(odd){
    背景颜色:#eee;
    }
    #colspan-example tbody tr:nth-​​child(even){
    背景颜色:#fff;
    }

    #colspan-example tfoot {
    背景颜色:#222222;
    白颜色;
    字体样式:斜体;
    }

    名字 姓 年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41
    平均年龄 34.67

    可以使用类似的语法来跨越两行。 (为此,必须添加一列,因为我们没有任何适合合并单元格的候选对象。)

    名字 姓 年龄 同类群组 rowspan ="2">俄勒冈步道 colspan ="2">平均年龄
    约翰 史密斯 31
    白色 32
    特里 琼斯 41 X世代
    34.67

    #rowspan-example thead {
    背景颜色:黑色;
    白颜色;
    font-weight:粗体;
    }
    #rowspan-example tbody tr:nth-​​child(odd){
    背景颜色:#eee;
    }
    #rowspan-example tbody tr:nth-​​child(even){
    背景颜色:#fff;
    }

    #rowspan-example tfoot {
    背景颜色:#222222;
    白颜色;
    字体样式:斜体;
    }

    名字 姓 年龄 同类群组
    约翰 史密斯 31 俄勒冈步道
    白色 32
    特里 琼斯 41 X世代
    平均年龄 34.67

    什么不是桌子?

    确实不必说,但是:

    表不用于布局。不应将表格用作在整个文档级别制作列和标题的便捷方法.

    今天,有时这仍然是一个问题,因为在基于标准的Web浏览器和语义标记时代出现之前,许多人使用表(具有许多复杂的样式规则)来布局HTML文档。.

    即使如此,这还是一个坏主意,原因有很多:使得源文档几乎不可读,完全破坏了语义,几乎不可能在不重新编码所有页面的情况下重新设置页面样式.

    如今,有一个避免这种情况的新原因-一个胜过其他所有因素的原因:它不适用于移动设备。基于表格的布局绝对无法响应,无法优雅缩放以适合各种屏幕尺寸.

    除此之外,与正确的处理方式相比,基于表的布局要困难得多。只是不要做.

    桌边盒—并排翻译

    表格的一种非常常见的非数据用途是并行转换。请看以下来自Dantes The Divine Comedy的摘录.

    #inferno-open {
    边界:无;
    边框间距:10px;
    }

    Nel mezzo del cammin di nostra vita
    米特罗特瓦伊,
    通过时代smarrita的拉迪利塔.
    人生旅途中途
    我发现自己在一片森林黑暗中,
    因为已经失去了直接的途径.
    Ahi Quanto A dir Qual Ageècosa dura
    esta selva selvaggia e aspra e forte
    切尔·彭西耶·里诺瓦·拉普拉!
    啊,我!说一句话有多难
    这是什么森林野蛮,粗糙和严峻的环境,
    在思想上重新燃起了恐惧.
    坦达·阿马拉·切·波科·皮奥
    ma per trattar del ben chi vi trovai,
    迪尔·德·拉尔特·科西·奇沃·斯科特.
    如此痛苦,死亡仅此而已。
    但是在治疗方面,我发现,
    我可以谈谈我在那看到的其他事情吗.

    当然,这只是一张带有少许样式的桌子:

    #inferno-open { 边界:无; 边框间距:10px; } id ="地狱开场"> Nel mezzo del cammin di nostra vita
    米特罗特瓦伊,
    通过时代smarrita的拉迪利塔.
    人生旅途中途
    我发现自己在一片森林黑暗中,
    因为已经失去了直接的途径.
    Ahi Quanto A dir Qual Ageècosa dura
    esta selva selvaggia e aspra e forte
    切尔·彭西耶·里诺瓦·拉普拉!
    啊,我!说一句话有多难
    这是什么森林野蛮,粗糙和严峻的环境,
    在思想上重新燃起了恐惧.
    坦达·阿马拉·切·波科·皮奥
    ma per trattar del ben chi vi trovai,
    迪尔·德·拉尔特·科西·奇沃·斯科特.
    如此痛苦,死亡仅此而已。
    但是在治疗方面,我发现,
    我可以谈谈我在那看到的其他事情吗.

    在此示例中使用表的好处是每行根据行中所有单元格的内容自动调整其高度。即使一种语言比另一种语言更冗长,这也将翻译后的内容紧紧放在其来源旁边.

    许多开发人员将这种模式用于翻译后的文本,这非常好。但是,可能有更好的方法.

    考虑以下HTML:

    id ="canto-1"> 类="义大利文"> id ="它1" 类="1"> Nel mezzo del cammin di nostra vita
    米特罗特瓦伊,
    通过时代smarrita的拉迪利塔.
    id ="它2" 类="2"> Ahi Quanto A dir Qual Ageècosa dura
    esta selva selvaggia e aspra e forte
    切尔·彭西耶·里诺瓦·拉普拉!
    id ="它3" 类="3"> 坦达·阿马拉·切·波科·皮奥
    ma per trattar del ben chi vi trovai,
    迪尔·德·拉尔特·科西·奇沃·斯科特.
    类="英语"> id ="en-1" 类="1"> 人生旅途中途
    我发现自己在一片森林黑暗中,
    因为已经失去了直接的途径.
    id ="en-2" 类="2"> 啊,我!说一句话有多难
    这是什么森林野蛮,粗糙和严峻的环境,
    在思想上重新燃起了恐惧.
    id ="en-3" 类="3"> 如此痛苦,死亡仅此而已。
    但是在治疗方面,我发现,
    我可以谈谈我在那看到的其他事情吗.

    使用CSS使两种语言彼此相邻浮动,并使用JS确保每对段落(en-1和it-2等)具有相同的高度,无需使用表即可创建相同的效果-基于布局.

    优点:

    • 某些屏幕可能不够宽,无法同时容纳两个文本列。使用这种方法,可以分别查看一个或另一个.
    • 这样就可以选择一个文本的多个段落进行复制和粘贴。对于基于表的版本,这是不可能的.

    缺点:

    • 需要JavaScript
    • 每个段落都必须在标记中标识.

    现实世界中的表

    表格的默认样式确实没有吸引力,因此很少使用。大多数前端UI框架(如Bootstrap和Skeleton)都提供了高度改进的默认表样式.

    即使您不使用前端UI框架,从一个轻量级的模块化框架中提取表的样式也是一个好主意。表格中有很多奇怪的样式边缘情况,如果您尝试从头开始修复样式,您可能不会覆盖.

    表格功能强大

    表可能是HTML中最复杂的标记结构,在过去它们被滥用以用作布局的容器。但是,当需要在页面上显示表格数据时,可以使用表格.

    HTML表格

    本节详细介绍HTML表单。涵盖了各种表单元素和用户输入界面,以及组织和样式化表单的提示.

    表格基础

    HTML表单是一组允许用户提供数据的UI元素,以及一种将该数据提交到服务器的机制.

    一个非常基本的示例如下所示:

    即使以这种简单的形式,我们也可以看到用户有机会输入数据(名字和姓氏)并将该数据发送到服务器.

    表单可能会变得非常复杂,由于有了HTML5,现在有许多有趣的输入类型,但是无论它们变得多么复杂,HTML表单的核心都是一样的:一系列用户输入元素以及一种提交表单的方法输入到服务器.

    表格如何运作

    在深入研究所有不同的用户界面元素之前,最好是清楚地了解将用户数据发送到服务器时表单是如何工作的.

    表单会创建一个HTTP请求-与浏览器在加载页面时发送的请求类型相同。该请求的内容由输入到表单中的值确定。来自服务器的响应与从页面加载接收的响应的类型基本相同-浏览器通过将响应加载为新页面来以相同的方式响应.

    换句话说:表单提交与新页面请求基本相同,不同之处在于该请求中包含通过表单输入提供的用户定义数据.

    请求的数据会发生服务器端脚本(PHP,Ruby等)的主题,因此我们不必为此担心.

    HTTP请求和表单方法

    表单可以发送两种不同类型的请求:

    • 开机自检
    • 得到

    这两种请求类型具有不同的含义,这导致它们的行为有所不同,因此应在不同的情况下使用它们.

    __POST和GET之间的语义差异

    GET是默认的HTTP请求,与在地址栏中键入地址时浏览器使用的请求类型相同。这是“获取”某些东西的要求.

    POST不是请求获取某物,而是请求发送或提交某物。您可以考虑张贴信件,张贴保释金或张贴标志.

    技术差异

    使用GET请求时,输入参数包含在URL中.

    http://example.com/search?term=thing+i+am+searaching+for

    对于POST请求,输入参数不包括在URL中,而是在请求的正文中发送.

    根据每种请求的含义,这里的区别是有意义的:

    • GET请求正在请求由URL定义的特定资源。因此,该请求的详细信息应包含在URL中,因为这些详细信息定义了该请求实际请求的资源.
    • POST请求正在将消息发送到特定地址。地址在URL中定义,消息在请求正文中定义.
    何时在表单中使用POST和GET

    如果使用表单来请求数据和信息(例如搜索表单),并且其主要目的不是添加或编辑内容,则最好使用GETrequest.

    其他指示GET是正确的选择:

    • 在表单中提交相同详细信息的两个不同的用户应获得相同的响应.
    • 表单的回复是您可能希望直接链接到的内容.
    • 除了记录流量和活动外,提交表单后的数据库与之前相同.
    • 该表格是搜索表格.
    • 用户使用表单是为了从您的网站获取一些信息,而不是向您提供信息.

    如果使用表格来提交信息,那么POST很可能是正确的选择.

    其他说明POST是正确的选择:

    • 两个不同的用户提交相同信息的可能性很小.
    • 单个用户多次提交完全相同的信息的可能性很小.
    • 该表格用于向站点提交信息,而不是从站点检索信息.
    • 直接链接到响应页面将毫无意义.
    • 提交表单后,您的数据库与之前不同.

    此外,有两个原因应该使用POST,即使GET请求出于其他原因更有意义:

    • 出于安全原因,最好不要将输入参数放入URL.
    • 使用GET请求的URL长度将超过2000个字符.
    在哪里定义POST或GET

    每个表单都使用GET或POST请求类型向服务器提交信息。这是通过元素中的method属性定义的.

    方法="得到"> 方法="开机自检">

    默认方法是GET,当POST是正确的选择时,这将导致很多不幸的GET使用。不要依赖默认值-使用适合您情况的正确方法.

    表单操作-请求的URL

    表单获取资源(由URL定义)或将信息发布到资源(由URL定义).

    资源的URL由action属性以格式定义.

    动作="search.php" 方法="得到"> 动作="编辑post.php" 方法="开机自检">

    与href和src属性一样,URL可以是相对的(action ="search.php")或绝对值(action ="http://example.com/search.php").

    如果省略action属性,则默认URL为当前页面。 (在正常情况下,这仍会触发页面的重新加载.

    的其他属性

    以下属性适用于该元素:

    • accept-charset —定义用于提交表单数据的字符集。默认值与文档字符集相同,因此通常不需要.
    • 操作-表单提交的目标URL。以上解释.
    • 自动完成功能—在支持的浏览器中启用自动完成功能。值是开还是关。默认值为开。可以在单个表单元素上覆盖此设置.
    • enctype —指定应如何编码表单数据。这仅适用于POST表单。值是:
      • application / x-www-form-urlencoded-所有字符在发送前均已编码。空格将转换为+符号,特殊字符将转换为ASCII HEX值。这是默认值.
      • multipart / form-data-不编码字符。如果您在表单中使用文件上传器,则这是必需的.
      • 文本/纯文本—空格被转换为+符号,但未对特殊字符进行编码.
    • 方法— GET或POST
    • name-表单的名称。包含一个通常是一个好主意,并且没有理由不能与id相同.
    • novalidate-指定表单数据在提交时不应自动进行验证。此属性不接受任何值。 (对此要小心。)
    • target-与锚链接()上的target属性等效,此属性指定应在何处显示表单的响应.
      • _self —在同一窗口中打开响应。这是默认值.
      • _blank —在新窗口或选项卡中打开响应.
      • _parent-在表单父窗口或框架中打开响应.
      • _top —在整个窗口中打开响应.
      • framename-如果您先前已在页面中打开并命名框架,则也可以指定打开响应的框架的名称.

    使用表单元素

    元素名称

    将表单提交到服务器时,请求(无论是POST还是GET)都包含用户输入到表单中的数据。此数据以一系列键值对的形式发送.

    每个表单元素的值是用户输入的数据。每个元素的键是该元素的名称属性。因此,至关重要的是,表单中的每个数据输入元素都必须具有唯一的name属性.

    动作="" 方法="发布"> 为="名字">名字 类型="文本" 名称="名字" id ="名字"> 为="名字">姓 类型="文本" 名称="姓" id ="姓"> 类型="提交">
    元素标签

    该元素非常重要,因为它定义了任何表单元素的标签.

    一些设计师不喜欢使用表单标签,因为他们更喜欢将标签文本放置到输入元素中.

    动作= 方法=“帖子”> 类型=“文本” 名称=“名字” 占位符=“名字”> 类型=“文本” 名称=“姓” 占位符=“姓”> 类型=“提交”>

    尽管这对于您的设计可能看起来更好,但是存在两个严重的可用性问题:

    • 屏幕阅读器使用这些标签来告诉盲人用户该字段的用途.
    • 并非所有浏览器都支持“占位符”属性.

    没有正确的标签,您可能会冒一些用户无法填写表格的风险.

    不幸的是,人们通常不包括 元素,但使用不正确.

    为了使标签元素正常工作, 对于 属性应包含的值 ID 输入元素上的属性.

     为=“名字”>名字
     类型=“文本” 名称=“名字” id =“名字”>

    这有两个目的:

    • 确保标记指定标签适用于哪个元素,有助于屏幕阅读器将标签连接到输入元素,以便盲人用户可以更好地浏览表单.
    • 单击标签就像单击输入元素一样。这极大地提高了可用性,尤其是在复选框之类的单选按钮和单选按钮上.

    除了使用 对于 属性,可以通过将标签包含到输入中来将标签绑定到输入 元件.

    
    
    颜色

    红色

    蓝色

    绿色

    设置默认值

    属性与表单输入元素的当前值相对应。通过包含一个值 , 您可以为任何表单元素设置默认(开始)状态.

     动作= 方法=“帖子”>
     为=“名字”>名字
     类型=“文本” 名称=“名字” id =“名字”=“约翰”>
     为=“姓”>
     类型=“文本” 名称=“姓” id =“姓” 值=“史密斯”>
     类型=“提交”>
    

    一些开发人员倾向于使用 属性,以提供占位符或用户提示文本。这通常是一个坏主意,因为如果不替换该值,则占位符文本将被发送到服务器,这几乎永远不会实现所需的操作.

    在上面的示例(一个人的名字)中,将“ John Smith”值用作占位符或对用户的提示是一个坏主意-用户可以将其提交给服务器。但是,如果这是(例如)个人资料页面,则用户可以在其中更新自己的信息 或保持不变, 然后以这种方式使用价值是有意义的.

    如果用户更改了表单元素上的输入数据,则 属性也会发生变化。如果要使用JavaScript获取元素值,则会发现它是更新后的值,而不是文档源中的原始值。.

    禁用元素

    可以通过添加以下元素来禁用大多数元素 残障人士 归因于他们。禁用的元素无法单击或编辑.

     动作= 方法=“帖子”>
     为=“名字”>名字
     类型=“文本” 名称=“名字” 值=“约翰” id =“名字”>
     为=“姓”>
     类型=“文本” 名称=“姓” 值=“史密斯” id =“姓” 残障人士>
     类型=“提交”>
    

    提交表单时,禁用的元素不会发送任何值,因此请谨慎使用此元素来显示(例如)您不希望用户更改的配置文件数据.

    元件

    最重要且用途最广泛的表单元素是 . 与大多数具有一种功能的其他表单元素不同, 元素用于多种功能,从简单的文本到复杂的交互到按钮(表单上的提交按钮通常是 元件).

    输入控件的不同类型由 类型 的属性 元件.

    类型:文字

    最基本(也是默认)的输入类型是 文本. 这定义了单行文本输入,该文本输入将用于登录表单中的用户名或用于在搜索表单中输入查询.

    类型=“文本”>

    清单 属性可用于指定输入的预定义值列表.

    类型=“文本” 清单=“选项”> id =“选项”> 值=“红色”> 值=“绿色”> 值=“蓝色”>
    类型:提交

    第二种最基本的输入类型是 提交 输入,定义表单提交按钮.

     类型=“提交”>

    提交按钮上的默认文本为“提交”。可以使用 属性.

    名称=“搜索”> 类型=“提交” 值=“搜索”>

    另一种输入类型创建与GUI类似的GUI 提交 类型- 纽扣 类型。但是,请勿使用 纽扣 用于通用表单提交。 (它不会工作。)并且不要使用 提交 表单中通用按钮的按钮-它将以错误的方式工作.

    类型:密码

    如果要遮盖输入到文本输入中的字符,请使用 密码 类型.

    为=“用户名”>用户名
    名称=“用户名” 类型=“文本” id =“用户名”>

    为=“密码”>密码
    类型=“密码” 名称=“密码” id =“密码”>

    类型=“提交” 值=“登录”>
    带有验证的文本输入类型

    几种输入类型创建相同的GUI(用于在其中键入文本的框),但创建用于验证输入的不同条件.

    例如, 电子邮件 进行类型检查,以确保输入的数据符合标准的电子邮件地址格式(某些文本,然后是 @ 符号,然后是包含至少一个点的文本).

    这些类型是:

    • 电子邮件
    • —字段仅接受数字.
    • 电话 —电话号码。 (在浏览器中不广泛支持对电话号码的验证。)
    • 网址 —仅接受格式正确的网址.

    提交表单时将验证这些值,除非 验证 属性在表单上指定,或者 形式验证 在各个元素上指定属性.

    具有日期或时间选择器的类型

    几种输入类型创建弹出UI元素,用于从日历中选择日期和/或时间。这些UI元素基于浏览器,并且不受普遍支持.

    这些类型是:

    • 日期
    • 约会时间
    • 本地日期时间
    • 时间
    为=“日期”>日期输入示例
    类型=“日期” 名称=“日期” id =“日期”>

    为=“约会时间”>日期时间输入示例
    类型=“约会时间” 名称=“约会时间” id =“约会时间”>

    为=“本地时间”> 日期时间本地示例
    类型=“本地时间” 名称=“本地时间” id =“本地时间”>

    为=“月”>月输入示例
    类型=“月” 名称=“月” id =“月”>

    为=“时间”>时间输入示例
    类型=“时间” 名称=“时间” id =“时间”>

    为=“周”>周输入示例
    类型=“周” 名称=“周” id =“周”>

    类型:收音机

    单选按钮是一种形式输入,其中只能选择一组中的一项.

    一组单选按钮中的每个按钮都是自己的 按钮,并且不需要将它们作为包含元素的子元素绑定在一起.

    将多个单选按钮绑定到一组的属性是 名称 属性.

    类型=“无线电” 名称=“形状” 值=“广场”> 广场
    类型=“无线电” 名称=“形状” 值=“圈”>
    类型=“无线电” 名称=“形状” 值=“三角形”> 三角形
    类型=“无线电” 名称=“颜色” 值=“红色”> 红色
    类型=“无线电” 名称=“颜色” 值=“蓝色”> 蓝色
    类型=“无线电” 名称=“颜色” 值=“绿色”> 绿色
    形状



    颜色



    提交给服务器的每个值 名称 是内容 每对选定单选按钮的属性。任何标签仅适用于用户,对传递给服务器的值没有影响.

    标记一组单选按钮中的输入的最佳方法是将 元素和标签文本合并为 元件。这样可以使标签文本可点击,更易于使用.

    
    
    类型=“无线电” 名称=“形状” 值=“广场”> 广场
    类型=“无线电” 名称=“形状” 值=“圈”>
    类型=“无线电” 名称=“形状” 值=“三角形”> 三角形
    类型=“无线电” 名称=“颜色” 值=“红色”> 红色
    类型=“无线电” 名称=“颜色” 值=“蓝色”> 蓝色
    类型=“无线电” 名称=“颜色” 值=“绿色”> 绿色
    形状

    广场

    三角形

    颜色

    红色

    蓝色

    绿色

    注意,由于 元素包装 元素 对于ID 不需要属性.

    类型:复选框

    复选框输入类型可用于定义两种类型的输入控件之一(两者看起来都像复选框).

    第一种类型是单个键,可能具有多个值(有时称为多选)。第二种类型是布尔(TRUE / FALSE)键.

    要创建可以分配给同一键的值数组,只需创建一组 复选框 输入相同 名称 属性.

    我喜欢的颜色
    类型=“复选框” 名称=“颜色” 值=“蓝色”> 蓝色
    类型=“复选框” 名称=“颜色” 值=“绿色”> 绿色
    类型=“复选框” 名称=“颜色” 值=“黄色”> 黄色
    类型=“复选框” 名称=“颜色” 值=“红色”> 红色
    我喜欢的颜色

    色彩

    蓝色

    绿色

    黄色

    红色

    在此示例中,多个 颜色 可以进行选择。它们每个都将作为请求中的各个参数发送到服务器。例如,如果在一个 得到 表单,请求的URL如下所示:

    http://example.com?color=blue&color=green&color=yellow&color=red

    您还可以单独使用复选框来表示布尔值(TRUE / FALSE).

    类型=“复选框” 名称=“ tos” 值=“真正”> 点击此处,即表示您同意我们的服务条款.

    点击此处,即表示您同意我们的服务条款.

    当然,任何 只要服务器端代码知道如何解释属性的存在,它就可以工作.

    在任何一种情况下,如果未选中任何框,则 名称 请求中未发送密钥.

    例如,在上面的颜色示例中,如果未选中任何选项,则提交的数据 不会 包括对 颜色 输入键。 (甚至没有空集。)

    类型:按钮

    可以使用输入类型的形式创建按钮 纽扣. 与其他输入类型不同,它在表单中没有特定含义,通常仅用于触发一些JavaScript操作.

     类型=“按钮” 值=“按钮标签” onclick =“警报('我是一个按钮!')”>
    类型:颜色

    颜色选择输入类型是HTML5的新增功能(仅在某些浏览器中受支持)。.

    在支持该功能的浏览器中,单击此元素将显示一个用于选择颜色的GUI。提交给服务器的值为HTML / CSS十六进制颜色值(前. 白色= #ffffff).

    为=“最喜欢的颜色”>什么是你最喜欢的颜色?
    类型=“颜色” 名称=“最喜欢的颜色” id =“最喜欢的颜色”>

    类型:范围

    HTML5中的新功能还取决于浏览器的支持, 范围 输入。此输入显示为滑块,用户可以水平移动.

    输入元素需要定义范围内的最大值和最小值。用户设置的值将与表单一起提交.

    
    
    为=“形式理解”>您对表格的理解程度如何?

    一点也不.
    类型=“范围” 名称=“形式理解” id =“形式理解” min =“ 0” 最大值=“ 100”> 很好.

    一点也不.

    很好.

    类型:图片

    图片 输入替换一个 提交 按钮,允许您将图像用作按钮.

    除了简单地更改按钮的工作方式之外,提交请求还包括用户在图像内单击的X和Y坐标。这允许提交表单充当服务器端图像映射.

    类型=“图片” src =“ example.jpg”>
    类型:文件

    表单可以包含带有以下内容的文件上传输入: 文件 类型。文件上传GUI的确切显示和功能由浏览器控制。还必须在服务器端指定文件处理(保存文件的位置).

    类型=“文件” 名称=“上传文件”>

    您可以使用来限制文件输入所接受的文件 接受 属性,它允许您指定扩展列表或MIME类型列表.

    
    
    
    类型=“文件” 名称=“扩展限制上载器” 接受=“ .png,.gif,.jpg,.jpeg”>
    类型=“文件” 名称=“哑剧限定上载器” 接受=“图像,图像/ png,图像/ gif,图像/ jpg,图像/ jpeg”>

    浏览器对文件扩展名的支持并不普遍,因此MIME类型列表可能是更好的选择。 (有关详细信息,请参见此MIME类型列表。)

    即使您使用 接受 属性以限制可以通过表单上传的文件扩展名,因此重要的是要验证服务器上的文件类型和文件内容。至少有两个原因:

    • 恶意(或粗心)用户可以使用错误的扩展名重命名文件。的 接受 文件上传器的限制仅查看扩展名,而不是实际文件格式,因此无法保证文件的类型正确.
    • 可以绕过表单并直接向服务器提交请求。 (这就是为什么应在服务器上验证所有输入的原因。)
    类型:隐藏

    您可以指定一个不可见的 输入 元素,其值将在提交表单时通过使用 .

     类型=“隐” 名称=“隐藏值” 值=>

    隐藏输入的最常见用途是用作页面上其他位置(通常通过JavaScript)生成的值的持有者。页面上的用户交互导致将值分配给隐藏的输入,然后将其包含在表单提交中.

    的属性

    元素具有大量属性。其中一些仅适用于特定的输入类型,而另一些可以与任何输入一起使用.

    • 接受 —按扩展名或MIME类型定义文件类型列表。仅用于 type =“ file”.
    • alt —定义替代文本。仅用于 type =“ image”.
    • 自动完成 —指定输入字段是否应自动完成。值是 要么 . 覆盖表单级别 自动完成 属性。仅适用于基于文本的输入.
    • 自动对焦 —指定 页面加载时应重点关注。不需要任何值。在文档中只能使用一次.
    • 已检查 —设置一个 无线电 要么 复选框 输入到检查状态.
    • 残障人士 —禁用 元件。提交表单时,禁用的元素不会发送其值。不需要任何值.
    • 形成 —指定一个
      到哪个 属于,用于 元素在 元件。价值就是 ID 目标表单。此属性不受普遍支持.
    • 形式行动 —指定要提交表单的URL。覆盖 行动 的属性
      本身,或取代它。这仅用于 提交 要么 图片 类型。使用此表格而非表格的唯一原因 行动 属性是表单是否需要具有不同操作的多个提交按钮.
    • 形式型 —指定提交数据的字符编码。覆盖 编码 的属性
      元件。这仅用于 提交图片 类型。值:
      • 应用程序/ x-www-form-urlencoded
      • 多部分/表单数据
      • 文字/纯文字
    • 形式方法 —指定方法(得到 要么 发布)的表单提交。覆盖 方法 的属性
      元件。这仅用于 提交图片 类型.
    • 形式验证 —指定在提交之前不应验证表单数据。覆盖 验证 的属性
      元件。这仅用于 提交图片 类型。此属性没有值.
    • 形式目标 —指定要在其中显示响应的浏览器上下文。覆盖 目标 的属性
      元件。这仅用于 提交图片 类型。值:
      • _空白
      • _自
      • _父母
      • _最佳
      • 框架名称
    • 高度 —指定像素的高度(以像素为单位) 图片 输入。最好使用CSS来指定.
    • 清单 —指定 ID 包含预定义选项的元素。仅用于基于文本的输入.
    • 最高 —指定数字或基于日期的输入的最大值.
    • 最长长度 —指定基于文本的输入中的最大字符数.
    • —指定数字或基于日期的输入的最小值.
    • —指定用户可以输入多个值。用于 电子邮件文件 输入类型。此属性没有值.
    • 名称 —指定输入的名称。用作提交表单时输入的键值对中的键。一个特别的 名称 应该为所有表单元素提供.
    • 图案 —定义用于验证基于文本的输入值的正则表达式.
    • 占位符 —为基于文本的输入定义占位符或“辅助”文本.
    • 只读 —指定用户不能编辑输入。行为类似于 残障人士 属性,只读输入除外 提交表单后,将其值发送到服务器。通常与JavaScript一起使用,以确保用户在满足特定条件之前不能编辑值,或者在满足特定条件后不能编辑值。此属性没有值.
    • 需要 —指定 必须具有值,否则将不提交表格。此属性没有值.
    • 尺寸 —指定基于文本的输入元素的宽度(以字符为单位)。使用CSS通常是一种更好的方法.
    • src —指定图片的网址 图片 输入.
    • —定义基于数字的输入中有效输入之间的间隔.
    • 类型 —指定类型 元件。默认为 文本. 并非所有浏览器都支持所有可能的值。值:
      • 纽扣
      • 复选框
      • 颜色
      • 日期
      • 约会时间
      • 本地日期时间
      • 电子邮件
      • 文件
      • 图片
      • 密码
      • 无线电
      • 范围
      • 重启
      • 搜索
      • 提交
      • 电话
      • 文本
      • 时间
      • 网址
    • —指定输入的起始值.
    • 宽度 —指定像素的宽度(以像素为单位) 图片 输入。使用CSS通常是一种更好的方法.

    文字区

    如果要输入短而短的文本行,请使用 元件。但是,如果您需要更大的区域才能收到更长的消息,请使用

    #textarea-example textarea {
    高度:6em;
    宽度:30em;
    }

    元素内的任何文本都将显示在文本区域中.


    为=“味精”>你的信息:

    名称=“味精” id =“味精”>此文本位于textarea元素内。用户将看到它。如果用户没有更改,它将与表单一起提交.

    #textarea-text-example textarea {
    高度:6em;
    宽度:30em;
    }

    你的信息:

    的属性为:

    • autofocus —指定在页面加载时应该聚焦。在文档上只能使用一次。此属性没有值.
    • cols —指定文本区域的宽度(以字符为单位)。用CSS可以更好地完成.
    • 禁用-禁用。提交表单后,禁用的表单元素不会将其值发送到服务器。此属性没有值.
    • form —指定所属的ID,以供使用,该ID不包含在元素内。并非所有浏览器都支持.
    • maxlength —指定最大长度的字符 .
    • name-定义的名称,并用作表示表单提交请求中的键/值对的键。所有表单元素都应包含唯一名称.
    • 占位符-定义在用户键入之前要在其中显示的占位符或辅助文本。.
    • readonly —指定用户不能编辑输入。行为与Disabled属性类似,除了readonly元素在提交表单时确实将其值发送到服务器。通常与JavaScript一起使用,以确保用户在满足特定条件之前不能编辑值,或者在满足特定条件后不能编辑值。此属性没有值.
    • required —指定必须具有一个值,否则将不提交表单。此属性没有值.
    • rows —指定的高度(以文本行为单位)。在某些情况下,这比使用CSS更可取(例如,当实际的行数相关时),但是对于简单定义高度,CSS通常是一个更好的选择.
    • wrap —指定输入是硬包装(在每个换行符处插入一个换行符)还是软包装(仅在用户定义一个换行符的地方插入一个换行符)。值软或硬.

    选择(下拉)

    要定义下拉选择器,请将该元素与子元素一起使用.

    为="最喜欢的颜色">什么是你最喜欢的颜色?
    名称="最喜欢的颜色" id ="最喜欢的颜色">
    值="红色">红色
    值="蓝色">蓝色
    值="绿色">绿色
    值="黄色">黄色

    什么是你最喜欢的颜色?
    红色
    蓝色
    绿色
    黄色

    可以将选项分组在一起,并使用元素给定组级别标签.

    为="最喜欢的颜色">什么是你最喜欢的颜色?
    名称="最喜欢的颜色" id ="最喜欢的颜色">
    标签="原色">
    值="红色">红色
    值="蓝色">蓝色
    值="黄色">黄色

    标签="次要颜色">
    值="绿色">绿色
    值="橙子">橙子
    值="紫色">紫色

    标签="实际上不是颜色">
    值="黑色">黑色
    值="白色">白色
    值="灰色">灰色

    什么是你最喜欢的颜色?
    红色
    蓝色
    黄色

    绿色
    橙子
    紫色

    黑色
    白色
    灰色

    元素内的内容提​​供了一个面向用户的标签,但是发送到服务器的值是由value属性定义的,而不是由元素的内容定义的.

    元素的属性:

    • autofocus —指定在页面加载时元素应该处于焦点。在文档上只能使用一次。此属性没有值.
    • 已禁用—禁用元素。提交表单时,禁用的元素不会将值发送到服务器。此属性没有值.
    • form —指定此元素所属的ID,以供使用,则该元素不包含在中。并非所有浏览器都支持.
    • 多个—指定用户可以选择多个。多个选择作为多个键值对发送。此属性没有值.
    • name —元素的名称,当表单提交到服务器时,用作代表该元素的键值对中的键.
    • required —指定元素必须具有选定的值,否则将不提交表单。此属性没有值.
    • size —指定可见选项的数量。预设为1.

    元素的属性为:

    • 已禁用—指定不能选择.
    • label —指定的标签,它将替换下拉显示中元素的内容.
    • selected —指定应该在页面加载时预先选择.
    • value-定义发送到服务器的值.

    整理表格

    通过将表单元素分组到容器中,可以简化大型或复杂表单的样式和使用。每个标题都可以带有一个元素.

    个人信息
    为="名字">名字
    名称="名字" id ="名字">

    为="姓">姓
    名称="姓" id ="姓">

    为="生日">生日
    名称="生日" id ="生日">

    最喜欢的东西
    为="最喜欢的颜色">最喜欢的颜色
    名称="最喜欢的颜色" id ="最喜欢的颜色">
    标签="原色">
    值="红色">红色
    值="蓝色">蓝色
    值="黄色">黄色

    标签="次要颜色">
    值="绿色">绿色
    值="橙子">橙子
    值="紫色">紫色

    标签="实际上不是颜色">
    值="黑色">黑色
    值="白色">白色
    值="灰色">灰色

    为="最喜欢的形状">最喜欢的形状
    名称="最喜欢的形状">
    值="三角形">三角形
    值="广场">广场
    值="圈">圈

    类型="提交">

    样式表

    在大多数浏览器中,表单元素的默认显示非常没有吸引力。除了按钮和下拉式UI的常规“战斗状态灰色”之外,通常还会出现对齐,行高和间距方面的严重问题.

    这导致两个问题:

    • 许多表单元素单独看起来很糟.
      • 例如,单选按钮和复选框通常无法正确地与其自己的标签对齐.
    • 表单元素在一起看起来不好.
      • 例如,同一行上的一个元素和一个下拉列表将无法正确对齐.

    这可能非常令人沮丧.

    有些问题(例如垂直高度和间距)在一些更流行的CSS重置中得到了解决,但并非全部.

    如果要从头开始为项目构建CSS样式表,请确保使用各种组合形式的所有表单元素来创建几个详细的示例表单。特别注意多列形式.

    由于表单样式的困难,使用流行的前端框架中的表单样式通常是一个好主意.

    HTML和CSS —简介

    本节介绍了Web样式语言CSS(CSS),并说明了它如何与HTML交互。尽管这不是本主题的完整指南,但它提供了有关站点设计的相当深入的概念性视图。涵盖的主题包括结构化CSS,“框模型”,文本样式,字体,动画,响应式设计以及前端框架的使用.

    什么是CSS?

    CSS代表级联样式表。它是一种用于定义应如何在页面上显示HTML文档的语言.

    它被称为“样式表”,是指文档应仅包含所有内容并且仅包含内容,并且单独的文档或表应包含有关样式的信息。.

    之所以称为“层叠”,是因为与文本相关的样式从父元素到子元素都显示“层叠”。例如,如果段落的CSS(

    )将文本颜色设置为蓝色,然后将其范围设置为粗体( )或该段落内的斜体()文字也将变为蓝色,除非有新的样式声明对其进行了更改.

    CSS的工作原理-基本概述

    如何在文档中包含CSS

    CSS可以包含在文档中的元素内,也可以包含在头部内的单独的.css文件(称为“样式表”)中,这些文件从HTML文档链接到该文件。.

    rel ="样式表" 类型="文字/ css" href ="theme.css">

    p {
    字体家族:佐治亚州, "英语字体格式一种", 衬线
    }

    您可以在一个文档中链接到多个样式表,并包含多个标签.

    通过链接的样式表包含CSS几乎比在页面上嵌入元素总是更好的做法。在特定情况下,嵌入样式有意义(例如,电子邮件),但是一般的经验法则是-如果可以链接到样式表,则应.

    样式声明

    样式表采用一系列样式声明的形式。这些标记如下:

    [选择器] {
    [属性]:[值];
    [属性]:[值];
    }

    / *评论在这里* /

    那是:

    • 选择器或元素标识符,用于指定要设置样式的内容。其中包括以下内容(还有更多):
      • 元素类型的名称:a,p,dl等。这会将样式应用于该类型的所有元素.
      • 类标识符—类名,以点(。)为前缀.
      • ID标识符— ID的名称,以井号(#)为前缀.
      • 以上之一,再加上其他一些特殊的选择器,例如:hover这样的伪类.
    • 花括号的开头,表示有关给定元素的样式规则的开始.
    • 样式规则表示为与冒号链接的属性值对,并以分号终止.
    • 右花括号表示该元素的样式规则的结尾.

    例如:

    html {
    颜色:#222222; / *文字颜色-非常深的灰色* /
    字体家族:佐治亚州, "英语字体格式一种", 加拉蒙德,衬线;
    font-size:14px;
    行高:22px;
    }

    / *这是一条评论。 * /

    #logo {/ *按元素ID样式* /
    颜色:#B20000;
    字体系列: "Helvetica Neue", Helvetica,Arial,无衬线;
    }

    .小部件{/ *元素类样式。 * /
    宽度:100%;
    边框:纯2px黑色;
    填充:22px 11px;
    }

    一个 {
    颜色:#008AE6;
    }

    a:悬停{
    颜色:#006EB8;
    文字装饰:下划线;
    }

    文件树

    许多人只是将HTML文档视为线性结构:首先是,然后是,然后是,然后是 .

    但是,HTML文档实际上是一棵树:

    • 的HTML
      • 标题
      • 身体
      • 标头
        • H1
        • 导航
      • 主要
        • p
          • 一个
          • 一个
          • 强大
            • 一个
      • 在旁边
        • 部分
        • 部分
        • 部分
      • 页脚

    每个元素嵌套在另一个元素内.

    在CSS中,某些样式声明会影响元素本身的大小或形状。这对其中的元素没有影响.

    但是其他样式会影响元素的内容,例如文本颜色,背景颜色,字体大小,间距等样式。据说这些样式是在文档树中“层叠”的。除非其他样式声明在更具体的位置将其覆盖,否则所有内容(包括其他元素)都会受到影响。.

    考虑以下示例:

    href ="">标题内的锚点

    href ="">

    `标题内的标题

    一个 {
    颜色:蓝色;
    }

    h1 {
    颜色:绿色;
    }

    哪个将是蓝色,哪个将是绿色?

    在这种情况下,第一行(标题内的锚点)将为蓝色,而另一行将为绿色.

    为什么?

    在第一个示例中,

    样式为绿色,因此其中的所有内容均应为绿色。但是,在那之后,是一个锚定了蓝色文本的锚。锚点更具体-更接近要设置样式的文本-因此以蓝色样式为准.

    在第二个示例中情况恰好相反。元素应具有蓝色内容,但标题将覆盖该样式,标题变为绿色.

    CSS选择器

    每个CSS声明均以选择器开头。这可以是元素的类型,类和ID或许多其他东西.

    有一种方法可以针对文档中的几乎所有元素定位-不仅可以通过类和ID,还可以通过文档中的位置,上下文和其他属性.

    选择器声明也可以合并。例如:

    #container div {
    }

    这将选择#container元素内的所有元素.

    这是一些更重要的选择器和选择器格式.

    • *-选择所有元素.
    • element-name-选择特定类型的所有元素.
    • .class-name-按类名选择元素.
    • #id-按ID选择元素.
    • element-name.class-name-选择与类名称匹配的特定类型的元素.
    • 选择器1,选择器2 —用逗号分隔的选择器匹配选择器1或选择器2指示的所有元素.
    • 选择器1选择器2 —一个选择器紧随另一个选择器之后,只有一个空格,它将选择所有与选择器2匹配的元素,它们都位于与选择器1匹配的元素之内.
    • 选择器1>选择器2 —选择所有与选择器2匹配的元素,它们是选择器1的直接子代.
    • [attribute]-方括号内的属性名称选择具有该属性的所有元素,无论其值如何.
    • [attribute = value]-选择具有特定属性-值对的元素.
    • [attribute〜= string]-选择元素,其中指定的属性值包含指示的字符串.
    • selector:first-child —选择作为其父元素的第一个子元素的元素。可以用作主要的p:first-child(例如)在页面上设置开始段落的样式.
    • selector :: first-letter —选择匹配元素的首字母。可用于创建首字下沉效果.
    • selector :: first-line —选择匹配元素中文本的第一行.
    • input input:focus —在具有焦点的窗体输入上设置样式.
    • a:悬停,a:活动,a:已访问—在交互周期的各个点上对锚点进行样式设置.

    除了这些,还有更多.

    CSS和页面结构—盒子模型

    CSS Box Model是CSS显示和定位块级元素的方式的解释.

    什么是块元素?

    块级元素是HTML元素,其宽度和高度以及(默认情况下)前后都有换行符。它们代表内容块。 (这与内联元素相反,内联元素表示文本范围,默认情况下不创建新行。)

    默认情况下,有许多元素是块级的:

    • - 联系信息.
    • —文章内容.
    • —除了内容.
    • —音频播放器.
    • —长(“块”)报价.
    • —绘画画布.
    • —定义说明.
    • —文件划分.
    • —定义列表.
    • —字段集标签.
    • —图形标题.
    • —带有标题的媒体(通常为图像).
    • —节或页脚.
    • —输入表格.
    • ,

      ,

      ,

      ,

      ,
      —头条新闻.

    • —节或页面标题.
    • —水平尺(分界线).
    • —包含本文档独有的主要内容.
    • —包含导航链接.
    • —如果不支持或关闭脚本,则使用的内容.
      1. —订购清单.
      2. —表单输出.
      3. —段落.

      4. —预格式化的文本.
      5. —网页部分.
      6. —桌子.
      7. —表脚.
        • —无序列表.
        • - 视频播放器.

        您还可以通过将样式分配为display:block;来使任何元素的行为类似于块级元素。.

        宽度和高度

        默认情况下,块级元素的宽度为其包含的块级元素的100%,包括任何边距,边框或填充。 (也就是说,整个元素(包括边距,边框和填充)将适合其容器。)

        块级元素的默认高度是其所有内容的高度,加上任何边距,边框或填充.

        大多数时候,在设计页面布局时,您要指定元素的宽度,而不是它们的高度。这是因为在任何给定的显示器上,显示窗口的宽度都是固定大小,但是页面可以沿任意高度上下滚动.

        关于指定宽度(和高度,但您不经常这样做)的怪异事情是,您指定的宽度将不是元素的总宽度.

        边距,边框和填充

        除了元素的内容之外,总宽度和总高度还由其他三个属性确定:

        • margin —元素周围的区域.
        • border —围绕元素周长的线.
        • padding —元素外围内的空间.

        任何背景声明(例如背景,背景颜色或背景图像)都会覆盖内容区域,填充和边框。边距不显示背景.

        .栏位{
        宽度:100%;
        背景颜色:#66FF33; / *柠檬绿* /
        }
        .在{
        宽度:100px;
        边距:25px;
        边框:黑色虚线15px;
        填充:25px;
        背景颜色:#90acff;
        颜色:#002346;
        font-weight:粗体;
        }

        类="领域">
        类="内">
        这是里面的一些文字。请注意,它的位置远离内部边缘。那是由于填充造成的.

        #margin-padding-border .field {
        宽度:100%;
        背景颜色:#66FF33; / *柠檬绿* /
        }
        #margin-padding-border .inside {
        宽度:100px;
        边距:25px;
        边框:黑色虚线15px;
        填充:25px;
        背景颜色:#90acff;
        颜色:#002346;
        font-weight:粗体;
        }

        这是里面的一些文字。请注意,它的位置远离内部边缘。那是由于填充造成的.

        注意:Margin,border和padding被添加到CSS声明的宽度中。 –高度由内容决定。 –内部边缘将其推离字段左侧,但顶部和底部的情况并非如此。这是CSS的怪癖。若要将内部元素推离其容器的顶部,请在包含的元素中添加填充。 –元素左右两侧的边距会影响其与其父元素以及同级元素的关系。 –元素顶部和底部的边距仅影响其与同级元素的关系。 –背景色填充内容,填充物和边框的区域,但不填充边距.

        因为总宽度包括声明的宽度以及任何边距,边框和填充的宽度,所以以下声明不起作用:

        div {
        宽度:100%;
        边距:5px;
        填充:15px;
        }

        如果您执行以下操作,则会发现展开超出其包含元素的右侧40px.

        在此示例中,由于这种想法似乎是使填充容器的整个宽度,因此正确的做法是简单地省略width声明。这将导致元素简单地自动填充其容器的宽度,而不会发生溢出.

        div {
        边距:5px;
        填充:15px;
        }

        但是,如果您想让一个元素仅占用可用宽度的一半,那么为了拥有并排的列,您就必须做些不同的事情.

        浮动元素

        块级元素的默认行为是使它们填充容器的整个宽度,并在其前后创建换行符。如果您将几个块级元素串联放置,它们将直接在页面的正下方显示,每个元素都位于上一个元素的下方:

        #容器 {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #container div {/ *定位为#container的子元素的所有div。 * /
        高度:50px;
        }
        #red {
        背景颜色:红色;
        }
        #蓝色 {
        背景颜色:蓝色;
        }
        #绿色 {
        背景颜色:绿色;
        }

        id ="容器">
        id ="红色">
        id ="蓝色">
        id ="绿色">

        #div-stack .container {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #div-stack .container div {
        高度:50px;
        }
        #div-stack .red {
        背景颜色:红色;
        }
        #div-stack .blue {
        背景颜色:蓝色;
        }
        #div-stack .green {
        背景颜色:绿色;
        }

        即使我们将每个内部小到可以连续排成一排的程度,换行符仍然会存在.

        #容器 {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #container div {
        高度:50px;
        宽度:50像素;
        }
        #red {
        背景颜色:红色;
        }
        #蓝色 {
        背景颜色:蓝色;
        }
        #绿色 {
        背景颜色:绿色;
        }

        id ="容器">
        id ="红色">
        id ="蓝色">
        id ="绿色">

        #div-stack-skinny .container {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #div-stack-skinny .container div {/ *定位为#container的子元素的所有div。 * /
        高度:50px;
        }
        #div-stack-skinny .red {
        背景颜色:红色;
        }
        #div-stack-skinny .blue {
        背景颜色:蓝色;
        }
        #div-stack-skinny .green {
        背景颜色:绿色;
        }

        为了使他们能够坐在彼此旁边,必须允许他们“漂浮”。在CSS中,“浮动”是指允许文档的其他元素在浮动元素周围流动。块元素可以浮动到左侧,右侧或中心(中心不常见)。如果将多个同级元素设置为浮动,则它们将彼此排成一行,并以其边距分隔.

        为了使这三个彩色的框状站点彼此相邻,我们只需要在所有三个中添加float:left或float:right.

        #容器 {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #container div {
        高度:50px;
        宽度:50像素;
        向左飘浮;
        }
        #red {
        背景颜色:红色;
        }
        #蓝色 {
        背景颜色:蓝色;
        }
        #绿色 {
        背景颜色:绿色;
        }

        id ="容器">
        id ="红色">
        id ="蓝色">
        id ="绿色">

        #div-float .container {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #div-float .container div {/ *定位所有属于#container子元素的div。 * /
        高度:50px;
        }
        #div-float .red {
        背景颜色:红色;
        }
        #div-float .blue {
        背景颜色:蓝色;
        }
        #div-float .green {
        背景颜色:绿色;
        }

        注意:

        • 第一个彩色块(#red)在容器的左侧,然后是#blue和#green.
        • 它们没有边距,因此它们彼此紧邻.
        • #容器内部的填充物将块向下推并远离左上角.

        但是-哦不-#container元素怎么了?为什么彩色块悬在外面?

        这就是浮点数的问题:默认情况下,浮点元素不会增加其容器的高度。因此,容器的高度取决于以下各项的总和:

        • 它的高度声明(如果没有)(如果没有)或非浮动内容(如果没有声明的高度)(在这种情况下,它也没有)
        • 垂直填充(顶部和底部)
        • 垂直边框(顶部和底部)
        • 垂直边距(顶部和底部)

        在这种情况下,#container元素的内部高度为零,总高度仅为其填充大小的2倍.

        这是一个非常烦人且非常普遍的问题。该解决方案(有点hack)称为clearfix解决方案。有几种方法可以实现这一点,但是对于我们的示例,我们将使用最简单的示例,在#container中添加溢出:auto。这个 不起作用 在所有浏览器或所有上下文中都可以使用,但是在大多数浏览器上都可以很好地工作,这对于此处的示例很好.

        这是添加clearfix的结果.

        #容器 {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        溢出:自动;
        }
        #container div {
        高度:50px;
        宽度:50像素;
        向左飘浮;
        }
        #red {
        背景颜色:红色;
        }
        #蓝色 {
        背景颜色:蓝色;
        }
        #绿色 {
        背景颜色:绿色;
        }

        id ="容器">
        id ="红色">
        id ="蓝色">
        id ="绿色">

        #div-float-fix .container {
        宽度:400px;
        背景颜色:#eeeeee;
        填充:20px;
        }
        #div-float-fix .container div {/ *定位所有属于#container子元素的div。 * /
        高度:50px;
        }
        #div-float-fix .red {
        背景颜色:红色;
        }
        #div-float-fix .blue {
        背景颜色:蓝色;
        }
        #div-float-fix .green {
        背景颜色:绿色;
        }

        现在,如果我们添加一些边距,填充,内容和不那么扎眼的颜色,您将看到如何将这个基本概念转变为标准的内容+边栏布局.

        #容器 {
        背景颜色:#eeeeee;
        溢出:自动;
        填充:20px;
        宽度:600像素;
        }

        主要{
        向左飘浮;
        背景颜色:#efefef;
        宽度:300像素;
        填充:15px;
        右边距:20px;
        }

        在旁边 {
        向左飘浮;
        背景颜色:#dedede;
        填充:15px;
        宽度:220像素;
        }

        id ="容器">

        洛普伊普森

        Lorem ipsum dolor坐下来,一直保持良好的状态。 Curabitur pretium,mi eu elementum ullamcorper,dui justo egestas turpis,sed auctor turpistellus eget augue。 Quisque vel malesuada擦除。盲fe非fe.

        在弓形虫,intercin lacicia lectus。 Vestibulum vulputate neque eget ante tincidunt sodales。 Quisque效果是turpis nec scelerisque。 Donec commodo,diam id consequat sodales,justo quam posuere libero,non fringilla ante dui id Tortor。 ipsum nec pellentesque中的sed功效.

        档案

        • 2015年5月
        • 2015年4月
        • 2015年3月
        • 2015年2月
        • 2015年1月

        #simple-sidebar .container {
        背景颜色:#eeeeee;
        溢出:自动;
        填充:20px;
        宽度:600像素;
        }

        #simple-sidebar main {
        向左飘浮;
        背景颜色:#efefef;
        宽度:300像素;
        填充:15px;
        右边距:20px;
        }

        #simple-sidebar aside {
        向左飘浮;
        背景颜色:#dedede;
        填充:15px;
        宽度:220像素;
        }

        洛普伊普森

        Lorem ipsum dolor坐下来,一直保持良好的状态。 Curabitur pretium,mi eu elementum ullamcorper,dui justo egestas turpis,sed auctor turpistellus eget augue。 Quisque vel malesuada擦除。盲fe非fe.

        在弓形虫,intercin lacicia lectus。 Vestibulum vulputate neque eget ante tincidunt sodales。 Quisque效果是turpis nec scelerisque。 Donec commodo,diam id consequat sodales,justo quam posuere libero,non fringilla ante dui id Tortor。 ipsum nec pellentesque中的sed功效.

        档案

        • 2015年5月
        • 2015年4月
        • 2015年3月
        • 2015年2月
        • 2015年1月

        #### __额外

        s__

        在理想的情况下,HTML文档中的每个元素在语义上都是有意义的,仅与文档的内容相关,而绝不会仅仅为了支持表示样式而添加.

        不幸的是,现实世界远非完美。在过去的十年中,情况已经好了很多,但是有时候您无缘无故地需要添加无关的元素,除了它可以使页面以正确的方式显示.

        大多数博客(可能是大多数网站)都遵循一种典型的模式:

        • 跨页面宽度的标题部分
        • 中心内容区域分为两列:
          • 主要内容宽度的2/3
          • 小部件侧栏宽度的1/3
        • 页脚部分跨越页面的宽度.

        此文档结构的理想标记是:

        不幸的是,除非and元素可以漂浮在包含元素内部,否则几乎没有办法使and元素正确地相邻放置。.

        因此,典型博客布局的最常见标记结构实际上是这样的:

        id ="容器">

        通常情况下,需要类似的容器元素才能使页面正确显示。不必担心-网络既是视觉媒体,又是基于文本的文档的集合.

        文字样式的CSS

        CSS用于文档表示的所有方面,包括页面结构和文本样式。可能有一整本关于CSS和印刷术的书,但是本指南将对关键概念进行简短介绍.

        级联

        考虑CSS中的文本样式时,记住级联样式表的级联部分尤为重要.

        添加影响内容(与元素的形状,大小或位置相对)的样式时,该样式将在文档树中级联。因此,适用于所有内容的任何样式都会受到影响,而适用于内部但外部的所有样式都会影响所有内容。.

        实际的含义是,您应该从常规到特定构建样式表。通常,您应该在中设置一个基本字体,以覆盖您的大部分内容,然后在不同的特定点设置所有与此字体有偏差的字体(例如菜单或按钮)。.

        任何与排版有关的样式声明都应包含在它适用的最一般(在树中最高)的位置。这将有助于避免样式重复.

        风格

        与文本样式和排版最相关的样式声明为:

        font-family:指定要使用的字体。 :最佳做法是声明一个字体列表,从您喜欢的字体开始,然后回退一系列,以通用字体系列结尾。 :包含空格的字体名称必须用引号引起来。 :字体家族:佐治亚州Garamond, "英语字体格式一种", 衬线

        font-size:指定文本的大小。 :可以是以像素为单位的大小(14px),基于父级文本大小的印刷em(1em),基于父级文本大小的百分比(115%),描述性大小名称(小,中,大)或基于父文本大小(较小,较大)的比较描述符。 :字体大小:14像素;

        line-height:指定文本行的高度。 :通常应大于字体大小。一行文本通常在行高内部居中。 :线条高度可以像素,ems或百分比指定。也可以将其设置为font-size的乘数。这是通过省略单位后缀来完成的。 :行高:1.4;

        margin-bottom:段落,标题,列表和其他印刷元素下方的页边距有助于提高整体可读性。 :必须在每个受影响的元素(而不是文档或部分)上设置此属性。 :通常,将下边距设置为等于行高可以产生最佳效果。 :底边距:1.4em;

        color:文本的默认颜色是黑色。您可能希望将其更改为不太明显的内容。 :颜色:#111111; :此外,链接具有一组默认颜色(表示是否已被访问)和表示其活动状态的颜色。 :通常,默认链接颜色不是特别理想。为了更改锚标记的各种状态的颜色,请使用:a:link(默认),a:hover,a:visited和a:active。 :a:hover {color:#3399FF; }

        font-weight:Font-weight是控制文本为粗体还是普通的属性。 :根据规格,您可以使用数值精确地设置重量。但是,大多数字体或浏览器都不能很好地支持此功能,这也不是常见的做法。 :font-weight的最常见用法是简单地指定粗体。 :strong {font-weight:bold; }

        font-style:字体样式用于表示斜体类型。 :相关值为正常值和斜体。 (斜线的第三种选择很少使用。:em {font-style:italic;}

        文本修饰:用于在文本范围内添加一行:上(上划线-很少使用),直通(下划线-用于删除的文本)或下(下划线-用于链接,有时用于标题) 。 :{{文字修饰:下划线; }

        text-transform:此属性允许您控制文本的大小写。 :相关值包括:大写(标题大小写),大写(全部大写)和小写(全部小写)。 :h3 {text-transform:大写; }

        font-variant:用于指定小写字母。它将内容中的所有小写字母设置为较小字体的大写字母。 :h1 {font-variant:small-caps; }

        @ font-face:这不是分配给元素的属性,但是在CSS文档中充当选择器。它用于定义新的字体系列。这使设计人员可以指定所需的任何字体,而不仅仅是依靠客户端计算机的系统字体。 :font-family属性定义新字体的名称(将在其他元素的font-family属性中使用),而src属性指定字体文件。 :并非所有浏览器都支持所有字体文件格式。支持最广泛的格式是TTF,OTF和WOFF(但不是WOFF2)。 :如果字体的变体(粗体,斜体)需要单独的字体文件,则可以设置多个@ font-face声明,每个声明具有不同的src属性,并带有指定其上下文的其他属性(例如,font-weight:bold) ;):@ font-face {font-family:myNewFont; src:url(myNewFont.woff;}

        印刷技巧

        Web排版很棘手。在大多数浏览器中,默认的文本显示确实没有吸引力,并且使文本看起来不错并易于阅读是一个不小的问题。.

        如果要设计网站排版,请记住以下提示.

        • 使用包含所有可能的印刷样式的文本页面。许多网络排版设计师忘记了描述列表(),块引用(),标题之后

          ,

          ,
          ),以及其他很少使用的样式。但是,即使它们很少使用,也确实会被使用。确保包括嵌套列表,带或不带标题的图像以及代码示例(如果您撰写有关技术的文章).
        • 注意元素边距如何相互之间以及与它们的上下文相互作用。例如,在标题上放置页边空白是很常见的。在某些情况下,这可能是有道理的,但如果它是中的第一个元素,则可能看起来不正确。同样,段落后的部分标题可能最终会重复行距,从而造成比预期更多的视觉中断.
        • 使用line-height的值作为缩放规则,以使页面文本保持恒定的节奏。大于全局行高的字体(例如标题)应将其行高设置为全局值的倍数。也将line-height值用于元素下方的边距和插入(缩进)部分.
        • 通常用双换行符来标识段落(用空白行距设置为与行高相同的值)。不缩进段落也很常见.
        • 列表设置在与行高(或其倍数)相同的距离(左距)时,看起来似乎更好。.
        • 说明列表的默认样式确实很差。通常情况下,它们看起来最好,整个列表都以粗体显示,并且以粗体显示.
        • 通常将页面的主要字体大小设置为12px,但这不是很容易理解。将14px或什至16px视为全局基本字体大小(取决于您的字体系列).
        • 将字体颜色保留为黑色(默认设置)是很常见的,但通常很深的灰色更有吸引力且更易读.
        • 自互联网开始以来,几乎所有浏览器中的链接()默认为蓝色。即使您想要更改链接的颜色以适合您的品牌(并且应该这样做),它也可能应该是蓝色阴影。另外,请注意在其他地方使用蓝色文本,因为它可能会向用户发出信号,表明他们应该能够单击该文本.
        • 类似地,带下划线的文本是几乎通用的信号,表明某些内容可单击。自行更改此约定后果自负.
        • 过去通常建议避免在网络上使用衬线字体,而仅使用无衬线字体。这是一个很好的建议,因为衬线字体在低分辨率屏幕上的渲染效果不佳。但是,对于大多数人来说,这不再是一个问题。使用衬线字体(例如Georgia,Times或Garamond)可以使文本更具可读性.
        • 通常,您不希望页面上的字体超过三种:
          • 内容字体,可以是衬线或无衬线.
          • 菜单和导航字体,通常应为sans serif,也可能与内容字体相同.
          • 用于代码示例的字体(如果您做这种事情),应该是诸如Courier或Console的等宽字体。.
        • 文本的“度量”是每行的字符数。长度超过80个字符的小节变得不可读。大多数专家会将理想的度量标准设置为每行65个字符。这是内容区域的宽度和字体大小的函数.
        • 如果使用@ font-face将自己的字体导入页面,请确保测试它在多种浏览器上的外观。一些浏览器无法很好地渲染某些字体。另外,请务必在字体系列声明中包含后备字体-您不能总是指望@ font-face在每种情况下都能正常工作.

        CSS动画

        CSS使您可以在没有Javascript的情况下为HTML元素设置动画。对于简单的效果,这可能非常方便。它的渲染速度比用Javascript创建的类似效果要快,即使禁用了Javascript的浏览器也将支持它.

        关键帧

        动画是通过名为@keyframes的CSS选择器定义的。 @keyframes声明具有名称,以及动画中各个点(关键帧)的一组样式规则.

        @keyframes colorChange {
        来自{
        背景颜色:红色;
        }
        至 {
        背景颜色:蓝色;
        }
        }

        在上面的示例中,“ colorChange”动画使元素将背景颜色从红色更改为蓝色.

        不仅可以赋予颜色动画效果。使用@keyframes规则设置位置将导致受影响的元素从一个位置移动到另一个位置.

        @keyframes moveLeft {
        来自{
        职位:相对
        左:100px;
        至 {
        职位:相对
        左:0px;
        }
        }

        也可以使用百分比指定多点动画.

        @keyframes moveAround {
        0%{
        顶部:0px;
        左:0px;
        }
        25%{
        顶部:0px;
        左:50px;
        }
        50%{
        顶部:50px;
        左:50px;
        }
        75%{
        顶部:50px;
        左:0px;
        }
        100%{
        顶部:0px;
        左:0px;
        }
        }

        此动画将导致动画元素上移,下移,后移,然后返回到其原始位置.

        将动画分配给元素

        动画是与它们将影响的元素分开定义的。如上所示,动画在@keyframes声明中定义,然后应用于元素.

        使用@keyframe名称和动画应持续的时间长度将动画应用于元素。其他属性也会影响动画.

        @keyframes colorChange {
        来自{
        背景颜色:红色;
        }
        至 {
        背景颜色:蓝色;
        }
        }

        .变色{
        宽度:100px;
        高度:100px;
        动画名称:colorChange;
        动画时间:5秒;
        }

        @keyframes colorChange {
        来自{
        背景颜色:红色;
        }
        至 {
        背景颜色:蓝色;
        }
        }

        @ -webkit-keyframes colorChange {
        来自{
        背景颜色:红色;
        }
        至 {
        背景颜色:蓝色;
        }
        }

        #color-change-demo .color-changing {
        宽度:100px;
        高度:100px;
        动画名称:colorChange;
        动画时间:5秒;
        -webkit-animation-name:colorChange;
        -webkit-animation-duration:5秒;
        }

        如果不设置动画持续时间,则动画将不会运行,因为默认值为0.

        还可以设置其他几个动画属性:

        • animation-delay —指定动画开始的延迟。默认值为0,这意味着动画将立即播放。通常以秒(s)表示,但也可以以毫秒(ms)表示.
        • animation-direction —指定动画是应正常运行(默认设置),反向运行还是在反向运行之间交替运行。仅当animation-iteration-count大于1时,备用值才有效.
        • animation-fill-mode —定义动画不运行时(完成时或延迟时)动画的样式是否以及如何影响元素。.
          • 正常—默认值。当元素不播放时,动画样式对元素没有影响.
          • forwards —将最后一个关键帧样式(如果动画未反向运行,则为或100%)应用于元素.
          • 向后—将第一个关键帧样式(如果动画未反向运行,则为from或0%).
        • animation-iteration-count —指定应播放动画的次数.
        • animation-timing-function —指定动画的速度曲线:
          • easy —动画开始缓慢,加速然后缓慢结束.
          • 缓入—动画开始缓慢,加速并以全速结束.
          • 缓和—动画以全速开始,但随着其结束而减慢.
          • 线性—动画从头到尾全速运行.
        浏览器对动画的支持

        大多数主要的浏览器都支持CSS动画,但是使用WebKit渲染引擎(Safari,Chrome,Opera)的浏览器存在一个怪异的怪癖.

        为了确保动画可以在这些浏览器上运行,您必须使用特殊的Webkit语法复制@keyframes声明和动画分配属性。.

        / *这是针对非Webkit浏览器的。 * /
        @keyframes moveLeft {
        来自{
        职位:相对
        左:100px;
        至 {
        职位:相对
        左:0px;
        }
        }

        / *这适用于Webkit浏览器:Chrome,Safari和Opera。 * /
        @ -webkit-keyframes moveLeft {
        来自{
        职位:相对
        左:100px;
        至 {
        职位:相对
        左:0px;
        }
        }

        #animationSupportDemo {
        动画名称:moveLeft;
        动画时间:4秒;
        -webkit-animation-name:moveLeft; / * Chrome,Safari和Opera。 * /
        -webkit-animation-duration:4秒; / * Chrome,Safari和Opera。 * /
        }

        (在上面的实时示例中,这些附加样式已添加到正在运行的演示代码中,但未添加代码示例,只是为了减少复杂性。)

        这似乎是多余和愚蠢的(因为是这样),但这是使动画在这些浏览器中工作的唯一方法.

        何时使用CSS动画

        如果您需要像街机游戏一样在屏幕上飞来飞去的高度动态元素,那么CSS动画并不是真正的解决之道-那就更适合Javascript.

        CSS动画最好用于为页面提供细微的设计增强。例如:填充图表的条形图–在悬停菜单上下拉一个标签–用户向下滚动页面时飞入元素–背景颜色缓慢而细微的变化–“弹起”按钮以鼓励单击

        将CSS动画与Javascript相结合

        CSS动画立即开始,或在指定的延迟后开始。但是,如果要在发生某些事件时触发CSS动画,可以在CSS中将动画设置为“已暂停”,然后在以后使用Javascript将其取消暂停。使用属性animation-play-state可以完成动画的暂停.

        .pausedAnimation {
        animation-name:示例;
        动画时间:5秒;
        动画播放状态:已暂停;
        -webkit-animation-name:示例;
        -webkit-animation-duration:5秒;
        -webkit-animation-play-state:已暂停;
        }

        未暂停时正在运行的animation-play-state的值。可以用Javascript操作:

        [element] .style.animationPlayState = "跑步"

        现实世界中的CSS

        在Web开发和设计的现实世界中,很少有开发人员坐下来坐拥HTML文档和空白CSS文件,并开始从头开始指定样式。 (尽管这样做肯定很有趣。)

        CSS设计人员通常遵循许多典型的“最佳实践”,以使他们的工作更轻松,更一致。.

        CSS重置

        所有HTML元素的浏览器均设置了默认样式。每个浏览器的默认样式略有不同。这意味着具有单个样式表的单个文档在不同的浏览器中可能看起来有所不同。 (除了支持和兼容性问题。)

        “ CSS重置”是一组样式,可以在声明任何其他样式之前将其放置在CSS样式表中。 CSS reent提供了在所有浏览器中添加样式的通用基础.

        CSS重置还用于设置HTML5元素的默认显示样式,这些元素在较旧的浏览器中可能没有默认显示,例如和 .

        有几种常见的CSS重置模板。最著名的是埃里克·梅耶(Eric Meyer)创作的作品.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        许可证:无(公共领域)
        * /

        html,body,div,span,applet,object,iframe,
        h1,h2,h3,h4,h5,h6,p,blockquote,pre,
        a,缩写,首字母缩写词,地址,大,引用,代码,
        del,dfn,em,img,ins,kbd,q,s,samp,
        小,打击,强,子,sup,tt,var,
        b,u,i,中心,
        dl,dt,dd,ol,ul,li,
        栏位,表格,标签,图例,
        表,标题,tbody,tfoot,thead,tr,th,td,
        文章,放在一边,画布,细节,嵌入,
        图,figcaption,页脚,页眉,hgroup,
        菜单,导航,输出,红宝石,部分,摘要,
        时间,标记,音频,视频{
        边距:0;
        填充:0;
        边界:0;
        字体大小:100%;
        font:继承;
        垂直对齐:基线;
        }
        / *为旧版浏览器重置HTML5显示角色* /
        文章,放在一边,细节,figcaption,图,
        页脚,页眉,hgroup,菜单,导航,部分{
        显示:块;
        }
        身体 {
        行高:1;
        }
        ol,ul {
        列表样式:无;
        }
        块引用,q {
        引号:无;
        }
        blockquote:before,blockquote:after,
        q:之前,q:之后{
        内容:”;
        内容:无;
        }
        表{
        边界崩溃:崩溃;
        边框间距:0;
        }

        CSS预处理器

        想象一下,您为网站设计定义了一组颜色,并希望在整个CSS的各个位置使用它们.

        如果您在辅助标题上使用与版权声明(等等)相同的颜色,最终将在多个不同位置重复颜色声明.

        想要更改时会发生什么?

        文字大小的比例呢?您已将默认文本大小设置为12px,每个标题大小都是该大小的特定倍数,以形成一组统一的大小。更改默认大小会发生什么?

        CSS是一种声明性语言-它需要指定每个单独的属性和值,并且没有变量,函数或计算来使事情变得容易.

        用PHP(和其他语言)以相同的方式可以更轻松地输出HTML,而不必在每个页面上重复内容,CSS预处理器允许您将变量,函数和其他编程构造包含在样式表中.

        这样可以更轻松地指定配色方案,尺寸比例和其他类型的重复声明.

        两种最受欢迎​​的CSS预处理器是:更少-由Twitter Bootstrap使用-Sass-由Ruby on Rails,Jekyll和许多其他基于Ruby的开发工具使用.

        通常,开发人员使用Less或Sass编写样式表,然后在启动站点之前将其编译为CSS。还有一些用Javascript编写的客户端(浏览器中)编译器,但是它们使用大量资源,并且通常仅在开发中使用.

        在这一点上,专业的Web开发人员不使用Less或Sass是非常不寻常的.

        本指南不能作为这两种工具的简介,因此我们只是鼓励您自己学习更多.

        响应式设计

        曾经有一段时间,您可以确定自己的网站访问者将使用哪种类型的屏幕来查看您的页面:使用少数默认大小之一的台式机显示器.

        那些日子已经一去不回.

        用户可能会在多种设备和屏幕尺寸中的任何一种上查看您的网站:手机,迷你平板电脑,平板电脑,笔记本电脑,台式机,电视.

        单独定位所有这些不同的屏幕尺寸几乎是不可能的,您不能简单地忽略它们.

        您可能会认为您的网站受众特征更有可能在台式机上查看,但是在任何情况下都不太可能如此。超过60%的互联网流量来自移动设备。拥有不良移动体验的网站将对您的业务不利.

        此外,Google已开始根据网站是否针对移动设备进行了优化来更改其搜索结果。越来越多的人,如果您在移动设备上的外观不佳,反正没人会看到您.

        解决此问题的方法是响应式设计.

        响应式设计是网站设计的一种方法-一种哲学-而非工具或程序。这是一种结构化页面标记和CSS的方法,以便页面元素可以在不同大小的窗口中适当地重新配置.

        响应式网页设计的三个支柱是:

        流体网格:流体网格涉及基于百分比而不是绝对像素来划分页面网格。例如,您可能有一个跨越屏幕70%的主内容列和一个跨越30%的侧边栏列。随着屏幕尺寸的增加或减小,网格也会扩大或缩小.

        流畅的图像:图像的宽度不得超过其显示屏幕的宽度,这意味着图像的宽度不得超过包含它们的网格元素。最简单的解决方案是将图像的最大宽度设置为100%。 img {最大宽度:100%; }

        媒体查询:媒体查询稍微复杂一些。它们允许CSS定位特定的屏幕类型和尺寸,声明仅在特定情况下适用的规则。使用媒体查询,您可以使主要内容和侧边栏并排显示在较大的屏幕上,并使它们在较小的屏幕上垂直堆叠。媒体查询还可以用于隐藏或显示在不同上下文中或多或少有用的某些元素,以及更改字体大小之类的内容,甚至交换不同的图像.

        响应式网页设计基于简单的概念,但是它的实际实现(试图在许多不同的上下文中使用不同的屏幕尺寸,设备类型和浏览器来使其正确设置)实际上非常复杂且困难.

        由于这个原因和其他原因,许多今天工作的设计师并没有尝试自己解决这些问题,而是选择使用前端框架。.

        前端框架

        在为站点设计编码CSS时,有很多事情要考虑,这个简短的介绍只涉及了其中的一部分.

        • 使响应式网格结构能够在每种浏览器和设备上工作.
        • 设计适当的媒体查询并确定最佳的屏幕宽度断点.
        • 精美且易于阅读的字体.
        • 使表格看起来还算不错,更不用说美观和用户友好了.
        • 样式表看起来像1997年以来的样子.
        • 旧版浏览器的正常降级.
        • 记住对某些-webkit功能使用重复的样式规则(并确保每次都以相同的方式键入相同的规则).
        • 使CSS和Javascript以正确的方式进行交互.

        这些问题中有许多是简单的“样板”编码任务,这些工作花费了很多时间来避免对新的设计和功能进行编码,而许多问题过于复杂,以至于每个项目都冒着“手工编码”的风险。没有人愿意花费50%或更多的开发时间来调试基础代码-开发人员想开发.

        由于这些原因,并且随着应用程序代码开发中的类似趋势,越来越多的开发人员开始转向前端框架.

        一个前端框架提供了一个或多个HTML文档结构,以及一个完整的CSS样式表,可以处理上面列出的一些或全部基本需求。这使开发人员可以将精力集中在实际的设计决策上,而不是试图使媒体查询正常工作.

        与应用程序开发框架一样,存在多种可能性。一些框架指定了许多设计元素,包括颜色和按钮形状。其他人仅提供最小的响应网格。一些框架是高度可定制的,而其他框架则提供了一种“一刀切”的方法。有些包含Javascript交互性,有些则没有.

        当前使用的一些更流行的前端设计框架是:

        • Bootstrap-Bootstrap来自Twitter的开发团队,旨在加速Web应用程序的原型设计和开发。它提供了出色的形式和交互UI,以及大胆,独特的设计。许多人抱怨说这样做会造成mark肿的标记(确实如此),因为鼓励没有经验的用户在HTML中添加样式类。即便如此,它仍然提供了一个出色的工具,可以快速制作任何基于表单的Web应用程序的原型.
        • Pure.css — CSS框架片段的模块化工具包,可以单独使用,也可以整体使用.
        • Foundation — Foundation本身就是“世界上最先进的响应式前端框架”,对于许多关心良好标记的人来说,Foundation就像Bootstrap一样.
        • 骨架—骨架是一种“简单的” CSS框架,可提供灵敏的网格,清晰的版式和一般的最小设计。它旨在成为“起点,而不是框架”。

        除了这些以外,还有更多的东西在不断开发。此外,还有一些单独的片段(CSS片段)可以组装到定制框架中。例如,您可以将简单的流体网格工具与印刷库结合使用,并使用第三个工具套件来处理表格.

        CSS框架(如软件开发框架)是复杂的Web设计和开发的前进方向。在每个新项目中重新发明轮子或重新编码相同的解决方案都没有意义.

        尽管如此,要充分利用CSS框架,您必须了解CSS的工作方式以及它如何与HTML交互.

        CSS是HTML的重要组成部分

        CSS(层叠样式表)是Web设计和视觉呈现的语言。 HTML文档只是内容节点的集合,但是CSS告诉浏览器如何将内容呈现给用户.

        与HTML一样,CSS既有结构方面也有文本方面。 CSS还可以用于创建动态动画和响应式布局.

        由于现代站点设计的复杂性(很大程度上是由于浏览设备和屏幕尺寸的多样性所致),站点设计必须具有响应能力。也就是说,它必须可以在任何大小或类型的设备上工作-页面必须响应其环境.

        确保站点设计可以在许多不同的环境中工作以及解决众多竞争利益的困难和乏味,导致大多数开发人员采用CSS框架.

        与应用程序开发框架一样,CSS(或“前端”)框架为新站点设计的开发提供了起点。它们提供有关页面布局的结构,指导和意见.

        CSS框架几乎使任何人都可以创建响应迅速且正常运行的网站,但是只有对CSS和HTML具有深入了解的人才能充分利用CSS和HTML.

        JavaScript和HTML

        本节介绍Javascript,这是大多数现代Web浏览器中内置的脚本语言。重点是Javascript如何与HTML和浏览器一起使用,以及一些实用技巧,以开始使用JavaScript作为开发人员。涵盖的主题包括文档对象模型,JavaScript库和JavaScript应用程序框架。本部分不是JavaScript教程.

        什么是JavaScript

        JavaScript是(几乎)每个Web浏览器都内置的脚本语言。它用于向网页添加动态交互性和脚本。 (它也可以与Node.js之类的工具一起在服务器端使用,但这并不是本文的重点。)

        JavaScript是一种功能齐全的编程语言,因此一切皆有可能。但是,它专门针对与HTML文档进行交互和处理的需求.

        ECMAScript

        如果您完全使用JavaScript,则会遇到非常奇怪的名称“ ECMAScript”。这是JavaScriipt的“正式”名称.

        该语言的标准规范由一个名为Ecma的组织维护,该组织以前是欧洲计算机制造商协会。此后,他们将名称更改为简单的“ Ecma”,不再是任何内容的缩写.

        每个Web浏览器在实现ECMAScript标准方面都略有不同(Microsoft甚至称其实现为JScript而不是Javascript)。因此,有些人将使用“ ECMAscript”来专门指代该语言的标准形式,而不是指网络浏览器中内置的任何方言或派生词.

        JavaScript和Java

        这样就不会造成任何混乱-JavaScript与Java没有真正的关系。最初开发JavaScript时,Java是一种新的流行语言,最初的想法是JavaScript将基于Java,因此得名。但是,JavaScript完全不是基于Java的,除了名称外,这两种语言之间几乎没有相似之处.

        文件对象模型

        如果您想对Java脚本有一个很好的了解,要了解的关键事项之一就是文档对象模型.

        文档对象模型在概念上与前面各节中描述的文档树结构非常相似-实际上,它本质上是指同一件事.

        DOM是API(应用程序编程接口),Javascript代码通过该API与HTML文档进行交互。当浏览器呈现文档时,浏览器并不会仅仅向您显示源代码并附加了一些其他样式规则。浏览器已阅读源代码并基于源代码生成了视图。文档中的每个元素都已变成具有Javascript可访问的属性和方法的对象(在编程意义上).

        DOM对象的属性包括HTML元素的已声明(和可声明)属性(例如类,id和名称),元素的CSS样式以及元素本身的内容。与每个DOM对象关联的方法包括更改任何这些属性的函数.

        浏览器中呈现的网页是文档对象模型的实时视图。这意味着,如果DOM仍然发生变化(例如,任何元素的属性都发生了变化),则视图也将发生变化。这使JavaScript可以更新或更改网页的内容,而无需刷新或重新加载页面.

        JavaScript还具有大多数浏览器功能的API,因此它可以(例如)读取文档的当前状态,触发刷新,获取浏览器窗口的宽度以及调整浏览器窗口的大小.

        使用JavaScript

        这不是JavaScript教程。本部分仅试图为处理JavaScript的HTML开发人员提供一些有用的上下文。.

        在页面中包含JavaScript

        就像CSS一样,JavaScript可以通过两种方式包含在网页中-嵌入式脚本和链接资源.

        要嵌入脚本,只需在标签之间包含JavaScript代码.

        函数changeColor(toChange,newColor){
        document.getElementbyId(toChange).style.backgroundColor = newColor;
        }
        </脚本>

        要将单独的JavaScript文件包含到HTML文档中,请使用元素将其链接到.

        类型="文字/ javascript" src ="app.js">

        JavaScript文件的URL(相对或完全指定)位于src属性中。 HTML5中并非严格要求type属性,但同时包括向后兼容性和(可能)向前兼容性都是一件好事。此外,如果页面上有多个元素,给它们赋予每个唯一的id属性也不是一个坏主意.

        通常认为将JavaScript作为单独的文件而不是嵌入页面中更好。这使功能(JS)与内容(HTML)分开。但是,此一般政策有实际例外。例如,通常的做法是直接在网页上添加跟踪代码(例如Google Analytics(分析)提供的JS代码段).

        哪里放JavaScript

        在页面的下方和下方,有两个常见的位置可将JavaScript包含在页面上。 .

        在文档的中放置指向JavaScript文件的链接具有很好的语义意义-它是一个脚本,会对整个页面产生影响,因此它属于文档中的其他类似元素 .

        但是,由于在抓取和解析JavaScript文件时暂停了页面的加载,因此传统上不赞成将标记放入。通常的建议是将它们放置在中的最后一个元素, .

        这仍然是很好的建议。但是,现在对odl建议存在一些扭曲:现在有了一种将元素放置到文档中而不会导致页面渲染变慢的方法。从HTML5开始,该标记包含一个标记为async的属性。如果将async属性添加到脚本标签,页面将不会停止渲染,并且JS将被异步解析和执行(即在单独的线程中).

        类型="文字/ javascript" src ="app.js" 异步的>

        这样可以加快整个页面的加载和渲染速度。但是,异步加载和解析可能仍然会引起一些问题。如果数据连接速度慢或客户端计算机的电源特别低,它可能仍会减慢页面的呈现速度.

        如果您特别想解决慢速连接和低功耗设备中的低效率问题,将标签放在文档底部可能仍然有意义.

        JSON格式

        语义HTML部分中涉及的JavaScript的一个子集是JSON(JavaScript对象表示法).

        JavaScript是一种面向对象的语言,这意味着(除其他事项外)可以将各个对象(按单词的现实意义)编码为数据对象(按单词的编程意义)。例如,博客文章(“现实世界”对象)可以被编码为JavaScript对象:

        {
        "标题" : "洛雷姆·伊普苏姆和所有爵士乐",
        "作者" : "亚当·伍德",
        "内容" :
        'Lorem ipsum dolor坐下来,奉献自若。塞德·毛里斯·梅特斯(Sed m​​auris metus),非索达莱斯(eudale)欧盟,莫斯提·康格(nish) Nunc eu dignissim est。Donec不是sapien rutrum imperdiet。 Nunc vita libero nec velit porta pulvinar vitae ut sapien。 Aliquam结果导致了libero blandit semper。 Aenean malesuada risus nec volutpat dapibus。 Aliquam坐着amet bibendum enim。紫茎泽兰画上的Suspendisse。 Proin quis facilisis nisl。 Vivamus坐着不舒服。 Aliquam nisl sapien,sagittis vitae nisi nec,Vulputate effirtur urna。,
        }

        正如我们在语义标记中看到的那样,JSON可用于编码有关页面内容的数据,以用作语义标记API。这有助于Google编制索引.

        JSON还有另一个重要用途-AJAX.

        AJAX

        AJAX是一种设计模式(不是特定的技术),其中JavaScript发出异步HTTP请求,从而允许将新数据填充到网页上,而无需重新加载页面.

        AJAX最初代表“异步JavaScript和XML”,因为最初这种类型的设计最常用的数据传输语言是XML。但是,JSON已成为最通用的语言,因为它更轻便,灵活,JavaScript固有且易于阅读。 (不幸的是,“ AJAJ”不是很吸引人,因此旧名称已被保留。)

        AJAX模式在大多数页面上没有任何意义,但是在Web应用程序(例如电子邮件)上,它可以使世界上的一切都变得不同.

        AJAX之所以称为“异步JavaScript”,是因为JS代码在页面加载之外的其他时间(即浏览器通常在对服务器的调用时)对服务器进行调用。根据用户操作或经过的时间,AJAX样式的Web应用程序将向服务器发送请求,而无需重新加载页面。然后,该响应中的数据将用于更新DOM(从而更新用户视图),而无需重新加载.

        此类设计可用于(例如)电子邮件或聊天应用程序中,以发送和获取新消息。社交网站使用它来添加新帖子,甚至某些博客也使用它来将新发布的内容添加到页面上.

        JSON是这种用例的理想数据格式,因为它是JavaScript固有的。不同于XML(必须将其解析为JavaScript以使浏览器“理解”),JSON已经存在于目标语言中.

        另外,由于JSON可以是JavaScript文件的唯一内容(可以在任何域中都有其src URL),因此可以使用JSON来避免跨域锁定的困难。通常,Web浏览器会阻止网站向除主文档的域以外的域发出请求并从中接收数据。但是,JavaScript(如CSS和图像)被视为单独的资源,可以来自任何地方。使用AJAX模式的JSON实现,可以将跨域请求“伪装”为包含资源.

        现实世界中的JavaScript

        jQuery查询

        JavaScript的语法有时可能有点冗长(和晦涩),并且许多非常常见的操作都需要大量的“样板”代码.

        因此,几乎所有的JS开发人员都使用一个称为JQuery的JavaScript库。 JQuery为许多常见用例提供了简洁的API,例如文档遍历,DOM操作和AJAX.

        大多数编程语言都有一个“标准库”,这是一组语言扩展核心,可以自动或抽象程序员需要用该语言完成的最常见的事情。 JavaScript没有正式的标准库。尽管还有其他竞争项目,它们都有专门的开发人员基础(例如Closure和Prototype),但对于许多人来说,JQuery是JavaScript标准库.

        这是一个关于JQuery如何加快开发速度的简短示例。假设您要更改元素的属性.

        // "纯" JavaScript方式.

        document.getElementById("改变").setAttribute("标题","新标题文字");

        // JQuery方式.

        $。("#改变").attr("标题","新标题文字");

        在这种情况下,仅保存28个字符,但有时还不止于此。甚至一点点的积蓄也等于一个大项目.

        JavaScript前端库

        许多对HTML和CSS都有很好理解的体面的Web设计人员在不成为JavaScript程序员的情况下使用JavaScript GUI增强功能.

        之所以可行,是因为有许多JavaScript UI库(如JQuery UI)和前端框架(如Bootstrap)提供了相对简单的HTML API。.

        应用程序编程接口中的API(如上所述)。也就是说,一种从软件外部访问软件功能的方法。在JavaScript功能的HTML API和HTML API的上下文中,这意味着只需将内容添加到标记中(通常是特殊类),就可以轻松地将JavaScript功能包含到HTML中。.

        探索JavaScript UI库的功能集可以为刚开始的开发人员(而不是刚开始的开发人员)提供许多简单的想法,以改善网站的交互性,以及实现这些想法的工具。 (只记得选择一个项目并坚持使用它-尽量不要混合使用不同的UI库。结果是视觉混乱和设计混乱。)

        JavaScript前端应用程序框架

        与上一节有关CSS的前端设计框架(如Bootstrap)不同,前端应用程序框架是一个框架软件应用程序,它不仅作为视觉设计的起点,而且还作为其实际功能的起点。网络应用.

        诸如Backbone.js和Angular之类的JavaScript应用程序框架为Web应用程序提供了结构化模板,可自动执行许多常见任务并提供设计架构.

        大多数JS应用程序框架都实现了MVC(即模型视图控制器)设计模式。此模式如下所示:

        • 模型处理数据
        • 视图显示数据
        • Controller将模型中的数据与视图连接,并处理应用程序逻辑

        每个JS框架以不同的方式实现此样式,但是几乎所有的JS框架都执行此版本.

        如果要尝试构建JavaScript应用程序,那么从头开始构建几乎总是一个可怕的主意。使用框架可确保您的应用程序建立在扎实的架构基础上,并节省了无数的时间,否则这些时间将花费在编写低级通用功能上.

        就像大多数软件开发一样,成为一个好的JavaScript开发人员并不意味着知道如何编写JavaScript,而是要知道哪种库和框架最适合各种类型的应用程序,并能够在一定程度上使用它们。流利度.

        JavaScript比以往更强大和有用

        JavaScript最初是一种低功率语言,可用于愚蠢的效果和网页上的细微增强。但是在过去的十年或更长时间里,新一代的符合标准的Web浏览器以及先进的JavaScript库和框架使该语言成为了全面的浏览器内应用程序的重要平台。.

        HTML vs.一切

        本节通过在多种情况下研究HTML的替代方法来总结我们的HTML内容,并说明HTML已成为现代技术领域中内容的主要语言.

        HTML替代

        HTML是网络的默认语言,但它也被用作其他类型的设计和内容的平台.

        电子书

        .epub格式是电子书最流行的开源标准,它可以在除Amazon Kindle之外的几乎所有电子阅读器上使用,实际上只是基于HTML的格式。各个部分以及目录和索引之类的部分都是单个HTML文件。所有内容文件以及资产(例如图像和CSS文件)都被简单地压缩到一个文件中,并具有.epub文件扩展名。 .epub书籍在许多方面类似于网站上有很多页面的网站.

        Amazon Kindle始终首选专有文件格式。第一代Kindle使用.mobi,此后使用.azw相关格式。它们比.epub格式复杂,并且不基于HTML.

        但是,最新一代的Kindle使用基于HTML5的新.azw3格式。尽管始终可以通过转换软件从HTML创建Kindle电子书,但HTML现在是电子书内容的主要创作语言.

        行动应用程式

        两种最受欢迎​​的移动平台(Android和iPhone)使用完全不同的编程语言来进行应用程序开发。 Android应用程序开发通常使用Java进行,而iOS使用Objective C和新语言Swift.

        这意味着,如果您想为两个平台都构建和发布应用程序,则通常需要使用两种不同的语言来构建整个应用程序两次。对于像Facebook这样的大型软件公司来说,这很好,但它可能会给较小的开发公司带来严重压力.

        已经针对此问题创建了几种不同的解决方案,但最吸引人的是HTML的使用(以及JavaScript和CSS).

        诸如PhoneGap之类的工具使开发人员可以使用基于浏览器的语言(HTML,JS,CSS)来构建应用一次,然后将其打包到适用于不同操作系统的应用中。 PhoneGap软件将基于浏览器的应用程序包装到“无镶边浏览器”中,这是一种浏览器样式的呈现框架,仅查看apps目录中的文件,并且不提供面向用户的导航。可以在任何受支持的操作系统上完成此操作,从而允许将应用一次构建并部署到任何地方.

        HTML已成为通用语言.

        HTML的替代品

        尽管HTML是Web的本地语言,并且是互操作性的强大平台,但仍有一些替代技术拒绝消失.

        Flash是一个多媒体软件平台,可以通过插件在大多数Web浏览器中运行.

        在1990年代后期,没有什么比基于Flash的网站更酷的了。与基于HTML的简单网站相比,它们具有很高的交互性,动画效果并拥有更好的图形。您甚至可以让他们播放音乐和视频.

        这些网站很快变得乏味而烦人,但是该技术出于习惯(人们写他们习惯于写的东西)而挂起,并且担心所有浏览器都不会支持用HTML5和JavaScript编写的网站和应用程序。在出现更好的,符合标准的浏览器之后,Internet Explorer 6仍在大量使用多年,因此人们不断推出基于Flash的网站.

        在大多数情况下,这种趋势已经消失。 Flash现在主要用于台式机和移动视频游戏,而在网络上的使用则主要被聪明的人群所限制。.

        不幸的是,小型非技术企业(尤其是教堂和社区非营利组织)在技术趋势上永远落后了几年,而且其中许多仍然希望将Flash元素(如“ Flash Intro”)纳入其网站。这几乎总是一个错误.

        • 在非交互式网站上,Flash最常见的用法是“ Flash简介”,这对用户而言非常令人讨厌。没有人愿意等待并观看您有趣的预展,然后再在您的网站上找到他们想要的东西。永远不要这样做.
        • 有人认为将内容和菜单放入Flash应用程序是个好主意,这样他们就可以创建炫酷的效果,例如点亮菜单项或滚动标签。这是一个坏主意:
          • 人们关心您的内容,而不是您的特殊效果。使您的内容易于阅读和浏览。没有人会在您的网站上停留更长时间或将其推荐给他们的朋友,因为他们喜欢单击飞行菜单按钮时像滚动条一样展开您的内容的方式.
          • 将内容(而不是HTML)放到Flash中,而不是将其隐藏在搜索引擎中,从而使您的网站对Google有效地不可见.
          • 将内容放入Flash意味着内容的任何特定视图实际上是正在运行的应用程序中的特定状态,而不是可共享的URL。这使用户很难标记或共享您的内容.
          • 屏幕阅读器无法访问Flash应用程序中的内容和导航,从而使视力障碍者无法访问您的网站.
          • 您可能希望在Flash中创建的大多数效果都可以在JavaScript和CSS中更轻松地创建,而不会产生任何这些问题.
        PDF格式

        PDF —便携式文档格式—是一种出色的跨平台格式,适用于以打印为中心的文档.

        使用PDF,您可以创建内容的单一视图。 PDF具有特定的页面尺寸,特定的布局和文档流,特定的字体,特定的文本大小。 PDF可以为打印机嵌入信息(例如墨水颜色).

        使PDF成为乐谱和印刷书籍之类的好选择的所有因素都使其成为在线内容的糟糕选择.

        但是,许多人和组织(尤其是小型非技术企业和非营利组织)继续将PDF发布到网络上。普遍的行为模式是创建以印刷为重点的小册子,然后在网站上提供该小册子,而实际上没有人收到印刷本.

        任何想要查看手册中信息的人都不想查看PDF。他们需要您的内容,因此您应该以适合该媒体的格式提供-对于浏览器,该媒体是HTML.

        可填充表单是PDF的一种特别令人震惊的用法,在HTML中HTML是更好的选择。许多组织创建PDF表单,可以将其填写在PDF阅读器中,然后通过电子邮件发送回去。有人认为工作过度的秘书会将这些表格复制到办公室内部使用的任何数据库系统中.

        更为明智的解决方案是在线HTML表单,该表单将数据直接发布到数据库应用程序中。这将节省劳力并减少错误。使用HTTPS,它比通过电子邮件发送PDF表单更加安全。.

        HTML胜

        HTML已成为网络以及相关技术(如电子书和移动应用程序)的通用语言.

        在某些情况下,HTML是其中几种选择中的一种,与其他任何技术选择一样,它提供了一系列利弊。在其他情况下,HTML不仅是明显的赢家,而且是唯一明智的选择.

        XHTML和XHTML5

        XHTML

        XHTML代表可扩展超文本标记语言。它基本上是HTML的XML应用程序。最初开发时,HTML(版本4)是松散的结构。 XHTML使HTML高度结构化。长期以来,它被视为网络标记的未来。但是HTML5很大程度上绕过了它。仍然,它被广泛使用.

        它的开发是一种对付使用HTML的许多网页上发现的不良代码的一种手段,例如缺少结束标记,不正确的标记嵌套以及类似的松散编码实践。 XHTML通过设置规则来解决这些错误,例如必须关闭所有标签并且其顺序必须正确.

        历史

        1998年,W3C发布了一份工作草案,标题为“重新格式化XML HTML”。这种新语言基于HTML 4,但遵循更严格的XML语法规则。在1999年2月,规范的名称更改为XHTML 1.0:可扩展超文本标记语言。最终,在2000年1月,XHTML成为W3C的官方推荐.

        XHTML的下一个版本XHTML 1.1于2001年5月发布,该版本仍基于严格的规则,但允许自定义和较小的更改。 XHTML 2.0最初是一个工作草案,但在2009年被弃用,取而代之的是HTML5和XHTML5.

        XHTML基本原理

        尽管XHTML与HTML几乎相同,但它引入了一组新规则,这些规则应确保所有代码都是有效和正确的。这些规则是:

        • 所有元素和属性名称都必须小写.
        • 所有空元素必须使用XML的特殊空元素标记编写.
        • 所有结束标签都必须存在,并且没有可选的结束标签.
        • HTML元素必须包含单个head元素,后跟单个body元素或单个frameset元素.
        • 每个头必须包含一个标题.

        与上述规则一起,XHTML最初引入了三个正式的文档类型定义(DTD),它们对应于HTML 4.01的三个不同版本:

        • XHTML 1.0严格 是等效于严格HTML 4.01的XML,并且包含在HTML 4.01规范中未标记为不推荐使用的元素和属性。截至2015年11月,XHTML 1.0 Strict是万维网联盟网站首页所使用的文档类型.
        • XHTML 1.0过渡版 是等效于HTML 4.01 Transitional的XML,并且包括从严格版本中排除的表示性元素(例如,中心,字体和标记).
        • XHTML 1.0框架集 是XML的HTML 4.01框架集的等效项,并允许定义框架集文档-1990年代后期的常见网络功能.

        HTML的早期版本结构松散,找到编码错误的网页非常普遍。 XHTML中正确的网页如下所示:

        我的第一个网页

        你好,世界!

        我是一个非常简单但功能齐全的网页,带有有效的XHTML代码!

        在线资源

        尽管XHTML似乎已被HTML5取代,但仍有大量在线资源可以帮助您更好地掌握XHTML。从基本规范到备忘单,验证器再到教程,下面列出的链接将帮助您解决有关XHTML的任何问题.

        参考

        • XHTML Official Specification:解释开发XHTML的决定并提供有关其开发的更多资源的官方网站.
        • XHTML 1.0:工作草案的第二修订版,用于在XML 1.0中重新格式化HTML 4
        • XHTML基本规范:提供可以在台式机,电视和移动电话等设备之间共享的XHTML文档类型.
        • XHTML:清洁代码解决方案:提供详细的XHTML概述,重点介绍HTML和新标准之间的差异.
        • 为什么切换到XHTML:提供了引人注目的论点,以切换到XHTML,以调整工作流程并生成更简洁的代码.

        工具类

        这些工具将帮助您检查代码的有效性并使其看起来不错.

        • HTML / XHTML验证程序服务:W3C的验证程序检查HTML和XHTML文档是否符合官方规范.
        • HTML Tidy:帮助您自动清理HTML文件并使它们符合标准规范。它最初是由W3C的Dave Ragget开发的,现在是SourceForge的一个开源项目.

        讲解

        如果您真的想深入研究XHTML开发,那么这些教程应该可以帮助您入门。.

        • XHTML解释:概述XHTML的产生方式,并解释发生的所有更改,然后提供代码示例,DTD概述和最佳编码实践.
        • 面向初学者的XHTML Web设计:探索XHTML的高级构建基块,包括注释,文本等.
        • XHTML教程:非常简短的教程,以简洁的方式涵盖了XHTML的基本概念.
        • 可访问的HTML / XHTML表单:入门级教程,涵盖了您需要了解的所有内容.
        • 入门HTML(XHTML):适合初学者学习XHTML基础知识的视频教程.
        • 软件测试方法:HTML开发人员普遍感兴趣的软件测试方法和工具的简介.

        图书

        由于XHTML与HTML连接在一起,因此许多书籍共同讨论了这两种语言。您会发现针对初学者的书籍以及针对那些已经具有一定编码经验并想要扩展其知识的读者的书籍.

        • HTML,XHTML和CSS:Elizabeth Castro的Visual QuickStart Guide(2006):以适合初学者的语言介绍了所有HTML和XHTML要素。这本书有很多直观的示例,并包括一个附带网站,其中包含其他材料,示例,更新等.
        • Tittel和Noble撰写的HTML,XHTML和CSS For Dummies(2011):HTML,XHTML和CSS的入门参考,教您如何创建XHTML文档,将这些原理应用于流行的CMS(如WordPress和Drupal)以及为移动设备设计设备.
        • Jon Duckett撰写的《使用HTML,XHTML和CSS进行Web编程》(2011年):教您如何使用HTML,XHTML和CSS编写网页。它遵循基于标准的原则,还教读者如何使用(X)HTML解决可能遇到的问题.

        今日XHTML

        最初创建的XHTML不再积极地开发和维护。它从宽限期下降的主要原因是非常严格的错误处理,当遇到错误时,该错误导致网页停止呈现。这导致了Web超文本应用程序技术小组(WHATWG)的创建,该小组开始研究HTML5。他们为最终解散XHTML 2.0工作组做出了贡献.

        如今,W3C的所有工作都集中在HTML5和XHTML语法(称为XHTML5.1)上,该语法与HTML5草案中的HTML5一起定义。.

        尽管XHTML已被HTML5所绕开,但了解其背后的历史以及相关的编码实践为将来奠定了坚实的基础。上面的资源将为您提供学习有效代码的正确途径.

        HTML5

        HTML5

        HTML5是HTML标准的当前版本。它是用于Web文档和应用程序的标记语言。 HTML5包括许多主要的添加和语言更改。我们将讨论这些以及更多.

        历史与介绍

        我们回顾了从版本1到版本4的HTML历史。但是HTML5的历史更加有趣和重要。.

        HTML 5之路

        在Web公开采用的最初几年,主要的浏览器提供商开发了自己的专有HTML元素和他们自己的呈现方法.

        为一种浏览器创建的HTML文档几乎在其他浏览器中无法使用,尤其是在HTML页面包含诸如表单控件之类的交互元素的情况下.

        随着HTML 4.0和XHTML的稳定,Web标准运动推动了浏览器制造商采用开放标准,从而使网页可以与任何浏览器兼容。.

        这项工作在很大程度上取得了成功,但是有两个趋势推动了HTML的发展,从而威胁到开放性和互操作性的全部原则.

        首先是针对“怪异模式”浏览器的集体不良习惯。在经过多年针对特定浏览器的设计调整之后​​,许多设计师继续以这种方式进行编码.

        第二个原因是人们越来越渴望获得HTML所不支持的丰富的交互式内容。这导致Flash的广泛使用.

        2004年,Mozilla和Opera向W3C提出了一份立场文件,主张后来成为HTML5。该语言的新版本将支持新的交互功能和富媒体,同时向后兼容符合标准的Web浏览器.

        最后一点很关键–新版本必须适当降级,并包含有效的HTML 4.0作为子集;否则,它将变成已经拥挤的生态系统的另一个令人困惑的变体.

        WHATWG几乎立即开始研究HTML5,并于2008年发布了第一份公开草案。浏览器制造商开始试验性地实现该标准的某些部分,并且该标准不断发展。.

        2012年发布了稳定的“候选建议书”,2014年发布了完全稳定的W3C建议书。到那时,所有主流浏览器都支持该标准的最关键部分.

        HTML5标准现在具有两个并行的开发轨道。 W3C具有稳定的发布周期,其中包含递增的版本号-一系列“快照”。 WHATWG通过不断添加的新功能来维持不断发展的“生活标准”.

        HTML5的新功能?

        HTML5有很多新功能,包括规范本身的性质。 HTML 4.0本质上是可用标记标签的清单。 HTML5包括了这一点,但这只是标准中定义的基于浏览器的技术的模块化生态系统的一部分.

        标记

        HTML5标记的更改通常分为几类.

        语义学

        语义标记是指带有含义的标记。例如,HTML 4.0中唯一的主要页面布局元素是。 A可以是任何内容:页眉,页脚,列,侧边栏,菜单。在HTML5中,添加了许多语义页面布局元素:

        • .

        HTML5中添加的其他语义元素包括:

        • 和,用于插图和图表;
        • 定义突出显示或标记的文本;
        • 定义日期时间.

        HTML5还明确指出 并且应该优先于 .

        多媒体

        HTML5中添加了新元素来支持媒体:

        • .

        和元素允许本地播放媒体,而无需JavaScript,Flash或任何形式的嵌入-就像添加图像一样简单。该元素可与JavaScript一起以编程方式创建页面图形.

        HTML5还明确支持可缩放矢量图形(SVG).

        互动性

        HTML5具有许多新的表单元素和输入类型,它们有助于支持该语言作为应用程序平台。这些包括:

        • .

        输入类型现在包括:颜色,日期,日期时间,本地日期时间,电子邮件,月份,数字,范围,搜索,电话,时间,URL和星期.

        除了新的表单控件之外,还引入了HTML5和HTML5,它们提供了视觉反馈,可以在表单外部使用。此外,几个新的全局属性启用了交互功能:

        • 内容可编辑
        • 上下文菜单
        • 数据-*
        • 可拖动的
        • 拖放区
        • 拼写检查.
        乐兴和解析规则

        除了更改可用元素的目录之外,HTML5标记还受一套更为严格和定义更好的词法和解析规则的约束。它不再是XML或SGML的版本,而是一种完全指定的标记语言.

        语法错误或格式错误的标记预计将始终失败,从而在兼容的浏览器中提供类似的行为.

        浏览器和DOM API

        HTML5指定了许多JavaScript API,用于与DOM(文档对象模型-页面内容)和浏览器进行交互。这些包括:

        • 上面提到的画布,用于页内图形渲染.
        • 定时媒体播放,用于和 .
        • 在线/离线状态检查.
        • MIME类型和协议处理程序注册,允许浏览器选择网站作为处理特定文件类型或通信协议的默认方式。例如,允许Webmail应用程序处理mailto:链接.
        • 微数据,允许嵌套语义元数据作为属性.
        • 跨文档消息传递,它允许来自两个不同域来源的两个页面在两个不同的浏览器上下文中打开,以彼此通信.
        • Web存储,类似于Cookie的持久键-值对数据存储,但更易于使用且具有更大的存储容量.

        HTML5的成功

        HTML5的成功可以从两个方面来判断:

        • 规范完成目标的程度
        • 它的采用有多广泛.

        从这两个方面来看,HTML5都非常成功.

        HTML5的目标是:

        • 浏览器互操作性
        • 减少或消除对插件的需求
        • 向后兼容现有标准.

        这些已基本实现。主要浏览器中的渲染引擎和JavaScript实现都已经融合到一个程度,即访问网页将在所有浏览器中产生一致的体验.

        对多媒体,浏览器存储和其他以应用程序为中心的功能的支持消除了对Flash的需求,并引发了本机HTML5 Web应用程序的爆炸式增长.

        即使无法使用更高级的Web应用程序,使用HTML5创建的文档也可以在旧版浏览器中很好地呈现.

        采纳迅速,甚至在该标准正式制定之前就开始采用。在撰写本文时,前1000万个网站中的大多数都使用HTML5。而且,大多数新的Web内容都是使用HTML5制作的.

        更令人兴奋的是在浏览器之外使用HTML5。用于桌面的Electron和用于移动电话的Phonegap等平台已将HTML5(带有CSS3和JavaScript)变成了本机应用程序语言.

        一般HTML5资源

        • HTML5 W3C建议书和WHATWG HTML Living Standard是定义HTML5的两个官方资料.
        • W3C提供了一系列有关HTML5的培训课程:
          • HTML5简介
          • HTML5第1部分:HTML5编码要点和最佳做法
          • HTML5第2部分:设计HTML5应用的高级技术
        • Mozilla开发人员网络提供了全面的HTML5参考.

        HTML5是未来

        HTML5是网络的现在和未来。如果您使用Web技术或发布Web内容,则需要熟悉该标准。如果您在2010年之前学习过网页设计,并且没有跟上变化,那么HTML5中有很多很棒的东西值得一看.

        音视频资源

        在HTML5出现之前,在网页中嵌入音频和视频并不是一件容易的事。不同的技术和MIME类型需要不同的插件.

        另外,有时必须使用iframe嵌入媒体。这是不理想的,因为这是黑客还用来嵌入恶意代码的技术.

        HTML5引入了使媒体管理更加容易的新标签,这主要是因为它们引入了几乎可以在任何站点上使用的标准。与所有HTML5标签一样,由于这些标签可能与旧版浏览器不兼容,因此需要谨慎.

        要嵌入音频或视频,可以使用HTML5中的new和元素。这是一个例子:

        请升级您的浏览器.

        下面,我们按元素细分了每个元素.

        嵌入视频

        HTML5引入了一个新元素,它消除了对浏览器插件的需求.

        在元素的开始标记和结束标记之间,可以指定替代文本。仅在浏览器不支持元素时显示.

        元素属性

        在元素内,您可以指定各种属性:

        宽度,高度

        这些属性设置屏幕上视频的尺寸。虽然它们是可选的,但最好将它们包括在内,以便页面的其余部分在加载时正确呈现.

        视频的宽度和高度必须以像素为单位指定.

        控制项

        controls属性告诉浏览器显示一个播放/暂停按钮和一个音量控制滑块。要显示没有控件的视频,请忽略该属性.

        自动播放

        自动播放将强制视频开始在桌面设备上播放,而无需用户干预。要显示而不进行自动播放,只需忽略该属性.

        在移动设备上,自动播放属性将被忽略.

        嵌入音频

        要嵌入音频,请使用元素。与元素非常相似.

        在元素的开始标记和结束标记之间,可以指定替代文本。仅在浏览器不支持该元素时显示.

        元素属性

        在元素内,您可以指定各种属性:

        loop属性告诉浏览器在播放完毕后从头开始重新启动音轨.

        控制项

        controls属性告诉浏览器显示与video标签相同的播放/暂停按钮和音量控制滑块。只需忽略该属性即可显示没有控件的音频.

        自动播放

        autoplay属性将强制音频自动开始播放。要嵌入音频而不进行自动播放,只需忽略该属性.

        静音

        静音属性将在加载音频时使音量静音.

        预载

        preload属性允许您在页面内容之前加载音频。可接受的值是auto,元数据或无.

        元素

        元素定义文件和MIME类型,并且必须在或元素内使用。必须至少有一个元素。如果要指定文件的备用版本,则可以添加其他元素.

        例如:

        您的浏览器不支持视频标签.

        元素属性

        具有以下属性:

        src

        src属性指定视频或音频文件的源路径和文件名.

        类型

        文件的MIME类型.

        对于视频,可接受的值为video / mp4,video / webm和video / ogg。对于音频,可接受的值为音频/ mpeg,音频/ wav和音频/ ogg.

        虽然现代浏览器理论上支持元素本身,但某些浏览器可能会遇到某些MIME类型的问题.

        为了获得跨浏览器兼容性的最佳机会,建议将video / mp4 MIME类型用于视频,而将audio / mpeg MIME类型用于音频。例如,如果您想提供同一视频的ogg和mp4版本,则可以指定多个元素.

        元素

        该元素允许您指定与音频或视频一起提供的文本资源。最常见的用途是指定字幕文件或标题.

        您可以为每个视频或音频元素指定多个轨道。例如,您可能想要添加不同语言的元素:

        元素属性

        元素具有以下属性:

        src

        文本文件的源路径和文件名.

        类似于type属性,kind属性指定文件的性质。您可以使用标题,章节,说明,元数据或字幕.

        srclang

        srclang属性使您可以指定文本文件的语言。使用适当的语言代码.

        默认

        使用默认属性指定应为默认选择.

        标签

        给文本轨道起一个名字.

        音视频资源

        • Mozilla已开发了这份出色的指南,《使用HTML5音频和视频》。从简单到高级的使用.
        • 苹果已经发布了针对开发人员的具体指南。如果您是为iOS或Safari开发的,那么这是一个值得阅读的内容.
        • Microsoft在Internet Explorer中对HTML5音频和视频有自己的指导.

        应用程序缓存

        HTML5不仅更改了标记语法。它还定义了许多基于浏览器的技术,其中包括一些与脱机使用Web应用程序有关的技术。.

        应用程序缓存(或“ AppCache”)是一项功能,允许开发人员指定要在本地预取和存储的资源.

        这些资源在缓存清单文件中声明,该清单文件从网页的标题链接。这可用于设计可脱机工作的Web应用程序,或仅用于加速用户体验。.

        AppCache具有很大的潜力,尤其是在单页Web应用程序的情况下。不幸的是,该功能还存在很多问题,并且正在弃用和从标准中删除.

        话虽如此,AppCache仍然可用,并且是实现某些效果的唯一方法.

        为了帮助您解决这一困惑,我们整理了Application Cache上的最佳教程和资源,从各个角度探讨了该主题。.

        应用程序缓存教程

        • 《使用应用程序缓存的初学者指南》是该主题的最佳入门教程之一.
        • 使用应用程序缓存是Mozilla开发人员网络中面向开发人员的技术教程。.
        • 让我们离线阅读是有关如何使用AppCache的详细叙述性说明.
        • 在移动Web应用程序中使用HTML5应用程序缓存涵盖了AppCache的一般用法,并探讨了在为移动浏览器开发HTML5 Web应用程序时使用它的特殊问题。.
        • 在单页应用程序中使用HTML 5应用程序缓存详细介绍了在Ember.js应用程序上下文中AppCache的使用.
        • 教程:如何使脱机HTML5 Web应用程序使用RSS阅读器的示例来说明如何构建可脱机工作的Web应用程序。这里特别令人感兴趣的是AppCache与其他几种HTML数据存储(例如cookie,Local Storage和WebSQL)配合使用的方式.
        • 使用IndexedDB和WebSQL构建简单的跨浏览器离线待办事项列表探索了构建离线优先待办事项列表应用程序的方法,该应用程序可在多种浏览器中工作,并具有对离线数据存储功能的不同支持。应用程序缓存与IndexedDB和WebSQL一起使用.
        • 使用HTML5 App Cache创建脱机应用程序详细介绍了AppCache的用法,包括有关如何创建清单的分步说明以及有关使用.htaccess在Apache上正确提供清单文件的详细信息.
        • 创建HTML5脱机Web应用程序探讨了几种本地数据存储方法的来龙去脉,包括AppCache.
        • 添加HTML5应用程序缓存以在5分钟内加速您的Web应用程序是一个简短的教程,它将使您快速使用AppCache。本教程的重点是使用缓存来加快在线网站体验,而不是提供脱机应用程序体验.
        • 使用HTML5脱机运行Web应用程序AppCache涵盖了缓存清单以及JavaScript API,详细介绍了与缓存相关的事件和操作.
        • 什么是应用程序缓存?提供AppCache的高级概述.
        • 使用应用程序缓存,Web存储和ASP.NET构建HTML5脱机应用程序MVC详细介绍了AppCache的实际功能,并全面介绍了如何正确构建清单文件。在进行了一般性解释之后,本教程将继续展示如何在ASP.NET应用程序中管理此过程。.

        其他应用程序缓存学习资料

        • 更快的Web App的最佳实践使用HTML5仅在一个部分中涉及Application Cache,但这对于理解如何将App Cache用作更大的性能策略的一部分非常有帮助。.
        • 使用应用程序缓存时的提示列出了一些用于处理AppCache常见问题的最佳实践.
        • 删除HTML应用程序缓存说明了如何在多个浏览器中删除本地应用程序缓存。这在本地开发和测试期间特别有用,当您的项目文件更改速度比AppCache刷新文件的速度快时.
        • 使用HTML5应用程序缓存时应避免的常见陷阱涵盖了AppCache的许多最常见问题,并说明了如何解决这些问题.
        • 应用程序高速缓存是一个有趣的问题,但由于使用应用程序高速缓存的困难,它太准确了。这篇文章是前端开发人员中的即时经典文章,对于对AppCache感兴趣的任何人绝对需要阅读.

        应用程序缓存参考

        • 我可以使用应用程序缓存吗?简要概述哪些浏览器支持AppCache.

        使用应用程序缓存的工具

        • 缓存清单验证器是用于验证AppCache清单文件的在线工具.
        • GWT AppCache支持库是Google Web Toolkit的模块,可自动生成Appcache清单文件.
        • Appcache-Manifest是一个Node.js工具,用于从命令行生成Application Cache Manifest文件。该工具包括清单文件的MD5哈希,以确保更新的文件自动更改清单,从而导致客户端上的适当缓存无效.
        • CacheMan是处理高速缓存清单生成的桌面应用程序.

        使用应用程序缓存前进

        您是否应该学习如何使用应用程序缓存?如果您是从事Web应用程序的前端开发人员—绝对可以。但是您还需要了解即将发生的事情以及离线浏览器存储的发展情况.

        AppCache的预期替代品是Service Workers。您已经可以在某些浏览器中使用Service Worker,并且有很好的工具可以轻松实现它们。另一方面,某些浏览器甚至尚未决定是否或何时实施该功能.

        那么您应该在自己的Web应用程序中做什么?

        目前,使用AppCache,但为服务工作者做好准备.

        游戏,图形和动画

        可缩放矢量图形(SVG)和HTML5 canvas元素是用于创建图形,动画甚至基于浏览器的游戏的两个强大工具。虽然这两种技术都可以用于某些相同的目的,但是它们以根本不同的方式工作.

        • canvas元素是位图空间,您可以在其中逐像素绘制和处理光栅化图像.
        • SVG是描述与分辨率无关的矢量图形的代码.

        canvas元素和SVG都可以使用脚本通过编程方式创建,并可以响应用户输入。因此,SVG和画布元素可用于创建静态图形和交互式动画。.

        SVG vs画布

        首先,SVG不是HTML5规范的一部分,而canvas是。 SVG是用于描述二维图形的语言。它是一个独立的Web标准,可以嵌入HTML和XML文档中.

        当嵌入到HTML文档中时,SVG使用与HTML5语法匹配的语法,因此导致某些人错误地认为SVG是HTML元素。.

        SVG和HTML5 canvas元素在浏览器中的呈现方式大不相同:

        • 画布元素是“即时”渲染的。这意味着画布元素是由浏览器处理时实时绘制的.
        • SVG不会立即绘制。当浏览器遇到SVG时,它首先为SVG构建DOM,然后呈现DOM.

        看起来似乎没有什么区别,但事实并非如此。这意味着浏览器在遇到画布时不必构建DOM,而在渲染SVG时则必须构建DOM。.

        对于简单的动画,差异可以忽略不计。但是,异常复杂的画布动画比SVG需要更少的浏览器资源.

        另一方面,如果您想对SVG进行少量更改,则可以遍历DOM进行更改,而必须重新绘制整个canvas元素以进行更改.

        画布元素和SVG不同的另一种方式是分辨率。画布元素取决于分辨率。这意味着放大画布元素时,分辨率会降低。另一方面,SVG与分辨率无关,并且在任何重新配置​​时都将看起来像像素一样完美.

        何时使用SVG和画布

        所有这些都引发了一个问题:何时应分别使用SVG和canvas元素?尽管这些工具的应用存在一些交叉,但通常请遵循以下准则:

        • 使用SVG制作像素完美的动画和图形,这些动画和图形在任何尺寸的设备上都必须清晰可见.
        • 如果您需要避免使用JavaScript或动画内容的可访问性至关重要,请使用SVG.
        • 使用HTML5 canvas创建包含大量用户输入的复杂动画和游戏.

        如果您想了解有关使用SVG的更多信息,请看一下我们比较SVG和SWF的文章,其中包括SVG资源列表。要了解有关HTML5 canvas元素的更多信息,请继续阅读.

        画布资源

        让我们从基础开始:

        • Mozilla开发人员网络画布教程:本教程从基本用法开始,并继续介绍绘图形状,文本,使用图像,创建变换和动画,像素操纵等。在本教程结束时,您将创建高级动画,连续平移全景图和颜色选择器应用程序.
        • Dev.Opera HTML5 Canvas —基础知识:画布的完整介绍涵盖了绘画技术,图像处理,基于像素的操作以及文本,阴影和渐变.
        • W3Schools画布教程:了解绘图的基础知识,如何使用坐标,渐变,绘图文本以及如何处理图像。然后,通过构建画布时钟应用您所学到的知识。最后,将它们放在一起并创建一些不同的基本HTML5游戏.
        • 雄辩的JavaScript,第16章:在画布上绘图:本文旨在教育JavaScript程序员,而不仅仅是教Web开发人员一些简单的技巧。整个交互式电子书都是金矿,但是,如果您的重点是直接学习如何使用canvas元素,则第16章将为JavaScript和HTML canvas元素如何交互提供牢固的基础。.

        牢牢掌握画布基础知识之后,您将希望继续使用高级技术:

        • Creative JS 31 Days of Canvas教程:一个月内(或多或少)掌握画布元素。完成本系列后,您将学到几种先进的画布动画技术.
        • HTML5 Rocks Case Studie:Building Racer:看一下此案例研究,您将了解Google的专业工程师如何使用JavaScript和canvas.

        没有什么比建造东西更好的学习方法了。这些教程将介绍您所学的知识,并向您展示如何创建一些简单的HTML5游戏:

        • CSS技巧学习画布:制作蛇游戏:CSS技巧以提供技术上出色的教程和文章而闻名。遵循本教程并制作有趣的蛇游戏,同时与Twitter的前端工程师一起学习如何使用画布。.
        • HTML5无障碍HTML5游戏指南:本教程将逐步指导您构建一个简单的太空侵略者游戏.
        • Envato Tuts +创建HTML5画布平铺拼图:在本教程中学习如何使用画布和JavaScript来构建平铺拼图。结果将是一个难度可调的简单应用程序,您可以将其用于任何图像.
        • Dev.Opera使用HTML 5 Canvas和Raycasting创建伪3D游戏:本教程将向您展示如何以90年代早期传奇游戏Wolfenstein 3D的样式使用HTML5和canvas创建伪3D游戏地图。虽然本教程不会制作功能齐全的3D第一人称射击游戏,但您将学习如何制作带有道具和后卫的可导航3D地图.

        掌握一个或两个深入的文本,是更好地掌握话题的最佳方法。以下是当今可用的三种最佳HTML5画布文本:

        • Fulton和Fulton的HTML5 Canvas(2013):学习使用canvas和JavaScript构建交互式多媒体Web应用程序。本文涵盖简单的2D绘图,使用算法开发基于数学的运动,使用视频和图像,使Canvas应用程序具有响应性等等.
        • 增压JavaScript图形:Raffaele Cecco撰写的HTML5 canvas,jQuery和More(2011年):此高级文本将帮助您掌握HTML5 canvas,并结合了诸如碰撞检测,对象处理,平滑滚动和Google数据可视化工具之类的高级技术。.
        • David Geary撰写的Core HTML5 Canvas:图形,动画和游戏开发(2011):这不是初学者的文字。旨在供具有中级JavaScript经验的经验丰富的开发人员阅读。尽管本文确实涵盖了画布的基础知识,但其重点是高级主题,例如游戏开发,自定义应用控件,物理在HTML5游戏中的应用以及移动应用的开发.

        互动元素

        HTML5添加了一些属性,使创建交互式网页更加容易.

        详细信息和摘要标签

        使用HTML5,可以创建可以通过和标签展开和折叠的列表。尽管可以通过使用

        • 标签,它们是静态的,不能折叠.
          元件

          为了提供列表的起点,开发人员必须从元素开始。该元素的作用类似于

            标签。以下示例显示了使用此标记启动代码段的方法:

            ...

            添加详细信息标签不足以完成列表。还需要添加摘要标签.

            元件

            摘要标签指定应用于列表的标签,该标签可以展开和折叠。可以折叠和展开的项目由摘要标签下的内容指定.

            摘要标记的内容可以由任何HTML元素指定,包括

            要么

              . 以下是使用和标签的简单示例:

              清单标签

              详细信息在这里...

              也可以将和标记嵌套在另一个集合中。这将在另一个列表中创建一个可折叠/可扩展列表.

              这是使用and标签的另一个列表中的列表的示例:

              项目清单

              项目1

              项目2

              项目3

              项目a

              项目b

              项目4

              详细信息和摘要标记可用于创建在网页上动态打开和关闭的列表的效果。这可以应用于各种情况,包括常见问题解答,这些常见问题解答的特征是可以打开或关闭的问题的答案.

              摘要标记将包含问题,而可折叠内容将包含答案.

              菜单和菜单项标签

              在浏览网络时,用户可以通过单击鼠标右键来访问浏览器的菜单。出现的菜单项因浏览器而异。使用一些新的HTML5标签,可以自定义菜单以添加用户可以执行的其他操作.

              此外,可以根据网页本身上的特定部分或位置来调整操作。例如,相对于网页主体,可以在导航区域中显示不同的操作或菜单项.

              使之成为可能的标签是和标签。由于这些是实验性标签,因此并未得到广泛支持。 Firefox是当前唯一支持Firefox的主流浏览器.

              元件

              每当需要添加菜单项时,一系列项目都需要以标签开头。该系列以结束标记结束, .

              开发人员应谨慎使用这些标签,因为它们是上下文菜单,它们是否显示取决于代码在HTML文件中的放置位置。当开发人员使用元素时尤其如此。考虑以下代码:

              ...

              在这种情况下,当用户右键单击“ tmpDiv”内的鼠标按钮时,将显示自定义菜单的元素。与大多数HTML5标签一样,菜单标签也具有称为label和type的属性.

              标签只是菜单的标识符,而类型可以指定为上下文,列表或工具栏。即使可以指定多种菜单类型,也仅支持上下文菜单.

              元件

              要将项目添加到菜单,开发人员必须使用标签指定项目的名称。标记具有一些属性,这些属性会影响菜单项的外观和行为.

              menuitem标签的属性包括标签,图标和onclick.

              标签指定了从浏览器激活菜单时用户将看到的菜单项文本。开发人员可以指定用于菜单项的图标,该图标将显示在文本的左侧。 onclick属性控制用户激活菜单项时采取的操作.

              onclick属性执行的操作可以执行javascript代码。例如,用户可能会看到一个警报框。这是一个如何设置menuitem标签的示例,该标签将显示一个显示“ hello”的弹出窗口:

              menu和menuitem标签可用于创建专门的菜单。这将允许用户根据单击的菜单项采取各种操作。但是,请注意,对这些标签的支持有限.

              本机拖放

              在HTLM5之前,开发人员必须使用jQuery UI或Dojo之类的JavaScript库向网站和应用添加拖放动画。.

              但是,HTML5添加了对拖放事件的本机浏览器支持,JavaScript API和专用标记以支持这些交互。在本部分中,我们将研究HTML5中的拖放操作,并为该功能的基本实现编写代码.

              建筑模块

              为了建立拖放交互,您的HTML标记将需要包含三种类型的元素:

              • 源元素:要拖动的元素,由HTML5属性指定,例如draggable ="真正".
              • 目标元素:将拖放元素的元素,由HTML5属性droppable =进行指定"真正".
              • 有效负载:拖放元素后要传输的数据.

              拖放API事件

              JavaScript API包含六个事件和一个对象,您需要使用它们来创建拖放交互.

              • 选择可拖动对象时,将触发dragstart事件.
              • 当选定可拖动对象时,鼠标指针进入可放置对象时,将触发Dragenter事件.
              • 在选择可拖动对象并且鼠标指针悬停在可放置对象上时,每次鼠标移动时都会触发拖动事件.
              • 当选择了可拖动对象并且鼠标指针离开可放置对象时,将触发dragleave事件.
              • 通过释放鼠标按钮或离开浏览器窗口取消选择可拖动对象时,将触发dragend事件.
              • 当将可拖动对象拖放到可放置对象时,将触发drop事件.
              • dataTransfer对象用于保存拖动的数据.

              拖放示例

              为了演示如何在网站上使用HTML5拖放功能,让我们创建一个简单的小部件,使网站访问者可以将三个元素排列成与他们的偏好相匹配的顺序.

              此示例的灵感来源是HTML5 Rocks:原生HTML5拖放.

              让我们从HTML开始

              最喜欢的DnD实施
              HTML51
              jQuery UI2
              道场3

              我们创建了三个div,每个div包含一些与不同的拖放实现有关的文本。我们还继续按照默认顺序排列了这三个参数,并为其分配了首选项1、2和3.

              每个div都有一个droppable =属性"真正" 和Draggable ="真正" 反映了一个事实,我们将使所有三个都可以互换.

              让我们添加一些基本样式.

              #boxes {
              文本对齐:居中;
              宽度:100%;
              最大宽度:658px;
              保证金:0自动;
              保证金:0自动;
              字体家族:“ Source Sans Pro”,FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
              溢出:自动;
              }
              .标题{
              显示:块;
              font-size:1.25em;
              填充:10px;
              }
              .框{
              背景颜色:#bcd5e0;
              边框:2px实线#aaa;
              边距:10px;
              光标:移动;
              溢出:自动;
              }
              .Box .dnd-tech {
              字体大小:1em;
              显示:inline-block;
              填充:10px 0;
              }
              .框.position {
              字体大小:1em;
              向左飘浮;
              填充:10px;
              右边框:2px实线#aaa;
              颜色:#fff;
              背景颜色:#0a5194;
              }

              虽然我们不会逐行介绍这些样式,但实际上,我们要做的是并排排列框并在整个过程中应用某些样式。这是我们的盒子现在的样子:

              拖放

              让我们创建一些样式,这些样式将在拖放元素时应用于可拖放元素.

              .box.draagged {
              不透明度:.5;
              }
              .box.over {
              边框:2px虚线#222;
              不透明度:.5;
              }

              转到JavaScript。首先,我们创建一些函数,这些函数将根据用户活动来处理添加和删除的类.

              函数dragStartHandler(e){
              this.classList.add('dragged');
              }

              函数dragEnterHandler(e){
              this.classList.add('over');
              }

              函数dragLeaveHandler(e){
              this.classList.remove('over');
              }

              函数dragEndHandler(e){
              [] .forEach.call(boxes,function(box){
              box.classList.remove('over','draged');
              });
              }
              var box = document.querySelectorAll('#boxes .box');

              目前,这些功能无法执行任何操作。我们会暂时将每个事件与适当的事件相关联。现在,让我们看看每个人的工作.

              第一个函数dragStartHandler会将被拖动的类添加到被拖动的元素中.

              接下来的两个函数将在拖放元素通过它们时在可放置元素中添加和删除over类。.

              最后一个函数遍历所有框,并删除多余的和拖动的类.

              接下来,我们需要编写一个函数来执行一些清理工作,以解决拖动事件.

              函数dragOverHandler(e){
              如果(e.preventDefault){
              e.preventDefault();
              }
              返回false;
              }

              一旦我们将此功能绑定到鼠标悬停,它将禁用默认的浏览器行为,有时会在拖放交互过程中妨碍您的行为.

              接下来,我们需要向两个不同的函数添加代码,以便我们可以使用dataTransfer对象来选择将由交互操作移动的数据.

              函数dragStartHandler(e){
              this.classList.add('dragged');

              dragData = this;
              e.dataTransfer.setData('text / html',this.firstElementChild.innerHTML);
              }

              函数dropHandler(e){
              如果(e.stopPropagation){
              e.stopPropagation();
              }
              如果(dragData!= this){
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData('text / html');
              }
              返回false;
              }

              我们已经看到了dragStartHandler函数,但是现在我们添加了两行。首先,将拖动框分配给变量dragData.

              第二个方法使用dataTransfer对象的setData方法将所选框的第一个子元素(Name元素)的内部HTML分配给dataTransfer对象.

              首先,dropHandler函数将停止浏览器的默认行为。接下来,它检查以确保被拖动的对象也不是可放置的对象。如果不是,则接下来的两行会插入并交换可拖动和可拖放框的名称.

              因此,现在我们已经拥有所有功能,并且需要将它们与六个拖放DOM事件相关联。我们可以使用一个forEach函数来做到这一点.

              [] .forEach.call(boxes,function(box){
              box.addEventListener('dragstart',dragStartHandler,false);
              box.addEventListener('dragenter',dragEnterHandler,false);
              box.addEventListener('dragover',dragOverHandler,false);
              box.addEventListener('dragleave',dragLeaveHandler,false);
              box.addEventListener('drop',dropHandler,false);
              box.addEventListener('dragend',dragEndHandler,false);
              });

              该代码的作用是侦听每个框上的所有六个拖放事件,然后基于任何触发的事件运行一个函数。一旦将所有这些代码放在一起,就产生了一组不错的可拖放框。试试看:

              #boxes {
              文本对齐:居中;
              宽度:100%;
              最大宽度:658px;
              保证金:0自动;
              字体家族:“ Source Sans Pro”,FreeSans,Arimo,“ Droid Sans”,Helvetica,Arial,sans-serif;
              溢出:自动;
              }
              .标题{
              显示:块;
              font-size:1.25em;
              填充:10px;
              }
              .框{
              背景颜色:#bcd5e0;
              边框:2px实线#aaa;
              边距:10px;
              光标:移动;
              溢出:自动;
              }
              .Box .dnd-tech {
              字体大小:1em;
              显示:inline-block;
              填充:10px 0;
              }
              .框.position {
              字体大小:1em;
              向左飘浮;
              填充:10px;
              右边框:2px实线#aaa;
              颜色:#fff;
              背景颜色:#0a5194;
              }
              .box.draagged {
              不透明度:.5;
              }
              .box.over {
              边框:2px虚线#222;
              不透明度:.5;
              }

              最喜欢的DnD实施

              HTML51
              jQuery UI2
              道场3

              函数dragStartHandler(e){
              this.classList.add('draged');

              dragData = this;
              e.dataTransfer.setData('text / html',this.firstElementChild.innerHTML);

              }

              函数dragEnterHandler(e){
              this.classList.add('over');
              }

              函数dragLeaveHandler(e){
              this.classList.remove('over');
              }

              函数dragOverHandler(e){
              如果(e.preventDefault){
              e.preventDefault();
              }
              返回false;
              }

              函数dropHandler(e){
              如果(e.stopPropagation){
              e.stopPropagation();
              }
              如果(dragData!= this){
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData(‘text / html’);
              }
              返回false;
              }

              函数dragEndHandler(e){
              [] .forEach.call(boxes,function(box){
              box.classList.remove('over','draged');
              });
              }

              var box = document.querySelectorAll(‘#boxes .box’);
              [] .forEach.call(boxes,function(box){
              box.addEventListener('dragstart',dragStartHandler,false);
              box.addEventListener('dragenter',dragEnterHandler,false);
              box.addEventListener('dragover',dragOverHandler,false);
              box.addEventListener('dragleave',dragLeaveHandler,false);
              box.addEventListener('drop',dropHandler,false);
              box.addEventListener('dragend',dragEndHandler,false);
              });

              你在等什么?

              HTML5为可拖动和可拖放元素添加了本机浏览器支持。实现拖放功能涉及使用JavaScript处理六个不同的拖放事件和一个数据对象.

              iframe

              本质上,iframe是一个HTML元素,它会在网页中嵌套一个小的浏览器窗口,您可以在其中加载任何HTML文档.

              Iframe的用途是什么?

              现代网络上iframe的最常见用途之一是将流媒体嵌入网页中。 Spotify,Vimeo和YouTube等媒体流媒体网站使用iframe将其内容嵌入到其他网站上.

              例如,转到YouTube,打开任何视频,右键单击该视频,然后选择“复制嵌入代码”。完成后,看起来像这样的代码将被复制到剪贴板中:

              将这段代码添加到网页中,然后iframe将用于加载以src属性引用的URL托管的YouTube视频.

              流媒体并不是iframe唯一的优点。使用iframe的另一种方法是将内容与网页的其余部分隔离。这是两个示例:

              • 在教程中显示大量代码的网站可以使用iframe呈现该代码,而不必与适用于其网站的默认样式和脚本进行斗争.
              • 展示第三方广告的网站通常使用iframe加载这些广告,这样就可以通过替换源文档中的代码来替换广告,而无需对显示广告的网页上的代码进行任何处理.

              HTML 4.01 iframe

              iframe元素是HTML 4.01中引入的,包括四个主要属性:

              • src:指定要在iframe中呈现的HTML文档的URL.
              • 宽度和高度:指示iframe的大小(以像素为单位).
              • 名称:允许iframe可以通过a,表单,按钮或输入元素作为目标.

              HTML 4.01还包括一系列次要的附加属性。但是,其中许多已在HTML5中被弃用或完全删除.

              HTML5删除了iframe属性

              被删除的属性中最大的一组是那些可以解决CSS问题的属性.

              • 不推荐使用align属性,而是使用float,display和margin CSS属性来控制iframe布局.
              • 为支持CSS边框,不推荐使用frameborder属性.
              • 不推荐使用marginheight和marginwidth属性,而推荐使用CSS填充.
              • 不建议使用scrolling属性,而建议应用溢出:隐藏iframe滚动条.

              另一个属性longdesc遭受了广泛的滥用。结果,它现在已经过时了.

              HTML5添加的iframe属性

              HTML5向iframe元素添加了两个新属性:沙箱和srcdoc.

              沙箱属性用于限制iframe内容的功能.

              例如,仅将沙箱添加到iframe中,将阻止嵌入的内容执行脚本,提交表单,在顶级浏览上下文中加载内容以及其他操作。可以通过向属性添加值来减少应用于iframe的限制.

              例如,沙箱="允许形式" 将允许提交iframe中的表单。此属性的其他值包括但不限于allow-popups,allow-same-origin,allow-scripts和allow-top-navigation.

              srcdoc属性可用于指定要在iframe中呈现的HTML。例如,以下代码将在iframe中渲染图像:

              iframe资源

              如果您想了解有关iframe的更多信息,最全面的资源之一是Mozilla开发人员网络iframe元素参考页。在这里,您将找到每个iframe属性的详细说明,包括对所有可能的沙盒值的深入讨论.

              微数据

              当您访问我们的托管评论时,您可能会看到类似“ 752条评论”和“ 4星5星”的主机评级。凭直觉,您了解到752条用户评论已合并在一起,得出总的主机评分为5星中的4星.

              但是,搜索引擎并不像您那么聪明,这就是微数据进入的地方.

              微数据是一组HTML属性,这些属性是作为HTML5规范的一部分添加的,以为某些类型的内容提供机器可读的标签。使用这些标签,搜索引擎可以更好地理解和索引您的网站内容,并产生更好的搜索结果.

              微数据基础

              微数据由相关的名称/值对组成,这些名称/值对组合在一起成为一个项目。让我们看一个通用的例子.

              我们从一个项目开始,例如一个网站。知道我们要处理一个网站后,就有许多可以与该网站关联的名称/值对,例如URL,网站名称或说明.

              要创建微数据项,我们将首先创建一个父元素以包含所有网站微数据。然后,我们将在子元素中列出微数据,并使用适当的微数据标签对其进行标记.

              最后,搜索引擎将访问该页面,识别该网站项目,并将所有适当的微数据与该项目相关联.

              如果这一切现在听起来有点抽象,那么查看实际的微数据标记将使一切变得更加清晰。但是在我们这样做之前,我们需要引入微数据属性.

              微数据标记

              HTML5规范包含四个微数据属性:

              • itemscope是创建新项目的属性.
              • 在itemscope旁边添加了itemtype,以定义要创建的项目的类型。在大多数情况下,使用schema.org项目类型.
              • 将itemprop添加到每个包含类型属性的元素.
              • itemref被添加到itemscope元素,并将不是itemscope元素的直接后代的元素与item相关联.

              让我们将所有这些属性添加到虚拟的虚拟主机评级中,以便您可以看到所有这些属性.

              超级Linux托管

              额定值:
              4星,满分5星
              423个真实用户评论.

              特色用户评论

              这是一个很棒的主人!我爱他们!
              5星,最高5星!

              上面的代码创建一个包含许多名称/值对的项目:

              • 首先,我们创建了一个公司项目.
              • 项目名称设置为“ Super Linux Hosting”.
              • 项目URL设置为http://superlinuxhosting.com
              • 项目汇总评论是一个嵌套的项目,其中包含两个名称/值对:5个星中的4个评级值和423个评论数.
              • 最后,通过添加到第一个元素的itemref属性,最后一个“名称/值”对是一个评价,该评价的值包括两个“名称-值”对:描述和5星(5星)中的评分.

              有了微数据,Google和其他搜索引擎将对信息建立索引并识别Super Linux Hosting公司以及相关的综合评分和个人评论.

              微数据资源

              如果您想了解有关微数据的更多信息,那么应该去两个地方:

              • Schema.org入门使用微数据是对该主题的简单易懂的介绍。此外,您还需要保留所有schema.org项目类型的列表.
              • HTML:《生活标准》第5节“微数据”是对微数据的技术分析。如果您想学习将微数据用于schema.org以外的自定义应用程序,这是您正在寻找的资源.

              全局属性

              可以将属性添加到任何HTML元素,以修改该元素的默认功能或行为。通过命名属性然后在元素的开始标记内指定属性值来添加它们,如下所示:

              内容

              大多数属性只能应用于特定类型的元素。但是,其他属性(称为全局属性)可以与任何HTML元素一起使用。 HTML5规范定义了以下全局属性:

              • accesskey:为元素分配键盘快捷键.
              • class:添加一个类名称,以允许使用级联样式表(CSS)进行样式设置或JavaScript程序定位元素.
              • contenteditable:使元素可由网站访问者编辑.
              • contextmenu:将自定义上下文菜单选项与元素相关联.
              • data- *:自定义数据属性,可用于保存页面特定信息,以在CSS样式表或JavaScript程序中进行选择.
              • dir:为元素的文本内容分配方向性.
              • draggable:允许使用对拖放事件的原生HTML5支持来拖动元素.
              • dropzone:定义当拖放被拖动的项目时应该执行的操作。选项包括复制,链接和移动.
              • hidden:用于隐藏元素,直到应显示它为止。在适当的时候使用JavaScript删除该属性.
              • id:为元素分配唯一标识符.
              • lang:在相关元素中定义内容的语言.
              • 拼写检查:确定是否应检查用户输入的拼写.
              • style:允许将CSS样式直接附加到HTML元素.
              • tabindex:确定元素应在标签索引中的位置.
              • 标题:添加文本,当访客将鼠标悬停在元素上时,该文本将显示为工具提示.
              • 翻译:用于防止浏览器翻译特定HTML元素的文本内容.

              事件处理程序

              此外,可以将超过50个事件处理程序作为HTML属性添加到任何HTML元素。这些事件处理程序中的每一个都可用于触发一些关联的代码,以在事件发生时运行.

              下面的列表包括所有事件处理程序属性,后跟触发处理程序的事件的描述.

              值得注意的是,尽管HTML规范允许将它们应用于任何HTML元素,但其中许多事件处理程序仅适用于少数几个HTML元素。.

              • onabort:元素的加载已中止.
              • onfocus和onblur:元素已获得焦点或失去焦点.
              • oncancel:用户已关闭对话框元素.
              • oncanplay和oncanplaythrough:媒体元素下载了足够的数据以开始播放或完成播放而没有缓冲.
              • onchange:a表单元素(例如输入或textarea元素)的值已更改.
              • onclick和ondblclick:元素已被单击或双击.
              • onclose:发生了几种不同的关闭事件之一.
              • oncontextmenu:右键单击元素已打开上下文菜单.
              • oncopy,oncut和onpaste:目标元素已被剪切,复制或粘贴.
              • oncuechange:与媒体资源关联的文本轨道已更改当前显示的提示.
              • ondrag,ondragend,ondragenter,ondragexit,ondragleave,ondragover,ondragstart,ondrop:可拖动元素使用HTML5拖放API进行操作.
              • ondurationchange:媒体元素的duration属性已更改.
              • 空:媒体元素已为空.
              • onended:媒体元素已到达末尾.
              • 错误:资源加载失败.
              • oninput:输入或contenteditable元素的值已更改.
              • oninvalid:提交的元素验证失败.
              • onkeydown,onkeypress和onkeyup:发生了键盘按键事件.
              • onload,onloadeddata,onloadedmetadata,onloadstart:整个资源或资源的指定部分已完成加载.
              • onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout,onmouseover和onmouseup:用户和元素之间发生了基于鼠标的交互.
              • onwheel:鼠标的滚轮按钮已旋转.
              • 正在播放和正在播放:媒体元素已开始播放或已暂停(有意或在等待其他数据时),并准备恢复播放.
              • 暂停:媒体播放已暂停.
              • 进行中:操作已开始且正在进行中.
              • onratechange:媒体播放速率已更改.
              • onreset:表单元素已被重置.
              • onresize:文档视口的大小已更改.
              • onscroll:视口或元素已滚动.
              • onseeked和onseeking:已使用或正在使用媒体元素的搜索功能.
              • onselect:已选择元素的某些内容.
              • onshow:上下文菜单已启动,而焦点中的元素具有contextmenu属性.
              • 已安装:媒体检索已被延迟或意外停止.
              • onsubmit:表单元素已提交.
              • onsuspend:已暂停加载媒体元素.
              • ontimeupdate:媒体元素的currenttime属性已更新.
              • onggle:明细元素已打开或关闭.
              • onvolumechange:媒体元素的播放音量已更改.
              • 等待中:在等待更多数据下载时,播放已停止.

              DOM元素

              当浏览器呈现网页时,它不只是呈现网页HTML。而是,浏览器首先构建页面HTML内容的本地交互式模型。.

              该模型在浏览器内存中本地构建和保存,称为文档对象模型(DOM)。在DOM中,每个HTML元素都作为单个节点存在,并且这些节点的总和构成DOM.

              访问DOM

              为了使脚本语言(例如JavaScript)与DOM交互,每个节点都必须使用独立于语言的标准化属性和方法进行调用.

              这些属性和事件是使用接口定义语言(IDL)定义的,并且这些IDL属性和事件使DOM节点暴露于使用任何编程语言编写的脚本中,尽管JavaScript是迄今为止最常见的脚本.

              结果是采用HTML元素的系统(例如:

              一些文字

              )并创建一个包含所有这些信息的DOM节点(例如:一个值为Some text且IDL属性为className =的p节点)"文章主体" 和标题="例").

              然后,可以使用脚本语言通过引用节点的IDL属性来操作DOM节点.

              基本的IDL属性和方法

              HTML5规范定义了HTMLElement接口,并列出了适用于所有HTML元素的许多IDL属性和方法.

              每个单独的DOM节点都继承所有这些IDL属性和方法,并且可以选择添加其他属性和方法在HTMLElement接口上进行扩展.

              HTMLElement接口

              HTMLElement接口适用于所有DOM节点,可以分为三组:元数据属性,用户交互和全局事件处理程序.

              元数据属性包括:

              • 标题IDL属性由标题HTML属性设置.
              • lang IDL属性由lang HTML属性设置,用于标识嵌套在DOM节点内的内容的语言。如果未提供lang属性,则暗指分配给最近的父节点的语言.
              • translation属性用于防止客户端翻译网页内容。该属性在文档级别默认为translate = yes,并且对于不应该转换的任何节点,必须手动将其设置为translate = no.
              • dir属性确定所包含文本的方向。该属性没有默认值.
              • 数据集IDL属性是自定义数据属性data- *的只读DOM表示形式。将自定义数据属性添加到HTML元素时,例如data-postId ="6057", 这些数据属性汇总到单个数据集IDL属性中,并分配给结果DOM节点.

              用户交互包括:

              • hidden属性是一个布尔值,用于确定DOM节点是否可见.
              • click()事件模拟鼠标单击用户交互.
              • tabIndex属性确定DOM节点在标签索引中出现的顺序.
              • focus()事件模拟目标DOM节点成为焦点的用户交互.
              • blur()方法用于使目标DOM节点散焦.
              • accessKey IDL属性由accesskey HTML元素属性设置,并将键盘快捷方式分配给目标节点.
              • accessKeyLabel IDL属性是分配的访问密钥的只读表示形式.
              • contentEditable IDL属性由contenteditable HTML元素属性设置,并确定用户是否可以编辑目标节点.
              • isContentEditable IDL属性是一个只读的布尔值,指示目标节点是否可编辑.
              • spellcheck IDL属性是一个布尔值,该布尔值确定是否应检查DOM节点(通常是输入节点)的内容是否正确拼写.

              全局事件处理程序的列表长五十个条目。以下十个事件处理程序是一些最重要且最常用的全局事件处理程序:

              • 点击
              • 专注
              • 按键
              • 负载
              • 鼠标输入
              • 阴部
              • 鼠标悬停
              • 滚动
              • 选择
              • 提交.

              形式

              表单早已成为HTML规范的一部分。但是,在HTML5表单功能中,输入和表单元素的新属性,新的输入类型,甚至几个全新的元素都大大扩展了功能.

              HTML表单基础

              构建HTML表单时,通常应从form标记开始:

              在这些标签之间,您将嵌套各种字段以接受和提交数据。最重要的表单元素是:

              • 输入元素,默认为标准文本字段。但是,通过使用type属性,可以将输入元素格式化为接受密码,重置所有表单字段,显示单选按钮或复选框,生成按钮以及提交表单内容.
              • textarea元素,用于为长格式输入答案创建文本输入区域.
              • select元素,与option元素一起使用以创建下拉列表。 select元素创建列表,并且嵌套在select元素内的每个选项代表列表中可用的另一个选项.
              • button元素,用于创建表单按钮.

              HTML5表单增强功能

              HTML5引入了许多新的输入类型,输入和表单属性以及三个新的表单元素。让我们依次介绍一下.

              新的输入元素类型:

              • 颜色输入类型标识应接受颜色的字段,并且当该字段处于焦点位置时,某些浏览器会生成一个颜色选择器.
              • HTML5引入了六种新的时间和日期输入类型,每种类型都会在支持的浏览器中生成日期选择器:
                • 日期:选择包含日期,月份和年份的日期.
                • datetime:选择日期和时间以及时区信息.
                • datetime-local:选择日期和时间,但省略时区信息.
                • 时间:选择一个时间.
                • 周:选择星期和年份.
                • month:选择月份和年份.
              • 电子邮件输入类型用于标识应接受电子邮件地址的字段。受支持的浏览器还将执行基本输入验证,以确保输入了电子邮件地址.
              • HTML5引入了两种新的面向数字的输入类型:数字和范围。数字允许输入任何数字,但要遵守可选的最小值和最大值限制。范围创建一个受最小值和最大值限制的滑块,允许用户在指定的可接受值范围内选择一个值.
              • 搜索输入类型用于标识搜索提示.
              • tel输入类型用于标识应接受电话号码的字段。受支持的浏览器将执行基本输入验证,以确认已输入电话号码.
              • url输入类型标识应接受url的字段。支持的浏览器将执行基本验证,并且支持的移动设备可能会显示.com键盘按钮.

              新的输入元素属性:

              • 自动完成:打开或关闭输入元素的自动完成。如果启用,自动完成值将从保存的表单条目中提取.
              • autofocus:指定一个输入元素,该元素将在页面加载时自动聚焦.
              • 表单:使用分配给表单的ID将未嵌套在表单内部的输入元素与表单相关联.
              • formaction:分配给提交字段以通过提供备用URL进行表单处理来覆盖默认表单行为.
              • formenctype:添加到提交字段中,以指定编码类型,以应用于使用post方法提交的数据.
              • formmethod:添加到Submit字段中以指定应该用于表单提交的HTTP方法post或get.
              • formnovalidate:与提交字段一起使用,以防止浏览器验证表单数据.
              • formtarget:添加到提交字段,以告知浏览器在当前窗口或新窗口中显示表单响应.
              • 高度和宽度:用于指定类型的大小="图片" 表单提交按钮.
              • 最小值和最大值:与数字,范围或日期时间相关的输入类型一起使用,以分配所选值必须介于其之间的最小值和最大值.
              • 多个:与文件或电子邮件输入类型一起使用,以允许用户添加多个值.
              • 模式:用于定义正则表达式,用于验证输入到电子邮件,密码,搜索,电话,文本或url字段中的数据.
              • 占位符:将占位符文本分配给输入元素,当该元素成为焦点时将被删除.
              • 必需:标识在提交表单之前必须填写的元素.
              • step:与数字,范围或面向日期时间的输入类型一起使用,以确定可以选择值的步骤。例如,添加step ="10" 输入的数字限制为最小0到最大30之间的值,将允许提交0、10、20或30.

              新的表单元素属性:

              • 自动完成:打开或关闭整个表单的自动完成功能。仍可以通过在单个输入元素上使用相同属性来控制每个输入的自动完成.
              • novalidate:关闭浏览器对表单提交的验证.

              新表单元素:

              数据列表元素为输入元素创建预定义建议的下拉列表。请注意,此元素不会将输入字段限制为这些值。相反,它们仅作为建议.

              下拉列表通过新的list属性与输入元素相关联。例如:

              输出元素创建一个占位符以显示过程(例如计算)的结果。请注意,输出实际上并不会执行任何计算-您仍然需要使用JavaScript或服务器端程序来执行输出-它只是提供了显示结果的位置。例如:

              公式:y = mx + b

              坡度(米)

              x的值:

              Y截距(b):

              Y的值:

              然后,如果我们用JavaScript编写lineformula()来处理计算并加入CSS,我们可以生成以下简单但实用的JavaScript计算器:

              函数lineformula(){
              var y = 0;
              var m = document.getElementById(“ m”)。value;
              var x = document.getElementById(“ x”)。value;
              var b = document.getElementById(“ b”)。value;
              y = + m * + x + + b;
              document.getElementById(“ y”)。value = y;
              }

              #example-form {
              宽度:100%;
              最大宽度:400像素;
              保证金:0自动;
              边框:1px实线#bbb;
              背景颜色:#eee;
              }
              #example-form p输入,#example-form p输出{
              浮动:正确;
              宽度:100px;
              }
              #example-form p {
              溢出:自动;
              填充:10px;
              边距:0;
              }
              #example-form p:not(:last-child){
              边框底部:1px实心#bbb;
              }

              公式:y = mx + b

              坡度(米)

              x的值:

              Y截距(b):

              Y值:

              在HTML5中还添加了keygen元素,以对用户进行身份验证。该元素旨在生成一个公私钥对,可用于确保仅将表单提交的结果显示给适当的用户。但是,该元素现已定为要从HTML5规范中删除,因此不应使用.

              语义元素

              已经设计了许多HTML元素,以在网页内容中添加语义。这意味着某些HTML元素隐含了关于元素内容的特定含义.

              例如,强调标签的使用是由浏览器使用斜体字体呈现的,它表示元素的内容应比周围的内容更强调阅读和理解。.

              尽管并非所有HTML元素都具有语义,但重要的是,应尽可能根据其语义使用HTML标签.

              为什么语义如此重要

              语义重要的原因至少有四个:

              • 语义增强了可访问性。当选择HTML元素提供有关页面内容含义的线索时,辅助技术将更好地传达网页的含义.
              • 语义使内容更易于发现。当HTML元素根据其适当的语义目的使用时,搜索引擎将能够更好地理解网页内容并为其编制索引.
              • 语义元素是国际化的福音。 HTML5中引入了新的语义元素ruby和bdi,以更好地认识到世界上不到15%的母语是英语的事实.
              • 语义通过使开发人员和应用程序更容易理解网页内容并与之交互来提高互操作性.

              随着迈向万物互联(IOE)的步伐不减,语义变得越来越重要.

              随着Internet连接设备的数量和多样性激增,在HTML和其他形式的Web编程中使用适当的语义变得越来越重要。.

              如今,您可能会认为自己正在创建一个主要在笔记本电脑和智能手机上浏览的网页,但是在接下来的十年中,任何人都将猜测哪种设备将试图访问并理解您网站的内容.

              确保语义正确是确保数据随时间推移保持高度可访问性的关键.

              HTML5之前的HTML中的语义

              HTML元素始终具有语义。表单或表格元素的使用始终隐含着元素内容的某种含义和目的.

              通过使用ol和ul标签,列表已被浏览器识别为本质上是有序的或无序的。同样,还有大量HTML5之前的元素列表,可在文本内使用这些元素来添加语义:

              • em和强标签表示重点和 重点强调.
              • s,del和ins标记用于标识不再适用的信息或已被更新的信息替换的信息.
              • quote和cite标签用于标识报价和创意作品.
              • abbr和dfn标签用于将说明性注释与需要定义的术语相关联.
              • code,samp,kbd和var元素用于标识特定类型的文本:编程代码,示例计算机程序输出,键盘输入和公式变量.
              • sup和sub元素标识应显示为下标或上标文本的内容.

              尽管许多早于HTML5的HTML元素都具有语义含义,但是HTML5解决的语言存在一个主要缺点:缺乏结构性语义元素.

              HTML5之前的HTML文档结构

              在HTML5之前,div元素是用于向网页文档添加结构的主要容器。查看使用divs构建的网页并生成如下所示的文档结构是非常普遍的事情:

              这种使用div元素构建页面结构的方法(一种称为divitis的实践)并不使用HTML元素本身对页面结构隐含任何含义。在HTML5之前,开发人员可以接受这种做法.

              但是,随着HTML5中新的结构性语义元素的出现,有更好的方法.

              HTML5中的结构语义元素

              HTML5引入了以下元素,以代替上例中显示的div汤。这些元素为文档提供结构,同时对文档的各个部分隐含特定含义:

              • 主要元素旨在保存网页的主要内容。如果网站在所有页面上重复使用相同的页眉和页脚,则通常会在主要元素中省略这些内容,而将所有其他网页内容正确地嵌套在主要元素中.
              • 标头元素包含有关整个网页或网页部分的介绍性内容。使用它来保存出现在网站每一页上的标题,并使用它来将标题和其他介绍性信息保存在文章或页面部分的顶部是合适的。.
              • 页脚元素旨在保存有关其父元素的摘要信息。它可以用于包含出现在网站的每个页面以及文章内的网页页脚,以保存文章摘要信息,例如作者,主题,发布日期和用户评论。.
              • section元素用于将与主题相关的内容分组在一起,并且通常以heading元素开头。例如,在博客上,页面的主要部分可能是一个部分,而侧边栏可能占据了第二部分.
              • nav元素用于标识一组导航链接。通常,导航元素仅限于可重复使用的站点范围导航元素,例如出现在网页页眉,页脚和侧边栏中的元素.
              • article元素用于将有意义的内容组合在一起,这些内容是独立于网页的独立单元,例如博客文章或新闻文章。文章可以包含页眉,页脚,section和aside元素.
              • aside元素用于标识应理解的信息,而不是父元素中内容的主要流.

              虽然在设计网页结构时不必使用所有这些元素,但可以适当地使用它们,以更清晰地了解页面各部分的语义.

              如果我们重新查看div-soup布局并对其进行修改以实现这些新标签,则会得到如下所示的内容:

              HTML5中的文字语义元素

              除了我们已经介绍的结构性元素外,HTML5还引入了许多元素,以暗示特定类型的文本内容含义。让我们来看看它们:

              • address元素用于标识与网页或文章的作者或所有者有关的地址信息.
              • Figure和figcaption元素用于识别和字幕与网页内容相关的视觉内容(例如图形,图表或插图),但不必与文档内容内联显示.
              • 标记标记用于标识在当前上下文中具有特定含义的文本。例如,它可以用于识别显示搜索结果的页面中搜索词的每次出现.
              • 时间元素将一些文本标识为代表特定时间点。 datetime属性可用于将特定时间点的机器可读版本添加到时间标记中.
              • 对于遵循从右到左模式的语言,bdi元素用于反转内容的方向性.
              • ruby,rp和rt元素用于为某些亚洲语言字符提供发音辅助或红宝石.

              动态HTML

              动态HTML

              考虑现代网页时,通常不会想到一个静态网站。得益于JavaScript和PHP等脚本语言的出现,我们今天看到的网站比其前身更具交互性和动态性.

              尽管创建动态网页的方法多种多样,但您可能不熟悉其中一种特定的技术,尽管您可能没有听说过:DHTML.

              名称“ DHTML”有点用词不当。与使用其名称的标记语言HTML不同,动态超文本标记语言实际上是一个术语,描述了用于创建动态网站的多种技术和语言。.

              这些是DHTML的四个关键要素:

              • 的HTML:用于创建静态页面和应用程序的标记语言.
              • 的CSS:用于通过样式表指示页面表示的语言.
              • 的JavaScript:用于在页面上开发交互式元素的编程语言.
              • DOM:用于更改页面代码的编程界面.

              如果您想了解有关DHTML的更多信息,以下资源列表包括参考资料,分步指南和工具,可帮助您使用DHTML创建动态网页.

              图书

              尽管网站始终是一个良好的基础,但毫无疑问,投资一些桌边资源会带您了解DHTML的来龙去脉.

              • JavaScript:David Flanagan的权威指南(2006):这是学习JavaScript的入门指南,也是与DHTML相关的所有问题的优秀参考资料.
              • Web的交互式数据可视化:D3设计入门(Scott Murray,2013年):一旦掌握了DHTML的基础知识,就可以使用此分步指南学习动态内容设计的基础知识.
              • DOM脚本:Keith和Sambells撰写的《使用JavaScript和文档对象模型进行Web设计》(2010年):当您希望更好地了解DOM并在实际应用中进行实践时的理想资源.
              • 使用JavaScript的网络动画:开发 & 朱利安·夏皮罗(Julian Shapiro)设计(2015):如果您希望通过DHTML掌握动画,请查看此.

              工具类

              这些对DHTML的第三方贡献旨在帮助开发人员编写更简洁的代码,轻松调试,并使用预编写的脚本来增强工作量.

              • 动态驱动器:此网站致力于为开发人员提供免费的JavaScript(和其他DHTML)脚本.
              • DHTML Goodies:另一个提供免费DHTML(和Ajax)脚本的在线资源.
              • JavaScript Kit脚本:另一个免费资源,用于查找JavaScript脚本以帮助创建各种设计和动画效果.

              在线指南和教程

              是否需要有关HTML,CSS,JavaScript和DOM的逐步指南?还是您更喜欢动手实践?以下指南将涵盖您的所有据点.

              • 面向初学者的Web开发路线图:这份“学习代码”指南是开始使用DHTML的理想之地,因为它将带您全面了解HTML(第1章)的基础知识以及JavaScript和jQuery(第5章).
              • W3Schools DHTML教程:W3Schools提供了有关DHTML的各种教程,并按三种不同的编程语言进行了分类.
              • Mozilla Web技术教程:Mozilla开发人员网络提供了更全面(且组织良好)的指南之一,可用于DHTML涉及的各种编程语言.
              • QcTutorials DHTML教程:正在寻找一种简单直接的方法来学习DHTML?阅读本教程,然后保留其DHTML和HTML DOM示例以供将来参考.
              • DHTML入门指南:DHTML简介,其中包括许多入门指南.
              • Web开发人员和CSS教程:您可以学到很多关于CSS的知识,所以不要只局限于基础知识。此资源包括根据您特定网站的需求的各种CSS教程.
              • JavaScript教程:JavaScript Kit的另一本指南,仅此一章专门针对JavaScript相关的任务.
              • CSS参考:编写CSS时,请使用此简单资源作为快速参考指南.
              • DOM参考:在此处了解有关不同DOM对象的更多信息.

              开始工作!

              如果您打算为网站创建动态内容,则必须对DHTML框架下的每个元素如何工作以及它们如何共同发挥作用有深刻的了解,这一点很重要.

              上面的参考指南是一个很好的起点,但是如果您想通过学习一种新的编程技术来突破机会,那么没有什么比动手实践更好的了.

              编写好的HTML并使用验证器

              .sourceCode span.kw
              .sourceCode span.dt
              .sourceCode span.dv
              .sourceCode span.bn
              .sourceCode span.fl
              .sourceCode span.ch
              .sourceCode span.st
              .sourceCode span.co
              .sourceCode span.ot
              .sourceCode span.al
              .sourceCode span.fu
              .sourceCode span.re
              .sourceCode span.er

              编写好的HTML并使用验证器

              我们已经谈到了组成优质HTML的主题,但是我们将在此处进行深入探讨。我们还将讨论验证器以及如何使用它们.

              第1部分–编写好的HTML

              知道适当语法的所有规则并不能使您成为一个好的作家,而了解语言的每个功能和结构也不会使您成为一个好的程序员。还有更多需要的东西-好的风格.

              编写HTML的方法相同。您可能知道每个标记元素的来龙去脉,但仍然将难以阅读和设计的草率文档放在一起。但这不是必须的-您可以学习如何编写样式良好的HTML.

              为什么要打扰好HTML?

              由于您的最终用户和在线受众都不希望看到HTML,因此您可能会问:

              • 有什么区别?
              • 为什么要担心标记问题?

              回答这个问题是建立良好HTML风格的第一步:考虑为谁编写HTML.

              您的HTML有很多“受众”:

              • 目前必须编写CSS的设计师/开发人员
              • 未来可能需要重新设计网站的开发人员和设计师
              • Google和其他搜索引擎
              • Facebook和发布页面摘录的其他社交媒体网站
              • RSS阅读器
              • 视障人士的萤幕阅读器
              • 您的普通用户,最终.

              所有这些不同的受众(只有其中一部分是人类)有不同的需求,所有这些都可以通过良好的样式良好的HTML来很好地满足.

              良好的文件结构

              HTML样式最重要的方面是正确构造整个文档.

              整体结构应如下所示:

              html>

              文件标题




              网站名称

              文件标题

              文件名

              请注意,您可能不需要此处指定的每个元素。例如:您可能不想将元素放入您自己,而没有在文章顶部添加元数据详细信息-一个简单的

              要么

              标签,与文章内容处于同一“级别”就可以了.

              有关正确构建文档的更多详细信息,请参见本文的“结构化HTML”部分.

              订购主要元素

              与内容相关的内容应该早于您。当您的SEO顾问试图弄清楚Google或Facebook如何显示您的网页时,请不要让它们通过十几个CSS链接和随机的JavaScript代码进行排序.

              即使您的导航栏停留在窗口顶部,并且网站的主要标题位于其下方,也要在其中添加主网站标题

              要么

              标记,然后将其首先放入。将导航菜单放在标题后面.

              元素应该是之后的第一个元素。即使您有左侧边栏,也可以使用CSS将其移至左侧。不要把你放在主要内容之前.

              该页面应该是中的最后一个content元素。之后应没有可见的HTML元素 .

              在结束标记后放置尽可能多的JavaScript。如果出于某种原因(通常不是)而必须将JavaScript放到其中,则仅将其放入.

              使结构标记更易于阅读

              有时您只需要包含很多标签,或者您可以在不同级别使用多个侧边栏。也许您有很多嵌套列表.

              您可以做的最有帮助的事情之一是 缩进代码. 请考虑以下两个示例:

              类="桅杆头">

              文件名

              类="导航栏">
              类="主导航">

              • 菜单项
              • 菜单项
              • 菜单项
                • 菜单项
                • 菜单项
                • 菜单项
              • 菜单项

              类="桅杆头">

              文件名

              类="导航栏">
              类="主导航">

              • 菜单项
              • 菜单项
              • 菜单项
                • 菜单项
                • 菜单项
                • 菜单项
              • 菜单项

              第二个更容易阅读,不是吗?这对试图理解您的文档的设计人员和开发人员非常有帮助.

              确保您与缩进方式一致-一个空格,两个空格,一个制表符。您选择的内容无关紧要,但重要的是保持其一致性.

              但是生成的HTML呢??

              当今Internet上的大多数HTML是由一个内容管理系统或另一个内容管理系统生成的。您不能总是使代码缩进以您希望的方式工作,特别是如果生成HTML的代码分布在许多不同的主题和插件文件中时.

              答案是使用有意义的类或ID以及注释结束标记。这对于重复生成的内容块(例如边栏中的注释或项目)特别有用。.

              类="桅杆头">

              文件名

              类="导航栏">
              类="主导航">

              • 菜单项
              • 菜单项
              • 菜单项
                • 菜单项
                • 菜单项
                • 菜单项
              • 菜单项



              类="注释">
              类="评论" id ="评论-39874693029">


              类="侧栏项目" id ="订阅表格">


              类="侧栏项目" id ="档案">

              通常,如果元素的开始和结束标记不在同一行,并且该元素需要一个类或ID,则注释结束标记是一个好主意.

              有意义的类和ID

              首先-通过以下方式使您的类和ID属性保持一致并易于阅读:

              • 仅使用小写字母
              • 用连字符分隔单词.

              接下来,确保您的类名和ID具有明显的语义意义,并​​且不仅仅涉及设计和显示.

              好的类别和ID名称:

              • 导航菜单
              • 博客文章
              • 侧边栏小工具
              • 评论元.

              错误的类别和ID名称:

              • 绿箱
              • 左侧栏
              • 横幅淡入.

              有时,前端框架或CSS的性质会导致您需要额外的元素,并且您会发现自己使用了特定于布局的类名,例如包装器.

              如果您不帮忙的话,也可以。只要确保您保持一般性即可。没有比重新设计创建外观如下所示的CSS更糟糕的事情了:

              .绿箱
              背景颜色:蓝色;
              }

              明智地使用内容元素

              在文章的主要部分或其他内容中,使用部分内容标签正确组织文档.

              标题和栏目

              各节的标题非常重要。不要忽略他们。如果有多个标题部分和子部分,而不是一个巨大的内容块,那么最终内容将更容易阅读.

              • 使用标题标签(

                ,

                ,

                ,

                )到标题部分和小节.

              • 确保标题的层次结构形成合理的轮廓。不要放
                之后

                没有

                介入。确保您的内容具有合理且易于理解的结构.

              • 如果您正在使用 标记节标题,出了点问题.

              另外,请确保在部分标题上添加id属性,以便您和其他人可以创建文档内链接.

              id ="章节标题">本节标题

              ...

              href ="#title-of-section">这链接到该位置.

              最后,不要滥用水平线()。如果您适当地使用栏目和标题,几乎没有任何理由.

              链接

              锚标记的唯一必需属性是链接文档的URL。.

              但是包含标题标签非常有帮助,因为它可以使人们在单击链接之前知道他们要去的地方。它还可以帮助搜索引擎确定链接的含义。理想情况下,标题标签将是链接文档的标题。.

              链接的另一个问题是锚文本-用户单击(或点击或选择)以跟随链接的实际文本.

              尽量避免单击此处。有时这是不可避免的,但是只要有可能,就应该尝试使锚文本有意义。这对您的读者以及链接到的文档(可能是您自己的文档)都有帮助.

              通过href =了解有关HTML的更多信息"">点击这里.

              我们提供了很多href ="">有关HTML的信息.

              图片

              图像仅需要具有src元素-图像的URL。但是包括标题和替代文本可以有所帮助.

              • 盲人的屏幕阅读器可以向看不到图片的用户阅读说明
              • 搜索引擎可以将图像编入索引,并对图像的含义有所了解.
              定义,引号,首字母缩写词

              有一些从未使用过的非常有用的跨度级别标记元素.

              这些提供有关页面上单词的详细信息。它们可以帮助用户更好地理解您的内容,并且可以帮助计算机(搜索引擎,人工智能)更好地理解您所写的内容.

              • —定义标签。这可能是您第一次使用和定义技术术语.
              • —缩写。您可以将扩展形式的缩写放在标题标签中.
              • —多数人只是使用印刷引号来勾画引号,但是使用标记可以使引号更加明确,并允许您使用元素引用引号的来源.

              了解更多并关心更多

              编写好的HTML可以解决以下问题:

              • 学习一些基本原理
              • 足够关心您的内容和网站以关注它们.

              我们只能在学习方面为您提供帮助。您必须做出护理决定.

              我们的大部分建议可以用一句话来总结:

              确保您的HTML清楚地传达了您想传达的内容.

              第2部分:HTML验证器

              随着基于标准的现代网络浏览器和HTML的出现,人们对验证的兴趣日益浓厚-确保网站的源代码没有错误并且符合相关规范.

              当然,这是一件好事–当网站遵循“规则”时,通常来说,Web是更好的地方。但是过分强调验证也可能适得其反.

              这是你需要知道的.

              什么是HTML验证?

              验证只是意味着检查您的网页的源代码是否符合W3C制定的语言规范。该检查由称为HTML验证程序的软件工具完成.

              这类似于校对-确保所有单词拼写正确,并遵循常规的标点和语法规则.

              标记语言的规范详细说明了(有时会非常详细)如何使用每个HTML元素,其潜在属性可以是什么以及如何与页面上的其他元素相关联.

              要说一个HTML文档是有效的,就意味着它遵循这些规则中的每一个.

              什么不是HTML验证?

              HTML并不会真正告诉您您的网站是否良好,或者看起来像您认为的样子,或者将帮助您实现营销目标。它只会告诉您标记是否符合规格.

              这有点像编辑和校对之间的区别—验证就像校对.

              HTML验证也仅与HTML有关,而与CSS,JavaScript和基础PHP无关。它还与表单正常工作无关(表单验证是完全不同的事情).

              为什么要打扰验证?

              通过验证器运行HTML可以帮助您捕获各种途径中可能渗入HTML的错误.

              简单错别字

              验证错误的最常见来源可能只是简单的印刷错误。如果某个元素的标签名称拼写错误,或者打了一个右尖括号而不是一个左尖括号,则会收到验证错误。这些通常是最重要的查找和修复方法,也是最简单的方法.

              版本不匹配

              每个版本的HTML都有一套略有不同的规则以及该语言中包含的内容。如果您的HTML有效,则表示您已遵守所有这些规则,并且仅包含正式属于该语言一部分的内容.

              例如,HTML标记是HTML5中的新标记-HTML 4.0规范中没有该标记。这意味着,如果您要根据该规范进行验证,并且包含在内,那么它将无效。你会得到一个错误.

              另一个已更改的示例是null元素关闭的方式.

              图片标签( )是一个空元素-它没有内容,只有属性(图像本身是指向图像文件的属性,而不是元素的内容)。过去,必须关闭null元素,因此您将看到以下内容:

              src ="http://example.com/some_image" alt ="一些形象" />

              现在,在HTML5规范中,这不是首选,并且相同的图像如下所示:

              src ="http://example.com/some_image" alt ="一些形象" >

              验证很重要,原因有很多:

              • 这些年来,有许多不同的规范
              • 有时同时激活多个规范
              • 编码人员已根据各种处理方式养成了习惯.
              错误的服务器端代码

              如今,大多数网站都使用一些底层的内容管理系统或服务器端脚本来生成HTML。这增加了一层复杂性,可能导致其他错误.

              例如,如果不满足特定条件或未加载模板文件,则大元素的结束标记可能不会包含在输出中.

              在服务器端动态脚本上工作时,很难看到整个HTML文档-单个页面的模板通常分布在许多不同的文件中.

              包含的错误代码

              与内容管理系统一起,大多数网站所有者都使用许多第三方插件来帮助生成他们的网站。这些并不总是应有的高质量,并且可能是错别字,不良标记和编写不良代码的来源.

              根本不了解HTML规范

              HTML规范有很多详细信息-许多初学者和中级开发人员可能不了解或理解的事情.

              您知道您不能列出清单吗?