HTML菜鸟教程学习笔记
最近想学习学习前端相关，先从基础吧；
本文主要是在菜鸟笔记上的html教程中的笔记或者总结，主要给自己查询；
参考链接：http://www.runoob.com/
HTML 教程
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 注意:HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符。
- 只有在MySQL中可以使用”utf-8”的别名”utf8”，但是在其他地方一律使用大写”UTF-8”
- 推荐使用长后缀名 html. htm 是历史遗留的8.3字符限制命名方式.从 htm 和 html 中选择时，也应该选择无限制长度命名方式的 html 。
HTML简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
什么是HTML?
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 元素
“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
* head 里面不显示，只有 区域 (白色部分) 才会在浏览器中显示。
声明
声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
- 1
- 2
- 3
- 4
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
HTML基础
- HTML 标题（Heading）是通过标签来定义的.
- HTML 段落是通过标签 < p> 来定义的.
HTML 链接是通过标签 < a> 来定义的.
<a href="http://www.runoob.com">这是一个链接</a>- 1
HTML 图像是通过标签 < img> 来定义的.
<img src="/images/logo.png" width="258" height="39" />- 1
HTML元素
- 开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
- HTML 元素以开始标签起始，HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
- 元素可以嵌套
- 不要忘记结束标签
- 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。比如
，HTML、XHTML 和 XML 都接受这种方 - 使用小写标签；
HTML 属性
- 属性是 HTML 元素提供的附加信息。
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=”value”。
- 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。比如属性值本身就含有双引号，那么您必须使用单引号，
- 推荐标准中推荐小写的属性/属性值。
class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
- 1
- 2
- 3
- 4
HTML 标题
标题（Heading）是通过 <h1> - <h6> 标签进行定义的.
浏览器会自动地在标题的前后添加空行
查看源代码:右键，然后选择"查看源文件"（IE）或"查看页面源代码";
<html> 定义 HTML 文档
<body> 定义文档的主体
<h1> - <h6> 定义 HTML 标题
<hr> 定义水平线
<!–…--> 定义注释
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML 段落
段落是通过 <p> 标签定义的
<p>这是一个段落 </p>
不要忘记结束标签
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签;
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
<p> 定义一个段落
<br> 插入单个折行（换行）
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
HTML 文本格式化
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示;
文本格式化:
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
“计算机输出” 标签
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
css:文本显示为单行，超过部分隐藏并使用省略号，实例:
div {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:120px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
HTML 链接
HTML使用标签 <a>来设置超文本链接。
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
<a href="url">链接文本</a>
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href=“http://www.runoob.com/” target="_blank">访问菜鸟教程!</a>
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
请始终将正斜杠添加到子文件夹。
图片链接
<a href=“http://www.runoob.com/html/html-tutorial.html”>
<img border=“10” src=“smiley.gif” alt=“HTML 教程” width=“32” height=“32”></a>
跳出框架
<a href=“http://www.runoob.com/” target="_top">点击这里!</a>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
HTML head
<head> 定义了文档的信息
<title>定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系,常用于链接到样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
<meta> 定义了HTML文档中的元数据
为搜索引擎定义关键词:
<meta name=“keywords” content=“HTML, CSS, XML, XHTML, JavaScript”>
定义网页作者:
<meta name=“author” content=“Runoob”>
每30秒钟刷新当前页面:
<meta http-equiv=“refresh” content=“30”>
<script> 定义了客户端的脚本文件,<script>标签用于加载脚本文件，如： JavaScript。
<style> 定义了HTML文档的样式文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
HTML 样式CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {
color:red;}
p {
color:blue;}
</style>
</head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
如何使用CSS
- 内联样式- 在HTML元素中使用”style” 属性
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
背景色属性（background-color）定义一个元素的背景颜色：
<body style=“background-color” >
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。
你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {
background-color:yellow;}
p {
color:blue;}
</style>
</head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 外部引用 - 使用外部 CSS 文件;
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
<a href="#" style="color：red;" rel="nofollow">只能使用"内联"方式</a>
- 1
- 2
- 3
HTML 图像
1 图像标签（<img>）和源属性（Src）
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
<img src="url" alt="some_text">
2 Alt属性
alt 属性用来为图像定义一串预备的可替换的文本。
<img src=“boat.gif” alt=“Big Boat”>
3 设置图像的高度与宽度,属性值默认单位为像素
<img src=“pulpit.jpg” alt=“Pulpit rock” width=“304” height=“228”>
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
<table border="1">
<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>
1 表格和边框属性
border=“1”
2 表格表头
<th> 标签,大多数浏览器会把表头显示为粗体居中的文本;
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
eg
<h4 style=“text-align:center”>课程表</h4>
<table border=“1” cellpadding=“10” width=“100%”>
<tr>
<th colspan=“2”>时间\日期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
</tr>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">rowspan</span>=<span class="hljs-value">"2"</span>></span>上午<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>9:30-10:15<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>10:25-11:10<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">colspan</span>=<span class="hljs-value">"7"</span>></span><span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span> <span class="hljs-attribute">rowspan</span>=<span class="hljs-value">"2"</span>></span>下午<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>14:30-15:15<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>15:25-16:10<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>语文<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
HTML 列表
HTML 支持有序、无序和定义列表
1 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
2 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
HTML div和span
HTML 可以通过 <div> 和 <span>将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
1 区块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
2 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
3 <div> 元素
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与CSS一同使用，<div> 元素可用于对大的内容块设置样式属性;
<div> 元素的另一个常见的用途是文档布局;
4 <span> 元素
<span> 元素是内联元素，可用作文本的容器;
<span> 元素也没有特定的含义。
<span> 元素可用于为部分文本设置样式属性。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
HTML 布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id=“container” style=“width:500px”>
<div id=“header” style=“background-color:#FFA500;”>
<h1 style=“margin-bottom:0;”>主要的网页标题</h1></div>
<div id=“menu” style=“background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id=“content” style=“background-color:#EEEEEE;height:200px;width:400px;float:left;”>
内容在这里</div>
<div id=“footer” style=“background-color:#FFA500;clear:both;text-align:center;”>
版权 © runoob.com</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置
多数情况下被用到的表单标签是输入标签（<input>）,输入类型是由类型属性（type）定义的。
1 文本域（Text Fields）
文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type=“text” name=“firstname”><br>
Last name: <input type=“text” name=“lastname”>
</form>
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
2 密码字段
<form>
Password: <input type=“password” name=“pwd”>
</form>
3 单选按钮（Radio Buttons）
<form>
<input type=“radio” name=“sex” value=“male”>Male<br>
<input type=“radio” name=“sex” value=“female”>Female
</form>
4 复选框（Checkboxes）
<form>
<input type=“checkbox” name=“vehicle” value=“Bike”>I have a bike<br>
<input type=“checkbox” name=“vehicle” value=“Car”>I have a car
</form>
5 提交按钮(Submit Button)
<form name=“input” action=“html_form_action.php” method=“get”>
Username: <input type=“text” name=“user”>
<input type=“submit” value=“Submit”>
</form>
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist>New 指定一个预先定义的输入控件选项列表
<keygen>New 定义了表单的密钥对生成器字段
<output>New 定义一个计算结果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL"></iframe>
1 设置高度与宽度
<iframe src=“demo_iframe.htm” width=“200” height=“200”></iframe>
2 移除边框
frameborder 属性用于定义iframe表示是否显示边框,设置属性值为 “0” 移除iframe的边框:
<iframe src=“demo_iframe.htm” frameborder=“0”></iframe>
3 使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
先定义一个iframe，然后调用
<iframe src=“demo_iframe.htm” name=“iframe_a”></iframe>
<p><a href=“http://www.runoob.com” target=“iframe_a”>RUNOOB.COM</a></p>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
HTML 颜色
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
相对于使用rgb(255,255,0)，使用rgba(255,255,0,0.5)可以实现设置颜色透明度的功能，这里的0.5表示透明度，范围0~1。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。
在 HTML 中，某些字符是预留的,不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签,如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：
&entity_name;
或
&#entity_number;
不间断空格(Non-breaking Space)
不间断空格( )
实体名称对大小写敏感！
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址，一个统一资源定位器(URL) 用于定位万维网上的文档。
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
URL 只能使用 ASCII 字符集；
HTML 速查列表
你可以打印它，以备日常使用。
- 1
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本...
</body>
</html>
基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href=“http://www.example.com/”>链接文本</a>
图像链接： <a href=“http://www.example.com/”><img src=“URL” alt=“替换文本”></a>
邮件链接： <a href=“mailto:webmaster@example.com”>发送e-mail</a>
书签：
<a id=“tips”>提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img src=“URL” alt=“替换文本” height=“42” width=“42”>
样式/区块（Styles/Sections）
<style type=“text/css”>
h1 {
color:red;}
p {
color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border=“1”>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架（Iframe）
<iframe src=“demo_iframe.htm”></iframe>
表单（Forms）
<form action=“demo_form.php” method=“post/get”>
<input type=“text” name=“email” size=“40” maxlength=“50”>
<input type=“password”>
<input type=“checkbox” checked=“checked”>
<input type=“radio” checked=“checked”>
<input type=“submit” value=“Send”>
<input type=“reset”>
<input type=“hidden”>
<select>
<option>苹果</option>
<option selected=“selected”>香蕉</option>
<option>樱桃</option>
</select>
<textarea name=“comment” rows=“60” cols=“20”></textarea>
</form>
实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
持续学习中
TO BE CONTINUE
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
