HTML基础
1、HTML 简介
W3C(World Wide Web Consortium),W3C 组织,万维网联盟,这个组织制订网页标准。W3C 标准不是一个标准,而是一系列的标准的集合,包含三部分的标准:结构标准,表现标准和动作标准,与结构标准对应的是 HTML,与表现标准对应的是 CSS,与动作标准对应的是 JavaScript。
HTML 是一种在 Web 上使用的通用标记语言,允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。HTML 的关键是标签,其作用是呈现内容。浏览器用于读取 HTML 文件,并将其作为网页显示,他并不是直接显示的 HTML 标签,但是可以使用标签来决定如何展现 HTML 页面的内容给用户。
HTML 指的是超文本标记语言:Hyper Text Markup Language。HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页。HTML 文档包含了 HTML 标签及文本内容,HTML 文档也叫做 Web 页面,即网页。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签通常是成对出现的,并且由尖括号包围的关键词,比如 <p> 和 </p>,标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。
HTML标签 和 HTML元素 通常都是描述同样的意思,但是严格来讲,一个 HTML 元素包含了开始标签与结束标签,如:<p> 我是一个段落。</p> 。
2、HTML 标签
HTML 文档由 HTML 元素定义。开始和结束标签也被称为开放标签和闭合标签。元素的内容是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容,空元素在开始标签中进行关闭,以开始标签的结束而结束,大多数 HTML 元素可拥有属性。
HTML 文档由嵌套的 HTML 元素构成:<html><head><body><p>我是一个段落。</p></body></head></html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>示例</title>
6 </head>
7 <body>
8 <p style="color:red">我是一个段落。</p>
9 </body>
10 </html>
HTML 元素可以设置属性,属性是 HTML 元素提供的附加信息,属性一般描述于开始标签,属性总是以名称/值对的形式出现,比如:name="value"。属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么你必须使用单引号。
适用于大多数 HTML 元素的属性:
①:id 定义元素的唯一 id
②:class 为 html 元素定义一个或多个类名(classname)
③:style 规定元素的行内样式(inline style 内联样式)
④:title 描述了元素的额外信息 (作为工具条使用)
(1)、基础标签
HTML5 声明:<!DOCTYPE html> 声明有助于浏览器正确显示网页,也是在告诉浏览器这是一个 HTML5 的网页。<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前,<!DOCTYPE> 标签没有结束标签,声明不区分大小写。
<html> 标签告知浏览器这是一个 HTML 文档。<html> 标签是 HTML 文档中最外层的元素,也是文档的根元素,但是不包含 doctype 元素,也就是声明 <!DOCTYPE html>,doctype 元素必须位于 html 元素之前,<html> 标签是所有其他 HTML 元素的容器。HTML5 中增加了一个新属性:manifest,值为 URL 用于定义一个 URL,在这个 URL 上描述了文档的缓存信息。
<html> 与 </html> 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体,文档的头部由 <head> 标签定义,而主体由 <body> 标签定义。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts),样式文件(CSS),及各种 meta 信息。可以添加在头部区域的元素标签有 7 个:<title>,<style>,<meta>,<link>,<script>,<noscript> 和 <base>。
<meta>标签描述了一些基本的元数据。元数据也不显示在页面上,但会被浏览器解析。<meta> 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。注意:<meta> 通常位于 <head> 区域内,在 HTML 中 <meta> 标签没有结束标签。
元数据(Metadata)是数据的数据信息,<meta> 标签提供了 HTML 文档的元数据。注意:元数据通常以 名称/值 对出现。注意:如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。在 HTML5 中,有一个新的 charset 属性,它使字符集的定义更加容易:HTML4: <meta http-equiv="content-type" content="text/html; charset=UTF-8">,HTML5: <meta charset="UTF-8">。
<meta> 标签使用实例:
1 定义编码格式:<meta charset="UTF-8">
2 为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
3 为网页定义描述内容:<meta name="description" content="HTML基础">
4 定义网页作者:<meta name="author" content="Mr mo">5 每30秒中刷新当前页面:<meta http-equiv="refresh" content="30">
6 常用的针对移动网页优化过 viewport 的 meta:<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
上面实例最后一项代码解析:
width:控制 viewport(可视区) 的大小,可以是指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度,单位为缩放为 100% 时的 CSS 的像素。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale/minimum-scale:允许用户缩放到的最大/最小比例。
user-scalable:用户是否可以手动缩放。
<title> 标签定义HTML文档的标题。使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。
<title> 标签在所有 HTML 文档中是必需的。<title>元素:
①:定义浏览器工具栏中的标题。
②:提供页面被添加到收藏夹时的标题。
③:显示在搜索引擎结果中的页面标题。
注意:一个 HTML 文档中不能有一个以上的 <title> 元素。如果你遗漏了 <title> 标签,文档作为 HTML 是无效的。<title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时,显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候,一定要简短,有说明性,采用关键词,与页面内容相关。
<style> 标签定义了 HTML 文档的样式信息。在 <style> 元素中,你可以规定在浏览器中如何呈现 HTML 文档,每个 HTML 文档能包含多个 <style> 标签。注意:如果没有使用 "scoped" 属性,则每一个 <style> 标签必须位于 head 头部区域。"scoped" 属性是 HTML5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。 如果使用 "scoped" 属性,那么所规定的样式只能应用到 style 元素的父元素及其子元素。在 HTML5 中可以不定义类型(type)属性,默认值为 "text/css"。如需链接外部样式表,就使用 <link> 标签。<style>定义文本样式,<link> 定义资源引用地址。
<link> 标签定义了文档与外部资源之间的关系。<link> 标签通常用于链接到样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">。注意: link 元素是空元素,它仅包含属性,此元素只能存在于 head 部分,不过它可出现任何次数。
JavaScript 使 HTML 页面具有更强的动态和交互性。HTML 脚本标签 <script> 用于定义客户端脚本。<noscript> 标签定义了不支持脚本浏览器输出的文本,对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说,该元素非常有用。
<script> 标签定义客户端脚本,比如 JavaScript。<script> 元素既可包含脚本语句,也可以通过 src 属性指向外部脚本文件。JavaScript 最常用于图片操作、表单验证以及内容动态更改。注意:如果使用 "src" 属性,则 <script> 元素必须是空的。
有多种执行外部脚本的方法:
①:如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)。
② :如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行。
③:如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本。
在 HTML5 中 "type" 属性是可以省略的。src 属性规定外部脚本的 URL。defer 属性用于规定当页面已完成解析后,执行脚本,仅适用于外部脚本。charset 属性用于规定在脚本中使用的字符编码,仅适用于外部脚本。"async" 属性是 HTML5 中的新属性,用于规定异步执行脚本,仅适用于外部脚本。
引用外部脚本的语法:<script src="URL"></script> 其中 src="RUL" 中填写同级目录下的外部脚本文件名。
注意:
①:外部脚本文件可以是任意扩展名,通常开发者会将 JavaScript 外部脚本的扩展名写为 script.js。
②:在外部脚本文件中,只能包含脚本语言代码,不能包含其他代码,如HTML代码等,也不能包含 <script> 标签,因为 <script>元素属于 HTML 语言中的元素。
③:在引用外部脚本文件时,<script> 标签与 </script> 标签之间不能有其他代码,包括脚本语言代码。
④:虽然在引用外部脚本文件时,<script> 标签与 </script>标签之间不能有其他代码,但 </script> 标签也不能被省略。
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。<noscript> 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。<noscript> 标签用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器,如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。在 HTML4 中,<noscript> 标签只允许插入到 <body> 元素中,而在 HTML5 中,<noscript> 标签可以插入到 <head> 和 <body> 区域中。
<body> 标签定义文档的主体。<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。在 HTML4 中,所有 body 元素的"呈现属性" 已废弃。在 HTML 5 中,删除了所有 body 元素的"呈现属性",可以使用样式定义。
HTML 标题是通过 <h1> - <h6> 标签来定义的。<h1> 定义最大的标题,<h6> 定义最小的标题。要确保将 HTML 标题标签只用于标题,不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为你的网页的结构和内容编制索引。应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。
HTML 段落是通过 <p> 标签来定义的,HTML 可以将文档分割为若干段落,浏览器会自动地在段落的前后添加空行。<p> 元素是块级元素,该元素会自动在其前后创建一些空白。如果希望在不产生一个新段落的情况下进行换行,就使用 <br/> 标签。我们无法确定 HTML 被显示的确切效果,屏幕的大小,以及对窗口的调整都可能导致不同的结果,对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格。每个段落前空 2 个字,可用 CSS 样式定义:<p style="text-indent:2em"></p>
<br/> 标签插入一个简单的换行符。没有内容的 HTML 元素被称为空元素,空元素是在开始标签中关闭的,<br/> 就是一个空元素,所有空元素都必须被关闭 <br/>。在写地址信息或者写诗词时 <br/> 标签非常有用。注意: 请使用 <br/> 标签来输入空行,而不是分割段落。
<hr/> 标签在 HTML 页面中创建水平线,用于分隔内容。<hr/> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线,该元素被用来分隔 HTML 页面中的内容(或者定义一个变化)。在 HTML5 中,<hr/> 定义内容中的主题变化,并显示为一条水平线,而在 HTML4 中,<hr/> 标签仅仅显示为一条水平线。可使用 CSS 来为 <hr/> 元素定义样式。
HTML 注释 <!-- 注释内容 --> 。 注释标签用来在源文档中插入注释,注释不会在浏览器中显示。可以使用注释对你的代码进行解释,这样做有助于在以后的时间对代码的编辑,特别是代码量很大的情况下很有用,也可以在注释内容存储针对程序所定制的信息,在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的。除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作,这些动作可能是简单的包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。
(2)、样式标签
<header> (H5) 标签定义文档或者文档的一部分区域的页眉(介绍信息)。<section> 是网页中相对独立的模块,它必须有一个 h 标签用于说明 <section> 的主旨,但是 h 标签只能用于包含内容的标题,当需要显示一些摘要、<section> 的属性、<section> 里面文章的导航等的时候,h 标签就不够用了,这个时候就可以使用 <header> 标签。注意:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。在一个文档中可以包含多个 <section>,也就可以定义多个<header>,而 HTML 文档本身就是一个最大的 <section>,而对于文档来说 <section> 是可以省略的,所以 <header> 常被用于页面头部布局。
<nav> (H5) 标签定义导航链接的部分,在 HTML5 中用于包含一个导航链接组,常用于导航栏布局,在同一个页面可以同时使用多个 <nav> 标签。但并不是所有的 HTML 文档都要使用到 <nav> 元素,<nav> 元素只是作为标注一个导航链接的区域,这主要看链接组是不是用于导航,链接可以是一些操作,如删除,编辑,也可以是一些提示性元素,如链接到其他网站的解释。在不同设备上(手机或者PC)可以制定导航是否显示,以适应不同屏幕的需求。
<main> (H5) 标签规定文档的主要内容。也就是说,该元素呈现了文档 <body> 的主体部分,<main> 元素中的内容对于文档来说应当是唯一的,且不能出现一个以上的 <main> 元素。它不应包含在文档中重复出现的内容,比如侧边栏、导航栏、版权信息、网站 Logo或搜索表单。<main> 元素不能是以下元素的后代:<footer>、<header>、<nav>、<footer>、<article> 或 <aside>。
<footer> (H5) 标签定义 <section> 或 document 的页脚,也就是用于定义文档或者文档的一部分区域的页脚。在一个文档中,可以定义多个 <footer> 元素。假如你使用 <footer> 元素来插入联系信息,应该在 <footer> 元素内使用 <address> 标签。该标签和 <header> 是相对的一对,<footer> 也是用于区块(<section>),该元素通常包含与该区块相关的文档作者和版权信息、相关文档或使用条款的链接、以及联系信息等等。以前布局页面时使用 <div id="footer"> 来定义这部分的位置,现在可以直接使用 <footer> 来替换。
<section> (H5) 标签定义了文档中的块,比如章节、头部、底部或者文档的其他区域。主要作用是为页面的内容进行分块或者对文章的内容进行分段。
<aside> (H5) 标签定义页面的侧边栏内容。<aside> 标签定义 <article> 标签外的内容,<aside> 的内容应该与附近的内容相关,但是又可以独立的内容,可以是广告、引用、侧边栏等等,也可用作文章的侧栏。
<article> (H5) 标签定义一个文章区域。<article> 标签定义独立的内容,他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源:论坛帖子、博客文章、新闻故事、评论。
注意:所有浏览器都支持 <main> 标签,除了 IE。所有浏览器都支持 <header>、<nav>、<footer>、<section>、<aside> 和 <article> 标签,IE8 以及更早的版本都不支持这些标签。
<hgroup> (H5) 标签被用来对标题元素进行分组。当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。
<details> (H5) 标签规定了用户可见的或者隐藏的需求的补充细节。<details> 标签用来供用户开启关闭的交互式控件,任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的,除非设置了 open 属性。该标签与 <summary> 标签配合使用可以为 details 定义标题,标题是可见的,用户点击标题时,会显示出 details。属性 open 用于规定 details 是否可见。
<summary> (H5) 标签为 <details> 元素定义一个可见的标题,当用户点击标题时会显示出详细信息。注意:<summary> 元素应该是 <details> 元素的第一个子元素。
<dialog> (H5) 标签定义一个对话框、确认框或窗口。open 属性规定 dialog 元素是有效的,用户可以与它进行交互。
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分,该元素没有特定的含义,他是可用于组合其他 HTML 元素的容器,常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。<div> 元素是块级元素,所以浏览器会默认在他前后添加一个换行符,如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性,常被用来布局网页。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法,该元素的作用就是用于显示表格化的数据。
<span> 标签用于对文档中的行内元素进行组合,该标签没有固定的格式表现,也没有特定的含义,当对它应用样式时,它才会产生视觉上的变化,如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式,当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。被 <span> 元素包含的文本,可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。
(3)、格式标签
<wbr> (H5) (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。如果单词太长,或者担心浏览器会在错误的位置换行,那么就可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机),他的作用就是告诉浏览器在这个标记处可以断行,但只是建议而不是必定会在此处断行,因为要根据整行文字长度而定,因此只要在连续的文本中间适当的插入若干 <wbr> 标签就能解决断行问题。
<meter> (H5) 标签定义度量衡。仅用于已知最大和最小值的度量。比如:磁盘使用情况,查询结果的相关性等。注意: <meter> 不能作为一个进度条来使用, 进度条请使用 <progress> 标签。
<progress> (H5) 标签定义运行中的任务进度(进程)。请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注意:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或相关的查询结果)。表示度量衡,请使用 <meter> 标签代替。
<time> (H5) 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的,在该元素的内容中未指定日期或时间时,使用该属性。该元素能够以浏览器可读的方式对日期和时间进行编码,比如,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。datetime 属性规定日期/时间。另一种方式,则是由元素的内容给定日期/时间,该属性在所有浏览器中不会渲染任何特殊的效果。
<mark> (H5) 标签定义带有记号的文本,请在需要突出显示文本时使用 <mark> 标签。
<address> 标签定义文档作者或拥有者的联系信息。如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信息,如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者/所有者的联系信息。<address> 元素的文本通常呈现为斜体,大多数浏览器会在该元素的前后添加换行,或可用 <br/> 换行显示。不应该使用 <address> 标签来描述邮政地址,除非这些信息是联系信息的组成部分。<address> 元素通常被包含在 <footer> 元素的其他信息中,可以包括文档作者的名字、站点链接、电子邮箱、真实地址、电话号码等联系信息。
HTML 使用 <b> 与 <i> 标签对输出的文本进行格式定义, 如:b粗体 或 i斜体。通常标签 <strong> 替换加粗标签 <b> 来使用,<em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与 <i> 定义粗体或斜体文本。<strong> 或者 <em> 意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体,不过,未来浏览器可能会支持更好的渲染效果。
<b> 标签定义粗体的文本。注意:根据 HTML5 的规范,<b> 标签应该做为最后的选择,只有在没有其他标记比较合适时才使用它。HTML5 规范声明:标题应该用 <h1> - <h6> 标签表示,被强调的文本应该用 <em> 标签表示,重要的文本应该用 <strong> 标签表示,被标记的或者高亮显示的文本应该用 <mark> 标签表示。也可以使用 CSS 的 "font-weight" 属性设置粗体文本。
<i> 标签定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。<i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。在没有其他适当语义的元素可以使用时,就使用 <i> 元素。其他语义的元素如下:<em> 元素定义被强调的文本,<strong> 元素定义重要的文本,<mark> 元素定义被标记的/高亮显示的文本,<cite> 元素定义作品的标题,<dfn> 元素定义一个定义项目。在 HTML4 中,<i> 标签呈现斜体的文本,然而,在 HTML5 中没有必要这么做,可以使用样式表来格式化 <i> 元素中的文本。
<strong> 标签是一个短语标签,用来定义计算机程序的样本重要的文本。注意:并不反对使用这个标签,但是如果只是为了达到某种视觉效果而使用这个标签的话,建议使用 CSS,这样可能会取得更丰富的效果。所有短语标签:<em> 呈现为被强调的文本,<strong> 定义重要的文本,<dfn> 定义一个定义项目,<code> 定义计算机代码文本,<samp> 定义样本文本。<var> 定义变量,可以将此标签与 <pre> 及 <code> 标签配合使用。在 HTML4 中,<strong> 标签定义加粗的被强调的文本,而在 HTML5 中,<strong> 标签定义重要的文本。
<em> 标签是一个短语标签,用来呈现为被强调的文本。注意:并不反对使用这个标签,但是如果只是为了达到某种视觉效果而使用这个标签的话,建议使用 CSS ,这样可能会取得更丰富的效果。
<dfn> 标签是一个短语标签,用来定义一个定义项目。<code> 标签是一个短语标签,用来定义计算机代码文本。<samp> 标签是一个短语标签,用来定义计算机程序的样本文本。<var> 标签是一个短语标签,用来定义变量。提示:我们并不反对使用这些标签,但是如果你只是为了达到某种视觉效果而使用这些标签的话,我们建议你使用 CSS ,这样可能会取得更丰富的效果。
<cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。注意:人名不属于作品的标题。在 HTML4 中,<cite> 标签定义一个引用,而在 HTML5 中,<cite> 标签定义作品的标题。
<big> 标签定义大号文本,HTML5 不再支持,可以使用 CSS 代替。
<small> 标签定义小号文本,主要用于定义小型文本和旁注。
<pre> 标签定义预格式文本,也就是在 HTML 代码中的文本编写什么样,就会在 HTML 页面显示什么样,对空行和空格可进行控制,也就是被包围在 <pre> 标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。
<bdo> 标签定义文本方向。bdo 指的是 bidi 覆盖(Bi-Directional Override),用来覆盖默认的文本方向。<p><bdo dir="rtl">我会反着显示。</bdo></p> dir 为 <bdo>标签的属性,rtl 是值,定义反向显示,该属性另一个值是 ltr,是默认值,文本方向是正常显示的。
<bdi> (H5) 标签允许设置一段文本,使其脱离其父元素的文本方向设置。bdi 指的是 bidi 隔离(Bi-directional Isolation)。在发布用户评论或其他你无法完全控制的内容时,该标签很有用。
<q> 标签定义短的引用。浏览器经常会在这种引用的周围插入引号,该元素有一个属性 cite,值为 URL 用于规定引用的源 URL。请使用 <blockquote> 来标记摘自另一个源的块引用。
<blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 <blockquote> 元素进行缩进。该元素也有一个属性 cite,值为 URL 用于规定引用的来源。如果标记是不需要段落分隔的短引用,请使用 <q>。在 HTML4 中,<blockquote> 标签定义一段长引用,而在 HTML5 中,<blockquote> 标签定义摘自另一个源的块引用。
<del> 标签定义被删除文字。<ins> 标签定义被插入文本。提示:<del> 和 <ins> 一起使用,描述文档中的更新和修正,浏览器通常会在已删除文本上添加一条删除线,在新插入文本下添加一条下划线。<del> 和 <ins> 拥有相同的两个属性:cite 和 datetime,cite 的值都为 URL ,<del> 的 cite 属性规定一个文档的 URL,该文档解释了文本被删除的原因,<ins> 的 cite 属性规定一个文档的 URL,该文档解释了文本被插入的原因。datetime 的值表示为:YYYY-MM-DDThh:mm:ssTZD,<del> 规定文本被删除/被插入的日期和时间。
<s> 标签对那些不正确、不准确或者没有用的文本进行标识。<s> 标签不应该用来定义替换的或者删除的文本,如果要定义替换的或者删除的文本,请使用 <del> 和 <ins> 标签。在 HTML4 中,<s> 标签已被废弃,并且被用来给文本加删除线,而 HTML5 重新定义了 <s> 标签,现在是被用来定义那些不再正确的文本。
<u> 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。在 HTML 中,<u> 元素已废弃,原被用来定义下划线,而在 HTML5 中重新定义了 <u> 元素。请尽量避免使用 <u> 为文本加下划线,用户会把它混淆为一个超链接。注意:HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。
<sup> 标签定义上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。
<sub> 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。
<abbr> 标签定义缩写。当把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时,<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。<abbr> 标签用来表示一个缩写词或者首字母缩略词。通过对缩写词语进行标记,就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
(4)、链接标签
<a> 标签定义超链接,用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指定链接的目标。如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。通常在当前浏览器窗口中显示被链接页面,除非规定了其他 Target 属性。可以使用 CSS 来改变链接的样式。
HTML 使用超级链接与网络上的另一个文档相连,几乎可以在所有的网页中找到链接,点击链接可以从一张页面跳转到另一张页面,超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当你把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。在 <a> 标签中使用 href 属性来描述链接的地址,默认情况下,链接将以以下形式出现在浏览器中:一个未访问过的链接显示为蓝色字体并带有下划线;访问过的链接显示为紫色并带上下划线;点击链接时,链接显示为红色并带上下划线。<a href="url">跳转</a> "链接文本" 不必一定是文本,图片或其他 HTML 元素都可以成为链接,使用 Target 属性,可以定义被链接的文档在何处显示。
<a> 标签的 target 属性,target="_blank" 定义在新窗口显示目标网页。target="_self" 定义在当前窗体打开目标网页,此为默认值,这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。target="_top" 定义在当前窗体打开链接,并替换当前的整个窗体(框架页)。假如你的页面被固定在框架之内,可用 _top 值跳出框架,用 top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口,框架网页中在上部窗口中显示目标网页。target="_parent" 这个目标使得文档载入父窗口或者包含超链接引用的框架的框架集,如果这个引用是在窗口或者在顶级框架中,那么它与目标 self 等效,框架网页中当前整个窗口位置显示目标网页。
<a> 标签的 id 属性。id 属性可用于创建在一个 HTML 文档书签标记。用 id 命名那么这个书签就是唯一的。在 HTML 文档中插入ID:<a id="tips">超链接</a>。在 HTML 文档中创建一个链接到 "超链接(id="tips")":<a href="#tips">跳转</a>。或者,从另一个页面创建一个链接到 "超链接(id="tips")部分":<a href="index.html#tips">点我跳转</a>。
<a> 标签 title 属性的作用,当鼠标滑过链接文字时会显示该属性指定的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
去掉超链接的下划线,并定义颜色(默认定义为黑色):a{color:#000;text-decoration:none} 定义鼠标移动到超链接上的颜色,a:hover{color:red}
图像超链接:<a href="http://www.aaa.com"><img src="images/demo.jpg"></a>
本文本链接:<p><a href="/index.html">本文本</a> 指向本网站中的一个页面的链接。</p>。相对路径,如 htef="/abc/",代表本站内超文本。
电子邮件链接:<a href="mailto:123456@qq.com">电子邮件</a> 当前系统需要安装 EMAIL 客户端程序才能使用,可用 火狐/IE 测试,会跳转链接到一个邮件。
电子邮件链接在网页中十分实用,当鼠标点击链接时,就能自动打开当前计算机系统中默认的电子邮件客户端软件,并在收件人框中自动填上收件人的地址。但由于操作系统的差异以及邮件客户端对该事件连接的处理不一致,所以在使用时需要注意。电子邮件也可以使用表单完成:
<from action="mailto:123456@qq.com">
</from>
使用电子邮件链接,可以带有多个属性:用分号隔开多个收件人的地址,可以实现发送给多个收件人的功能, cc 抄送地址,bcc 密件抄送地址,subject 添加邮件主题,body 添加邮件内容。下面是具体的应用:
<a href="mailto:12345@qq.com;56789@163.com?cc=txt@sina.com&subject=读 HTML 基础有感&body=邮件内容">发送邮件</a>
注意:如果 mailto 后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
<base> 标签定义页面中所有链接的默认地址或默认目标。该标签作为 HTML 文档中所有的链接标签的默认链接。在 HTML 中,<base> 标签没有结束标签,且为为元信息标签。在一个文档中,最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部,而且 <base> 标签需要排在 <head> 元素中第一个元素的位置,这样 head 区域中其他元素就可以使用 <base> 元素中的信息了。如果使用了 <base> 标签,则必须具备 href 属性或者 target 属性或者两个属性都具备。<base target="_blank"> 可定义页面中所有的超链接都从新窗口打开,如其中有不需要在新窗口打开的,可在 <a> 标签内自行定义:<a href="url" target="_self">链接</a>。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>示例</title>
6 <base href="http://www.demo.com/images/" target="_blank">
7 </head>
8 <body>
9 <img src="images.gif"><br/>
10 <a href="http://www.demo.com">跳转</a>
11 </body>
12 </html>
上面代码中,图像是默认链接的 demo.com 中一张名为 images 的图片,点击超链接跳转到该网站,并且在新窗口打开目标页面。
(5)、图像标签
HTML 图像是通过<img> 标签来定义的。图像的名称和尺寸是以属性的形式提供的,添加动态图片和添加静态图片格式是一样的,只是图像文件格式可能会有所不同。注意:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。通过在 <a> 标签中嵌套 <img> 标签,可以给图像添加到另一个文档的链接,浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。在 HTML 中,<img> 标签没有结束标签。
<img src="images/head.gif" width="90" height="90" alt="替代文本" title="图片描述">
<img> 标签有两个必需的属性:src 和 alt。 要在页面上显示图像,就需要使用源属性(src),src 指 "source(来源)",源属性的值是图像的 URL 地址,URL 指存储图像的位置。如果从另一个文件夹中添加图像,需要选择图片的路径:<img src="D/images/logo.jpg">。如果从另一个网站中添加图像,需要选择网站图片的路径,假如名为 "head.gif" 的图像位于 www.demo.com 的 images 目录中,那么其 URL 为 http://www.demo.com/images/head.gif。alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
注意:title 属性用于把鼠标移动到图片上时显示文字信息,只有在重要的图片或者网站标志 LOGO 上加此属性。width 和 height 属性用于设置图像的高度与宽度。属性值默认单位为像素:px。指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。注意:假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件,加载图片是需要时间的,在加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
ismap 属性是一个布尔属性,可直接使用,用于将图像规定为服务器端图像映射,图像映射指的是带有可点击区域的图像。usemap 属性值为 #mapname 用于将图像定义为客户器端图像映射。HTML5 中增加了一个 新属性 crossorigin 值为 anonymous、use-credentials 用于设置图像的跨域属性。
在文字中插入图像,需要使用 CSS 定义,图像需要与文字底部对齐则定义为:.img{vertical-align:bottom},如果这里不设置的话图像会与文字底部会有一点距离。图像需要与文字中间对齐则设置为:.img{vertical-align:middle}。图像需要与文字顶部对齐则设置为-:.img{vertical-align:top}。
vertical-align 这个属性的默认值是 baseline(基线),插入的 img 元素会放置在父元素的基线上,由于图片撑起了高度,所以文字下移。其实并不是文字下移,而是图像的高度与文字不同,就像鹤立鸡群。vertical-align 是“垂直的”+“对齐”的意思,用于设置元素的垂直排列的,多用在表格中,用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐,所有浏览器都支持 vertical-align 属性。
它的值比较多:
baseline:基线,默认值。元素放置在父元素的基线上。
sub:垂直对齐文本的下标。
sup:垂直对齐文本的上标。
top:把元素的顶端与行中最高元素的顶端对齐。
text-top:把元素的顶端与父元素字体的顶端对齐。
middle:把此元素放置在父元素的中部。
bottom:把元素的顶端与行中最低的元素的顶端对齐。
text-bottom:将支持valign特性的对象的文本与对象底端对齐。
length:用长度值指定由基线算起的偏移量,可以为负值。基线对于数值来说为 0。
percentage(%):用百分比指定由基线算起的偏移量,可以为负值,基线对于百分数来说就是 0%。
vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值,这会使元素降低而不是升高。在表格单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。valign 用来定义表格的对齐方式,valign 代表行的垂直对齐方式,(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))。valign 可以通俗的理解为上中下,而和 align 的区别是: align 为左中右,用于设置文本的对齐方式,text-align:center 居中,text-align:left 居左,text-align:right 居右。
定义图像在文字中的位置也可以将底外边距设置为负值,强行设置,假如图像的高度为 90px,则可定义为:.img1{margin-bottom:-45px;},也就是图像距离底部缩进45像素。像素不同可以定义其处在不同的位置,但是这样设置会增加本行的高度。不建议这样定义,但可用在特殊地方。
<map> 标签定义图像地图。<area> 标签定义图像地图中的可点击区域。可用于创建图像映射,使其带有可供点击区域的图像地图,其中的每个区域都是一个超级链接。
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以应同时向 <map> 添加 id 和 name 属性。注意: 在 HTML5 中, 如果 id 属性在 <map> 标签中指定, 则必须同样指定 name 属性。name 属性用于为 image-map 规定名称,必需的属性。
<area> 标签定义图像映射内部的区域。注意:<area> 元素永远嵌套在 <map> 元素内部。<img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。在 HTML 中,<area> 标签没有结束标签。
<area> 标签属性,href 属性规定区域的目标 URL。alt 属性规定区域的替代文本,如果使用 href 属性,则该属性是必需的。coords 属性值为 coordinates 规定区域的坐标。shape 属性值为(default(默认)、circle、rect、poly)规定区域的形状。target 属性规定在何处打开目标 URL。media 属性规定目标 URL 是为何种媒介/设备优化的,默认为:all。在 HTML5 中增加了一个新属性 rel ,他的值为(alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag))规定当前文档与目标 URL 之间的关系。
图像映像的语法:
1 <img src="images/demo.jpg" alt="太阳系" usemap="#sun">
2 <map name="sun">
3 <area shape="circle" coords="132,570,122" alt="太阳" href="index.html" target="_blank">
4 </map>
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等:rect : 矩形,coords 对应的坐标为左上角和右下角。circle : 圆,coords 对应的是圆心(x,y),和半径 r。poly:多边形,coords 对应的是每个点的坐标。
下面列出了每种形状的适当值:
圆形:shape="circle",coords="x,y,r" 这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
矩形:shape="rectangle",coords="x1,y1,x2,y2" 第一对坐标是矩形的左上角的顶点坐标,另一对坐标是对角的顶点坐标(右下角),("0,0" 是图像左上角的坐标),请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..." 每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;定义多边形则需要更多数量的顶点。
用 HTML 语言创建图像映射时,我们需要确定图像区域中的点坐标,用以下几种方法可以实现:
①:可以利用系统自带的画图工具确定坐标。
②:可以用 PS 确定坐标。按 Ctrl+r 快捷键,右键选定显示距离为像素,默认是厘米。
③:采用逆向思维把图像转换成图像映射,可以利用以下代码实现:
1 <p>
2 <a href="http://www.baidu.com/" target="_blank"><img src="images/demo.jpg" ismap alt="太阳系"></a>
3 </p>
之所以图片代码前引用一段 url 是为了鼠标停留在图片上时,可以在浏览器窗口的状态栏中看到返回值出现的点坐标,小手指点在哪里,对应的就是像素点的纵横坐标值,记下这个值,把它应用到创建图像映射的语法中,就能实现区域取值了。注意:某些浏览器不支持此功能,则不能查看坐标返回值,比如 360浏览器,可以使用 IE 浏览器记录数值。
<canvas> (H5) 标签定义图形,比如图表和其他图像,标签只是图形容器,你必须使用脚本来绘制图形。<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。注意:<canvas> 标签只是图形容器,必须使用脚本来绘制图形。<canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。width 和 height 属性规定画布的宽度和高度。
<figure> (H5) 标签规定独立的流内容(图像、图表、照片、代码等等)。<figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的,如果被删除,则不应对文档流产生影响。
<figcaption> (H5) 标签为 <figure> 元素定义标题。<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。
<picture> (H5) 标签可以设置多张图片,主要被用来处理响应式图片。<picture> 元素类似于 <video> 和 <audio> 元素。<picture> 元素本身没有属性,被用来当做 <source> 元素的容器。<source> 元素是用来加载多媒体的比如视频和音频,已经被更新用到图片的加载并且一些新的属性已经被添加,srcset 属性的必需的,定义了图片资源。<picture> 元素可以设置不同的资源,第一个设置的资源为首选使用的:
1 <picture>
2 <source srcset="smallflower.jpg" media="(max-width:400px)">
3 <source srcset="flowers.jpg">
4 <img src="imges/flowers.jpg" alt="Flowers">
5 </picture>
注意:该标签目前尚未被 W3C 列入 HTML 规范中,但是 Chrome 和 Firefox 可以使用该标签。IE 不支持 picture 标签,需要搭载 JS 环境让 IE 浏览器识别 picture 标签。
(6)、多媒体标签
<audio> (H5) 标签定义音频内容,也就是定义声音,比如音乐或其他音频流。目前,HTML5 标准支持的3种文件格式:MP3、WAV、Ogg。有些浏览器不支持某种格式,建议采取两种格式写。音频格式的 MIME 类型:MP3-MIME-type:audio/mpeg 。Wav-MIME-type:audio/wav 。Ogg-MIME-type:audio/ogg 。可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
<audio> 是 HTML5 新增加的标签,src 属性用于规定音频文件的 URL。autoplay 属性:如果出现该属性,则音频在就绪后马上播放。controls 属性:如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。loop 属性:如果出现该属性,则每当音频结束时重新开始播放。muted 属性:如果出现该属性,则音频输出为静音。preload 属性值为(auto、metadata、none),用于规定当网页加载时,音频是否默认被加载以及如何被加载。
<video> (H5) 标签定义视频,比如电影片段或其他视频流。目前,HTML5 标准支持三种视频格式:MP4、WebM、Ogg。MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器。WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器。Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器。视频格式的 MIME 类型:MP4:video/mp4。WebM:video/webm。Ogg:video/ogg。 可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
<video> 是 HTML5 新增加的标签,src 属性定义要播放的视频的 URL。width 和 height 属性用于设置视频播放器的宽度/高度。autoplay 属性值:如果出现该属性,则视频在就绪后马上播放。controls 属性:如果出现该属性,则向用户显示控件,比如播放按钮。loop 属性:如果出现该属性,则当媒介文件完成播放后再次开始播放。muted 属性:如果出现该属性,视频的音频输出为静音。poster 属性值为 URL 用于规定视频正在下载时显示的图像,直到用户点击播放按钮。preload 属性值为(auto、metadata、none):如果出现该属性,则视频在页面加载时进行加载,并预备播放,如果使用 "autoplay",则忽略该属性。
<source> (H5) 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<source> 标签允许规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。src 属性用于规定媒体文件的 URL。type 属性规定媒体资源的 MIME 类型。
<track> (H5) 标签为媒体元素(比如 <audio> and <video>)规定外部文本轨道。该元素用于规定字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。src 属性是必需的,用于规定轨道文件的 URL。default 属性规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。kind 属性值为(captions、chapters、descriptions、metadata、subtitles)用于规定文本轨道的文本类型。srclang 属性用于规定轨道文本数据的语言,如果 kind 属性值是 "subtitles",则该属性是必需的。label 属性规定文本轨道的标签和标题。
(7)、表单标签
HTML 表单用于搜集不同类型的用户输入,表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入内容,如:文本域、下拉列表、单选框、复选框等等。
表单使用表单标签 <form>来设置,多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
①:文本字段通过 <input type="text"> 标签来定义,当用户要在表单中键入字母、数字等内容时,就会用到文本字段输入。
②:密码字段通过 <input type="password"> 来定义。注意:密码字段字符不会明文显示,而是以星号或圆点替代。
③:单选框通过 <input type="radio"> 来定义。当用户从若干给定的的选择中选取其一时,就会用到单选框。
④:复选框通过<input type="checkbox"> 来定义。用户需要从若干给定的选择中选取一个或若干选项。
⑤:提交按钮通过<input type="submit"> 来定义。
⑥:下拉列表框通过 <form> 标签下的 <select> 标签来定义。<option value="bmw">BMW(宝马)</option> 标签则是定义下拉列表框中的内容。
其他:①:预选下拉列表框和下拉列表框格式是一样的,只需在作为预选值的标签中添加 selected(选择):<option value="audi" selected>Audi(奥迪)</option>。
②:多行文本输入使用标签 <textarea rows="5" cols="30">定义,其中 rows 为行,cols 为列,可用于设定文本框的大小,也可以不设定,这不影响文本框输入文本的多少,只是会影响文本框显示的大小。更好的方法是通过 CSS 来定义文本域的宽和高。
<form> 标签用于创建供用户输入的 HTML 表单。<form> 元素包含一个或多个如下的表单元素:<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>。注意:表单本身并不可见。HTML5 新增了两个新的属性:autocomplete 和 novalidate,同时不再支持 HTML4 中的某些属性。该标签的属性 action 是必需的,规定当提交表单时,向何处发送表单数据,其值为服务器地址,可能的值:绝对 RUL,指向其他站点,如:action="www.demo.com/index.html",相对 URL,指向站点内的文件,如:action="index.html"。
<form> 属性两个最重要的属性:action 和 method, action 用于规定当提交表单时向何处发送表单数据。而 method 规定用于发送表单数据的 HTTP 方法,默认使用 GET 方式。accept-charset 属性规定服务器可处理的表单数据字符集。name 属性规定表单的名称,可用于在 JS 中引用元素,或者在表单提交之后引用表单数据。enctype 属性规定在向服务器发送表单数据之前如何对其进行编码,适用于 method="post" 的情况。target 属性可用于规定在何处打开 action URL。autocomplete 属性值为(on、off)用于规定是否启用表单的自动完成功能。novalidate 属性:如果使用该属性,则提交表单时不进行验证。
<input> 标签定义一个输入控件,规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件,输入字段可通过多种方式改变,取决于 type 属性。注意:<input> 元素是空的,它只包含标签属性。可以使用 <label> 元素来定义 <input> 元素的标注。可以使用 CSS 来定义 <input> 元素的对齐方式。在 HTML5 中, <input> 添加了几个新属性,并且添加了对应的值。在 HTML 中,<input> 标签没有结束标签。
<input> 元素属性:type 属性规定要显示的 <input> 元素的类型,他的类型有:text(默认,单行的文本字段,宽度为20个字符)、button(按钮)、radio(单选按钮)、checkbox(复选框)、password(密码)、submit(提交按钮)、image(图像作为提交按钮)、reset(重置按钮)、hidden(隐藏输入字段)、file(定义文件选择字段和 "浏览..." 按钮,供文件上传)。以下都为 HTML5 新增加的 type 属性值:search(用于输入搜索字符串)、url(用于输入 URL 的字段)、email(用于 e-mail 地址)、tel(用于输入电话号码)、color(拾色器)、number(用于输入数字的字段)、range(用于精确值不重要的输入数字的控件,比如 slider 控件)、time(用于输入时间的控件,不带时区)、month(month 和 year 控件,不带时区)、week(week 和 year 控件,不带时区)、date(date 控件,包括年、月、日,不包括时间)、 datetime(date 和 time 控件,包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)、 datetime-local(date 和 time 控件,包括年、月、日、时、分、秒、几分之一秒,不带时区)。 value 属性规定 <input> 元素的值。 name 属性规定 <input> 元素的名称。 src 属性规定显示为提交按钮的图像的 URL,只针对 type="image"。 alt 属性定义图像输入的替代文本,只针对 type="image"。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素,只针对 type="checkbox" 或者 type="radio"。 readonly 属性规定输入字段是只读的。 disabled 属性规定应该禁用的 <input> 元素。 size 属性规定以字符数计的 <input> 元素的可见宽度。 maxlength 属性规定 <input> 元素中允许的最大字符数。 accept 属性值为(audio/* video/* image/* MIME_type)用于规定通过文件上传来提交的文件的类型,只针对 type="file"。
下面是 HTML5 中 <input> 元素新添加的新属性:placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。required 属性规定必需在提交表单之前填写输入字段。autocomplete 属性值为(on、off)用于规定 <input> 元素输入字段是否应该启用自动完成功能。autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。multiple 属性规定允许用户输入到 <input> 元素的多个值。pattern 属性规定用于验证 <input> 元素的值的正则表达式。step 属性规定 <input> 元素的合法数字间隔。list 属性值为 datalist_id,该属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。width 和 height 属性用于规定 <input>元素的宽度/高度,只针对 type="image"。max 和 min 属性规定 <input> 元素的最大/最小值。form 属性值为 form_id 用于规定 <input> 元素所属的一个或多个表单。formaction 属性规定当表单提交时处理输入控件的文件的 URL,只针对 type="submit" 和 type="image"。formenctype 属性规定当表单数据提交到服务器时如何编码,只适合 type="submit" 和 type="image"。formmethod 属性值为(get、post) 用于定义发送表单数据到 action URL 的 HTTP 方法,只适合 type="submit" 和 type="image"。formtarget 属性值为(_blank、_self、_parent、_top、framename)用于规定表示提交表单后在哪里显示接收到响应的名称或关键词,只适合 type="submit" 和 type="image"。formnovalidate 属性覆盖 form 元素的 novalidate 属性,当表单提交时 <input> 元素不进行验证,该属性可与 type="submit" 配合使用。
复选框中默认选择一个选项(预选项)是这样定义的:<input type="checkbox" name="vehicle" value="Rocket" checked>。 checked 属性是预选,复选框中的预选项是可以取消的,单选框中默认选择一个选项(预选项)和复选框的预选项格式是一样的,不同的是单选按钮中的预选项不可以取消掉,只能换一个选择。
表单中发送电子邮件,可以在表单标签 <form> 的 action 属性中定义,<form action="mailto:123456@qq.com" method="post" enctype="text/plain">。method 属性是传输方法,POST 是一种隐秘的传送方式,传送数据无限制,安全级别高。GET 是直接传送方式,传送数据有限制,安全级别不高。enctype 属性是内容类型,enctype=text/plain 表示普通的文本。
<datalist> (H5) 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来为 <input> 元素提供"自动完成"的特性,用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据,可以使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
<label> 标签为 <input> 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果,不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件,也就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。提示:"for" 属性可把 label 绑定到另外一个元素,需要把 "for" 属性的值设置为相关元素的 id 属性的值。for 属性值为 element_id 用于规定 label 与哪个表单元素绑定。form 是 HTML5 一个新属性用于规定 label 字段所属的一个或多个表单。
<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体,通常是 Courier,该字体是一种常见的计算机字体。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。name 属性规定了文本区域的名称。readonly 属性规定文本区域为只读。disabled 规定禁用文本区域。HTML5 还增加了一些新的属性:placeholder 属性规定一个简短的提示,描述文本区域期望的输入值。required 属性规定文本区域是必需的/必填的。autofocus 属性规定当页面加载时,文本区域自动获得焦点。maxlength 属性规定文本区域允许的最大字符数。wrap 属性值为(hard、soft)用于规定当提交表单时,文本区域中的文本应该怎样换行。form 属性定义文本区域所属的一个或多个表单。
<button> 标签定义一个按钮。在 <button> 元素内部,可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。始终要为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。注意:如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。所以要使用 <input> 在 HTML 表单中创建按钮。name 属性规定按钮的名称。type 属性值为(button、submit、reset)用于规定按钮的类型。value 属性规定按钮的初始值,可由 JS 进行修改。disabled 属性规定应该禁用该按钮。HTML5 中的新属性:autofocus(自动获得焦点)、form(按钮属于一个或多个表单)、formaction(向何处发送数据,覆盖 form 元素的 action 属性,与 type="submit" 配合使用)、formenctype(发送表单之前如何编码,覆盖 form 元素的 enctype 属性,与 type="submit" 配合使用)、formmethod(发送表单的方法,覆盖 form 元素的 method 属性,与 type="submit" 配合使用)、formnovalidate(提交表单时不进行验证,覆盖 form 元素的 novalidate 属性,与 type="submit" 配合使用)以及 formtarget(在何处打开 action URL,覆盖 form 元素的 target 属性,与 type="submit" 配合使用)。
<select> 元素用来创建下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项。<select> 元素是一种表单控件,可用于在表单中接受用户输入。name 属性定义下拉列表的名称。size 属性规定下拉列表中可见选项的数目。multiple 属性:当该属性为 true 时,可选择多个选项。disabled 属性:当该属性为 true 时,会禁用下拉列表。HTML5 增加了一些新的属性:autofocus 属性规定在页面加载时下拉列表自动获得焦点。form 属性定义 select 字段所属的一个或多个表单。required 属性规定用户在提交表单前必须选择一个下拉列表中的选项。
<option> 标签定义下拉列表中的一个选项,也就是一个条目。<option> 标签中的内容作为 <select> 或者 <datalist> 一个元素使用。<option> 标签可以在不带有任何属性的情况下使用,但是通常需要使用 value 属性,此属性会指示出被送往服务器的内容。注意:请与 select 元素配合使用此标签,否则这个标签是没有意义的。如果列表选项很多,可以使用 <optgroup> 标签对相关选项进行组合。value 属性定义送往服务器的选项值。disabled 属性规定此选项应在首次加载时被禁用。label 属性定义当使用 <optgroup> 时所使用的标注。selected 属性规定选项(在首次显示在列表中时)表现为选中状态。
<optgroup> 标签经常用于把相关的选项组合在一起。如果有很多的选项组合, 就可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。label 属性为选项组规定描述。disabled 属性规定禁用该选项组。
<fieldset> 标签定义了一组相关的表单元素,并使用外框包含起来。该标签可以将表单内的相关元素分组,而且会在相关表单元素周围绘制边框。提示:<legend> 标签为 <fieldset> 元素定义标题。HTML5 给 <fieldset> 元素新增加了属性:name(规定 fieldset 的名称)。disabled(规定该组中的相关表单元素应该被禁用)、form(规定 fieldset 所属的一个或多个表单)。
<legend> 元素为 <fieldset> 元素定义标题。可以使用 CSS 来设置 <legend> 元素的对齐方式。
<keygen> (H5) 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。keytype 属性值为(rsa、dsa、ec)用于定义密钥的安全算法,默认值为 rsa,规定 RSA 安全算法,RSA 密钥强度可由用户选择。dsa 规定 DSA 安全算法,DSA 密钥长度可由用户选择。ec 规定 EC 安全算法,EC 密钥强度可由用户选择。autofocus 属性使 <keygen> 字段在页面加载时获得焦点。challenge 属性:如果使用该属性,则将 <keygen> 的值设置为在提交时询问。name 属性定义 <keygen> 元素的唯一名称,用于在提交表单时搜集字段的值。disabled 属性禁用 <keygen> 元素字段。form 属性定义该 <keygen> 字段所属的一个或多个表单。
<output> (H5) 标签作为计算结果输出显示,比如执行脚本的输出。name 属性定义对象的唯一名称,在表单提交时使用。for 属性值为 element_id 用于描述计算中使用的元素与计算结果之间的关系。form 属性定义输入字段所属的一个或多个表单。
(8)、列表标签
列表形式在网站设计中占有比较大的比重,内容显示非常整齐直观,便于理解。HTML 的列表元素是一个有列表标签封装的结构,包含的列表项由 <li> 标签组成。
<li> 标签定义列表项目。可用在有序列表 <ol>、无序列表 <ul> 和菜单列表 <menu> 中。可以使用 CSS 来定义列表和列表项目的类型。
<ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用,创建无序列表。可以使用 CSS 为列表定义样式。
<ol> 标签定义了一个有序列表。 列表排序以数字来显示,使用 <li> 标签定义列表选项。可以使用 CSS 来定义列表样式。在 HTML5 中增加了一个新属性,reversed 属性用于指定列表倒序(9,8,7...)。
有序列表是编号列表,用于对网页中的某些内容进行编号排列,以便使读者清晰的了解每行的顺序。同样,有序列表也是一列项目,列表项目默认使用数字进行标记。有序列表始于 <ol> 标签,每个列表项始于 <li> 标签。<ol> 标签可用 CSS 样式进行定义:type 和 start ,type 用于指定编号的样式,如:1.A.a.I.i。start 用于指定起始编号,如不定义 start,默认使用阿拉伯数字。
无序列表是项目列表,列表的内容可以按任意顺序排列,列表项目不是连续编号而是一个特定的符号默认来标记,也就是使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 <ul>标签,<li> 标签是列表项。<ul> 标签可用 CSS 样式定义项目编号的显示,disc 默认的实体圆点,circle 空心圆圈,square 实心方块。
将一个列表嵌入到另一个列表中,作为另一个列表的一部分,叫做嵌套列表,无论是有序列表的嵌套还是无序列表的嵌套,浏览器都可以自动的分行排列。HTML嵌套列表使用的标签:<ol> <ul> <li>。
有时候无序列表不需要 <li> 标签前边默认的圆点,比如在 HTML 页面布局时,可以使用无序列表创建导航栏选项,那么这时候需要清除他的默认样式,则使用 CSS 设置:list-style:none。
自定义列表用于对清单条目进行简短的说明,一个列表可以对应一个或多个说明项,因每个列表项有一个缩进的说明项,与字典的编排有相同的格式,所以有称为“字典列表”。自定义列表不仅仅是一列项目,而是项目及其注释的组合。首标签 <dl> 和 尾标签 </dl> 之间为列表内容,列表项目标签用 <dt>,列表项目的说明用标签 <dd>,通常 <dt> 和 <dd> 是一起出现的。
<dl> 标签定义一个描述列表。<dl> 标签与 <dt> 和 <dd> 一起使用。在 HTML4 中,<dl> 标签定义一个定义列表,而在 HTML5 中,<dl> 标签定义一个描述列表。
<dt> 标签定义一个描述列表的项目/名字。在 HTML4 中,<dt> 标签定义一个定义列表的条目,而在 HTML5 中,<dt> 标签定义一个描述列表的项目/名字。
<dd> 标签被用来对一个描述列表中的项目/名字进行描述。在 <dd> 标签内,可以放置段落、换行、图片、链接以及其他列表等等。在 HTML4 中,<dd> 标签被用来描述一个定义列表中的条目,而在 HTML5 中,<dd> 标签被用来描述一个描述列表的项目/名字。
<command> (H5) 标签定义命令按钮,比如单选按钮、复选框或按钮。<command> 标签可以定义用户可能调用的命令,当使用 <menu> 元素时,command 元素将作为菜单或者工具栏的一部分显示出来。但是,用 command 规定键盘快捷键时,command 元素能被放置在页面的任何位置,但元素不可见。注意:目前,主流浏览器都不支持 <command> 标签。label 属性是必需的属性,规定 command 的名字,对用户可见。type 属性用于定义 command 的类型,该属性的值为:command 默认值,规定带有 action 的普通命令。checkbox:使用复选框规定可切换的命令。radio:使用单选按钮规定可切换的命令。disabled 属性规定 command 是否可用。checked 属性规定当页面加载时,command 是否被选中,仅用于 radio 或 checkbox 类型。icon 属性值为 URL 用于规定作为 command 来显示的图像的 URL。radiogroup 属性规定可进行切换且将被切换的 command 所属的组名,仅在类型为 radio 时使用。
<menu> 标签定义了一个命令列表或菜单。<menu> 标签通常用于文本菜单,工具条和命令列表选项,可以使用 CSS 来定义菜单列表样式。HTML4 的 <menu> 元素已废弃,而在 HTML5 中 <menu> 元素被重新定义,并且新增加了2个属性:type 属性值为(list、context、toolbar)用于描述显示菜单的类型,默认值为 "list",规定一个用户可执行或激活的命令列表(li 元素)。context:规定一个上下文菜单,菜单必须在用户与命令进行交互之前被激活。toolbar:规定一个工具栏菜单,主动式命令,允许用户立即与命令进行交互。label 属性用于描述菜单项的标记。目前几乎没有主流浏览器支持这2个属性。
<menuitem> (H5) 标签定义用户可以从弹出菜单调用的命令/菜单项目。该标签非常有用,可以用来创建右键菜单,但目前只有 Firefox 是唯一实现了这个 API 的浏览器。通过 HTML5 <menu> 和 <menuitem> 标签就可以生成右键菜单,菜单只在指定区域的右键菜单内显示,所以不需要再通过创建浏览器插件来实现这种效果。即使是 JS 被禁止了,这些右键菜单仍然能正常显示。所以,如果你想尊重用户的选择,最好的方法是用 JS 来创建这些菜单元素,插入到 DOM 元素里,这样,当 JS 被禁止时,这些右键菜单也不显示了。
(9)、表格标签
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,还是需要显示边框。可以使用边框属性来显示一个带有边框的表格:<table border="1"><tr><td>100吨</td></tr></table>,若 border="",则表示无边框。在 HTML5 中,border 属性仅用于指示表格是否用于布局目的,且只允许属性值为 "" 或 "1",而且只支持该属性。
一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 <td> 元素。<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。水平显示的表头,是把所有表头 <th> 标签添加到一个表格 <tr> 标签内,竖直显示的表头,就是把每个表头 <th> 标签添加到每个表格 <tr> 标签内。
<tr> 标签定义 HTML 表格中的行。一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。在 HTML5 中,不支持 <tr> 标签在 HTML4 中的任何属性。
<th> 标签定义 HTML 表格中的表头单元格。大多数浏览器会把表头显示为粗体居中的文本。<td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两种单元格类型:表头单元格,即包含头部信息(由 <th> 元素创建)。标准单元格,即包含数据(由 <td> 元素创建)。<th> 元素中的文本通常呈现为粗体并且居中,而 <td> 元素中的文本通常是普通的左对齐文本。HTML 5 中不再支持 HTML4 中的某些属性。如果需要将内容横跨多个行或列,可以使用 colspan 和 rowspan 属性!colspan 属性规定表头单元格可横跨的列数。rowspan 属性规定表头单元格可横跨的行数。headers 属性值为 header_id 用于规定与表头单元格相关联的一个或多个表头单元格。scope 属性值为(col、colgroup、row、rowgroup)用于规定表头单元格是否是行、列、行组或列组的头部。<td> 元素除了不支持 <th> 元素的 scope 属性外,其余3个都支持。
可以使用 CSS 样式 vertical-align 定义表头单元格内容的垂直排列方式。该属性的默认值为:baseline 基线对齐。vertical-align:top 顶部对齐。vertical-align:middle 中间对齐。vertical-align:bottom 底部对齐。
<caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后,并且只能对每个表格定义一个标题,通常这个标题会被居中于表格之上。然而,CSS 属性 "text-align" 和 "caption-side" 可用来设置标题的对齐方式和显示位置。caption-side 主要用来规定表格标题的放置方式,默认值为 top,即把表格标题定位在表格之上。caption-side:bottom 规定把把表格标题定位在表格之下。
<thead> 标签用于组合 HTML 表格的表头内容。<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。<thead> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 元素之后,<tbody>、 <tfoot> 和 <tr> 元素之前。注意:<thead> <tbody> <tfoot>元素内部必须包含一个或者多个 <tr> 标签。<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过,可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。在 HTML5 中,不再支持 HTML4 中这3个标签的任何属性。
<tbody> 标签用于组合 HTML 表格的主体内容。<tbody> 元素应该与 <thead> 和 <tfoot> 元素结合起来使用,用来规定表格的各个部分(主体、表头、页脚)。<tbody> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后。
<tfoot> 标签用于组合 HTML 表格的页脚内容。<tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用,用来规定表格的各个部分(页脚、表头、主体)。<tfoot> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后,<tbody> 和 <tr> 元素之前。
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。注意:只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签。HTML5 只支持 span 属性用于规定列组应该横跨的列数。
<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。通过使用 <col> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。在 HTML 中,<col> 标签没有结束标签。HTML5 只支持 span 属性用于规定 <col> 元素应该横跨的列数。
(10)、插件标签
<embed> (H5) 标签定义了一个容器,用来嵌入外部应用或者互动程序(插件)。src 属性规定被嵌入内容的 URL。type 属性规定嵌入内容的 MIME 类型。width 和 height 属性规定嵌入内容的宽度/高度。
<object> 标签定义一个嵌入的对象。此元素允许你规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。<object> 标签用于包含对象,比如图像、音频、视频、Java applets(用 Java 编写的可包含在网页中的小应用程序)、ActiveX、PDF 以及 Flash。
object 被设计的初衷是取代 img 和 applet 元素,<applet> 元素已被废弃,从其字面来理解就是小程序,主要被用于定义嵌入的小程序。不过由于漏洞以及缺乏浏览器支持,这一点并未实现,浏览器的对象支持有赖于对象类型,不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素,每个对应一个浏览器。
name 属性为对象规定名称,type 属性规定对象的 MIME 类型。usemap 属性值为(#加上要使用的 map 元素的名称)用于规定与对象一起使用的图像映射的名称,该属性与 <map> 元素的 name 属性相关联,创建对象和映射之间的关系。width 和 height 属性规定对象的宽度/高度。其余在 HTML4 中定义的属性在 HTML5 中都不被支持,但是新增加了一个属性:form 属性规定对象所属的一个或多个表单。在 HTML5 中,object 可以在 form 表单中提交,并且不再出现在 <head> 元素区域内。
<param> 标签定义对象的参数。<param> 元素允许为插入文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 标签提供参数。run-time 是运行电脑的时间,简称运行时,就是系统在运行的时候的一些机制,其中最主要的是消息机制。name 属性定义参数的名称,该属性通常与 value 属性一起使用来规定由 <object> 标签规定的插件的参数,name 属性的值可以是指定对象支持的任何名称。value 属性描述参数值。在 HTML 中,<param> 标签没有结束标签。大部分主流浏览器都支持 <param> 标签,但是 <object> 定义的文件格式并不是所有的浏览器都支持。
(11)、框架标签
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。HTML 框架通过 <iframe> 标签来实现。定义一个内联的 iframe(内联框架/内嵌框架)。
语法:<iframe src="URL"></iframe> 该 URL 指向不同的网页。
<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档,包括滚动条。你可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。可以使用 CSS 为 <iframe> 定义样式,包括滚动条和移除边框等。src 属性规定在 <iframe> 中显示的文档的 URL。width 和 height 属性规定 <iframe> 的宽度/高度,默认单位为像素,也可以指定其按比例显示(如:"80%")。name 属性规定 <iframe> 的名称。HTML5 废弃了其余在 HTML4 中的一些属性,并增加了新的属性,seamless 属性规定 <iframe> 看起来像是父文档中的一部分。srcdoc 属性值为 HTML_code 用于规定页面中的 HTML 内容显示在 <iframe> 中,即要显示在 iframe 中的 HTML 内容,值必需是有效的 HTML 语法。sandbox 属性用于对 <iframe> 的内容定义一系列额外的限制,它的值为:""(启用所有限制条件)、allow-forms(允许表单提交)、allow-scripts(允许执行脚本)、allow-same-origin(允许将内容作为普通来源对待,如果未使用该关键字,嵌入的内容将被视为一个独立的源)、allow-top-navigation(嵌入的页面的上下文可以导航(加载)内容到顶级的浏览上下文环境,如果未使用该关键字,这个操作将不可用)。
如果指定了空字符串:sandbox="",那么该属性对呈现在 iframe 框架中的内容将启用一些额外的限制条件。sandbox 属性的值既可以是一个空字符串,将会启用所有的限制,也可以是用空格分隔的一系列指定的字符串。HTML5 通过 sandbox 属性提升 iFrame 的安全性,该属性可以防止不信任的 Web 页面执行某些操作,还可以防止如下操作:①、防止访问父页面的 DOM。从技术角度来说,这是因为相对于父页面 iframe 已经成为不同的源了。②、防止执行脚本。③、防止通过脚本嵌入自己的表单或是操控表单。④、防止对 Cookie、本地存储或本地 SQL 数据库的读写。
<iframe> 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性,如下实例:
1 <iframe src="index.html" name="iframeA"></iframe>
2 <p>
3 <a href="https://www.baidu.com" target="iframeA">百度知道</a>
4 </p>
上面的代码中,因为 <a> 标签的 Target 属性是名为 iframeA 的 iframe 框架,所以在点击链接时页面会显示在 iframe 框架中。可自定义一个页面保存为 index.html 用于演示。
3、HTML 知识
(1)、布局
网页布局对改善网站的外观非常重要,需要慎重设计网页布局,常使用 DIV+CSS 的方式进行页面布局,大多数网站会把内容安排到多个列中,就像杂志或报纸那样。
HTML 页面布局主要使用 <div> 元素,该元素是用于分组 HTML 元素的块级元素。<div> 标签定义文档的区块,<span> 标签定义文档中的节,可用于组合文档中的行内元素。
CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护,通过编辑单一的文件,就可以改变所有页面的布局。由于创建高级的布局非常耗时,使用模板是一个快速的选项,通过搜索引擎可以找到很多免费的网站模板,也可以使用这些预先构建好的网站布局,然后对其进行优化。
(2)、统一资源定位器
统一资源定位器即 URL(Uniform Resource Locators), Web 浏览器通过 URL 从 Web 服务器请求页面,URL 编码会将字符转换为可通过因特网传输的格式,URL 是一个网页地址,可以由字母组成,如"baidu.com",或互联网协议(IP)地址: 202.108.22.5。大多数人进入网站使用网站域名来访问,因为名字比数字更容易记住。当你点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址,一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例:http://www.demo.com/html/index.html 语法规则:scheme://host.domain:port/path/filename。说明:
scheme(方案):定义因特网服务的类型,最常见的类型是 http。
host(主机):定义域主机(http 的默认主机是 www)。
domain(域):定义因特网域名,比如 baidu.com。
:port(端口):定义主机上的端口号(http 的默认端口号是 80)。
path(路径):定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename(文件名):定义文档/资源的名称。
常见的 URL Schemes(方案):http,超文本传输协议,用于以 http:// 开头的普通网页,不加密。https,安全超文本传输协议,用于安全网页,解密所有信息交换。ftp,文件传输协议,用于将文件下载或上传至网站。file,本地计算机上的文件。
URL 只能使用 ASCII 字符集来通过因特网进行发送,由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式,URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格,URL 编码通常使用 +(%2B) 来替换空格。
(3)、HTTP 方法
什么是 HTTP?HTTP 即超文本传输协议,他被设计目的是保证客户端与服务器之间的通信。HTTP 的工作方式是客户端与服务器之间的请求 - 响应协议,即客户端(浏览器)向服务器提交 HTTP 请求,服务器向客户端返回响应,响应包含关于请求的状态信息以及可能被请求的内容。
在客户端和服务器端进行数据交互时,有很多种方法,最常被用到的两种方法是:GET 和 POST,GET 是从指定的资源请求数据,而 POST 是向指定的资源提交要被处理的数据。
GET 与 POST 的区别:
比较项 | GET | POST |
后退按钮/刷新 | 不影响 | 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。 |
对数据长度的限制 | 当发送数据时,GET 方法向 URL 添加数据,URL 的长度是受限制的,URL 的最大长度是 2048 个字符。 | 无限制。 |
书签 | 可收藏为书签 | 不可收藏为书签 |
缓存 | 能被缓存 | 不能缓存 |
历史 | 参数保留在浏览器历史中 | 参数不能保留在浏览器历史中 |
可见性 | 数据在 URL 中对所有人都是可见的 | 数据不会显示在 URL 中 |
安全性 | 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。 | POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
注意:在发送密码或其他敏感信息时绝不能使用 GET 请求!
(4)、HTTP 消息
当浏览器从 web 服务器请求服务时,可能会发生错误,最常见的就是 404:服务器无法找到被请求的页面。
(5)、HTML 字符集
字符集用于规定浏览器正确的显示 HTML 页面,万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字,大写和小写英文字母表,以及一些特殊字符。由于很多国家使用的字符并不属于 ASCII,现代浏览器的默认字符集是 ISO-8859-1,如果网页使用不同于 ISO-8859-1 的字符集,就应该在 <meta> 标签进行指定。
ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集,但是这些符集都有容量限制,而且不兼容多语言环境,Unicode 联盟开发了 Unicode 标准,该标准涵盖了世界上的所有字符、标点和符号,不论是何种平台、程序或语言,Unicode 都能够进行文本数据的处理、存储和交换。
Unicode 联盟开发了该标准的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集,许多操作系统以及所有的现代浏览器都支持 Unicode 标准,Unicode 可以被不同的字符集兼容,最常用的编码方式是 UTF-8,也是国际编码格式,还有 UTF-16,而 GB2312 是由中国国家标准总局发布的汉字编码字符集,适用于汉字处理、汉字通信等系统之间的信息交换,通行于中国大陆,中国大陆几乎所有的中文系统和国际化的软件也都支持 GB2312。
(6)、字符实体
在 HTML 中,某些字符是预留的。HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中不能使用小于号(<)和大于号(>),因为浏览器会误认为它们是标签,如果希望正确地显示预留字符,必须在 HTML 源代码中使用字符实体。如需显示小于号,必须这样写:< 或 < ,如需显示大于号,必须这样写:> 或 >,使用实体名而不是数字的好处是,名称易于记忆,不过坏处是,浏览器也许并不支持所有实体名称,但对实体数字的支持却很好。
HTML 中的常用字符实体是不间断空格( )。浏览器总是会截短 HTML 页面中的空格。如果在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个,如需在页面中增加空格的数量,必须使用: 或   。
下面是五种特殊字符,也是 HTML 的预留字符:
字符 | 描述 | 实体名称 | 实体编码 |
" | 引号 | " | " |
' | 撇号 | ' | ' |
& | 和号 | & | & |
< | 小于号 | < | < |
> | 大于号 | > | > |
其他常见实体编码:
字符/符号 | 描述 | 实体名称 | 实体编码 |
空格 | |   | |
§ | 小节 | § | § |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
注意:实体名称对大小写敏感!