开启HTML语言学习（创建网页的标准标记语言）：
》》》HTML的概念：我认为它就是一种对网页界面的布局的一种方式（标记语言！），最明显的就是它成对的标签！
》》》HTML标签：
1.规则：标签成对一般出现，如<html> 、</html>,第一个是开始标签，第二个是结束标签，元素的内容是开始标签与结束标签之间的内容。
2.块级元素与内联元素：
块级元素和内联元素（行内元素）的基本差异是块级元素开始与结束都从新行开始，相邻的块级元素将会在不同行显示，而内联元素是在同一行显示的。而当加入了css控制以后，块级元素和内联元素的这种属性差异就不成为差异了。
3.常用标签：【注意<!DOCTYPE html> 不是 HTML 标签，声明在 HTML 文档的第一行，位于 <html> 标签之前，使浏览器获知文档类型】
（1）<!--......-->：省略号表示备注、解释等，只有人可以看到，机器不会把它显示在网页上！
（2）<html>......</html>:告知浏览器自身是一个HTML文档，并限定了文档的开始点与结束点，省略号包含文档的头部【<head>......</head>】和主体【<body>......</body>】
（3）<head>......</head>:文档头部，描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
（4）<meta>:该标签没有结束标签，永远位于<head>......</head>的内部。<meta> 标签提供了 HTML 文档的元数据（元数据是数据的数据信息，元数据通常以 名称/值 对出现，元数据不会显示在客户端，但是会被浏览器解析）涉及属性有：
【1】 charset ：规定 HTML 文档的字符编码：<meta charset="utf-8">。
【2】content :提供了“名称/值”对中的“值”,该值可以是任何有效的字符串;始终要和 name 属性或 http-equiv 属性一起使用。
【3】name ： 提供了“名称/值”对中的“名称”，其中"keywords" 是一个经常被用到的名称，它为文档定义了一组关键字，某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
【4】http-equiv ：为“名称/值”对提供了“名称”。
（5）<link> :定义文档与外部资源的关系,永远位于<head>......</head>的内部,没有结束标签。
例：<link href="img/divcss5.css" rel="stylesheet" type="text/css" />
href值为外部资源地址
rel定义当前文档与被链接文档之间的关系
type规定被链接文档的MIME类
注意:由于 link 元素为空元素，它只有开始标签，没有结束标签，所以，要在开始标签的结尾处加上 / 来结束该元素，空元素在开始标签中进行关闭（以开始标签的结束而结束）
（6）<title>......</title>: 定义文档标题，该标签是<head>标签里唯一包含必要的东西，一个 HTML 文档中不能有一个以上的 <title> 元素。不能遗漏，如果遗漏了 <title> 标签，文档作为 HTML 是无效的。
作用：【1】定义浏览器工具栏中的标题
【2】提供页面被添加到收藏夹时的标题
【3】显示在搜索引擎结果中的页面标题
【4】title通常体现了网页的主题内容，所以记得一定要加上
（7）<body>......</body>: 定义文档的主体,包含所有内容！
（8）<a>......</a>: 定义超链接，用于从一个页面链接到另一个页面。例：<a href="url">......</a>，其中href 属性指定链接的目标！
（9）<h1> - <h6> ：定义标题，其中<h1> 定义最大的标题，<h6> 定义最小的标题。｛那么怎样使标题居中呢？在<h1>标签里写上align="center"，即<h1 align="center"> ,其中把center换成left或者right，那么标题就会居左或居右｝，浏览器会自动地在标题的前后添加空行。
｛注意：<title>定义的标题是整个网页的标题，只在浏览器顶部的tab栏里显示，在网页中不显示，是写给搜索引擎看。而<h1>标签是网页中某篇文章或某段文字的标题，是网页内容的一部分，在网页中会显示，是写给用户看的。此外，<title>标签放在<head>标签内，<h1>...<h6>标签放在<body>标签内｝
（10）<p>......</p>:定义文档段落。对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
（11）<br>:定义换行（但不是产生新的段落）该标签是空标签，最好把结束标签放在开始标签中，即<br />
（12）<hr>:定义画出一条水平线在HTML中，<hr>标签没有结束标签，但是空元素的它最好在开始标签里结束而结束（空元素在开始标签中进行关闭（以开始标签的结束而结束），即<hr />）
我练习了一部分标签的使用示例如下：
(13)<img> :定义图像，该标签是空标签，只包含属性，没有闭合标签。 属性有：
【1】scr（源属性）：源属性的值是图像的 URL 地址
【2】Alt:为图像定义一串预备的可替换的文本。当加载不出图像，就可以显示它的文本描述
【3】height（高度） 与 width（宽度）：定义图像的高度与宽度
例：<img src=" http://www.runoob.com/images/pulpit.jpg " alt="Pulpit rock" width="304" height="228"> ，其中名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，就要写完整的 URL：http://www.runoob.com/images/pulpit.jpg ，但是如果图片就在本地文件 ，就可以直接写 URL： pulpit.jpg
（14）<table> ......</table>：定义表格。该标签里有许多的属性，但是我发现它的属性很多都已经不支持了，然后就不列举了，是不是和css有关？不过，有些属性还在使用：
【1】border:定义表格单元是否拥有边框。如果希望表格内容需要有界限，就在开始标签里有：<table border="1">，如果不需要，就直接写<table >。
【2】 cellspacing：定义单元格的间距，默认情况下，其值为2，当为0时，无间距；
【3】width：规定表格的宽度，如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。属性值，我试了一下，遇到了问题：就是它有带百分号和不带百分号两种，我找不到其中到底有什么确切的区别！
（15）<tr>......</tr>: 定义 HTML 表格中的行；
（16）<th>......</th>: 定义表头,注意：表头是包含在行里，即包含在<tr>......</tr>的省略号里；
【1】colspan:定义合并“行”单元格，其值为几就合并这一行的几个单元格；
【2】rowspan:定义合并“列”单元格，其值为几就合并这一列的几个单元格；
（17）<td>......</td>: 定义每行被分割为若干单元格。省略号是数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等；
（18）<caption>......</caption>: 定义表格的标题；
（19）<colgroup>.......</colgroup>：定义表格中列的样式，使用范围：在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前；
例如：
<colgroup>
<col span="1" style="background-color:red">
<col style="background-color:yellow">
<col span="3" style="background-color:pink">
</colgroup>
（20）<col>:为表格中的一个或多个列定义属性值；
效果图：（上述代码中只能规定列项，其中span的值默认为1，style的值为背景颜色，此外，若把最后一个span的值3改为2，那么粉色的部分就会少了24533076所在的这个单元格）
此时它是定义列的背景颜色，那么怎样定义行的背景颜色呢？就可以在要定义颜色的这一行所对应的代码<tr>......</tr>的开始标签里加入style属性，即：<tr style="background-color:red">
实验效果图：
图示操作：
（无边框） 
（有边框）
合并行或列的单元格： 
（在学习这部分的时候遇到比较大的困难，就是怎样合并列单元格，之前有这样尝试，如下图，关键代码如图片所示！此时发现并没有出现我想要的结果，就是想要把number占有两列，但是此时只占据了一列，导致两串数字都在同一行上，后来通过学长指导！竟然出来了！莫名兴奋！如下第二张图，并有附上代码） 
上图源代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小白鼠(shiyanxiaobaishu.com)</title>
</head>
<body>
<table border="1" cellspacing="0">
<h5>合并“行”单元格,用属性colspan，并使单元格之间的间距等于零</h5>
<caption>my friends</caption>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
<th colspan="2">number</th>
</tr>
<tr>
<td>大傻</td>
<td>17</td>
<td>女</td>
<td>13983676</td>
<td>24533076</td>
</tr>
<table>
<table border="1" cellspacing="0">
<h5>合并“列”单元格，并使单元格之间的间距等于零，</h5>
<caption>my friends</caption>
<tr>
<th>name</th>
<td>大傻</td>
</tr>
<tr>
<th>age</th>
<td>17</td>
</tr>
<tr>
<th>sex</th>
<td>女</td>
</tr>
<tr>
<th rowspan="3">number1</th>
<td>13983676</td>
</tr>
<tr>
<td>24533076</td>
</tr>
<tr>
<td>24</td>
</tr>
<table>
</body>
</html>
（21） <li>......</li>：定义列表项目，用在有序列表（<ol>......</ol>）与无序列表（<ul>......</ul>）里;
（22）<ul>......</ul>：与 <li>......</li>标签一起使用，定义无序列表，有序是系统自动给它标顺序号。
（23）<ol>......</ol>：与 <li>......</li>标签一起使用，定义有序列表，无序是没有顺序号的。
嵌套列表1：
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小白鼠(shiyanxiaobaishu.com)</title>
</head>
<body>
<h4>创建嵌套列表（以每个人有两个电话号为例）：</h4>
<ol>
<li>大傻
<ul>
<li>117467544</li>
<li>128546386</li>
</ul>
</li>
<li>二傻
<ul>
<li>137467544</li>
<li>148546386</li>
</ul>
</li>
<li>小傻
<ul>
<li>153264464</li>
<li>162788000</li>
</ul>
</li>
</ol>
</body>
</html>
解说：红色的标签对<ol>......</ol>是创建1、2、3这三个组成的有序列表，粉色标签对 <li>......</li>是有序列表的内容；橙色标签对<ul>......</ul>是在有序列表每一个成员下建立一个无序列表，蓝色标签对<li>......</li>是无序列表的成员及内容！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小白鼠(shiyanxiaobaishu.com)</title>
</head>
<body>
嵌套列表2：
<h4>创建嵌套列表（以每个人两个“座机”电话号和“移动”电话号为例）:</h4>
<ul>
<li>大傻
<ol>
<li>座机
<ul>
<li>117467544</li>
<li>128546386</li>
</ul>
</li>
<li>移动
<ul>
<li>136426578</li>
<li>141563210</li>
</ul>
</li>
</ol>
</li>
<li>二傻
<ol>
<li>座机
<ul>
<li>156275881</li>
<li>169000108</li>
</ul>
</li>
<li>移动
<ul>
<li>171454658</li>
<li>181243432</li>
</ul>
</li>
</ol>
</li>
</ul>
</body>
</html>
（24）<dl>......</dl>：定义自定义列表，与<dt>......</dt>、<dd>......</dd>结合使用；
（25）<dt>......</dt>：定义列表中的项目（代表项目）；
（26）<dd>......</dd>：在<dt>......</dt>中，描述列表中的项目（代表对项目的注释）；（这两句话有点拗口，理解起来比较困难，只能用实际操作理解）源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小白鼠(shiyanxiaobaishu.com)</title>
</head>
<body>
<h4>创建自定义列表（其实就是对一个概念的解释）:</h4>
<dl>
<dt>哺乳动物</dt>
<dd>&一种恒温、脊椎动物,身体有毛发,大部分都是胎生,并藉由乳腺哺育后代.</dd>
</dl>
<dl>
<dt>脊椎动物</dt>
<dd>&幼体生活在水中，用鳃呼吸，经变态发育，成体用肺呼吸，皮肤辅助呼吸，水陆两栖。</dd>
</dl>
</body>
</html>
运行结果：
（27）<div> ......</div>: 定义 HTML 文档中的一个分隔区块或者一个区域部分,常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
（28）<span>......</span> :没有固定的格式表现,当对它应用样式时，它才会产生视觉上的变化,例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>我有 <span style="color:red;font-weight:bold">红色</span> 的眼睛</p>
<p>他有 <span style="color:green">绿色</span> 的眼睛</p>
</body>
</html>其中：font-weight:bold应该是加粗功能吧
（29）<form>......</form>:定义表单，属于块级元素，用于收集不同类型的用户输入。
｛
第一认识：就是可以在运行结果的方框里可以写东西，不需要改变代码，之前的一些基本练习操作都只能在代码里改变而导致运行结果变化！
深入了解：表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,多数情况下被用到的表单标签是输入标签：<input>，该标签没有结束标签，输入类型是由<input>中里的属性（type）定义的；输入类型有：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
｝
【1】文本域输入：通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
【2】密码字段输入：通过标签<input type="password"> 来定义,该类型的输入不会明文显示，而是以点替代，就是我们平时输入密码时“不可视”的情况。
【3】单选按钮输入：通过标签<input type="radio"> 定义了表单单选框选项。
【4】复选框输入：通过标签<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
【5】提交按钮输入：通过标签<input type="submit"> 定义了提交按钮.
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实验小白鼠(shiyanxiaobaishu.com)</title>
</head>
<body>
<h4>文本域输入:</h4>
<form>
密码：<input type="text" name="密码">
</form>
<h4>密码字段输入:</h4>
<form>
密码：<input type="password" name="密码">
</form>
<h4>单选按钮输入:</h4>
<form>
<input type="radio" name="密码" value="1223545">1223545
<input type="radio" name="密码" value="4523454">4523454
<input type="submit" value="submit">
</form>
<h4>复选框输入:</h4>
<form>
<input type="checkbox" name="电话" value="1231243250">1231243250<br>
<input type="checkbox" name="电话" value="1901374931">1901374931
<input type="submit" value="submit">
</form>
</body>
</html>
运行结果：
随后，可以在右边的运行结果里输入或选择，如下图，左边代码是没有改变的：
解说：
<1>细心地可以发现单选按钮输入和复选框输入的初步运行结果是不一致的，其中，单选按钮输入两个选项都在同一行，而复选框输入两个选项不在同一行，是由于复选框输入的代码多了<br>这个换行符；
<2>代码中的name属性规定input元素的名称，（不太懂：用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值）
<3>代码中的value属性规定input元素的值，（<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。value 属性无法与 <input type="file"> 一同使用。）
【6】下拉列表：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>创建下拉列表</h4>
<form action="">
<select name="菜品">
<option value="鱼香肉丝">鱼香肉丝</option>
<option value="红烧牛肉">红烧牛肉</option>
<option value="爆炒鱿鱼">爆炒鱿鱼</option>
<option value="麻婆豆腐">麻婆豆腐</option>
<option value="油炸小龙虾">油炸小龙虾</option>
</select>
</form>
</body>
</html>
其中form中的action属性是规定当提交表单时向何处发送表单数据
【7】预约下拉列表：其实就是让下拉列表显示框首先显示某个选项，没有预约之前，那么首先显示的是第一个选项，即上述例子中的“鱼香肉丝”就是默认的招牌菜，现若想让“爆炒鱿鱼”预约放在第一位作为招牌菜，就只需将<option value="爆炒鱿鱼">爆炒鱿鱼</option>改为<option value="爆炒鱿鱼" selected>爆炒鱿鱼</option>
07-25
532
532
03-30
5179
5179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
