【B/S】HTML汇总（1）
准备长期写下去，旨在脑海里构建一系列的系统。
HTML：超文本标记语言。
其不是一种编程语言，而是一种标记语言，通过标记标签，如<b>粗</b>来呈现不同样式。
HTML使用的是标记标签来描述网页内容
知识概念的扩展：
（1）应用程序一般分为两种架构：
C/S架构：Client客户端和Server服务器端架构，比如QQ、Foxmail等
B/S架构：浏览器/服务器架构，比如淘宝、京东、百度等；能直接通过浏览器使用的应用都是B/S架构
（2）动态网页与静态网页：
静态网页，html代码和内容书写完毕后，页面的内容和显示效果就基本上不会发生变化了——除非修改页面代码
动态网页，页面代码虽然没变，但显示的内容却是可以随时间、环境或者数据库的操作的结果而发生改变。动态网页一般需要与后台程序支撑（jsp,aspx,php）
PS：网页中存在幻灯片效果，文字滚动效果等，如果内容本身没有变化，那么也属于静态网页。
//------------------------------------
创建HTML（1）使用Eclipse，修改编码
window->Perferences->General->Workspace 右侧的Other：UTF-8
（2）创建项目
左侧项目框点击右键->New->Project->Web->Static Web Project
然后键入项目名称就可用了
（3）项目中的WebContent
WebContent文件夹：web相关的内容，比如HTML+JS+CSS
（4）创建HTML页面
在WebContent点右键->New->Other->Web->HTML File
HTML基本结构：
<!DOCTYPE html> <!-- DocumentType =文档类型:html，位于文档首航，告知浏览器文档使用哪种HTML或XHTML规范，让浏览器通过正确的方式解析网页，使网页能正常显示。-->
<html> <!-- 告知浏览器其自身是一个HTML文档 -->
<head> <!-- 用于定义文档的头部（文档的描述信息） -->
<meta charset="UTF-8"> <!-- 声明文件的编码是UTF-8的编码，告诉浏览器，用什么编码去解析这个文件，如果是在中文环境下，默认使用GBK。 UTF-8：国际通用码 GBK/GB2312：中文编码 -->
<meta name="keywords" content="枫叶、Maple"> <!-- 提供给搜索引擎的关键字信息 -->
<!-- meta元素可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词等，让浏览器；-->
<title></title> <!-- 文档标题 -->
</hend>
<body> <!-- 用于定义文档的主体（文档的主体内容） -->
</body>
</html>
快捷键小技巧：Eclipse 中 ：
Alt+/ 能够智能提示
Ctrl+Shift+/ 能够快捷注释
属性介绍：
html标签也可以看成一个对象，既然是对象那么就有属性。属性描述标签的更多细节。
属性值可以加双引号，也可以加单引号，也可以不加引号，建议使用双引号
比如：字体标签：<font size="5" color="red" face="宋体">枫棂</font>
size这个属性的值范围：1~7
color这个属性有三种表达方式：（1）英文单词（颜色名称）：如red，yellow
（2）颜色值（十六进制值）：#FF0000 每两位代表一个颜色
（3）rgb代码： rgb(255,0,0) 等同于red=FF green=00 black=00
face这个属性指：字体规格，如微软雅黑、宋体
特殊标签标示
空格（小空格）
  空格（大空格，占一个中文位置）
> 小于<
< 大于>
& &
常用基本标签：
<i></i>斜体
<b></b>加粗
<u></u>下划线
<p></p>段落（换行，默认情况下和上下的内容之间有间距）
<br/>换行
<font></font>字体（属性：size,color,face）
<h1></h1>标题（h1-h6从大到小的 换行 加粗，上下内容之间有距离，一个网页里面，建议只出现一个h1与h2）
<hr/>水平线
<pre></pre>预格式文本，被包围在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。在各个浏览器存在兼容性问题，用处不多。
<span></span>
<div></div>
span div 两个标签没有特殊的功能，它们只是作为一个装内容的容器，一般需要和CSS配合使用。CSS：控制标签显示样式
DIV：快标签（它会独占一行，宽度默认为100%）
Span：行内标签（不会独占一行，标签多个并排一行，宽高为内容大小）
超链接标签：
<a></a>代表超链接，使多个页面可以链接起来。
属性：href 链接的目标URL，打开页面的地址
target 在何处打开目标URL，其中_blank：在新窗口中打开被链接文档 _self：在本页面打开（默认） _parent：在父“框架集”中打开被链接文档 _top：在整个窗口中打开被链接文档（最外层的页面） framename：在指定的框架中打开被链接文档或者给新窗口取一个名字
例如：<a href="http://www.baidu.com" target="_blank">百度</a>
URL绝对路径与相对路径
绝对路径：以协议（http://、https://加密协议、file://文件）或者 以“/”作为前缀
例如：<a href="file:///D:/Work/eclipse/for%20EE/workspace/Minecraft/WebContent/NewFile.html">新文件</a>
如果以“/”作为前缀，那么会自动把协议加到地址前面，（本地文件，网络文件不行）
例如：<a href="/D:/Work/eclipse/for%20EE/workspace/Minecraft/WebContent/NewFile.html">新文件</a>
相对路径：以文件本身为参照路径进行定位
当前页面所在的文件夹下的文件路径<a href="b.html">b网页</a>（如果连接的文件和当前的文件在同一个目录下面，直接写文件名即可）
当前页面所在的文件夹下的文件路径<a href="./filehb/b.html">b网页</a>（如果连接的文件和当前文件在同一个目录下面，“./文件名” ./：代表当前文件所在目录，效果和上面一样）
当前页面所在文件夹的下级目录中的文件路径<a href="filec/c.html">c网页</a>
当前页面所在文件夹的下三级目录中的文件路径<a href="filec/filed/filee/e.html">e网页</a>（如果连接当前目录下面的filec目录，的下面filed目录，的下面filee目录中的e.html，先写目录名，再写文件名）
当前页面所在的文件夹的上级目录中的文件路径：（..回到上一层）：<a href="../a.html">a网页</a>
图片标签
<img src="" alt="裂空" width="280px" height="300" title="守望先锋"></img>
src：图片的url地址（绝对路径和相对路径）
alt：图形无法显示时的替代文本
height：定义图形的高度，百分比或像素
width：定义图像的宽度，百分比或像素
注意：图片的宽高我们一般只需要设置一个即可，图片会自动按比例进行缩放
title：提示信息（鼠标放在图片会显示相应的文字）
列表标签ul，ol，dl
一般用作某项数据的列表或是导航
<ul> 无序列表
<li>我的世界</li> 列表项
<li>mojang</li>
</ul>
<ol> 有序列表
<li>我的世界</li> 列表项
<li>mojang</li>
</ol>
<dl> 定义列表（一般配合CSS完成某项功能）
<dt></dt>创建列表中的上层项目
<dd></dd>创建列表中的下层项目
<dl>
表格
table标签：代表整个表格；注意，table标签不要放与表格无关的标签（比如：div,h1,form））
tr标签：代表表格中一个行
td标签：代表行中一个列（放数据）
th标签：代表行中一个列（表头数据）
caption标签：表格标题
thead标签：表格的头部，用于装表头的tr（可用可不用，用处不大，仅仅用来分组）
tbody标签：表格的主体，用于装数据的tr（可用可不用，用处不大，仅仅用来分组）
tfoot标签：表格的尾部，用于装尾部的tr（可用可不用，用处不大，仅仅用来分组）
border属性：表格边框
width属性：表格宽度
<table border="1" width="400px">
<!--表格标题-->
<caption>用户列表</caption>
<!--定义表头-->
<thead>
<tr>
<th>尾部</th>
<th>尾部</th>
</tr>
</thead>
<!--定义主体-->
<tbody>
<tr>
<td>莱因哈特</td>
<td>60</td>
</tr>
</tbody>
<!--定义尾部-->
<tfoot>
<tr>
<td>莱因哈特</td>
<td>60</td>
</tr>
</tfoot>
</table>
表格行列合并
colspan：跨列
rowspan：跨行
如下等价（colspan）
<tr>
<td colspan="2">0</td>
<td>1</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
如下等价（rowspan）
<tr>
<td rowspan="2">0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
表单标签form
表单主要用于收集用户数据，然后通过提交我们制定的服务端程序（java）进行处理
form标签只是用来在网页中配置表单的范围，而具体的提交需要使用表单元素。
action：代表提交到后台的服务器地址（服务器接受这个请求后，就会对这些数据进行处理）
method：提交到后台的方法
（get默认：会把数据附加到路径中即显示在地址栏/明文传输不安全/有字符限制255byte）
（post：相对比get更安全/没有字符限制）
input标签：输入框，用于搜集用户信息
（type：输入框的类型，根据不同的type属性值，功能也不一样，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。）
（name：输入框必须写这个属性，代表控件的名称，只有写了这个属性的表单元素，才会提交到后台）
（value：如果type为text,password那么就是默认值；如果type为radio,checkbox那么就是提交到后台值）
（readonly：只读属性，一旦设置无法输入）
（disabled：禁用属性，一旦设置，无法选中也无法输入）
针对radio和checkbox的属性：
checked="checked" 默认选中
<form action="#" method="get">
<!--type="text" 单行文本框--><!--name="username" 控件名称--><!--value="abc" 默认值 --><!--readonly="readonly" 只读,无法输入 -->
用户名：<input type="text" name="username" value="abc" readonly="readonly"/><br/>
<!--type="password" 密码框--><!--disabled="disabled" 禁用属性-->
密 码：<input type="password" name="userpsword" disabled="disabled"/><br/>
<!--type="submit"提交按钮--><!--value="提交" 提交按钮的文本-->
<input type="submit" value="提交"/>
<!--type="reset" 重置按钮，重置表单为默 认值-->
<input type="reset" value="重置"/>
<!--type="button"普通按钮，一般与JS配合使用-->
<input type="button" value="按钮"/>
<!--type="radio"单选框，注意：单选框同组必须设置相同的name属性值-->
性&emsp别：男<input type="radio" name="sex" value="男"/>  女<input type="radio" name="sex" value="女"/>
<!--type="checkbox"复选框，注意：复选框同组必须设置相同的name属性值-->
爱&emsp好：画画<input type="checkbox" name="love" value="画画"/>  看电影<input type="radio" name="love" value="看电影"/>
<!--type="file"文件选择框，注意：复选框同组必须设置相同的name属性值-->
头&emsp像：<input type="file" name="headPic" />
<!--type="hidden"隐藏域选择框：需要提交一个值，又不想被用户看见，就需要使用隐藏域，隐藏域必须设值才有意义-->
<input type="hidden" name="hid" value="250"/>
<!-- select下拉选择框。name：提交到后台的名字。option下拉选项。value：属性提交的值。multiple：多选-->
部门<select name="dept" multiple="multiple">
<option value="1">开发部</option>
<option value="2">销售部</option>
</select>
<!-- textarea多行输入框，rows:多少行，cols:多少列，resize:none禁止拖动。<textarea>与</textarea>之间的内容就是输入框的内容 -->
<textarea style="resize:none" rows="5" cols="10">输入框的内容
</textarea>
</form>
