HTML
HTML简介
1、什么是HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML（HyperText MarkupLanguage）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML网页文件可以使用记事本、写字板、HBuilder、Sublime等编辑工具来编写，以.htm或.html为文件后缀名保存。将HTML网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
基本语法
1、HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML文档，并以网页的形式显示出它们。浏览器不会显示 HTML
标签，而是使用标签来解释页面的内容
HTML标记是由"<"和">"所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由"<起始标记>"＋内容＋"</结束标记>"构成）。
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用"<标志名>内容</标志名>"来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。
为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
2、HTML整体架构
<!DOCTYPE html>
格式一：
\<!DOCTYPE **HTML** PUBLIC **\"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\"**\>
格式二：
<!DOCTYPE html> 推荐的方式
Document Type HyperText Mark-up Language,文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。
由于使用的场景或者版本的更替间，HTML使用的标准不同，所以需要浏览器按照不同的标准来解析HTML文本内容，这就需要告知浏览器我当前的HTML页面是按照那种方式进行编写的。没有该声明，将是你HTML噩梦的开始。这行代码必须写且务必在文档首行。
好处显而易见：一、你可以轻松的写下这个doctype，而不用担心会写错；二、你大概省下了105字节字符，对于一个每日PV达到千万级的站点，它可以省下相当客观流量；三、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它。
<html></html>
<html>标志用于HTML文档的最开始，用来标识HTML文档的开始。而</html>标志放在HTML文档的结束，用来标识HTML文档的结束，两个标志必须一块使用。
<head>...</head>
<head>和</head>构成HTML文档的开头部分。<head>和</head>标签对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
在此标志对之间可以使用<title></title>、<script></script>、<meta>、<link>等标签。
<meta>：用来提供关于文档的信息，起始属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用
utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8
即可正确显示中文。
<link>：用来引入css文件
<script>：用来引入js文件或编写js代码。
<title>...</title>
<title>定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。
<meta></meta>
<meta/>用来提供关于文档的信息
<title></title>
<meta name="description" content="这里写网站内容描述" />
<meta name="keywords" content="这里写关键词" />
以上三部分是SEO搜索引擎优化的主要部分
<body>...</body>
一般情况下浏览器上显示的内容的都放在body中，不排除其他标签可以不用body，比如frameset框架集标签。
<body>和</body>是HTML文档的主体部分，在此标志对之间可包含<p>...</p>、<h1>...</h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。
2.1一个简单的html页面
+-----------------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML标题、段落、链接、图像\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<!\-- HTML 标题（Heading）是通过 \<h1\> - \<h6\> 等标签进行定义的 |
| \--\> |
| |
| \<h1\>This is a heading\</h1\> |
| |
| \<h2\>This is a heading\</h2\> |
| |
| \<h3\>This is a heading\</h3\> |
| |
| \<h4\>This is a heading\</h4\> |
| |
| \<h5\>This is a heading\</h5\> |
| |
| \<h6\>This is a heading\</h6\> |
| |
| \<hr /\>\<!\-- hr代表水平线 \--\> |
| |
| \<!\-- HTML 段落是通过 \<p\> 标签进行定义的 \--\> |
| |
| \<p\>This is a paragraph.\</p\> |
| |
| \<p\>This is another paragraph.\</p\> |
| |
| \<!\-- HTML 链接是通过 \<a\> 标签进行定义的 \--\> |
| |
| \<a href=\"http://www.shsxt.com\"\>This is a link\</a\>\<br /\>\<!\-- |
| br代表换行 \--\> |
| |
| \<!\-- HTML 图像是通过 \<img\> 标签进行定义的 \--\> |
| |
| \<img src=\"img/1.jpg\" title=\"这是一个图片\" /\> |
| |
| \</body\> |
| |
| \</html\> |
+-----------------------------------------------------------------------+
三、HTML常用标签
HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染
，我们需要记忆常用的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div
和 span、格式化文字的。
1、HTML标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
+--------------------------------------------------------------------------+
| \<body\> |
| |
| \<!\-- HTML 标题（Heading）是通过 \<h1\> - \<h6\> 等标签进行定义的 \--\> |
| |
| \<h1\>This is a heading\</h1\> |
| |
| \<h2\>This is a heading\</h2\> |
| |
| \<h3\>This is a heading\</h3\> |
| |
| \<h4\>This is a heading\</h4\> |
| |
| \<h5\>This is a heading\</h5\> |
| |
| \<h6\>This is a heading\</h6\> |
| |
| \</body\> |
+--------------------------------------------------------------------------+
2、HTML段落
HTML 段落是通过 <p> 标签进行定义的。
+---------------------------------------------------+
| \<body\> |
| |
| \<!\-- HTML 段落是通过 \<p\> 标签进行定义的 \--\> |
| |
| \<p\>This is a paragraph.\</p\> |
| |
| \<p\>This is another paragraph.\</p\> |
| |
| \</body\> |
+---------------------------------------------------+
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML
会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
3、HTML水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
4、HTML注释
可以将注释插入 HTML
代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
5、HTML换行
<br /> 元素是一个空的 HTML
元素。由于关闭标签没有任何意义，因此它没有结束标签。
<br> 还是 <br />
您也许发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML
版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br />
也是更长远的保障。
6、HTML链接
HTML 链接是通过 <a> 标签进行定义的。
+---------------------------------------------------------+
| \<body\> |
| |
| \<!\-- HTML 链接是通过 \<a\> 标签进行定义的 \--\> |
| |
| \<a href=\"http://www.shsxt.com\"\>This is a link\</a\> |
| |
| \</body\> |
+---------------------------------------------------------+
7、HTML图像
HTML 图像是通过 <img> 标签进行定义的。
图像的名称和尺寸是以属性的形式提供的。
+-----------------------------------------------------+
| \<body\> |
| |
| \<!\-- HTML 图像是通过 \<img\> 标签进行定义的 \--\> |
| |
| \<img src=\"img/1.jpg\" title=\"这是一个图片\" /\> |
| |
| \</body\> |
+-----------------------------------------------------+
8、HTML格式化(了解)
文本格式化标签
9、HTML元素
HTML 文档是由 HTML 元素定义的
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
+----------------------------------------+
| \<html\> |
| |
| \<body\> |
| |
| \<p\>This is my first paragraph.\</p\> |
| |
| \</body\> |
| |
| \</html\> |
+----------------------------------------+
上面的例子包含三个 HTML 元素。
HTML 实例解释
<p> 元素：
----------------------------------------
\<p\>This is my first paragraph.\</p\>
----------------------------------------
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> 元素：
+----------------------------------------+
| \<body\> |
| |
| \<p\>This is my first paragraph.\</p\> |
| |
| \</body\> |
+----------------------------------------+
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
+----------------------------------------+
| \<html\> |
| |
| \<body\> |
| |
| \<p\>This is my first paragraph.\</p\> |
| |
| \</body\> |
| |
| \</html\> |
+----------------------------------------+
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
+----------------------------------+
| \<p\>This is my first paragraph. |
| |
| \<p\>This is my first paragraph. |
+----------------------------------+
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
注释：未来的 HTML 版本不允许省略结束标签。
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML
和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br />
其实是更长远的保障。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML
标签。
10、div和span
1）<div>是一个块级元素，通常与css配合使用，用于布局。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
<div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id
应用额外的样式。
+-----------------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML\_div\_span\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<!\-- 构建一个div 设置边框黑色1px 宽度200px高度200px 字体居中 \--\> |
| |
| \<div style=\"border: 1p |
| |
| x solid black;width: 200px;height: 200px;text-align: |
| center;\"\>这是一个div\</div\> |
| |
| \<!\-- 构建一个span 字体为红色 \--\> |
| |
| \<span style=\"color: red;\"\>这是一个span\</span\> |
| |
| \</body\> |
| |
| \</html\> |
+-----------------------------------------------------------------------+
2）常用属性
3）<span>标签被用来组合文档中的行内元素 ，span
没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 。
--------------------------
\<span\>content\</span\>
--------------------------
1.标签的分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
块级元素特点：
元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。行内元素特点
：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
可通过浏览器查看是何种元素，后期也可以通过CSS进行修改。
11、HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr>
标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td
指表格数据（table
data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框
这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
rowspan跨行
colspan跨列
+------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表格\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<!\-- 表格标签 属性border=\"1\" 添加表格边框粗细为1 \--\> |
| |
| \<table border=\"1\"\> |
| |
| \<!\-- 设置表格标题 \--\> |
| |
| \<caption\>\<h3\>这是一个表格\</h3\>\</caption\> |
| |
| \<!\-- 定义行 \--\> |
| |
| \<tr\> |
| |
| \<!\-- th定义列 一般写在表格首行 内容会被加粗居中 \--\> |
| |
| \<th\>Heading\</th\> |
| |
| \<th\>Another Heading\</th\> |
| |
| \</tr\> |
| |
| \<tr\> |
| |
| \<!\-- td定义列 \--\> |
| |
| \<td\>row 1, cell 1\</td\> |
| |
| \<td\>row 1, cell 2\</td\> |
| |
| \</tr\> |
| |
| \<tr\> |
| |
| \<td\> \</td\> |
| |
| \<td\>row 2, cell 2\</td\> |
| |
| \</tr\> |
| |
| \</table\> |
| |
| \</body\> |
| |
| \</html\> |
+------------------------------------------------------------+
12、HTML列表
1.无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
+-----------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML列表\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<h4\>一个无序列表：\</h4\> |
| |
| \<ul\> |
| |
| \<li\>咖啡\</li\> |
| |
| \<li\>茶\</li\> |
| |
| \<li\>牛奶\</li\> |
| |
| \</ul\> |
| |
| \</body\> |
| |
| \</html\> |
+-----------------------------+
2.有序列表
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
+-----------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML列表\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<h4\>一个有序列表：\</h4\> |
| |
| \<ol\> |
| |
| \<li\>咖啡\</li\> |
| |
| \<li\>牛奶\</li\> |
| |
| \<li\>茶\</li\> |
| |
| \</ol\> |
| |
| \<ol start=\"50\"\> |
| |
| \<li\>咖啡\</li\> |
| |
| \<li\>牛奶\</li\> |
| |
| \<li\>茶\</li\> |
| |
| \</ol\> |
| |
| \</body\> |
| |
| \</html\> |
+-----------------------------+
13、HTML表单
1.<form> 元素
HTML 表单用于收集用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
2.<input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"
注意：
1.没有name属性的属性是无法提交到后台的！！！！
2.Radio单选按钮以name相同为一组。
3.Checkbox复选按钮以name相同为一组。
3.text文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
+----------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form\> |
| |
| First name:\<br\> |
| |
| \<input type=\"text\" name=\"firstname\" /\> |
| |
| \<br\> Last name:\<br\> |
| |
| \<input type=\"text\" name=\"lastname\" /\> |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+----------------------------------------------+
4.password密码输入
<input type="password"> 定义密码字段
+-----------------------------------------------------------------------+
| \<!\-- password密码 \--\> |
| |
| \<form\> |
| |
| 用户名：\<input type=\"text\" name=\"username\"\> |
| |
| \<br /\> |
| |
| 密 码：\<input type=\"password\" name=\"password\"\> |
| |
| \</form\> |
+-----------------------------------------------------------------------+
5.radio单选按钮输入
<input type="radio"> 定义单选按钮。
+------------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form\> |
| |
| \<input type=\"radio\" name=\"sex\" value=\"male\" checked\>Male |
| |
| \<br\> |
| |
| \<input type=\"radio\" name=\"sex\" value=\"female\"\>Female |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+------------------------------------------------------------------+
6.checkbox复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
+--------------------------------------------------------------------------+
| \<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\> |
+--------------------------------------------------------------------------+
7.number
<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
+-----------------------------------------------------------------+
| \<form\> |
| |
| Quantity (between 1 and 5): |
| |
| \<input type=\"number\" name=\"quantity\" min=\"1\" max=\"5\"\> |
| |
| \</form\> |
+-----------------------------------------------------------------+
8.date
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。
+---------------------------------------+
| \<form\> |
| |
| Birthday: |
| |
| \<input type=\"date\" name=\"bday\"\> |
| |
| \</form\> |
+---------------------------------------+
您可以向输入添加限制
+-----------------------------------------------------------------------+
| \<form\> |
| |
| Enter a date before 1980-01-01: |
| |
| \<input type=\"date\" name=\"bday\" max=\"1979-12-31\"\>\<br\> Enter |
| a date after 2000-01-01: |
| |
| \<input type=\"date\" name=\"bday\" min=\"2000-01-02\"\>\<br\> |
| |
| \</form\> |
+-----------------------------------------------------------------------+
9.submit提交按钮
<input type="submit">
定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定。
Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。
Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）
1）何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的。
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
2）何时使用 POST？
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
+-------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form action=\"http://www.shsxt.com\"\> |
| |
| First name:\<br\> |
| |
| \<input type=\"text\" name=\"firstname\" value=\"Mickey\"\> |
| |
| \<br\> Last name:\<br\> |
| |
| \<input type=\"text\" name=\"lastname\" value=\"Mouse\"\> |
| |
| \<br\>\<br\> |
| |
| \<input type=\"submit\" value=\"Submit\"\> |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+-------------------------------------------------------------+
10.<fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
+-------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form action=\"http://www.shsxt.com\" method=\"post\"\> |
| |
| \<!\-- 表单外边框 \--\> |
| |
| \<fieldset style=\"width: 300px;\"\> |
| |
| \<!\-- legend为fieldset的标题 \--\> |
| |
| \<legend\>Personal information:\</legend\> |
| |
| First name:\<br\> |
| |
| \<input type=\"text\" name=\"firstname\" value=\"Mickey\"\> |
| |
| \<br\> Last name:\<br\> |
| |
| \<input type=\"text\" name=\"lastname\" value=\"Mouse\"\> |
| |
| \<br\>\<br\> |
| |
| \<input type=\"submit\" value=\"Submit\"\> |
| |
| \</fieldset\> |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+-------------------------------------------------------------+
11.<select> 元素（下拉列表）
select常用属性
+----------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form action=\"http://www.shsxt.com\" method=\"post\"\> |
| |
| \<select name=\"cars\"\> |
| |
| \<option value=\"shsxt\"\>上海尚学堂\</option\> |
| |
| \<option value=\"bjsxt\"\>北京尚学堂\</option\> |
| |
| \<option value=\"csshxt\"\>长沙尚学堂\</option\> |
| |
| \<option value=\"zzsxt\"\>郑州尚学堂\</option\> |
| |
| \</select\> |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+----------------------------------------------------------+
12.<textarea> 元素
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过
cols 和 rows 属性来规定 textarea
的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。
+----------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<head\> |
| |
| \<meta charset=\"UTF-8\"\> |
| |
| \<title\>HTML表单\</title\> |
| |
| \</head\> |
| |
| \<body\> |
| |
| \<form action=\"http://www.shsxt.com\" method=\"post\"\> |
| |
| \<textarea name=\"message\" rows=\"10\" cols=\"30\"\> |
| |
| The cat was playing in the garden. |
| |
| \</textarea\> |
| |
| \</form\> |
| |
| \</body\> |
| |
| \</html\> |
+----------------------------------------------------------+
12.<button></button>
<button> 元素定义可点击的按钮
------------------------------------------------------------------------------------
\<button type=\"button\" onclick=\"alert(\'Hello World!\')\"\>Click Me!\</button\>
------------------------------------------------------------------------------------
14.<label></label>
<label> 标签为input 元素定义标注（标记）。
label元素不会呈现任何的特殊效果。label标签的for属性应当与相关元素的id属性相同。
+------------------------------------------------------------+
| \<label for=\"username\"\>用户名：\</label\> |
| |
| \<input type=\"text\" id=\"username\" name=\"username\"/\> |
+------------------------------------------------------------+
四、HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
---------------------------------------------------------
\<a href=\"http://www.shsxt.com\"\>This is a link\</a\>
---------------------------------------------------------
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
属性例子 3:
<table> 定义 HTML 表格。
<table border="1"> 拥有关于表格边框的附加信息。
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
------------------------------------
name=\'Bill \"HelloWorld\" Gates\'
------------------------------------
HTML 属性参考手册
完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：
下面列出了适用于大多数 HTML 元素的属性：
HTML样式
style 属性用于改变 HTML 元素的样式。推荐
+-----------------------------------------------------------------------+
| \<!DOCTYPE html\> |
| |
| \<html\> |
| |
| \<!\-- 设置页面背景颜色为：粉蓝色 \--\> |
| |
| \<body style=\"background-color:PowderBlue;\"\> |
| |
| \<!\-- h1字号的标题 \--\> |
| |
| \<h1\>Look! Styles and colors\</h1\> |
| |
| \<!\-- 设置字体为：verdana，颜色为：红色 \--\> |
| |
| \<p style=\"font-family:verdana;color:red\"\>This text is in Verdana |
| and red\</p\> |
| |
| \<!\-- 设置字体为：times，颜色为：绿色 \--\> |
| |
| \<p style=\"font-family:times;color:green\"\>This text is in Times |
| and green\</p\> |
| |
| \<!\-- 设置字体大小为：30像素 \--\> |
| |
| \<p style=\"font-size:30px\"\>This text is 30 pixels high\</p\> |
| |
| \</body\> |
| |
| \</html\> |
+-----------------------------------------------------------------------+
HTML的style 属性的作用：
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过
HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML
元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
不赞成使用的标签和属性
在 HTML 4
中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的
HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！
应该避免使用下面这些标签和属性：
background-color 属性为元素定义了背景颜色,style属性淘汰了"旧的"
bgcolor属性。
font-family、color 以及 font-size
属性分别定义元素中文本的字体系列、颜色和字体尺寸,style 属性淘汰了旧的
<font> 标签。
text-align 属性规定了元素中文本的水平对齐方式, style 属性淘汰了旧的
"align" 属性。
