课后练习"/>
网页设计——第二次课后练习
11.16 今天练习了html的第九章表单和第十章框架。
主要知识点有:
1.form、input标签,单、多行,密码文本框,单、复选框,下拉列表等的练习与应用。
2.文件上传功能的使用。
3.iframe标签的练习与应用。
html剩余部分:
form标签:
在HTML中,表格的行(tr)、单元格(th、td)等都必须放在table标签内部。创建一个表单,跟创建一个表格一样,也必须要把所有表单标签放在form标签内部。
语法:
<form>//各种表单标签
</form>
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><form><input type="text" value="这是一个单行文本框"/><br/><textarea>这是一个多行文本框</textarea><br/><select><option>HTML</option><option>CSS</option><option>JavaScript</option></select></form>
</body>
</html>
运行效果如图:
form标签属性如图所示:
input标签:
input是自闭合标签,它是没有结束符号的。
语法:
<input type="表单类型" />
单行文本框:
在HTML中,单行文本框是使用input标签来实现的,其中type属性取值为“text”。单行文本框常见于注册登录中。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">性别:<input type="text" /></form>
</body>
</html>
运行效果:
单行文本框属性如图:
例如:
value属性:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">姓名:<input type="text" /><br />姓名:<input type="text" value="robot"/></form>
</body>
</html
运行效果:
size属性:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">姓名:<input type="text" size="15"/><br />姓名:<input type="text" size="5"/></form>
</body>
</html
运行效果:
maxlength属性:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">姓名:<input type="text" />姓名:<input type="text" maxlength="3"/></form>
</body>
</html>
运行效果:
密码文本框:
密码文本框在外观上与单行文本框相似,两者拥有相同的属性(value、size、maxlength等)。但是它们是有着本质上的区别的:在单行文本框中输入的字符是可见的,而在密码文本框中输入的字符不可见。
语法:
<input type="password" />
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">QQ账号:<input type="text" /><br />QQ密码:<input type="password" /></form>
</body>
</html>
运行效果:
密码文本框属性:
密码文本框可以看成是一种特殊的单行文本框,它拥有和单行文本框一样的属性。
单选框:
在HTML中,单选框也是使用input标签来实现的,其中type属性取值为“radio”。
语法:
<input type="radio" name="组名" value="取值" />
注:name属性表示单选按钮所在的组名,而value表示单选按钮的取值,这两个属性必须要设置。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">性别:<input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" />女</form>
</body>
</html>
运行效果:
对于同一组的单选框,必须要设置一个相同的name,这样才会把这些选项归为同一个组上面。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">性别:<input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" />女<br />年龄:<input type="radio" name="age" value="80后" />80后<input type="radio" name="age" value="90后" />90后<input type="radio" name="age" value="00后" />00后</form>
</body>
</html>
运行效果:
复选框:
在HTML中,复选框也是使用input标签来实现的,其中type属性取值为“checkbox”。单选框只能选择一项,而复选框可以选择多项。
语法:
<input type="checkbox" name="组名" value="取值" />
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">你喜欢的水果:<br/><input type="checkbox" name="fruit" value="苹果"/>苹果<input type="checkbox" name="fruit" value="香蕉"/>香蕉<input type="checkbox" name="fruit" value="西瓜"/>西瓜<input type="checkbox" name="fruit" value="雪梨"/>雪梨</form>
</body>
</html>
运行效果:
按钮:
在HTML中,常见的按钮有3种:普通按钮(button);提交按钮(submit);重置按钮(reset)。
- (1)普通按钮一般情况下都是配合JavaScript来进行各种操作的。
- (2)提交按钮一般都是用来给服务器提交数据的。
- (3)重置按钮一般用来清除用户在表单中输入的内容。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">账号:<input type="text" /><br />密码:<input type="password" /><br /><input type="reset" value="重置" /><br /></form>昵称:<input type="text" />
</body>
</html>
运行效果:
文件上传:
在HTML中,文件上传也是使用input标签来实现的,其中type属性取值为file。
语法:
<input type="file" />
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post"><input type="file"/></form>
</body>
</html>
运行效果:
多行文本框:
单行文本框只能输入一行文本,而多行文本框却可以输入多行文本。在HTML中,多行文本框使用的是textarea标签,而不是input标签。
语法:
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
注:多行文本框的默认显示文本是在标签对内部设置,而不是在value属性中设置的。一般情况下,不需要设置默认显示文本。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post">个人简介:<br/><textarea rows="5" cols="20">大学生</textarea></form>
</body>
</html>
运行效果:
对于文本框,可以总结出以下2点:
- (1)HTML有3种文本框:单行文本框、密码文本框、多行文本框。
- (2)单行文本框和密码文本框使用的都是input标签,多行文本框使用的是textarea标签。
下拉列表:
在HTML中,下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像,其中无序列表是由ul和li这两个标签配合使用来表示。可以把下拉列表看成是一种“特殊的无序列表”。
语法:
<select><option>选项内容</option>……<option>选项内容</option>
</select>
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><form method="post"><select><option>HTML</option><option>CSS</option><option>jQuery</option><option>JavaScript</option><option>Vue.js</option></select></form>
</body>
</html>
运行效果:
select标签属性如图:
option标签属性如图:
iframe标签:
在HTML中,我们可以使用iframe标签来实现一个内嵌框架。内嵌框架就是在当前页面再嵌入另外一个网页。iframe实际上就是在当前页面嵌入了另外一个页面,也可以同时嵌入多个页面。
语法:
<iframe src="链接地址" width="数值" height="数值"></iframe>
注:
src是必选的,用于定义链接页面的地址。width和height这两个属性是可选的,分别用于定义框架的宽度和高度。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><iframe src=".jpg" width="500" height="600"></iframe>
</body>
</html>
运行效果:
11.20 今天练习了CSS第11-14章。
主要知识点有:
1.CSS简介及选择器。
2.CSS字体样式。
3.CSS文本样式。
CSS引入方式:
想要在一个页面引入CSS,共有以下3种方式:
-
(1)外部样式表
-
(2)内部样式表
-
(3)行内样式表
(1)外部样式表
语法:
<link rel="stylesheet" type="text/css" href="文件路径" />
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>
注: 使用外部样式表,必须使用link标签来引入,link标签是放在head标签内的。
(2)内部样式表
语法:
<style type="text/css">……
</style>
说明:type="text/css"
是必须添加的,表示这是标准的CSS。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title><style type="text/css">div{color:red;}</style>
</head>
<body><div>彼方尚有荣光在,少年不惧岁月长。</div><div>彼方尚有荣光在,少年不惧岁月长。</div><div>彼方尚有荣光在,少年不惧岁月长。</div>
</body>
</html>
运行效果:
注:使用内部样式表,CSS样式必须在style标签内定义,style标签是放在head标签内的。
(3)行内样式表
行内样式表跟内部样式表类似,也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别:内部样式表的CSS是在“style标签”内定义的,而行内样式表的CSS是在“标签的style属性”中定义的。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div style="color:red;">那维莱特</div><div style="color:red;">那维莱特</div><div style="color:red;">那维莱特</div>
</body>
</html>
运行效果:
元素的id和class:
在HTML中,id和class是元素最基本的两个属性。一般情况下,id和class都是用来选择元素,以便进行CSS操作或者JavaScript操作。
id属性:
id属性具有唯一性,也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id,那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div id="content">欲买桂花同载酒,终不似,少年游</div><p id="content">欲买桂花同载酒,终不似,少年游</p>
</body>
</html>
运行效果:
class属性:
class就是“类”,它与C++、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title></title>
</head>
<body><div class="content">在你眼中我是谁 你想我代替谁</div><p class="content">在你眼中我是谁 你想我代替谁</p>
</body>
</html>
运行效果:
CSS选择器:
CSS选择器的功能就是把所想要的元素选中,然后使得我们可以操作这些元素的CSS样式。
格式如下:
选择器
{属性1 : 取值1;……属性n : 取值n;
}
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#father1 div {color:red;}#father2 span{color:blue;}</style>
</head>
<body><div id="father1"><div>青花瓷</div><div>青花瓷</div></div><div id="father2"><p>青花瓷</p><p>青花瓷</p><span>青花瓷</span></div>
</body>
</html>
运行效果:
字体样式:
字体类型:
CSS中可以使用font-family属性来定义字体类型。
语法:
font-family: 字体1, 字体2, ... , 字体N;
font-family可以指定多种字体。使用多个字体时,将按从左到右的顺序排列,并且以英文逗号(,)隔开。如果我们不定义font-family,浏览器默认字体类型一般是“宋体”。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">p{font-family:Arial,Verdana,Georgia;}</style>
</head>
<body><p>Rome was not built in a day.</p>
</body>
</html>
运行效果:
字体大小:
在CSS中,我们可以使用font-size属性来定义字体大小。
语法:
font-size: 像素值;
说明:实际上,font-size属性取值有两种:一种是“关键字”,如small、medium、large等;另外一种是“像素值”,如10px、16px、21px等。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1 {font-size: 30px;}#p2 {font-size: 40px;}#p3 {font-size: 50px;}</style>
</head>
<body><p id="p1">字体大小为30px</p><p id="p2">字体大小为40px</p><p id="p3">字体大小为50px</p>
</body>
</html>
运行效果:
字体粗细:
在CSS中,我们可以使用font-weight属性来定义字体粗细。注意,字体粗细(font-weight)跟字体大小(font-size)是不一样的。粗细指的是字体的“肥瘦”,而大小指的是字体的“宽高”。
语法:
font-weight: 取值;
说明:font-weight属性取值有两种:一种是“100~900的数值”;另外一种是“关键字”。其中,关键字取值如下表所示。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1 {font-weight: 100;}#p2 {font-weight: 400;}#p3 {font-weight: 700;}#p4 {font-weight: 900;}</style>
</head>
<body><p id="p1">字体粗细为:100(lighter)</p><p id="p2">字体粗细为:400(normal)</p><p id="p3">字体粗细为:700(bold)</p><p id="p4">字体粗细为:900(bolder)</p>
</body>
</html>
运行效果:
字体风格:
在CSS中,我们可以使用font-style属性来定义斜体效果。
语法:
font-style: 取值;
说明:font-style属性取值如下表所示。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{font-style:normal;}#p2{font-style:italic;}#p3{font-style:oblique;}</style>
</head>
<body><p id="p1">字体样式为normal</p><p id="p2">字体样式为italic </p><p id="p3">字体样式为oblique</p>
</body>
</html>
运行效果:
字体颜色:
在CSS中,我们可以使用color属性来定义字体颜色。
语法:
color: 颜色值;
说明:color属性取值有两种,一种是“关键字”;另外一种是“16进制RGB值”。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{color: #03FCA1;}#p2{color: #048C02;}#p3{color: #CE0592;}</style>
</head>
<body><p id="p1">字体颜色为#03FCA1</p><p id="p2">字体颜色为#048C02</p><p id="p3">字体颜色为#CE0592</p>
</body>
</html>
运行效果:
CSS注释:
提高代码的可读性和可维护性。
语法:
/* 注释的内容 */
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">/*这是CSS注释*/p{color:pink;}</style>
</head>
<body><!--这是HTML注释--><p>要么出众,要么出局。</p>
</body>
</html>
运行效果:
文本样式:
字体样式针对的是“文字本身”的型体效果,而文本样式针对的是“整个段落”的排版效果。字体样式注重个体,文本样式注重整体。
在CSS中,常见的文本样式如下表所示:
首行缩进:
在CSS中,我们可以使用text-indent属性来定义p元素的首行缩进。
语法:
text-indent: 像素值;
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">p{font-size:14px;text-indent:28px;}</style>
</head>
<body><h3>爱莲说</h3><p>水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p><p>予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>
</body>
</html>
运行效果:
水平对齐:
在CSS中,我们可以使用text-align属性来控制文本在水平方向上的对齐方式。
语法:
text-align: 取值;
说明:
text-align属性取值有3个,如下表所示。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{text-align:left;}#p2{text-align:center;}#p3{text-align:right;}</style>
</head>
<body><p id="p1"><strong>左对齐</strong>:好好学习,天天向上。</p><p id="p2"><strong>居中对齐</strong>:好好学习,天天向上。</p><p id="p3"><strong>右对齐</strong>:好好学习,天天向上。</p>
</body>
</html>
运行效果:
文本修饰:
在CSS中,我们可以使用text-decoration属性来定义文本的修饰效果(下划线、中划线、顶划线)。
语法:
text-decoration: 取值;
说明:
text-decoration属性取值有4个,如下表所示。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{text-decoration:underline;}#p2{text-decoration:line-through;}#p3{text-decoration:overline;}</style>
</head>
<body><p id="p1">这是“下划线”效果</p><p id="p2">这是“删除线”效果</p><p id="p3">这是“顶划线”效果</p>
</body>
</html>
运行效果:
大小写:
在CSS中,我们可以使用text-transform属性来将文本进行大小写转换。
语法:
text-transform: 取值;
说明:
text-transform属性取值有4个,如下表所示。
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{text-transform:uppercase;}#p2{text-transform:lowercase;}#p3{text-transform:capitalize;}</style>
</head>
<body><p id="p1">rome wasn't built in a day.</p><p id="p2">rome wasn't built in a day.</p><p id="p3">rome wasn't built in a day.</p>
</body>
</html>
运行效果:
行高:
在CSS中,我们可以使用line-height属性来控制一行文本的高度。
语法:
line-height: 像素值;
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{line-height:15px;}#p2{line-height:20px;}#p3{line-height:25px;}</style>
</head>
<body><p id="p1">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p><hr/><p id="p2">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p><hr/><p id="p3">水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p>
</body>
</html>
运行效果:
间距:
(1)字间距:
在CSS中,我们可以使用letter-spacing属性来两个字之间的距离。
语法:
letter-spacing: 像素值;
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{letter-spacing:0px;}#p2{letter-spacing:3px;}#p3{letter-spacing:5px;}</style>
</head>
<body><p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>
运行效果:
(2)词间距:
在CSS中,我们可以使用word-spacing属性来定义两个单词之间的距离。
语法:
word-spacing: 像素值;
例如:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">#p1{word-spacing:0px;}#p2{word-spacing:3px;}#p3{word-spacing:5px;}</style>
</head>
<body><p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/><p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>
运行效果:
更多推荐
网页设计——第二次课后练习
发布评论