HTML (基本02)

发表于 分类于 阅读次数：

二.HTML (基本02)

1. 多媒体标签

1.图片标签

标签名： img

属性： 

1
2
3
4
5
6
7
8
9
10
src			图片来源地址	

width	   	图片宽度调节

height	  	图片高度调节

title		鼠标悬停显示文本

alt			图片加载失败替代文本

注意：高度属性和宽度属性一般不同时使用，避免影响图片固有宽高比。

计算机常用长度单位：px （像素）

1
<img src="图片路径" width="20px" title="picture" alt="~"

2.音频标签

标签名： audio

属性：

1
2
3
4
5
src			音频来源路径
controls	控制器
loop		循环播放
autoplay	自动播放

1
2
3
4
<audio src="音频路径" controls loop autoplay>音频播放异常
</audio>


媒介标签——source

1
2
3
4
5
6
7
<audio controls>
	<source src="./music.mp3">
	<source src="./music.amv">
	<source src="./music.fac">
</audio>


媒介标签提供了一种可能：当所用浏览器不支持某种格式的音频时，有替代格式的同一音频可以正常播放。

3.视频标签

标签名： video

属性：

1
2
3
4
5
6
7
8
src 		视频来源地址
controls	控制器
weight		视频宽度
height		视频高度
loop  		循环播放
autoplay	自动播放


1
2
3
<video src="视频地址" wieght="200" controls loop autoplay>


媒介标签——source

1
2
3
4
5
6
7
<video controls>
	<source src="./video.mp4">
	<source src="./video.flv">
	<source src="./video.avi">
</video>


媒介标签提供了一种可能：当所用浏览器不支持某种格式的音频时，有替代格式的同一音频可以正常播放。

4.地址路径

计算机文件路径分为 绝对路径 和 相对路径 。

相对路径

​ . 当前路径，默认

​ .. 上一级路径

1
2
3
4
5
6
7
8
9
10
<img src="1.jpg">
<img src="./1.jpg">
<!--以上均为在当前目录下寻找1.jpg文件-->

<img src="../1.jpg">
<img src="../../1.jpg">
<!--以上两个分别为在上层目录和上上层目录中寻找1.jpg-->



绝对路径

盘符式： x:/…/…/…

网址式： http://…/…/…

根目录： /…/…/…

此处的根目录，在wamp中代表www目录

1
2
3
4
5
6
<img src="D:/wamp/www/3.jpg">
<img src="http://localhost/3.jpg" width="300">
<img src="/3.jpg" width="300">



5.表单声明

表单—常用于和用户做交互

标签名： form（表单声明标签）

属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
action			指定一个地址，将表单内容提交给服务器
				若属性值为空，则默认提交给自己

method			指定页面内容传输方式；
	get			明文传输，为默认传输方式；
   （查）		  速度快，但安全性较低；
				传输大小在http协议上没有限制，
				实际上受到浏览器限制,
				大多数<2KB = 2048 B；
				
	post		密文传输；
  （增删改）	 	 速度相对get要慢，但安全性高；
				传输大小在http协议上没有限制，
				实际上受到服务器限制；

enctype	= "multipart/form-date"
				专用于提交文件给服务器



使用

1
2
3
4
5
6
7
8
<form action="http://www.baidu.com/s" method="post">
	百度：<input type="text" name="word"><br/>
	密码：<input type="password" name="pwd"><br/>
		<input type="submit">
</form>



6.表单标签

  • 标签名： input
  • 特殊属性：
    • name 给当前标签命名，只有命名之后，服务器才能知道接收的信息属于谁。一般情况下，所有的表单都需要name。
    • value 给当前标签赋予默认值，其中可手动输入标签，value值可写可不写，不可手动输入标签必须写入value值。
  • 常用属性：
    • type
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
type属性值：
		text		文本域，默认
		password	密码域（输入不可见）
		radio		单选（配合name使用）
		checkbox	多选
		email		邮箱（确保输入"xxx@xxx"格式）
		number		数字（只能输入数字）
		url			地址（确保输入"xxx://xxx"格式）
		date		日期选择
		file		文件提交
		hidden		隐藏域
		search		搜索
		submit		提交
		button 		按钮（必须配合js使用）
		



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
31
32
33
34
35
36
37
<form action="./demo.php" method="post" enctype="multipart/form-date">
默认文本框：<input> <br>
用户名：<input type="text" name="userName" value="id"><br>
密码：<input type="password" name="psd"><br>
手机号：<input type="number" name="tel"><br>
性别：<input type="radio" name="sex" value="man">男
	<input type="radio" name="sex" value="female">女
	<br>
爱好:<input type="checkbox" name="hobby[]" value="book">book
	<input type="checkbox" name="hobby[]" value="sports">sports
	<input type="checkbox" name="hobby[]" value="game">game
	<input type="checkbox" name="hobby[]" value="bike">bike
	<br>
<!--checkbox要将name值后补上[]，才能形成真正的多选 -->

邮箱：<input type="email" name="email"><br>
生日:<input type="date" name="birthday"><br>
搜索：<input type="search" name="search"><br>
头像：<input type="file" name="icon"><br>

<!--上传文件的3个必要条件-->
<!--
	1.file表单必须要有name属性
	2.form表单的属性method=post
	3.form表单的属性enctype=multipart/form-date
-->

隐藏域：<input type="hidden" name="id" value="0328"><br>
URL:<input type="url" name="url"><br>
<input type="submit" value=""><br>
<!--默认为提交-->
按钮：<input type="button" value="insure">

</form>



其中由于默认文本框中标签未添加name属性，提交后无法查看相应内容，更改为<input name="default">后提交可正常显示

2. 表单

1.下拉框

表单标签

声明标签： select

​ 属性： name

字内容标签： option

​ 属性：value

option标签若没有value值则会将正文内容提交给服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
户籍：
	<select name="address">
		<option>choice</option>
		<option value="1">shanghai</option>
		<option value="2">zhejiang</option>
		<option value="3">jiangsu</option>
		<option value="4">shadong</option>
		<option value="5">hunan</option>
		<option value="6">hubei</option>
		<option value="7">jiangxi</option>
	</select>


2.快捷键

快捷键： 

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
快捷键：	
		ctrl + c   			光标只要在当前行即可
		ctrl + v			马上在上一行进行粘贴

		ctrl + shift + d	复制当前行到下一行

		ctrl + x			删除（本质为剪切）

		ctrl + alt + 方向键		快速选中 同列光标

		ctrl + /			快速注释


		emmet插件快速编写类似html标签：

		$ 		索引， 本质就是数字，默认从1开始
		
		$@num 	索引， 默认从num开始计数

		*		乘以几次，重复几次，出现几个标签
		
		[]		属性  [属性名=属性值]

		{} 		正文内容


实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<select name="test">	
	<!-- option{$}*5 -->
	<option value="">1</option>
	<option value="">2</option>
	<option value="">3</option>
	<option value="">4</option>
	<option value="">5</option>
	
	<!-- option[value=$]*5 -->
	<option value="1"></option>
	<option value="2"></option>
	<option value="3"></option>
	<option value="4"></option>
	<option value="5"></option>
	
	<!-- option[value=$]{$@1990}*5 -->
	<option value="1">1990</option>
	<option value="2">1991</option>
	<option value="3">1992</option>
	<option value="4">1993</option>
	<option value="5">1994</option>
</select>


3.多文本域

标签名： texterea

​ 属性: rows —— 行

​ cols —— 列

之前input，select 默认值都是value
textarea 的默认值是正文内容，而非value

<textarea rows="5" cols="50"></textarea>

4.button标签

1
2
3
4
5
6
7
<form action="">
	 	<input type="text" name="userName">
	 	<button> button按钮</button>
	 	<input type="submit">
</form>


form表单中的独立button按钮，默认值也是正文内容

默认效果是将表单内容提交给服务器（同type-submit）

后期更多是配合js，实现更多的效果。

注意：不同于input标签下的type属性值

<input type="button" value="提交">

5.表单常用属性

常见属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
placeholder			背景虚化字
minlength			输入值最小长度
maxlength			输入值最大长度
autofocus			自动获取光标
autocomplete		自动提示历史记录
	——  on		开启，默认
	——  off		关闭
required			输入不能为空
checked				单选/复选默认勾选项
selected			下拉框默认显示项
readonly			只读，只能看不能改，提交给服务器
disabled			禁用，只能看不能改，不能提交给服务器
multiple			开启多选选项


6.头标签设置

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
<!-- 1.设置编码 <meta charset="UTF-8"> -->
<meta charset="UTF-8">

<!-- 2.设置标题 <title></title> -->
<title>head标签</title>

<!-- 3.搜索引擎关键字 -->
<meta name="keywords" content="keyword1,keyword2,...">

<!-- 4.设置描述 -->
<meta name="description" content="描述内容">

<!-- 5.网页重定向 -->
<!-- <meta http-equiv="refresh" content="3;url=./041.html" -->

<!-- 6.导入css -->
<link rel="stylesheet" href="./demo.css">

<!-- 7.导入js -->
<script src="./demo.js"></script>

<!-- 8.导入icon图标 -->
<link rel="icon" href="favicon.ico">


7.表格

表格声明： table

表格标题： caption

​ 表行： tr table row

​ 表头： th table head

表格描述： td table description

设计：先看行，再看列

属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
border				边框宽度
   cellspacing			外边距（单元格之间的距离）
   cellpadding			内边距（单元格与内容之间的距离）
   width				表格宽度
   height				表格高度
   colspan				列合并
   rowspan				行合并
   align				水平对齐：（left/center/right）
   valign（vertical）   垂直对齐：（top/middle/bottom）
   bgcolor				背景颜色
   background			背景图片


8.下拉框

表单标签

声明标签： select

​ 属性： name

字内容标签： option

​ 属性：value

option标签若没有value值则会将正文内容提交给服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
户籍：
	<select name="address">
		<option>choice</option>
		<option value="1">shanghai</option>
		<option value="2">zhejiang</option>
		<option value="3">jiangsu</option>
		<option value="4">shadong</option>
		<option value="5">hunan</option>
		<option value="6">hubei</option>
		<option value="7">jiangxi</option>
	</select>


9.快捷键

快捷键： 

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
快捷键：	
		ctrl + c   			光标只要在当前行即可
		ctrl + v			马上在上一行进行粘贴

		ctrl + shift + d	复制当前行到下一行

		ctrl + x			删除（本质为剪切）

		ctrl + alt + 方向键		快速选中 同列光标

		ctrl + /			快速注释


		emmet插件快速编写类似html标签：

		$ 		索引， 本质就是数字，默认从1开始
		
		$@num 	索引， 默认从num开始计数

		*		乘以几次，重复几次，出现几个标签
		
		[]		属性  [属性名=属性值]

		{} 		正文内容


实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<select name="test">	
	<!-- option{$}*5 -->
	<option value="">1</option>
	<option value="">2</option>
	<option value="">3</option>
	<option value="">4</option>
	<option value="">5</option>
	
	<!-- option[value=$]*5 -->
	<option value="1"></option>
	<option value="2"></option>
	<option value="3"></option>
	<option value="4"></option>
	<option value="5"></option>
	
	<!-- option[value=$]{$@1990}*5 -->
	<option value="1">1990</option>
	<option value="2">1991</option>
	<option value="3">1992</option>
	<option value="4">1993</option>
	<option value="5">1994</option>
</select>


10.多文本域

标签名： texterea

​ 属性: rows —— 行

​ cols —— 列

之前input，select 默认值都是value
textarea 的默认值是正文内容，而非value

<textarea rows="5" cols="50"></textarea>

11.button标签

1
2
3
4
5
6
7
<form action="">
	 	<input type="text" name="userName">
	 	<button> button按钮</button>
	 	<input type="submit">
</form>


form表单中的独立button按钮，默认值也是正文内容

默认效果是将表单内容提交给服务器（同type-submit）

后期更多是配合js，实现更多的效果。

注意：不同于input标签下的type属性值

<input type="button" value="提交">

12.表单常用属性

常见属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
placeholder			背景虚化字
minlength			输入值最小长度
maxlength			输入值最大长度
autofocus			自动获取光标
autocomplete		自动提示历史记录
	——  on		开启，默认
	——  off		关闭
required			输入不能为空
checked				单选/复选默认勾选项
selected			下拉框默认显示项
readonly			只读，只能看不能改，提交给服务器
disabled			禁用，只能看不能改，不能提交给服务器
multiple			开启多选选项


13.头标签设置

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
<!-- 1.设置编码 <meta charset="UTF-8"> -->
<meta charset="UTF-8">

<!-- 2.设置标题 <title></title> -->
<title>head标签</title>

<!-- 3.搜索引擎关键字 -->
<meta name="keywords" content="keyword1,keyword2,...">

<!-- 4.设置描述 -->
<meta name="description" content="描述内容">

<!-- 5.网页重定向 -->
<!-- <meta http-equiv="refresh" content="3;url=./041.html" -->

<!-- 6.导入css -->
<link rel="stylesheet" href="./demo.css">

<!-- 7.导入js -->
<script src="./demo.js"></script>

<!-- 8.导入icon图标 -->
<link rel="icon" href="favicon.ico">


14.表格

表格声明： table

表格标题： caption

​ 表行： tr table row

​ 表头： th table head

表格描述： td table description

设计：先看行，再看列

属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
border				边框宽度
   cellspacing			外边距（单元格之间的距离）
   cellpadding			内边距（单元格与内容之间的距离）
   width				表格宽度
   height				表格高度
   colspan				列合并
   rowspan				行合并
   align				水平对齐：（left/center/right）
   valign（vertical）   垂直对齐：（top/middle/bottom）
   bgcolor				背景颜色
   background			背景图片


3. 布局

1.大分帧

大分帧：frameset

（在 html5 中已经淘汰，但很多较老的网页还在用大分帧布局）

（frameset 与 body 标签不能共存）

标签名： frameset 设置窗口（分帧）

格式：

1
2
3
4
5
6
7
8
<frameset rows="x%,x%">			<frameset col="x%,x%">
	<frame>							<frame>
	<frame>							<frame>
</frameset>						</frameset>

<!--可以嵌套使用，嵌套时，将下次要分频的frame标签替换为frameset-->


属性： rows 行分

​ cols 列分

​ * 剩余空间

​ noresize 固定分频区域

​ frameborder 分频边框关闭(=0)或开启(非0)

子标签名： frame 窗口（分帧）

属性： src 窗口内容来源地址

​ name 给当前窗口命名

​ scrolling 设置滚动条启用(=yes)或禁用(=no)

1
2
3
4
5
6
7
8
9
10
<!-- 设置上，下（左，右）分频，并自定义内容-->
<frameset rows="10%,90%" noresize frameborder="1">
	<frame src="./topPage.jpg" name="top" scrolling="no">
	<frameset cols="20%,*">
		<frame src="xxx.html" name="left" scrolling="no">
		<frame src="xxx.html" name="right">
	</frameset>
</frameset>


2.小分帧

标签名： iframe

属性 ： scrolling 滚动条（yes/no）

​ src 引用来源

​ width 小分帧宽度

​ height 小分帧高度

​ frameborder 小分帧边框显示（0/非0）

​ name 给小分帧命名

格式：

1
2
3
4
<iframe src="广告来源地址" scrolling="no" width="500" height="200" frameborder="no">
</iframe>