HTML
本文最后更新于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 超链接:

链接标签:

标签描述
<a>定义锚

连接属性:

属性描述
target定义被链接的文档在何处显示
namename 属性规定锚(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定义表格列的组。

表格属性:

属性描述
border定义边框属性
<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的宽度
listlist 属性引用的 <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 提交属性:

属性描述
forminput 的 form 属性规定 input 元素所属的表单
formactioninput 的 formaction 属性规定当提交表单时,对输入(数据)进行处理的文件的 URL
formenctypeinput 的 formenctype 属性指定提交时应如何编码表单数据(仅适用于 method=”post” 的表单)
formmethodinput 的 formmethod 属性定义了将表单数据发送到 action URL 的 HTTP 方法
formtargetinput 的 formtarget 属性指定一个名称或关键字,该名称或关键字规定在提交表单后在何处显示收到的响应
formnovalidateinput 的 formnovalidate 属性规定提交时不应验证 input 元素
novalidate如果已设置,novalidate 属性规定在提交时不应验证所有表单数据

HTML 媒体:

媒体格式:

视频格式:

格式文件描述
AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。
WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。
MPEG.mpg.mpegMPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。
QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。
RealVideo.rm.ramRealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。
Flash.swf.flvFlash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。

音频格式:

文件描述
MIDI.mid.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio.rm.ramRealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。
Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。
WMA.wmaWMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。
MP3.mp3.mpgaMP3 文件实际上是 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用于在网页内显示网页
<iframe src="URL"></iframe>
属性描述
srcURL指向隔离页面的位置
width宽度
height高度
frameborder边框大小
target链接的目标

结构框架:

标签描述
frameset框架结构标签
<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定义了整个 HTML 文档

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;÷
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇