网页设计——第二次课后练习

编程入门行业动态更新时间:2024-10-26 22:30:15

网页设计——第二次<a href=https://www.elefans.com/category/jswz/34/1769768.html style= 课后练习"/>

网页设计——第二次课后练习

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实际上就是在当前页面嵌入了另外一个页面，也可以同时嵌入多个页面。

语法：

注：

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-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>

运行效果：

更多推荐

网页设计——第二次课后练习

本文发布于:2024-02-11 22:09:19，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1683840.html