HTML

参考手册：http://www.w3school.com.cn/html5/index.asp

一、HTML简介

HTML：是Hyper Text Markup Language 超文本标记语言 的缩写 

HTML：是由一套标记标签 （markup tag）组成，通常就叫标签 

标签：由开始标签和结束标签组成 

标签之间的文本叫做内容

元素：指的是从开始标签到结束标签之间所有的代码 

属性：用来修饰标签的

（写在开始标签里的 align="center" 就叫属性 
align 是属性名 
center 是属性值 
属性值应该使用双引号括起来）

注释：HTML使用<!-- -->进行注释

二、使用

标题：会自动粗体，大写其中的内容，并且带有换行效果 

一般会使用<h1> 到 <h6> 分别表示不同大小的标题

段落：<p>标签即表示段落 
是paragraph的缩写 
自带换行效果

粗体：<b> 
<strong> 
都可以用来实现粗体的效果

区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong

斜体：<i>和<em>都可以表示斜体效果

区别：
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。

预格式：（在网页上显示代码）有时候，需要在网页上显示代码，比如java代码 ，就需要用到pre

删除线：<del>即删除标签 
delete的缩写                   <s>标签也是表示删除，但兼容性很差。

下划线：<ins>        <u>标签也可以表示下划线，但不建议使用

图像：<img> 即图像标签 
需要设置其属性 src指定图像的路径

路径：

同级目录：如果是本地文件，只需把图片放在同一个目录下即可 
src直接使用文件名，不需要/

上级目录：图片在上级目录，则在src上加上 ../，即可访问上级目录的图片 
如果是在上级目录的上级目录，则使用 ../../

其他目录：src使用图片所在的绝对路径，并在前面加上file://

egg：src = "file://f:/picture/a.png"

设置大小：

<img width="200" height="200" src="file://f:/picture/a.png"/>

图像居中：

img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签. 
经常采用的手段是放在div中居中 

<div>    <img src = "a.jpg"/>    </div>

图片文字替换：

如果图片不存在，默认会显示一个缺失图片，这是不友好的 
所以可以加上alt属性。 
当图片存在的时候，alt是不会显示的 
当图片不存在的时候，alt就会出现

超链接：<a>标签即用来显示超链 
完整元素是 
<a href="跳转到的页面地址">超链显示文本</a>

target属性表明超链接打开的方式，_blank表示在新的页面打开超链接

<a href="www.baidu.com" target="_blank">百度一下</a>

特殊的目标

有 4 个保留的目标名称用作特殊的文档重定向操作：

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

超链接上提示文字：当鼠标放在超链上的时候，就会弹出提示文字

增加title属性

使用图片作为超链接：

<a href="http://www.12306.com">

<img src="a.jpg"/>

</a>

表格：<table>标签用于显示一个表格 
<tr> 表示行 （table row）
<td> 表示列又叫单元格（table data）

带边框：增加border属性（border="1")

宽度：设置table的属性 width 
px即像素的意思。 
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素

单元格宽度绝对值：设置td的属性width 

单元格宽度相对值：设置td的属性width为百分数

单元格水平对齐：左对齐，居中，右对齐       设置td的属性align

单元格垂直对齐：顶对齐，居中，底对齐       设置td的属性valign

横跨两列，水平合并：设置td的属性colspan

横跨两行，垂直合并：设置td的属性rowspan

单元行或单元格背景色：设置tr或者td的属性bgcolor

列表：<li>

无序列表<ul>

有序列表 <ol>

块元素：<div>,<span>

这两种标签都是布局用的 

这种标签本身没有任何显示效果 

通常是用来结合css进行页面布局

style外边距样式，margin-left:50px 指的是左边距50个像素 

<div style = "margin-left:50px"></div>

div是块元素，即自动换行 
常见的块元素还有h1,table,p 
span是内联元素，即不会换行 
常见的内联元素还有img,a,b,strong

字体：使用<font>标签表示字体

font常用的属性有 color和size, 分别表示颜色和大小

<font color="green">绿色默认大小字体</font>

<br>

<font color="blue" size="+2">蓝色大2号字体</font>

<br>

<font color="red" size="-2">红色小2号字体</font>

在html中，颜色通常使用两种方式来表示：
1. 颜色名，比如red, blue
2. 颜色对应的16进制，比如#ff0000 就表示红色

内联框架： <iframe> 即内联框架 

通过内联框架 可以实现在网页中“插入”网页

iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页

<iframe src="www.baidu.com/" width="600px" height="400px">

</iframe>

文本框：<input type="text"> 即表示文本框 

并且只能够输入一行 
如果要输入多行 
使用文本域<textarea> 
注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。 
并且<input> 这样的写法也是满足标准的 

设置文本框的长度：使用属性size

文本框初始值：使用属性value

有背景文字的文本框：使用属性placeholder                   placeholder是一个html5的属性

密码框：<input type="password"> 即表示密码框        输入的数据会自动显示为星号

表单：<form>用于向服务器提交数据，比如账号密码

属性action：其值可为后台处理逻辑或是服务器上的jsp页面等

<form action="login.jsp">

账号：<input type="text" name="name"> <br/>

密码：<input type="password" name="password" > <br/>

<input type="submit" value="登陆">

</form>

提交方式method：

使用method="get" 提交数据 是常用的提交数据的方式 
如果form元素没有提供method属性，默认就是get方式提交数据 
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到

使用method="post" 也可以提交数据 
post不会在地址栏显示提交的参数 
如果要提交二进制数据，比如上传文件，必须采用post方式

get和post的区别 
get 
是form默认的提交方式 
如果通过一个超链访问某个地址，是get方式 
如果在地址栏直接输入某个地址，是get方式 
提交数据会在浏览器显示出来 
不可以用于提交二进制数据，比如上传文件 
post 
必须在form上通过 method="post" 显示指定 
提交数据不会在浏览器显示出来 
可以用于提交二进制数据，比如上传文件

单选框：<input type="radio" > 表示单选框

默认选中：默认选中 <input type="radio" checked="checked" >

单选框分组（同一时间只能选择一个）：分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框 
设置name属性相同即可

<p>今天晚上做什么？</p>

学习java<input type="radio" name="activity" value="学习java" > <br/>

东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>

dota<input type="radio" name="activity" value="dota" > <br/>

LOL<input type="radio" name="activity"  value="lol"> <br/>

复选框：<input type="checkbox"> 即表示复选框 

下拉列表：<select> 即下拉列表 
需要配合<option>使用

设置下拉列表高度：使用属性size

设置下拉列表可多选：使用属性multiple=“multiple”

使用ctrl或者shift进行多选

下拉列表默认选中：对option元素设置selected="selected" 属性

文本域：<textarea> 即文本域 
与文本框不同的是，文本域可以有多行，并且可以有滚动条

文本域设置宽度合行数：使用属性cols和rows

普通按钮：<input type="button"> 即普通按钮

按钮显示文本：使用value属性

普通按钮不具备提交form的功能

提交按钮：<input type="submit" value="登录"> 即为提交按钮 
用于提交form，把数据提交到服务端

重置按钮：<input type="reset" value="重置"> 重置按钮 可以把输入框的改动复原

图像提交：<input type="image" > 即使用图像作为按钮进行form的提交

要设置src属性    <input type="image" src="a.jpg">

按钮标签：<button></button>即按钮标签 
与<input type="button">不同的是，<button>标签功能更为丰富 
按钮标签里的内容可以是文字也可以是图像 
如果button的type=“submit” ，那么它就具备提交form的功能

<button>按钮</button>

<button><img src="a.jpg"/></button>

<button type="submit">登陆</button>

提交数据设置type="submit" 
IE下button的type的默认值为button不具备提交功能 
其他浏览器type的默认值是submit