标题
<h1> 到 <h6>
段落
<p>标签即表示段落
是paragraph的缩写
自带换行效果
<p>段落4 </p>
粗体
<b>
<strong>
区别：
b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 在SEO（搜索引擎优化）的时候，也更加容易帮助用户找到重点的内容
推荐使用strong
<b>b标签粗体效果</b>
<strong>strong标签粗体效果</strong>
斜体
<i>和<em>都可以表示斜体效果
i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性
em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
<i>使用 i 标签带来的斜体效果</i>
<em>使用 em 标签带来的斜体效果</em>
预格式
有时候，需要在网页上显示代码，比如java代码 ,就需要用到pre
这样会显示代码格式,不然就是一行
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
删除线
<del>即删除标签 ,delete的缩写
<del>使用del标签实现的删除效果</del>
下划线
<ins>即下划线标签
<ins>使用ins标签实现的下划线效果</ins>
图像
<img> 即图像标签
需要设置其属性 src指定图像的路径
<img src="https://how2j.cn/example.gif"/>
如果是本地文件，只需把图片放在同一个目录下即可
src直接使用文件名，不需要/
图片在上级目录，则在src上加上 ../，即可访问上级目录的图片
如果是在上级目录的上级目录，则使用 ../../
src使用图片所在的绝对路径，并在前面加上file://
设置图像的大小
<img width="200" height="200" src="https://how2j.cn/example.gif"/>
图像居中
img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签.
经常采用的手段是放在div中居中 (left,center,right)
<div align="left">
<img src="https://how2j.cn/example.gif"/>
</div>
替换图片上的文字
如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
超链
<a href="跳转到的页面地址">超链显示文本</a>
在新的页面打开超链
新增属性target,target="_blank"
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>
超链上的提示文字
当鼠标放在超链上的时候，就会弹出提示文字title
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
使用图片作为超链
<a href="http://www.12306.com">
<img src="https://how2j.cn/example.gif"/>
</a>
表格
<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格
3行2列表格(不带边框)
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
带边框的表格
设置table的属性border
<table border="1">
...
设置table宽度
设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素
<table border="1" width="200px">
单元格宽度绝对值
设置td的属性width
在示例里，1单元格设置了宽度，那么3，和a单元格，自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td>2</td>
</tr>
...
单元格宽度相对值
<td width="80%">1</td>
单元格水平对齐
设置td的属性align,默认左对齐
<td width="50%" align="left">1</td>
单元格垂直对齐
设置td的属性valign=(top,middle,bottom),默认居中对齐
<td valign="bottom" >a</td>
横跨两列, 水平合并
设置td的属性colspan
<td colspan="2" >1，2</td>
横跨两行, 垂直合并
设置td的属性rowspan
<td rowspan="2">1,3</td>
背景色
设置tr或者td的属性bgcolor
列表
列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示
无序列表(前面是点)
<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>
有序列表(前面是数字)
<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>
块标签
<div>
<span>
这两种标签都是布局用的
这种标签本身没有任何显示效果
通常是用来结合css进行页面布局
div布局
一个简单的div布局的例子
注： 这里使用了style外边距样式，margin-left:50px 指的是左边距50个像素
需要对两个图片进行左边距控制
如果不使用div,则需要对每一个图像设置边距
使用了div后，先把两个图像都放在一个div里
只需要设置div的边距，就可以达到两个图片都移动的效果
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
<br/>
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
<div style="margin-left:100px" >
<img src="https://how2j.cn/example.gif"/>
<br/>
<img src="https://how2j.cn/example.gif"/>
</div>
div和span的区别
div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong
字体
使用<font>标签表示字体
font常用的属性有 color和size, 分别表示颜色和大小
颜色
在html中，颜色通常使用两种方式来表示：
1. 颜色名，比如red, blue
2. 颜色对应的16进制，比如#ff0000 就表示红色
<font color="red" >用red表示红色字体</font>
<br>
<font color="#ff0000" >用#ff0000表示红色字体</font>
内联框架
<iframe> 即内联框架
通过内联框架 可以实现在网页中“插入”网页
iframe相当于浏览器里面有个小浏览器，在这个小浏览器中，打开另一个网页
<iframe src="https://how2j.cn/" width="600px" height="400px">
</iframe>
表单元素
文本框
<input type="text"> 即表示文本框
并且只能够输入一行
如果要输入多行
使用文本域<textarea>
注： <input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样的。
并且<input> 这样的写法也是满足标准的
设置文本框的长度
使用属性size
<input type="text" size="10">
初始值
使用属性value
<input type="text" value="有初始值的文本框">
有背景文字的文本框
使用属性placeholder
placeholder是一个html5的属性，对于大多数的已经支持html5的浏览器来说，是可以看到效果的，但是对于老的不支持html5的浏览器，比如ie8，就看不到效果
<input type="text" placeholder="请输入账号">
密码框
<input type="password"> 即表示密码框
输入的数据会自动显示为星号
表单
<form>用于向服务器提交数据，比如账号密码
action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去
注: 这里把数据提交到服务端的login.jsp去了，鉴于当前学习的进度，就不对JSP的内容展开了。 JSP的内容可以到JSP章节进行学习
注: 有好奇的同学可以参考图片中的login.jsp
<form action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
method="get"
使用method="get" 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性，默认就是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到
<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
method="post"
使用method="post" 也可以提交数据
post不会在地址栏显示提交的参数
如果要提交二进制数据，比如上传文件，必须采用post方式
<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
get和post的区别
get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method="post" 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件
单选框
<input type="radio" > 表示单选框,不换行
单选1 <input type="radio" >
单选2 <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"> 即表示复选框
<p>今天晚上做什么？</p>
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked" name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>
下拉列表
<select> 即下拉列表
需要配合<option>使用
<select >
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
设置高度
使用属性size
<select size="2">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
设置可以多选
使用ctrl或者shift进行多选
<select size="3" multiple="multiple">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
默认选中
对option元素设置selected="selected" 属性
<select size="3" multiple="multiple">
<option >苍老师</option>
<option selected="selected">高树玛利亚</option>
<option selected="selected">遥美</option>
</select>
文本域
<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条
<textarea>abc
def
</textarea>
设置宽度和行数
<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
普通按钮
<input type="button"> 即普通按钮
<input type="button" value="一个按钮">
普通按钮不具备提交form的效果
普通按钮不能提交
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="button" value="登陆">
</form>
提交按钮
<input type="submit"> 即为提交按钮
用于提交form，把数据提交到服务端
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
重置按钮
<input type="reset"> 重置按钮 可以把输入框的改动复原
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
图像提交
<input type="image" > 即使用图像作为按钮进行form的提交
设置src属性
注： 这里用到了服务端技术JSP，将在后续JSP章节讲解 Hello JSP,有兴趣的可以先点击查看login.jsp的源代码： login.jsp
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="https://how2j.cn/example.gif">
</form>
按钮
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富
按钮标签里的内容可以是文字也可以是图像
如果button的type=“submit” ，那么它就具备提交form的功能
button里是文字
<button>按钮</button>
button里是图片
<button><img src="https://how2j.cn/example.gif"/></button>
提交数据
设置type="submit"
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>