学习连接 : http://www.w3school.com.cn/html/html_headings.asp
这里讲的更详细,我只是总结我的学习精华
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | 元素的内容是开始标签与结束标签之间的内容 | </p> |
1、空元素在开始标签中进行关闭（以开始标签的结束而结束）。比如 <br /> ,HTML、XHTML 和 XML 都接受这种方式。(<br/>标签定义换行)
2、大多数 HTML 元素可拥有属性。
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
1、属性总是以名称/值对的形式出现，比如：name="value"。
2、属性总是在 HTML 元素的开始标签中规定。
例如:
<a href="http://www.w3school.com.cn">This is a link</a>
适用于大多数 HTML 元素的属性:
| 属性 | 描述 |
|---|---|
| class | 规定元素的类名（classname） |
| id | 规定元素的唯一 id |
| style | 规定元素的行内样式（inline style） |
| title | 规定元素的额外信息（可在工具提示中显示） |
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
1、<h1> 定义最大的标题。<h6> 定义最小的标题。
2、<hr /> 标签在 HTML 页面中创建水平线。
HTML 段落
段落是通过 <p> 标签定义的。
HTML 样式
style 属性用于改变 HTML 元素的样式。
例如:
<body style="background-color:yellow">
背景颜色 : style="background-color:yellow"
字体,颜色,大小 : style="font-family: 'Apple Chancery';color: #ff0000;font-size: 20px"
文本对齐 : style="text-align:center"
HTML 格式化
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
| 标签 | 描述 |
|---|---|
| <b> | 粗体文字 |
| <big> | 大号字体 |
| <em> | 着重文字 |
| <i> | 斜体 |
| <small> | 小号文字 |
| <strong> | 加重语气 |
| sub> | 定义下标字 |
| <sup | 定义上标字 |
| <del> | 删除文字 |
| <ins> | 下划线文字 |
HTML 引用
HTML <q> 元素定义短的引用。
HTML <blockquote> 元素定义被引用的节(长引用)。
引用、引用和术语定义:
| 标签 | 描述 |
|---|---|
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 长引用 |
| <q> | 短引用 |
| <abbr> | 定义缩写或首字母缩略语 |
| <dfn> | 定义项目或缩写的定义 |
| <cite> | 元素定义著作的标题 |
HTML 计算机代码
HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。<kbd>, <samp>, <code> 元素全都支持固定的字母尺寸和间距。
“计算机输出”标签:
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <samp> | 定义计算机代码样本 |
| <tt> | 定义打字机代码 |
| <var> | 定义变量 |
| <pre> | 预格式文本 |
HTML 注释
注释标签 <!-- 注释内容 -- > 用于在 HTML 插入注释。
HTML CSS
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表>。
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
内联样式
<p style="color: red; margin-left: 20px">
| 标签 | 描述 |
|---|---|
| <style> | 定义样式定义。 |
| <link> | 定义资源引用。 |
| <div> | 定义文档中的节或区域（块级）。 |
| <span> | 定义文档中的行内的小块或区域。 |
HTML 连接
连接由 <a> 标签定义。
-
target 属性: 定义被链接的文档在何处显示.
_top:跳出框架
_blank:在新窗口打开连接 -
name 属性: 规定锚（anchor）的名称.
例如:
<a name="tips">这里定义了锚,名字为tips</a>
<a href="#tips">这里使用了锚,语法"#锚的m",点击跳至该命名锚的链接</a>
HTML 图像
图像由 <img> 标签定义。
语法 : <img src="图片地址" />
- 属性:
对齐方式 : align="bottom/top/middle/right/left"
设置宽高 : width="50" height="50"
为图片显示替换文本 : alt="描述文字"
制作图片连接:usemap="" 引用 map 元素中的 "id" 或 "name" 属性
背景图片 : <body background="URL" >
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像地图。 |
| <area> | 定义图像地图中的可点击区域. |
例如
<p> 这是一只傻不拉几的二哈
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557820909599&di=fb1b26468c56455c70432d41d7b07710&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180721%2F4d0a1e90d9e2475088661142099dbf6d.jpeg"
border="5"
alt="这是一只二哈哈哈哈"
align="middle"
usemap="#erha"/>
</p>
<map name="erha" id="erha">
<area
shape="circle"
coords="100,100,30"
target="_blank"
alt="点击到指定区域"
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557820909599&di=fb1b26468c56455c70432d41d7b07710&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180721%2F4d0a1e90d9e2475088661142099dbf6d.jpeg">
</map>
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- 属性
边框 : border="1"
空单元格 : <td> </td>
单元格边距 : cellpadding="5"
单元格间距 : cellspacing="5"
背景颜色 : bgcolor="red"
背景图像 : background="URL"
排列方式 : align="left/right"
框架 : frame="box/above/hsides/vsides/below"
| 表格 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
例如:
<table border="5" cellpadding="5" cellspacing="5" bgcolor="aqua" frame="hsides">
<caption>表格的标题</caption>
<tr>
<th bgcolor="red">Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="3" align="middle">占用两列</td>
</tr>
<tr>
<td rowspan="2">两行</td>
<td>3,2</td>
<td rowspan="2">两行</td>
</tr>
<tr>
<td>4,2</td>
</tr>
</table>
HTML 列表
无序列表始于 <ul> 标签。
- 属性
类型 : type="disc/circle/square"
有序列表始于 <ol> 标签。
- 属性:
类型 : type="A/a/I/i"
自定义列表以 <dl> 标签开始。
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
例如:
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<dl>
<dt>苹果</dt>
<dd>苹果含有维生素ABCDEFG....</dd>
<dt>梨子</dt>
<dd>梨子里面水分超级多....止咳化痰..</dd>
</dl>
HTML 块
大多数 HTML 元素被定义为块级元素或内联元素。
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
HTML <span> 元素是内联元素，可用作文本的容器。
| 标签 | 描述 |
|---|---|
| <div> | 定义文档中的分区或节（division/section）。 |
| <span> | 定义 span，用来组合文档中的行内元素。 |
HTML 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
例如:
<head>
<meta charset="UTF-8">
<title>学习的标题</title>
<style>
.apples {
background-color: bisque;
color: #000;
margin: 20px;
padding: 20px;
}
span.red{ color: red}
</style>
</head>
<body>
<div class="apples">
<p>哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒</p>
</div>
<h1>我的<span class="red">天呐</span></h1>
</body>
HTML 布局
引用CSS 样式,后期专门学习.
HTML 响应式设计
RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的
动态布局,根据浏览器的缩小放大改变布局的样式.
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
- 水平框架
- 垂直框架
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
注意:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！
HTML 内联框架
HTML iframe 标签
| 标签 | 描述 |
|---|---|
| <iframe> | 定义内联的子窗口（框架） |
HTML 背景
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
- 背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
- 背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
| 标签 | 描述 |
|---|---|
| <script> | 定义客户端脚本。 |
| <noscript> | 为不支持客户端脚本的浏览器定义替代内容。 |
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
HTML 头部
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
- <title>
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题 - <base>
为页面上的所有链接规定默认地址或默认目标（target） - <link>
定义文档与外部资源之间的关系。签最常用于连接样式表. - <style>
为 HTML 文档定义样式信息 - <mate>
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>我是标题</title>
<base href="http://www.baidu.com" target="_blank"/>
<link rel="stylesheet" type="text/css" href="XXX.css"/>
<style>
body{background-color: lightseagreen}
</style>
<meta name="描述" content="描述内容"/>
</head>
<body>
<a href="http://www.XXX">来来来</a>
</body>
</html>
HTML 实体
HTML 中的预留字符必须被替换为字符实体。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML URL
英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme : // host . domain : port / path / filename
解释：
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
HTML URL 编码
URL 编码会将字符转换为可通过因特网传输的格式。
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
HTML Web 服务器
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。
HTML 颜色
颜色由红色、绿色、蓝色混合而成。
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
HTML 颜色名
这个......太多了,不说了.
提示 : 仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话，就应该使用十六进制的颜色值。
HTML 文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE html>
HTML 速查手册
...没啥用,可以忽略...
XHTML 简介
XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持
XHTML 元素
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
XHTML 属性
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的
HTML 表单
HTML 表单用于收集用户输入。
HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
- <form> 元素
<form> 元素定义 HTML 表单. - <input> 元素
type="text/radio/submit"
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
请输入地址:<br/>
<input type="text" name="address">
请选择性别:<br/>
<input type="radio" name="sex" value="boy" checked> 男
<br/>
<input type="radio" name="sex" value="girl" > 女
<br/>
请提交信息:<br/>
<input type="submit" value="提交">
- Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
<form action="action_page.php">
如果省略 action 属性，则 action 会被设置为当前页面。
- Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
<form action="action_page.php" method="GET/POST">
- Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
<input type="radio" name="sex" value="boy" checked> 男
- HTML Form 属性
HTML <form> 元素，已设置所有可能的属性
下面是 <form> 属性的列表：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
元素....
</form>
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
HTML 表单元素
- <input> 元素
上一节说过了.... - <select> 元素（下拉列表）
<option> 元素定义待选择的选项
列表通常会把首个选项显示为被选选项。
<select>
<option value="山东">山东</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
- <textarea> 元素
<textarea> 元素定义多行输入字段（文本域）
<textarea name="message" rows="10" cols="20">
啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦啦啦啦阿拉啦啦啦
</textarea>
- <button> 元素
<button type="button" onclick="alert('你好呀,html!')">点我</button>
- HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<input list="mylist">
<datalist id="mylist">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</datalist>
HTML 输入类型类型
- 输入类型：text / password / submit / radio / checkbox / number / data / color / range / month / week / time / datetime / datetime-local / email / search / tel / url
输入类型：text:<br/>
<input type="text" name="allname">
<br/>
输入类型：password <br/>
<input type="password" name="psw">
<br/>
输入类型：submit <br/>
<input type="submit" value="Submit">
<br/>
输入类型：radio <br/>
<input type="radio" name="sex" value="boy">boy
<br/>
<input type="radio" name="sex" value="girl">girl
<br/>
输入类型：checkbox <br/>
<input type="checkbox" name="vehicle" value="Bike">bike
<br/>
<input type="checkbox" name="vehicle" value="Car">car
<br/>
输入类型：number
<input type="number" name="quantity" min="1" max="5">
<br/>
输入类型：date<br/>
<input type="date" name="riqi">
HTML 输入属性
- Input 属性
value ：规定输入字段的初始值
readonly ：规定输入字段为只读（不能修改）
disabled ：规定输入字段是禁用的
size ：规定输入字段的尺寸（以字符计）
maxlength ：定输入字段允许的最大长度
<input type="text" value="value规定输入字段的初始值">
<br/>
<input type="text" value="readonly这段文字只读不能修改" readonly>
<br/>
<input type="text" value="disabled不可用，不可点击" disabled>
<br/>
<input type="text" value="size 属性规定输入字段的尺寸" size="20">
<br/>
<input type="text" value="maxlength属性规定输入字段允许的最大长度" maxlength="40">
<br/>
- HTML5 为 <input> 增加了如下属性：
autocomplete 规定表单或输入字段是否应该自动完成。
autofocus 规定当页面加载时 <input> 元素应该自动获得焦点
form 规定 <input> 元素所属的一个或多个表单
formaction 规定当提交表单时处理该输入控件的文件的 URL。
formenctype 规定在提交表单时不对 <input> 元素进行验证。
formtarget 规定的名称或关键词指示提交表单后在何处显示接收到的响应。
height 和 width 规定 <input> 元素的高度和宽度。
list 引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
min 和 max 规定 <input> 元素的最小值和最大值。
multiple 定允许用户在 <input> 元素中输入一个以上的值。
pattern (regexp) 规定用于检查 <input> 元素值的正则表达式。
placeholder 规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
required 规定在提交表单之前必须填写输入字段。
step 规定 <input> 元素的合法数字间隔。
网友评论