什么是 HTML？

~~不是how to make love~~ 是HYper Text Markup Language 超文本标记语言

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=”value”。属性总是在 HTML 元素的开始标签中规定。

HTML 标题

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。实例
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

HTML 样式

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

不赞成使用的标签和属性

标签

<center> 定义居中的内容。
~~<font> ~~和 ~~<basefont>~~ 定义 HTML 字体。
~~<s>~~ 和 ~~<strike>~~ 定义删除线文本
~~<u>~~ 定义下划线文本

style属性

~~align~~ 定义文本的对齐方式 ,使用text-align
~~bgcolor~~ 定义背景颜色,使用background-color
~~color~~ 定义文本颜色

对于以上这些标签和属性：请使用样式代替！

HTML 文本格式化

文本格式化标签

<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式（style）代替。

预格式文本

使用 pre 标签对空行和空格进行控制

“计算机输出”标签

<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

大白话:就是使用外部.css文件来定义样式

<head>
<link rel="stylesheet"     type="text/css"            href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

大白话: 使用在head部分先定义好内部的style标签 <head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

大白话: 就是使用style属性

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

优先级

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

HTML 链接

<a> 定义锚。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>,设置target会在新的页面打开显示
HTML 链接 - name 属性
<a name="label">锚（显示在页面上的文本）</a>

==提示==：锚的名称可以是任何你喜欢的名字。

==提示==：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

HTML图像

-您也可以把图像作为链接来使用：

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a> - <map> 可以吧图片的一个区域作为一个链接

HTML表格

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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 列表

<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。

HTML `<div>` 和 `<span>`

<div> 定义文档中的分区或节（division/section）。
<span> 定义 span，用来组合文档中的行内元素。
HTML 类

实例

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

HTML 布局

<!DOCTYPE html>
<html>

<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
</div>

</body>
</html>

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局：

HTML 响应式 Web 设计

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

HTML 框架

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

导航框架

HTML Iframe

- <iframe> 定义内联的子窗口（框架）

HTML 背景

已经不用,可以使用CSS

HTML 脚本

<script> 标签用于定义客户端脚本，比如 JavaScript。

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

  <script type="text/javascript">
  document.write("Hello World!")
  </script>
  <noscript>Your browser does not support            JavaScript!</noscript>

HTML 头部元素

HTML <head> 元素 <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。-
HTML <title> 元素

<title> 标签定义文档的标题。 title 元素在所有 HTML/XHTML 文档中都是必需的。 title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。

HTML <style> 元素

<style> 标签用于为 HTML 文档定义样式信息。

HTML <meta> 元素

元数据（metadata）是关于数据的信息。 <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 <meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

HTML 字符实体

文档
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
’ 撇号 &apos; (IE不支持) &#39;
￠分（cent） &cent; &#162;
£ 镑（pound） &pound; &#163;
¥ 元（yen） &yen; &#165;
€ 欧元（euro） &euro; &#8364;
§ 小节 &sect; &#167;
© 版权（copyright） &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

HTML 统一资源定位器(URL - Uniform Resource Locator)

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称-

HTML 颜色名

HTML <!DOCTYPE>

HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE 参考手册

HTML 表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

HTML 表单用于收集用户输入。

<input> 元素

<form> First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname"> ` </form> `
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）

** Action 属性**

action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。在上面的例子中，指定了某个服务器脚本来处理被提交表单：
```
  <form action="action_page.php">
```
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML 表单元素

<input> 元素

<select> 元素（下拉列表）

  <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
  </select>

<option> 元素定义待选择的选项

  <option value="fiat" selected>Fiat</option>

<textarea> 元素(文本域)

      <textarea name="message" rows="10" cols="30">   The cat was playing in the garden.

</textarea>

<button> 元素

  <button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 表单元素

HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>

HTML 输入类型

<input type="text"> 定义供文本输入的单行输入字段

<input type="password"> 定义密码字段：

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

<input type="radio"> 定义单选按钮。

<input type="checkbox"> 定义复选框。

<input type="button> 定义按钮。

HTML5 输入类型 HTML5 增加了多个新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持，限制可应用到输入字段

disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

HTML Input 属性

value 属性:value 属性规定输入字段的初始值

readonly 属性: readonly 属性规定输入字段为只读（不能修改)

disabled 属性 :disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交

size 属性 : size 属性规定输入字段的尺寸（以字符计）

maxlength 属性 :maxlength 属性规定输入字段允许的最大长度

HTML5 属性

autocomplete :autocomplete 属性规定表单或输入字段是否应该自动完成。

  <form action="action_page.php" autocomplete="on">
     First name:<input type="text" name="fname"><br>
     Last name: <input type="text" name="lname"><br>
     E-mail: <input type="email" name="email" autocomplete="off"><br>
     <input type="submit">
  </form> 

autofocus: 如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。 Opera Safari Chrome Firefox Internet Explorer
form :form 属性规定 <input> 元素所属的一个或多个表单。提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表。
```
` <form action="action_page.php" id="form1">`

` First name: <input type="text" name="fname"><br>`

` <input type="submit" value="Submit">`
```
</form>Last name: <input type="text" name="lname" form="form1">
formaction :

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type=”submit” 以及 type=”image”。

Opera Safari Chrome Firefox Internet Explorer
formenctype :同上
formmethod : 同上
formnovalidate :同上
formtarget :同上
height 和 width :height 和 width 属性仅用于 <input type="image">。
list :list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项
min 和 max :min 和 max 属性规定 <input> 元素的最小值和最大值。
multiple: multiple 属性是布尔属性 ,如果设置，则规定允许用户在 <input> 元素中输入一个以上的值
pattern (regexp) :正在表达式
placeholder

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中
required :

required 属性是布尔属性。

如果设置，则规定在提交表单之前必须填写输入字段。

step

step 属性规定 <input> 元素的合法数字间隔。

示例：如果 step=”3”，则合法数字应该是 -3、0、3、6、等等。

提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。

step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

Opera Safari Chrome Firefox Internet Explorer

novalidate 属性属于 <form> 属性。如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。 Opera Safari Chrome Firefox Internet Explorer

Html

什么是 HTML？

HTML 标签

标签

HTML 属性

HTML 标题

HTML 样式

HTML 文本格式化

HTML CSS

HTML 链接

HTML图像

HTML表格

HTML 列表

HTML `<div>` 和 `<span>`

HTML 布局

使用 HTML5 的网站布局

HTML 响应式 Web 设计

HTML 框架

HTML Iframe

HTML 背景

HTML 脚本

HTML 头部元素

HTML 字符实体

HTML 统一资源定位器(URL - Uniform Resource Locator)

HTML 颜色名

HTML <!DOCTYPE>

HTML 表单

HTML 表单元素

HTML 输入类型

HTML Input 属性

FEATURED TAGS

FRIENDS

什么是 HTML？

HTML 标签

标签

HTML 属性

HTML 标题

HTML 样式

HTML CSS

HTML 链接

HTML <div> 和 <span>

HTML 布局

使用 HTML5 的网站布局

FRIENDS

HTML `<div>` 和 `<span>`