码迷,mamicode.com
首页 > Web开发 > 详细

HTML 基础

时间:2016-02-02 22:24:06      阅读:793      评论:0      收藏:0      [点我收藏+]

标签:

1、HTML 简介

  W3C(World Wide Web Consortium),W3C 组织,万维网联盟,这个组织制订网页标准。W3C 标准不是一个标准,而是一系列的标准的集合,包含三部分的标准:结构标准,表现标准和动作标准,与结构标准对应的是 HTML,与表现标准对应的是 CSS,与动作标准对应的是 JavaScript。

  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> 。

  浏览器用于读取 HTML 文件,并将其作为网页显示,他并不是直接显示的 HTML 标签,但是可以使用标签来决定如何展现 HTML 页面的内容给用户。

 

2、HTML 标签

  HTML 文档由 HTML 元素定义。开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。元素的内容是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束),大多数 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 元素可以设置属性。属性可以在元素中添加附加信息 about an element(关于一个元素)。属性一般描述于开始标签。属性总是以名称/值对的形式出现,比如: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 属性,它使字符集的定义更加容易:HTML 4.01: <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文档的描述,关键词,作者,字符集等。使用 <base> 定义页面中所有链接默认的链接目标地址。

  <title> 标签在所有 HTML 文档中是必需的。<title>元素:

    ①:定义浏览器工具栏中的标题。

    ②:提供页面被添加到收藏夹时的标题。

    ③:显示在搜索引擎结果中的页面标题。

  注意:一个 HTML 文档中不能有一个以上的 <title> 元素。提示:如果你遗漏了 <title> 标签,文档作为 HTML 是无效的。<title> 标签定义了不同文档的标题。定义了浏览器工具栏的标题。当网页添加到收藏夹时,显示在收藏夹中的标题。显示在搜索引擎结果页面的标题。所以选择标题的时候,一定要简短,有说明性,采用关键词,与页面内容相关。

 

  <style> 标签定义了 HTML 文档的样式信息。在 <style> 元素中,你可以规定在浏览器中如何呈现 HTML 文档,每个 HTML 文档能包含多个 <style> 标签。注释:如果没有使用 "scoped" 属性,则每一个 <style> 标签必须位于 head 头部区域。"scoped" 属性是 HTML 5 中的新属性,它允许我们为文档的指定部分定义样式,而不是整个文档。 如果使用 "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。"async" 属性是 HTML5 中的新属性,用于规定异步执行脚本(仅适用于外部脚本)。defer 属性用于规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。charset 属性用于规定在脚本中使用的字符编码(仅适用于外部脚本)。defer值defer描述:规定当页面已完成解析后,执行脚本(仅适用于外部脚本)。

  引用外部脚本的语法:<script language="javascript" type="text/javascript" src="URL"></script> 。其中的 src="RUL" 中填写同级目录下的外部脚本文件名。

  注意:

    ①:外部脚本文件可以是任意扩展名,浏览器会根据 <script> 标签中的 type 属性值和 language 属性值,判断使用哪种解析器来解析外部脚本文件。通常开发者会将 JavaScript 外部脚本的扩展名写为.js。

    ②:在外部脚本文件中,只能包含脚本语言代码,不能包含其他代码(如HTML代码等),也不能包含 <script>标签,因为 <script>元素属于 HTML 语言中的元素。

    ③:在引用外部脚本文件时,<script> 标签与 </script> 标签之间不能有其他代码,包括脚本语言代码。

    ④:虽然在引用外部脚本文件时,<script> 标签与 </script>标签之间不能有其他代码,但 </script> 标签也不能被省略。

   <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。<noscript> 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。<noscript> 标签用来定义在脚本未被执行时的替代内容(文本)。此标签可被用于可识别 <noscript> 标签但无法支持其中的脚本的浏览器。提示:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。在 HTML4.01 中,<noscript> 标签只允许插入到 <body> 元素中,而在 HTML5 中,<noscript> 标签可以插入到 <head> 和 <body> 区域中。

 

  <body> 标签定义文档的主体。<body> 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。在 HTML 4.01 中,所有 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/> 定义内容中的主题变化,并显示为一条水平线,而在 HTML 4.01 中,<hr/> 标签仅仅显示为一条水平线。可使用 CSS 来为 <hr/> 元素定义样式。

 

  HTML 注释 <!-- 这是一个注释 --> 。 注释标签用来在源文档中插入注释,注释不会在浏览器中显示。可以使用注释对你的代码进行解释,这样做有助于在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的。除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作,这些动作可能是简单的包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。

 

  (2)、样式标签

 

  <article> (H5) 标签定义一个文章区域。<article> 标签定义独立的内容,他定义的内容本身必须是有意义的且必须是独立于文档的其余部分。<article> 的潜在来源:论坛帖子、博客文章、新闻故事、评论。

  <aside> (H5) 标签定义页面的侧边栏内容。<aside> 标签定义 <article> 标签外的内容,<aside> 的内容应该与附近的内容相关。提示:<aside> 的的内容可用作文章的侧栏。

  <section> (H5) 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

  <header> (H5) 标签定义文档或者文档的一部分区域的页眉。<header> 元素应该作为介绍内容或者导航链接栏的容器。在一个文档中,你可以定义多个 <header> 元素。注意:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

  <footer> (H5) 标签定义 <section> 或 document 的页脚,,也就是用于定义文档或者文档的一部分区域的页脚。<footer> 元素应该包含它所包含的元素的信息,在典型情况下,该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,可以定义多个 <footer> 元素。提示:假如你使用 <footer> 元素来插入联系信息,应该在 <footer> 元素内使用 <address> 标签。

  <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 元素是有效的,用户可以与它进行交互。

 

95、HTML <div> 和<span>。HTML 可以通过 <div> 和 <span>将元素组合起来。

95.1、<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。提示:<div> 元素经常与 CSS 一起使用,用来布局网页。注释:默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符。然而,你可以通过使用 CSS 改变这种情况。在 HTML 4.01 中,align 属性 已废弃。HTML5 中不支持 align 属性。HTML5 中不支持 align 属性。

95.2、<span> 标签用于对文档中的行内元素进行组合。<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。提示:被 <span> 元素包含的文本,你可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。

96、HTML 区块元素。大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)。实例: <h1>, <p>, <ul>, <table>。

97、HTML 内联元素。内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>。

98、HTML <div> 元素。HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

99、HTML <span> 与元素。HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

100、HTML 分组标签:<div> 标签定义了文档的区域,块级 (block-level)。<span> 标签用来组合文档中的行内元素, 内联元素(inline)。

 

 

  (3)、格式标签

  <wbr> (H5) (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。提示:如果单词太长,或者担心浏览器会在错误的位置换行,那么就可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机),他的作用就是告诉浏览器在这个标记处可以断行,但只是建议而不是必定会在此处断行,因为要根据整行文字长度而定,因此只要在连续的文本中间适当的插入若干 <wbr> 标签就能解决断行问题。

  <meter> (H5) 标签定义度量衡。仅用于已知最大和最小值的度量。比如:磁盘使用情况,查询结果的相关性等。注意: <meter> 不能作为一个进度条来使用, 进度条请使用 <progress> 标签。

 

  <progress> (H5) 标签定义运行中的任务进度(进程)。提示:请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或相关的查询结果)。表示度量衡,请使用 <meter> 标签代替。

  <time> (H5) 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的,在该元素的内容中未指定日期或时间时,使用该属性。该元素能够以浏览器可读的方式对日期和时间进行编码,比如,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。datetim e属性规定日期/时间。另一种方式,则是由元素的内容给定日期/时间,该属性在所有浏览器中不会渲染任何特殊的效果。

 

  <mark> (H5) 标签定义带有记号的文本,请在需要突出显示文本时使用 <mark> 标签。

  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> 元素定义一个定义项目。在 HTML 4.01 中,<i> 标签呈现斜体的文本,然而,在 HTML5 中没有必要这么做,可以使用样式表来格式化 <i> 元素中的文本。

  <strong> 标签是一个短语标签,用来定义计算机程序的样本重要的文本。注意:并不反对使用这个标签,但是如果只是为了达到某种视觉效果而使用这个标签的话,建议使用 CSS,这样可能会取得更丰富的效果。所有短语标签:<em> 呈现为被强调的文本,<strong> 定义重要的文本,<dfn> 定义一个定义项目,<code> 定义计算机代码文本,<samp> 定义样本文本。<var> 定义变量,可以将此标签与 <pre> 及 <code> 标签配合使用。在 HTML 4.01 中,<strong> 标签定义加粗的被强调的文本,而在 HTML5 中,<strong> 标签定义重要的文本。

  <em> 标签是一个短语标签,用来呈现为被强调的文本。注意:并不反对使用这个标签,但是如果只是为了达到某种视觉效果而使用这个标签的话,建议使用 CSS ,这样可能会取得更丰富的效果。

  <dfn> 标签是一个短语标签,用来定义一个定义项目。<code> 标签是一个短语标签,用来定义计算机代码文本。<samp> 标签是一个短语标签,用来定义计算机程序的样本文本。<var> 标签是一个短语标签,用来定义变量。提示:我们并不反对使用这些标签,但是如果你只是为了达到某种视觉效果而使用这些标签的话,我们建议你使用 CSS ,这样可能会取得更丰富的效果。

  <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。注意:人名不属于作品的标题。在 HTML 4.01 中,<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>。在 HTML 4.01 中,<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> 标签。在 HTML 4.01 中,<s> 标签已被废弃,并且被用来给文本加删除线,而 HTML5 重新定义了 <s> 标签,现在是被用来定义那些不再正确的文本。

  <u> 标签定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词。在 HTML 中,<u> 元素已废弃,原被用来定义下划线,而在 HTML5 中重新定义了 <u> 元素。提示:请尽量避免使用 <u> 为文本加下划线,用户会把它混淆为一个超链接。注意:HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。

  <sup> 标签定义上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注。

  <sub> 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式。

  <abbr> 标签定义缩写。当把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时,<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。<abbr> 标签用来表示一个缩写词或者首字母缩略词。通过对缩写词语进行标记,就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

  <address> 标签定义文档作者或拥有者的联系信息。如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信息,如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者/所有者的联系信息。<address> 元素的文本通常呈现为斜体,大多数浏览器会在该元素的前后添加换行,或可用 <br/> 换行显示。不应该使用 <address> 标签来描述邮政地址,除非这些信息是联系信息的组成部分。<address> 元素通常被包含在 <footer> 元素的其他信息中。

 

  (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{color:#000;text-decoration:none}。定义鼠标移动到超链接上的颜色,a:hover{color:red}。

  图像超链接:<a href="http://www.baidu.com"><img src="images/1.jpg"></a>。

  本文本链接:<p><a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>。相对路径,如htef="/abc/",代表本站内超文本。

  HTML 链接的 id 属性。也可用class,id 是代表唯一的,而 class 是一个集,也就是所有 class 名称一样的都可被定义。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 href="mailto:123456@qq.com">电子邮件</a>。当前系统需要安装 EMAIL 客户端程序才能使用,可用 火狐/IE 测试,会跳转链接到一个邮件。

 

  <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 的图片,点击超链接跳转到该网站,并且在新窗口打开目标页面。

 

  <nav> (H5) 标签定义导航链接的部分,并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域,在不同设备上(手机或者PC)可以制定导航链接是否显示,以适应不同屏幕的需求。

 

  (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 属性值为 text 用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

  注意: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 属性值为 mapname 为 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 属性值为 media query 规定目标 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> 元素被用来为 <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>

  注意:火狐浏览器支持 picture 标签。360 和 IE 不支持 picture 标签,需要搭载 JS 环境让 IE 浏览器识别 picture 标签。

 

  (6)、多媒体标签

110、<audio> (NEW)标签定义音频内容。<audio> 标签定义声音,比如音乐或其他音频流。目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。有些浏览器不支持某种格式,建议采取两种格式写,用MP3或Wav就可以。音频格式的 MIME 类型:MP3-MIME-type:audio/mpeg 。Wav-MIME-type:audio/wav 。Ogg-MIME-type:audio/ogg 。提示:可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

110.1、<audio> (NEW)标签属性:autoplay值autoplay描述:如果出现该属性,则音频在就绪后马上播放。controls值controls描述:如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。loop值loop描述:如果出现该属性,则每当音频结束时重新开始播放。muted值muted如果出现该属性,则音频输出为静音。preload值(auto、metadata、none)描述:规定当网页加载时,音频是否默认被加载以及如何被加载。src值URL描述:规定音频文件的 URL。

110.2、<source> (NEW)标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<source> 标签允许你规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。

110.3、<source> (NEW)标签属性:src值URL描述:规定媒体文件的 URL。media值media_query描述:规定媒体资源的类型,供浏览器决定是否下载。type值MIME_type描述:规定媒体资源的 MIME 类型。

111、<video> (NEW)标签<video> 标签定义视频,比如电影片段或其他视频流。目前,<video> 元素支持三种视频格式: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> 元素的浏览器就可以显示出该标签的信息。

111.1、<video> (NEW)标签属性:src值URL描述:要播放的视频的 URL。width值px描述:设置视频播放器的宽度。height值px描述:设置视频播放器的高度。autoplay值autoplay如果出现该属性,则视频在就绪后马上播放。controls值controls描述:如果出现该属性,则向用户显示控件,比如播放按钮。loop值loop描述:如果出现该属性,则当媒介文件完成播放后再次开始播放。muted值muted描述:如果出现该属性,视频的音频输出为静音。poster值URL描述:规定视频正在下载时显示的图像,直到用户点击播放按钮。preload值(auto、metadata、none)描述:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。

112、<track> (NEW)标签为媒体元素(比如 <audio> and <video>)规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。属性:src值URL描述:必需的。规定轨道文件的 URL。default值default描述:规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。kind值(captions、chapters、descriptions、metadata、subtitles)描述:规定文本轨道的文本类型。srclang值language_code描述:规定轨道文本数据的语言。如果 kind 属性值是 "subtitles",则该属性是必需的。label值text描述:规定文本轨道的标签和标题。

 

  (7)、表单标签

  HTML 表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

83.1、<form> 标签用于创建供用户输入的 HTML 表单。<form> 元素包含一个或多个如下的表单元素:<input><textarea><button><select><option><optgroup>

<fieldset><label>。HTML5 新增了两个新的属性:autocomplete 和 novalidate,同时不再支持 HTML 4.01 中的某些属性。在 XHTML 中,name 属性已被废弃。使用全局 id 属性代替。<form> 属性:accept-charset值character_set描述:规定服务器可处理的表单数据字符集。action值URL描述:规定当提交表单时向何处发送表单数据。enctype值(application/x-www-form-urlencoded、multipart/form-data、
text/plain)描述:规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)。method值(get、post)描述:规定用于发送表单数据的 HTTP 方法。name值text描述:规定表单的名称。target值(_blank、_self、_parent、_top)描述:规定在何处打开 action URL。autocomplete(NEW)值(on
、off)描述:规定是否启用表单的自动完成功能。novalidate(NEW)值novalidate描述:如果使用该属性,则提交表单时不进行验证。

 

 X.83.3、<input> 标签定义一个输入控件,规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变,取决于 type 属性。注意: <input> 元素是空的,它只包含标签属性。提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。 可以使用CSS来定义 <input> 元素的对齐方式。在 HTML5中, <input> 添加了几个属性,并且添加了对应的值。在 HTML 中,<input> 标签没有结束标签。在 XHTML 中,<input> 标签必须被正确地关闭。<input>属性:accept值audio/* video/* image/* MIME_type描述:规定通过文件上传来提交的文件的类型。 (只针对type="file")。alt值text描述:定义图像输入的替代文本。 (只针对type="image")。autocomplete(NEW)值(on、off)描述:autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。autofocus(NEW)值autofocus描述:属性规定当页面加载时 <input> 元素应该自动获得焦点。checked值checked描述:checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")。disabled值disabled描述:isabled 属性规定应该禁用的 <input> 元素。form(NEW)值form_id描述:form 属性规定 <input> 元素所属的一个或多个表单。formaction(NEW)值URL描述:属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")。formenctype(NEW)值(application/x-www-form-urlencoded 、multipart/form-data text/plain)描述:属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。formmethod(NEW)值(get、post)描述:定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")。formnovalidate(NEW)值formnovalidate描述:formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。formtarget(NEW)值(_blank、 _self、 _parent、 _top、 framename)描述:规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")。height 、width(NEW)值px描述:规定 <input>元素的高度/宽度。(只针对type="image")。list(NEW)值datalist_id描述:属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。max(NEW)值number date描述:属性规定 <input> 元素的最大值。maxlength值number描述:属性规定 <input> 元素中允许的最大字符数。min(NEW)值number date描述:属性规定 <input>元素的最小值。multiple(NEW)值multiple描述:属性规定允许用户输入到 <input> 元素的多个值。name值text描述:name 属性规定 <input> 元素的名称。pattern(NEW)值regexp描述:pattern 属性规定用于验证 <input> 元素的值的正则表达式。placeholder(NEW)值text描述:Splaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。readonly值readonly描述:readonly 属性规定输入字段是只读的。required(NEW)值required描述:属性规定必需在提交表单之前填写输入字段。size值number描述:size 属性规定以字符数计的 <input> 元素的可见宽度。src值URL描述:src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")。step(NEW)值number描述:step 属性规定 <input> 元素的合法数字间隔。value值text描述:value属性规定<input>元素的值。type值(button、 checkbox 、color、 date、 datetime、 datetime-local、 email、 file、 

hidden、 image、month、 number、 password、 radio、 range、 reset、 
search 、submit、 tel、 text、 time、 url、 week)描述:type 属性规定要显示的 <input> 元素的类型。

 

80.2、<datalist> (NEW)标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

 

83.3.1、<label> 标签为 <input> 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。属性:for值element_id描述:规定 label 与哪个表单元素绑定。form(NEW)值form_id描述:规定 label 字段所属的一个或多个表单。

 

83.4、<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。HTML5 增加了一些新的属性。autofocus(NEW)值autofocus描述:规定当页面加载时,文本区域自动获得焦点。cols值number描述:规定文本区域内可见的列数。disabled值disabled描述:规定禁用文本区域。form(NEW)值form_id描述:定义文本区域所属的一个或多个表单。maxlength(NEW)值number描述:规定文本区域允许的最大字符数。name值text描述:规定文本区域的名称。placeholder(NEW)值text描述:规定一个简短的提示,描述文本区域期望的输入值。readonly值readonly描述:规定文本区域为只读。required(NEW)值required描述:规定文本区域是必需的/必填的。rows值number描述:规定文本区域内可见的行数。wrap(NEW)值(hard、soft)描述:规定当提交表单时,文本区域中的文本应该怎样换行。

 

83.5、<button> 标签定义一个按钮。在 <button> 元素内部,你可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。提示:请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。注释:如果在 HTML 表单中使用 <button> 元素,不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。HTML5 中的新属性:autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。

 

83.5.1、<button>属性:name(NEW)值name描述:规定按钮的名称。type值(button、reset、submit )描述:规定按钮的类型。value值text描述:规定按钮的初始值。可由脚本进行修改。disabled值disabled描述:规定应该禁用该按钮。autofocus(NEW)值autofocus描述:规定当页面加载时按钮应当自动地获得焦点。form(NEW)值form_id描述:规定按钮属于一个或多个表单。formaction(NEW)值URL描述:规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。formenctype(NEW)值(application/x-www-form-urlencoded、multipart/form-data、text/plain)描述:规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。formmethod(NEW)值(get、post)描述:规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。formnovalidate(NEW)值formnovalidate描述:如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与type="submit" 配合使用。formtarget(NEW)值(_blank、_self、_parent、_top

、framename)描述:规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。

 

83.6、<select> 元素用来创建下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项。提示:<select> 元素是一种表单控件,可用于在表单中接受用户输入。HTML5 增加了一些新的属性。autofocus(NEW)值autofocus描述:规定在页面加载时下拉列表自动获得焦点。disabled值disabled描述:当该属性为 true 时,会禁用下拉列表。form(NEW)值form_id描述:定义 select 字段所属的一个或多个表单。multiple值multiple描述:当该属性为 true 时,可选择多个选项。name值name描述:定义下拉列表的名称。required(NEW)值required描述:规定用户在提交表单前必须选择一个下拉列表中的选项。size值number描述:规定下拉列表中可见选项的数目。

 

83.7、<optgroup> 标签经常用于把相关的选项组合在一起。如果你有很多的选项组合, 你可以使用<optgroup> 标签能够很简单的将相关选项组合在一起。属性:disabled值disabled描述:规定禁用该选项组。label值text描述:为选项组规定描述。

 

83.8、<option> 标签定义下拉列表中的一个选项(一个条目)。<option> 标签中的内容作为 <select> 或者<datalist> 一个元素使用。注释:<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value 属性,此属性会指示出被送往服务器的内容。注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。提示:如果列表选项很多,可以使用 <optgroup> 标签对相关选项进行组合。<option> 属性:disabled值disabled描述:规定此选项应在首次加载时被禁用。label值text描述:定义当使用 <optgroup> 时所使用的标注。selected值selected描述:规定选项(在首次显示在列表中时)表现为选中状态。value值text描述:定义送往服务器的选项值。

 

84、表单使用表单标签 <form>来设置:<form> .input elements(输入元素). </form>。HTML 表单 - 输入元素。多数情况下被用到的表单标签是输入标签<input>。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:①:文本域通过<input type="text">标签来定义,当用户要在表单中键入字母、数字等内容时,就会用到文本域。注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。②:密码字段通过标签<input type="password">来定义。注意:密码字段字符不会明文显示,而是以星号或圆点替代。③:单选按钮通过<input type="radio">标签来定义。当用户点击一个单选按钮时,就会检查,和所有其他按钮成为不平等的名称。④:复选框通过<input type="checkbox"> 标签来定义。用户需要从若干给定的选择中选取一个或若干选项。⑤:提交按钮通过<input type="submit"> 标签来定义。⑥:下拉列表框通过<form>标签下的<select>标签来定义。<option value="bmw">BMW(宝马)</option>标签则是定义下拉列表框中的内容。

 

85、其他:①:预选下拉列表框和下拉列表框格式是一样的。只需在作为预选值的标签中添加selected(选择):<option value="audi" selected>Audi(奥迪)</option>。②:多行文本输入控件使用标签<textarea rows="5" cols="30">定义的。其中rows为行。cols为列。可用于设定文本框的大小。也可以不设定,这不影响文本框输入文本的多少,只是会影响文本框显示的大小。

 

86、<fieldset>标签定义了一组相关的表单元素,并使用外框包含起来。<legend>标签定义了<fieldset>元素的标题。输入框的大小在<input>标签内用size定义:<input type="text" size="20">。输入框中显示的文字是这样定义的:<input type="text" name="FirstName" value="请输入用户名">。提交按钮中显示的文字是这样定义的:<input type="submit" value="提交/确认/注册"。

 

86.1、<fieldset> 标签可以将表单内的相关元素分组。<fieldset> 标签会在相关表单元素周围绘制边框。提示:<legend> 标签为 <fieldset> 元素定义标题。HTML5 中新增了一些 <fieldset> 的新属性:disabled、form、name,HTML 4.01 中不支持这些属性。属性:disabled(NEW)disabled描述:规定该组中的相关表单元素应该被禁用。form(NEW)值form_id描述:规定 fieldset 所属的一个或多个表单。name(New)值text描述:规定 fieldset 的名称。

 

86.2、<legend> 元素为 <fieldset>元素定义标题。在 HTML 4.01中 "align" 属性已被废弃, HTML5不支持该属性。不建议使用。 请使用 CSS 来设置 <legend> 元素的对齐方式。

 

87、<form>标签的属性 action,必需的 action 属性规定当提交表单时,向何处发送表单数据。其值为PHP服务器地址。语法<form action="value">。值:URL。向何处发送表单数据。可能的值:绝对 URL - 指向其他站点(比如src="www.example.com/example.html"),相对 URL - 指向站点内的文件(比如src="example.html")。

 

88、复选框中默认选择一个选项(预选项)是这样定义的:<input type="checkbox" name="vehicle" value="Rocket" checked="checked">。 checked="checked"是预选,复选框中的预选项是可以取消的。单选按钮中默认选择一个选项(预选项)和复选框的预选项格式是一样的,不同的是单选按钮中的预选项不可以取消掉,智能换一个选择。

 

89、表单中发送电子邮件,就是选择表单标签<form>的属性 action的值,<form action="mailto:someone@example.com" method="post" enctype="text/plain">。method属性是方法,method的值有post和get,post是一种隐秘的传送方式,传送数据无限制,安全级别高。get是直接传送方式,传送数据有限制,安全级别不高。enctype属性是内容类型,enctype属性text/plain是文本/普通。

 

83.9、<keygen> (NEW)标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。属性:autofocus值autofocus描述:使 <keygen> 字段在页面加载时获得焦点。challenge值challenge描述:如果使用,则将 keygen 的值设置为在提交时询问。disabled值disabled描述:禁用 <keygen> 元素字段。form值form_id描述:定义该 <keygen> 字段所属的一个或多个表单。keytype值(rsa、dsa、ec)描述:定义密钥的安全算法。name值name描述:定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

90.1、<output> (NEW)标签作为计算结果输出显示(比如执行脚本的输出)。属性:for值element_id描述:描述计算中使用的元素与计算结果之间的关系。form值form_id描述:定义输入字段所属的一个或多个表单。name值name描述:定义对象的唯一名称(表单提交时使用)。

 

90、HTML 表单标签:New表示HTML5新标签。<form> 标签定义供用户输入的表单。<input> 标签定义输入域。<textarea> 标签定义文本域 (一个多行的输入控件)。

<label> 标签定义了 <input> 元素的标签,一般为输入标题。<fieldset> 标签定义了一组相关的表单元素,并使用外框包含起来。<legend> 标签定义了 <fieldset> 元素的标题。<select> 标签定义了下拉选项列表。<optgroup> 标签定义选项组。<option> 标签定义下拉列表中的选项。<button> 标签定义一个点击按钮。
<datalist> New 标签指定一个预先定义的输入控件选项列表。<keygen> New 标签定义了表单的密钥对生成器字段。<output> New 标签定义一个计算结果。

 

  (8)、列表标签

76、HTML 列表,列表形式在网站设计中占有比较大的比重,显示非常整齐直观,便于理解。HTML的列表元素是一个有列表标签封装的结构,包含的列表项由(li)标签组成。

 

76.1、<li> 标签定义列表项目。<li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。"type" "value" 属性 在 HTML 4.01 已被废弃。HTML5 不支持该属性。提示: 请使用 CSS 来定义列表和列表项目的类型。

 

77.1、<ul> 标签定义无序列表。将 <ul> 标签与 <li> 标签一起使用,创建无序列表。在 HTML 4.01 中,"compact" 和 "type" 属性 已废弃。HTML5 则不支持着两个属性。提示:使用 CSS 为列表定义样式。

 

78.1、<ol> 标签定义了一个有序列表。 列表排序以数字来显示。使用<li> 标签来定义列表选项。提示:使用 CSS 来定义列表样式。在 HTML 4.01 中"start" 和 "type" "compact" 属性已经废弃,HTML5不支持该属性。"reversed" 属性是 HTML5 中的新属性。reversed值reversed描述:指定列表倒序(9,8,7...)。

 

78、有序列表是编号列表,用于对网页中的某些内容进行编号排列,以便使读者清晰的了解每行的顺序。同样,有序列表也是一列项目,列表项目默认使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。<ol>标签可用CSS样式进行定义:type 和 start ,type 用于指定编号的样式,如1.A.a.I.i。start 用于指定起始编号,如不定义start,默认使用阿拉伯数字。

 

81、将一个列表嵌入到另一个列表中,作为另一个列表的一部分,叫做嵌套列表,无论是有序列表的嵌套还是无序列表的嵌套,浏览器都可以自动的分行排列。HTML嵌套列表使用的标签:<ol> <ul> <li>。

 

82、有时候无序列表不需要 <li>标签 前边默认的原点,这时候需要清除,则用CSS样式定义:(list-style:none)。

 

76.2、<menu> 标签定义了一个命令列表或菜单。<menu> 标签通常用于文本菜单,工具条和命令列表选项。HTML 4.01的 <menu> 元素已废弃。HTML5 中 <menu> 元素已被重新定义。提示: 使用 CSS 来定义菜单列表样式。新属性:label值text描述:描述菜单项的标记。type值(context、toolbar、list)描述:描述显示菜单类型. 默认为 "list"。

 

76.3、<command> (NEW)定义命令按钮,比如单选按钮、复选框或按钮。<command> 标签可以定义用户可能调用的命令(比如单选按钮、复选框或按钮)。当使用 <menu> 元素时,command 元素将作为菜单或者工具栏的一部分显示出来。但是,用 command 规定键盘快捷键时,command元素能被放置在页面的任何位置,但元素不可见。属性:label值text描述:必需。规定 command 的名字,对用户可见。checked值checked描述:规定当页面加载时,command 是否被选中。仅用于 radio 或 checkbox 类型。disabled值disabled描述:规定 command 是否可用。icon值URL描述:规定作为 command 来显示的图像的 URL。radiogroup值groupname描述:规定可进行切换且将被切换的 command 所属的组名。仅在类型为 radio 时使用。type值(checkbox、command、radio)描述:定义 command 的类型。默认是 "command"。
77、无序列表是项目列表,列表的内容可以按任意顺序排列,列表项目不是连续编号而是一个特定的符号(圆点)默认来标记。无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 <ul>标签。<li>标签是列表项。<ul>标签可用CSS样式定义项目编号的显示。(disc)默认的实体圆点,(circle)空心圆圈。(square)实心方块。

 

79、自定义列表用于对清单条目进行简短的说明,一个列表可以对应一个或多个说明项,因每个列表项有一个缩进的说明项,与字典的编排有相同的格式,所以有称为“字典列表”。自定义列表不仅仅是一列项目,而是项目及其注释的组合。首标签<dl> 和 尾标签</dl> 之间为列表内容,列表项目标签用<dt>,列表项目的说明用 标签<dd>,通常<dt> 和 <dd> 是一起出现的。

 

79.1、<dl> 标签定义一个描述列表。<dl> 标签与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用。在 HTML 4.01 中,<dl> 标签定义一个定义列表。在 HTML5 中,<dl> 标签定义一个描述列表。

 

79.2、<dt> 标签定义一个描述列表的项目/名字。<dt> 标签与 <dl> (定义一个描述列表)和 <dd> (描述每一个项目/名字)一起使用。在 HTML 4.01 中,<dt> 标签定义一个定义列表的条目。在 HTML5 中,<dt> 标签定义一个描述列表的项目/名字。

 

79.3、<dd> 标签被用来对一个描述列表中的项目/名字进行描述。<dd> 标签与 <dl> (定义一个描述列表)和 <dt> (定义项目/名字)一起使用。在 <dd> 标签内,您能放置段落、换行、图片、链接、列表等等。在 HTML 4.01 中,<dd> 标签被用来描述一个定义列表中的条目。在 HTML5 中,<dd> 标签被用来描述一个描述列表的项目/名字。

 

80、提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 

 

  (9)、表格标签

X.69、表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格:<table border="1"><tr><td>100吨</td></tr></table>。

 

69.1、一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 <td> 元素。<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。在 HTML5 中,仅支持 "border" 属性,并且只允许使用值 "1" 或 ""。

 

74、<table>的其一属性可以给表格内每个单元格设置边距。<table border="1" cellpadding="10">,使用 Cell padding 来创建单元格内容与其边框之间的空白。
<table>的其二属性可以给表格内每个单元格设置间距。<table border="1" cellspacing="10">,使用 Cell spacing 增加单元格之间的距离。

 

71、<table border="0">没有边框的表格,就是不设置(border)属性。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。水平显示的表头,是把所有表头<th>标签添加到一个表格<tr>标签内。竖直显示的表头,就是把每个表头<th>标签添加到每个表格<tr>标签内。

 

72、<caption> 标签定义表格的标题。<caption> 标签必须直接放置到 <table> 标签之后。你只能对每个表格定义一个标题。提示:通常这个标题会被居中于表格之上。然而,CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

 

75.3、<thead> 标签用于组合 HTML 表格的表头内容。<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。
通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。<thead> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 元素之后,<tbody>、 <tfoot> 和 <tr> 元素之前。注释:<thead> 元素内部必须包含一个或者多个 <tr> 标签。提示:<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。在 HTML 5 中,不再支持 HTML 4.01 中 <thead> 标签的任何属性。

 

75.4、<tbody> 标签用于组合 HTML 表格的主体内容。<tbody> 元素应该与 <thead> and <tfoot> 元素结合起来使用,用来规定表格的各个部分(主体、表头、页脚)。
通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。<tbody> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后。注释:<tbody> 元素内部必须包含一个或者多个 <tr> 标签。提示:<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。在 HTML 5 中,不再支持 HTML 4.01 中 <tbody> 标签的任何属性。

 

75.5、<tfoot> 标签用于组合 HTML 表格的页脚内容。<tfoot> 元素应该与 <thead> 和 <tbody> 元素结合起来使用,用来规定表格的各个部分(页脚、表头、主体)。通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。<tfoot> 标签必须被用在以下情境中:作为 <table> 元素的子元素,出现在 <caption>、<colgroup> 和 <thead> 元素之后,<tbody> 和 <tr> 元素之前。注释:<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。提示:<thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。在 HTML 5 中,不再支持 HTML 4.01 中 <tfoot> 标签的任何属性。

 

70、表格的表头单元格使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。<tr><th>表头 1</th><th>表头 2</th></tr>,底下在写表格中单元格内容。

 

70.1、<tr> 标签定义 HTML 表格中的行。一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。在 HTML 5 中,不支持 <tr> 标签在 HTML 4.01 中的任何属性。

 

70.2、<th> 标签定义 HTML 表格中的表头单元格。<td> 标签定义 HTML 表格中的标准单元格。HTML 表格有两种单元格类型:表头单元格 - 包含头部信息(由 <th> 元素创建)。标准单元格 - 包含数据(由 <td> 元素创建)。<th> 元素中的文本通常呈现为粗体并且居中。<td> 元素中的文本通常是普通的左对齐文本。提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性!HTML 5 中不再支持 HTML 4.01 中的某些属性。<th><td> 属性:colspan值number描述:规定表头单元格可横跨的列数。rowspan值number描述:规定表头单元格可横跨的行数。headers值header_id描述:规定与表头单元格相关联的一个或多个表头单元格。scope值(col、colgroup、row、rowgroup)描述:规定表头单元格是否是行、列、行组或列组的头部。<th> <td> 标签支持 HTML 的全局属性。<th> <td> 标签支持所有 HTML 的事件属性。可用CSS样式定义vertical-align属性(top、middle、bottom、baseline)规定表头单元格内容的垂直排列方式。vertical-align:top 顶部对齐。vertical-align:middle 中间对齐。vertical-align:bottom 底部对齐。vertical-align:baseline 基线对齐。(关于基线对齐,后文有详细解释)。

 

73、<th colspan="2">定义了单元格跨两列。<th rowspan="2">定义了单元格跨两行。这两种属性的值均为阿拉伯数字,定义为多少,就跨多少列/行。

 

75.1、<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。注释:只能在 <table> 元素之内,在任何一个 <caption> 元素之后,在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。提示:如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签。HTML5 中不再支持 HTML 4.01 中的大部分属性。属性:span值number描述:规定列组应该横跨的列数。

 

75.2、<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。通过使用 <col> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。在 HTML 中,<col> 标签没有结束标签。在 XHTML 中,<col> 标签必须被正确的关闭。HTML5 中不再支持 HTML 4.01 中的大部分属性。属性:span值number描述:规定 <col> 元素应该横跨的列数。

 

75、HTML 表格标签10个:<table> 标签定义一个表格。<th> 标签定义表格中的表头单元格。<tr> 标签定义表格中的行。<td> 标签定义表格中的单元。<caption> 标签定义表格标题。<colgroup> 标签定义表格中列的组。<col> 标签定义用于表格列的属性。<thead> 标签定义表格的页眉(表头内容)。<tbody> 标签定义表格的主体(内容)。<tfoot> 标签定义表格的页脚(表注内容,脚注)。

 

  (10)、程序标签

 

116、<embed> (NEW)标签定义了一个容器,用来嵌入外部应用或者互动程序(插件)。属性:width、height值px描述:规定嵌入内容的宽度/高度。src值URL描述:规定被嵌入内容的 URL。type值MIME_type描述:(规定嵌入内容的 MIME 类型。
注:MIME = Multipurpose Internet Mail Extensions。)。

 

 

 

121、<object> 标签定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。<object> 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。浏览器的对象支持有赖于对象类型。不幸的是,主流浏览器都使用不同的代码来加载相同的对象类型而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。一些 HTML 4.01 属性在 HTML5 中不被支持。"form" 是 HTML5 定义的新属性。在 HTML5 中,objects 可以在form表单中提交。在 HTML5 中,objects 不再出现在 <head> 元素区域内。属性:data值URL描述:规定对象使用的资源的 URL。width、height值px描述:规定对象的宽度/高度。form(NEW)值form_id描述:规定对象所属的一个或多个表单。name值name描述:为对象规定名称。type值MIME_type描述:规定 data 属性中规定的数据的 MIME 类型。usemap值#mapname描述:规定与对象一同使用的客户端图像映射的名称。

 

122、<param> 标签定义对象的参数。<param>元素允许为插入文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 标签提供参数。name 属性定义参数的名称(用在脚本中)。value属性描述参数值。在 HTML 中,<param> 标签没有结束标签。

 

 

  (11)、框架标签

91、HTML 框架。通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。HTML 框架通过 <iframe> 标签来实现。定义一个内联的 iframe (内联框架/内嵌框架)。语法:<iframe src="URL"></iframe>。该URL指向不同的网页。

 

91.1、<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。提示:你可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。提示:使用 CSS 为 <iframe> (包括滚动条)定义样式。HTML5 新增了一些新的属性,同时去掉了 HTML 4.01 中的一些属性。在 XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。属性:width、height值px描述:规定 <iframe> 的宽度/高度。name/id值name描述:规定 <iframe> 的名称。src值URL描述:规定在 <iframe> 中显示的文档的 URL。sandbox(NEW)值(""、allow-forms、allow-same-origin、allow-scripts
allow-top-navigation)描述:对 <iframe> 的内容定义一系列额外的限制。seamless(NEW)值seamless描述:规定 <iframe> 看起来像是父文档中的一部分。
srcdoc(NEW)值HTML_code描述:规定页面中的 HTML 内容显示在 <iframe> 中。

 

92、<iframe> 设置高度与宽度。height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。实例:<iframe src="URL" width="200" height="200"></iframe>。

 

93、<iframe>移除边框。frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:<iframe src="UEL" frameborder="0"></iframe>。HTML5 不支持。可用CSS样式定义。

 

94、使用<iframe>来显示目录链接页面。<iframe>可以显示一个目标链接的页面。目标链接的属性必须使用iframe的属性,如下实例:<iframe src="URL" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a">百度首页</a></p>。

 

3、HTML 布局

X.101、HTML 布局。网页布局对改善网站的外观非常重要。请慎重设计你的网页布局。

 

102、大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

 

103、HTML 布局 - 使用<div> 元素。div 元素是用于分组 HTML 元素的块级元素。

 

104、HTML 布局 - 有用的提示。使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

 

105、HTML 布局标签。<div> 标签定义文档区块,块级(block-level)。<span> 标签定义 span,用来组合文档中的行内元素。

 

4、HTML 其他知识

125、HTML 颜色。HTML 颜色由红色、绿色、蓝色混合而成。

 

126、HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。一种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

 

127、目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。

 

128、Color Values(颜色值)。颜色由红(R)、绿(G)、蓝(B)组成。颜色值由十六进制来表示红、绿、蓝(RGB)。颜色值:每个颜色的最低值为0(十六进制为00),最高值为255(十六进制为FF)。十六进制值的写法为#号后跟三个或六个十六进制字符。三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。 关于颜色值的知识,请参阅 HTML 颜色值手册。

 

129、HTML 字符实体。HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

 

130、在 HTML 中,某些字符是预留的。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。如需显示小于号,我们必须这样写:&lt; 或 &#60; 或 &#060。使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

 

131、HTML 中的常用字符实体是不间断空格(&nbsp;)。浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,需要使用 &nbsp; 字符实体。需要注意:实体名称对大小写敏感!请参阅:HTML 实体参考手册。

 

132、HTML 统一资源定位器(Uniform Resource Locators)。URL是一个网页地址。URL可以由字母组成,如"baidu.com",或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。

 

133、URL - 统一资源定位器。Web浏览器通过URL从Web服务器请求页面。当你点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。一个网页地址实例: http://www.w3cschool.cc/html/html-tutorial.html 语法规则:scheme://host.domain:port/path/filename。说明:scheme(方案) - 定义因特网服务的类型。最常见的类型是 http。host(主机) - 定义域主机(http 的默认主机是 www)。domain (域)- 定义因特网域名,比如baidu.com。:port(端口) - 定义主机上的端口号(http 的默认端口号是 80)。path (路径)- 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。filename(文件名) - 定义文档/资源的名称。

 

134、常见的 URL Schemes(方案)。http,超文本传输协议,用于:以 http:// 开头的普通网页。不加密。https,安全超文本传输协议,用于:安全网页。解密所有信息交换。ftp,文件传输协议。用于将文件下载或上传至网站。file,用于:你计算机上的文件。

 

135、URL 只能使用 ASCII 字符集。来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。请参阅 URL 编码参考手册。

 

136、HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。HTML 的关键是标签,其作用是指示将出现的内容。

 

5、XHTML

137、HTML - XHTML。XHTML 是以 XML 格式编写的 HTML。

 

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

 

139、为什么使用 XHTML?因特网上的很多页面包含了"糟糕"的 HTML。如果在浏览器中查看,下面的 HTML 代码运行起来非常正常(即使它并未遵守 HTML 规则):<html>
<head><title>这是糟糕的HTML</title><body><h1>糟糕的HTML<p>这是糟糕的HTML
</body>。XML 是一种必须正确标记且格式良好的标记语言。今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释"糟糕"的标记语言的资源和能力。所以 - 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。

 

140、与 HTML 相比最重要的区别:文档结构:XHTML DOCTYPE 是强制性的。<html> 中的 XML namespace 属性是强制性的。<html>、<head>、<title> 以及 <body> 也是强制性的。元素语法:XHTML 元素必须正确嵌套。XHTML 元素必须始终关闭。XHTML 元素必须小写。XHTML 文档必须有一个根元素。属性语法:XHTML 属性必须使用小写。XHTML 属性值必须用引号包围。XHTML 属性最小化也是禁止的。

 

HTML 基础

标签:

原文地址:http://www.cnblogs.com/Mtime/p/5173682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!