本文最后更新于18 天前,其中的信息可能已经过时,如有错误请发送邮件到qiqin-chang@qq.com
基础教程:
## HTML 标准格式:
文档结构:
XHTML DOCTYPE 是强制性的
html 中的 XML namespace 属性是强制性的
html、head、title 以及 body 也是强制性的
元素语法:
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法:
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> ...... </body> </html>
HTML 声明:
<!--HTML5声明--> <!DOCTYPE html> <!--HTML4.01声明--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!--XHTML1.0声明--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 注释:
<!-- This is a comment -->
HTML 基本元素:
标签 描述 <html>定义整个 HTML 文档 <head>定义HTML文档的头部 body>定义HTML文档的主体 <h1>–<h6>定义HTML标题 <p>定义HTML段落 <br>定义换行 <hr>定义水平线 <a>定义HTML 链接 <img>定义HTML 图像
HTML 基本属性:
style属性:
HTML 样式实例 – 背景颜色:
<p style="background-color:green">This is a paragraph.</p>
HTML 样式实例 – 字体、颜色和尺寸:
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
HTML 样式实例 – 文本对齐:
<h1 style="text-align:center">This is a heading</h1>
id属性:
属性 描述 id 为HTML 元素指定唯一的 id class 同一个类名可以由多个 HTML 元素使用
HTML 超链接:
链接标签:
连接属性:
属性 描述 target 定义被链接的文档在何处显示 name name 属性规定锚(anchor)的名称
锚点跳转:
<!--跳转连接--> <a href="url">Link text</a> <!--定义锚点--> <a name="tips">基本的注意事项 - 有用的提示</a> <!--指向锚点--> <a href="#tips">有用的提示</a> <!--指向其它页面锚点--> <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
HTML 图像:
img 标签:
属性 描述 src 源属性(源属性的值是图像的 URL 地址) alt 替换文本
<img src="boat.gif" alt="Big Boat">
HTML 块:
标签 描述 <div> 定义文档中的分区或节(division/section)。 span 定义 span,用来组合文档中的行内元素。
HTML 列表:
无序列表:
<ul> <li>Coffee</li> <li>Milk</li> </ul>
有序列表:
<ol> <li>Coffee</li> <li>Milk</li> </ol>
定义列表:
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
列表标签:
标签 描述 ol 定义有序列表。 ul 定义无序列表。 li 定义列表项。 dl 定义定义列表。 dt 定义定义项目。 dd 定义定义的描述。
HTML 表格:
表格元素:
标签 描述 table 定义表格 caption 定义表格标题。 th 定义表格的表头。 tr 定义表格的行。 td 定义表格单元。 thead 定义表格的页眉。 tbody 定义表格的主体。 tfoot 定义表格的页脚。 col 定义用于表格列的属性。 colgroup 定义表格列的组。
表格属性:
<table border="1"> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
HTML 表单:
HTML 表单属性:
属性 描述 action 规定提交表单时将表单数据发送到何处。(URL)(提交页面) target 规定提交表单后在何处显示接收到的响应。(默认:_self) method 规定发送表单数据时要使用的 HTTP 方法。(默认get方法)method=”post” autocomplete 规定表单是否应打开自动完成(填写)功能。(默认:开启)开启:autocomplete=”on” novalidate 规定提交时不应验证表单。novalidate accept-charset 规定用于表单提交的字符编码。 enctype 规定将表单数据提交到服务器时应如何编码(默认:url-encoded;仅供 method=”post”)。 name 规定表单名称。(对于 DOM 使用:document.forms.name) rel 规定链接资源和当前文档之间的关系。
Target 属性:
值 描述 _blank 响应显示在新窗口或选项卡中。 _self 响应显示在当前窗口中。 _parent 响应显示在父框架中。 _top 响应显示在窗口的整个 body 中。 framename 响应显示在命名的 iframe 中。
HTML 表单元素:
元素 描述 input 根据不同的type属性,可以变化为多种形态 select 定义下拉列表 option 定义待选择的选项 textarea 定义多行输入字段 button 定义可点击的按钮 datalist 定义预定义选项的下拉列表(html5)
HTML 输入类型:
input 元素的输入类型:
类型 描述 text 定义常规文本输入 password 定义密码字段 submit 定义提交按钮 radio 定义单选按钮输入 添加checked属性为默认选择 checkbox 定义复选框 button 定义按钮
HTML5 输入类型:
类型 描述 number 用于应该包含数字值的输入字段 date 用于应该包含日期的输入字段 color 用于应该包含颜色的输入字段 range 用于应该包含一定范围内的值的输入字段 month 允许用户选择月份和年份 week 允许用户选择周和年 datetime 允许用户选择日期和时间(有时区) datetime-local 允许用户选择日期和时间(无时区) email 用于应该包含电子邮件地址的输入字段 search 用于搜索字段(搜索字段的表现类似常规文本字段) tel 用于应该包含电话号码的输入字段 url 用于应该包含 URL 地址的输入字段
HTML 输入属性:
属性 描述 value 属性规定输入字段的初始值 readonly 属性规定输入字段为只读(不能修改) disabled 属性规定输入字段是禁用的 size 属性规定输入字段的尺寸(以字符计) maxlength 属性规定输入字段允许的最大长度
HTML5 属性:
属性 描述 autocomplete 自动完成表单。当自动完成开启,浏览器会基于用户之前的输入值自动填写值 novalidate 取消数据验证 autofocus 自动获得焦点 form 设置所属的一个或多个表单 formaction 设置提交时处理该输入控件的文件的 URL formenctype 设置提交时的编码格式(仅用于POST请求) formmethod 设置向 action URL 的请求方式 formnovalidate(布尔) 设置提交时不在验证 formtarget 设置提交表单后在何处显示接收到的响应 height 设置input的高度 width 设置input的宽度 list list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项 min 设置输入最小值 max 设置输入最大值 multiple 允许用户提交多个值 pattern 设置正则表达式 placeholder 设置提示信息 required 设置为必填字段 step 设置数字的调整间隔
<!--form--> <form action="action_page.php" method="GET/POSt"> <input type="text" name="name"> <!----> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female <input type="submit" value="Submit"> </form> <form action="/example/html5/demo_form.asp" method="get" id="form1"> First name: <input type="text" name="fname" /><br /> <input type="submit" value="提交" /> </form> <p>下面的 "Last name" 字段位于 form 元素之外,但仍然是表单的一部分。</p> Last name: <input type="text" name="lname" form="form1" /> <!--list--> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
HTML Input 提交属性:
属性 描述 form input 的 form 属性规定 input 元素所属的表单 formaction input 的 formaction 属性规定当提交表单时,对输入(数据)进行处理的文件的 URL formenctype input 的 formenctype 属性指定提交时应如何编码表单数据(仅适用于 method=”post” 的表单) formmethod input 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法 formtarget input 的 formtarget 属性指定一个名称或关键字,该名称或关键字规定在提交表单后在何处显示收到的响应 formnovalidate input 的 formnovalidate 属性规定提交时不应验证 input 元素 novalidate 如果已设置,novalidate 属性规定在提交时不应验证所有表单数据
HTML 媒体:
媒体格式:
视频格式:
格式 文件 描述 AVI .avi AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。 WMV .wmv Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。 MPEG .mpg.mpeg MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。 QuickTime .mov QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。 RealVideo .rm.ram RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。 Flash .swf.flv Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。
音频格式:
式 文件 描述 MIDI .mid.midi MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 RealAudio .rm.ram RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。 Wave .wav Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。 WMA .wma WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。 MP3 .mp3.mpga MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。
HTML 内联对象:
说明:可以插入任意对象
元素 描述 object 定义 HTML 文档中的嵌入式对象 embed 定义 HTML 文档中的嵌入式对象 (HTML5中允许插入音频)
实例:
<!-- object --> <object width="100%" height="500px" data="snippet.html"></object> <!-- embed --> <embed width="100%" height="500px" src="snippet.html">
HTML 音频:
1.使用 embed 元素:(html5)
<embed height="100" width="100" src="song.mp3" />
2.使用 object 元素:
<object height="100" width="100" data="song.mp3"></object>
3.使用 audio 元素:(html5)
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>
4.最好的 HTML 解决方法:
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
5.使用超链接:
<a href="song.mp3">Play the sound</a>
HTML 视频:
1.使用 embed 标签:(html5)
<embed src="movie.swf" height="200" width="200"/> (HTML5 中允许)
2.使用 object 标签:
<object data="movie.swf" height="200" width="200"/>
3.使用 video 标签:(html5)
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
4.最好的 HTML 解决方法:
HTML 5 + object + embed
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
5.使用超链接:
<a href="movie.swf">Play a video file</a>
HTML 框架:
内联框架:
<iframe src="URL"></iframe>
属性 描述 src URL指向隔离页面的位置 width 宽度 height 高度 frameborder 边框大小 target 链接的目标
结构框架:
<html> <frameset cols="25%,50%,25%"> <!-- cols为垂直分,rows为水平分 --> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <!-- 如果浏览器不支持则显示以下文本 --> <body>您的浏览器无法处理框架!</body> </noframes> </frameset> </html>
HTML head:
头部元素:
元素 描述 title 标签定义文档的标题 link 标签定义文档与外部资源之间的关系 meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的 base 标签为页面上的所有链接规定默认地址或默认目标 style 标签用于为 HTML 文档定义样式信息 script 标签用于定义客户端脚本,比如 JavaScript
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> <style type="text/css"> p {color:blue} </style> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> </head> <body> The content of the document...... </body> </html>
字符集:
<meta charset="UTF-8">
HTML CSS样式:
外部样式表:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表:
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
内联样式:
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
样式标签:
标签 描述 style 定义样式定义 link 定义资源引用。 div 定义文档中的节或区域(块级) span 定义文档中的行内的小块或区域。
HTML JavaScript:
标签 描述 script 定义客户端脚本。 noscript 为不支持客户端脚本的用户定义替代内容。
HTML body:
body标签属性:
背景属性:
属性 描述 bgcolor 背景颜色 background 背景图片
<body bgcolor="#000000"> <body background="clouds.gif">
其他:
HTML 文本格式:
基础文本:
标签 描述 b 定义粗体文本。 big 定义大号字。 em 定义着重文字。 i 定义斜体字。 small 定义小号字。 strong 定义加重语气。 sub 定义下标字。 sup 定义上标字。 ins 定义插入字。 del 定义删除字。
计算机输出文本:
标签 描述 code 定义计算机代码。 kbd 定义键盘码。 samp 定义计算机代码样本。 tt 定义打字机代码。 var 定义变量。 pre 定义预格式文本。
引用文本:
标签 描述 abbr 定义缩写。 acronym 定义首字母缩写。 address 定义地址。 bdo 定义文字方向。 blockquote 定义长的引用。 q 定义短的引用语。 cite 定义引用、引证。 dfn 定义一个定义项目。
HTML 文件路径:
路径 描述 <img src="picture.jpg">picture.jpg 位于与当前网页相同的文件夹 <img src="images/picture.jpg">picture.jpg 位于当前文件夹的 images 文件夹中 <img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹中 <img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹中
HTML5 语义元素:
说明:语义元素是拥有语义的元素
标签 描述 article 定义文章。 aside 定义页面内容以外的内容。 details 定义用户能够查看或隐藏的额外细节。 figcaption 定义 figure 元素的标题。 figure 规定自包含内容,比如图示、图表、照片、代码清单等。 footer 定义文档或节的页脚。 header 规定文档或节的页眉。 main 规定文档的主内容。 mark 定义重要的或强调的文本。 nav 定义导航链接。 section 定义文档中的节。 summary 定义 details 元素的可见标题。 time 定义日期/时间。
URL:
URL:统一资源定位器用于定位万维网上的文档(或其他数据)
网址格式:
scheme – 定义因特网服务的类型。最常见的类型是 http
host – 定义域主机(http 的默认主机是 www)
domain – 定义因特网域名,比如 w3school.com.cn
:port – 定义主机上的端口号(http 的默认端口号是 80)
path – 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename – 定义文档/资源的名称
Scheme 访问 用于… http 超文本传输协议 普通网页,不加密。 https 安全超文本传输协议 安全网页,加密所有信息交换。
HTML 字符实体:
说明:使用时前加&符号
显示结果 描述 实体名称 实体编号 空格 nbsp; #160; < 小于号 lt; #60; > 大于号 gt; #62; & 和号 amp; #38; “ 引号 quot; “ ‘ 撇号 ‘ (IE不支持) ‘ ¢ 分(cent) cent; ¢ £ 镑(pound) pound; £ ¥ 元(yen) yen; ¥ € 欧元(euro) euro; € § 小节 sect; § © 版权(copyright) copy; © ® 注册商标 reg; ® ™ 商标 trade; ™ × 乘号 times; × ÷ 除号 divide; ÷