概念
html标签
HTML是Hyper Text Markup Language 超文本标记语言 的缩写
HTML是由一套标记标签 (markup tag)组成,通常就叫标签
标签由开始标签和结束标签组成
这是一个开始标签
这是一个结束标签
**Hello World**
标签之间的文本叫做内容
1
2
3
4
|
<h1>大标题</h1>
<h2>小一点的标题</h2>
<h3>再小一点的标题</h3>
<h4>更小一点的标题</h4>
|
html元素
元素指的是从开始标签到结束标签之间所有的代码
比如
hello world
一个完整的HTML文件,应该至少包含html元素,body元素,以及里面的内容
1
2
3
4
5
6
7
8
9
10
|
<html>
<body>
<h1>标题</h1>
</body>
</html>
|
html属性
属性用来修饰标签的
比如要设置一个标题居中
居中标题
写在开始标签里的 align=“center” 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来
html注释
html使用 进行注释
基本元素
html标题
标题会自动粗体,大写其中的内容,并且带有换行效果
一般会使用
到 分别表示不同大小的标题
标题1
标题2
标题3
标题4
标题5
标题5
html段落
p标签即表示段落 是paragraph的缩写 自带换行效果
粗体
都可以用来实现粗体的效果
区别:
b是bold的缩写,仅仅表示该文本是粗体的,并不暗示这段文字的重要性
strong虽然也是粗体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 在SEO(搜索引擎优化)的时候,也更加容易帮助用户找到重点的内容
推荐使用strong
1
2
3
4
|
<p>无粗体效果</p>
<b>b标签粗体效果</b>
<br/>
<strong>strong标签粗体效果</strong>
|
斜体
和都可以表示斜体效果
区别:
i是italic的缩写,仅仅表示该文本是斜体的,并不暗示这段文字的重要性
em 是 Emphasized的缩写,虽然也是斜体,但是更多的是强调语义上的加重,提醒用户该文本的重要性。 常常用于引入新的术语的时候使用。
1
2
3
4
5
6
7
|
//嵌套
<p>无效果</p>
<strong>粗体</strong>
<br/>
<i>斜体</i>
<br/>
<strong><i>同时有粗体和斜体</i></strong>
|
预格式
有时候,需要在网页上显示代码,比如java代码
就需要用到pre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<p>这里是没有用预格式的情况:</p>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
<br/>
<br/>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
|
删除效果
即删除标签
delete的缩写
无删除效果
使用del标签实现的删除效果
使用s标签实现的删除效果,但是不建议使用,因为很多浏览器不支持s标签
下划线
即下划线标签
使用ins标签实现的下划线效果
使用u标签实现的下划线效果,但是不建议使用
图像
即图像标签 需要设置其属性 src指定图像的路径
1
|
<img src="https://how2j.cn/example.gif"/>
|
- 显示图像
- 同级目录图像
如果是本地文件,只需把图片放在同一个目录下即可
src直接使用文件名,不需要/
- 上级目录图像
1
2
|
图片在上级目录,则在src上加上 ../,即可访问上级目录的图片
如果是在上级目录的上级目录,则使用 ../../
|
- 设置图像大小
1
|
<img width="200" height="200" src="https://how2j.cn/example.gif"/>
|
- 图像居中
img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签.
经常采用的手段是放在div中居中
1
2
3
4
5
6
7
8
9
10
11
|
<div align="left">
<img src="https://how2j.cn/example.gif"/>
</div>
<div align="center">
<img src="https://how2j.cn/example.gif"/>
</div>
<div align="right">
<img src="https://how2j.cn/example.gif"/>
</div>
|
替换图片上的字
如果图片不存在,默认会显示一个缺失图片,这是不友好的
所以可以加上alt属性。
当图片存在的时候,alt是不会显示的
当图片不存在的时候,alt就会出现
1
2
3
4
5
6
7
8
|
<img src="https://how2j.cn/example_not_exist.gif" />
<br/>
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
<br/>
<img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />
|
超链
1
2
3
4
5
|
<a>标签即用来显示超链
完整元素是
<a href="跳转到的页面地址">超链显示文本</a>
|
标签即用来显示超链 完整元素是 超链显示文本
-
12306
-
在新的页面打开超链
新增属性target
1
2
|
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>
|
- 超链上提示文字
当鼠标放在超链上的时候,就会弹出提示文字
1
2
|
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
|
- 使用图片作为超链
1
2
3
|
<a href="http://www.12306.com">
<img src="https://how2j.cn/example.gif"/>
</a>
|
表格
1
2
3
|
<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格
|
- 3行2列表格
1
2
|
tr(table row)表示行,所有3个tr元素
td(table data)表示列,每一行,有2列,所以每一个tr元素里,有2个td元素
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table border="1">
<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宽度
1
2
3
|
设置table的属性 width
px即像素的意思。
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table border="1" width="200px">
<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>
|
- 单元格宽度绝对值
设置td的属性width
在示例里,1单元格设置了宽度,那么3,和a单元格,自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
|
- 单元格宽度相对值
设置td的属性width为百分数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table border="1" width="200px">
<tr>
<td width="80%">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
|
- 单元格水平对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr>
<tr>
<td align="center">3</td>
<td>4</td>
</tr>
<tr>
<td align="right">a</td>
<td>b</td>
</tr>
</table>
|
- 单元格垂直对齐
设置td的属性valign
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<table border="1" width="200px">
<tr>
<td width="50%" valign="top" >1</td>
<td>
2 <br/>
2 <br/>
2 <br/>
</td>
</tr>
<tr>
<td valign="middle" >3</td>
<td>
4 <br/>
4 <br/>
4 <br/>
</td>
</tr>
<tr>
<td valign="bottom" >a</td>
<td>
b <br/>
b <br/>
b <br/>
</td>
</tr>
</table>
|
- 横跨两列, 水平合并
设置td的属性colspan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<table border="1" width="200px">
<tr>
<td colspan="2" >1,2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
|
- 横跨两行,垂直合并
设置td的属性rowspan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table border="1" width="200px">
<tr>
<td rowspan="2">1,3</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
|
- 背景色
设置tr或者td的属性bgcolor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table border="1" width="200px">
<tr bgcolor="gray">
<td width="50%">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td bgcolor="pink">b</td>
</tr>
</table>
|
列表
列表分无序列表和有序列表
分别用
- method=“get”
使用method=“get” 提交数据 是常用的提交数据的方式
如果form元素没有提供method属性,默认就是get方式提交数据
get方式的一个特点就是,可以在浏览器的地址栏看到提交的参数,即便是密码也看得到
1
2
3
4
5
|
<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方式
1
2
3
4
5
|
<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” 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据,比如上传文件
单选框
表示单选框
- 单选框
两个单选,都可以同时选中。 为了达到,同一时间,只能选中其一的效果,需要使用分组
1
2
3
|
单选1 <input type="radio" >
单选2 <input type="radio" >
|
单选1
单选2
- 默认选中
默认选中
- 分组
分组即,多个单选框,都在一个分组里,同一时间,只能选中一个单选框
设置name属性相同即可
1
2
3
4
5
6
7
8
9
10
11
12
|
<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="radio" name="xxx" checked="checked" />
当name一致时,被默认分为一组,只能选其一,
checked 是默认选择
|
复选框
即表示复选框
1
2
3
4
5
6
|
<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/>
|
今天晚上做什么?
学习java
东京热
dota
LOL
下拉列表
1
2
|
<select> 即下拉列表
需要配合<option>使用
|
- 下拉列表
1
2
3
4
5
6
|
<select >
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
|
- 设置高度
使用属性size
1
2
3
4
5
6
|
<select size="2">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
|
- 设置可以多选
使用ctrl或者shift进行多选
1
2
3
4
5
6
|
<select size="3" multiple="multiple">
<option >苍老师</option>
<option >高树玛利亚</option>
<option >遥美</option>
</select>
|
- 默认选中
对option元素设置selected=“selected” 属性
1
2
3
4
5
|
<select size="3" multiple="multiple">
<option >苍老师</option>
<option selected="selected">高树玛利亚</option>
<option selected="selected">遥美</option>
</select>
|
- 文本域
1
2
|
<textarea> 即文本域
与文本框不同的是,文本域可以有多行,并且可以有滚动条
|
- 文本yu
1
2
3
4
5
|
<textarea>abc
def
</textarea>
|
- 设置高度和行数
1
2
3
4
5
6
7
8
9
|
<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
|
普通按钮
即普通按钮
-
- 普通按钮不具备提交form的效果
提交按钮
即为提交按钮
用于提交form,把数据提交到服务端
1
2
3
4
5
6
|
<form action="/study/login.jsp" method="get">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
|
重置按钮
重置按钮 可以把输入框的改动复原
1
2
3
4
5
6
7
|
<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>
|
图像提交
即使用图像作为按钮进行form的提交
1
2
3
4
5
6
|
<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的type=“submit” ,那么它就具备提交form的功能
- 里面是图
1
2
|
<button><img src="https://how2j.cn/example.gif"/></button>
|
- 提交数据
设置type=“submit”
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit
1
2
3
4
5
6
7
8
|
<form action="/study/login.jsp">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>
|