网页设计第二次课后练习

信管2202陈安志

已于 2023-11-19 00:12:39 修改

阅读量91

点赞数 1

文章标签：前端 javascript java

于 2023-11-11 23:26:50 首次发布

本文链接：https://blog.csdn.net/2301_80812728/article/details/134350077

版权

11.9-11.10 第九章表单

一、.from标签：和表格一样，我们要把所有表单标签放在from标签内部

<from>

各种表单标签

</from>

name属性，给表单命名
method用于指定提交方法，有get（安全性较差）、post（安全性较好，常用）两种。
action属性，指定表单数据交到哪一个地址进行处理。
target属性，指定窗口打开方式，一般是_blank。
enctype属性，用于指定表单数据提交的编码方式，用到上传文件功能时需设置。

二、input标签（自闭和标签，没有结束符号）

<input type="表单类型"/>，type属性取值如下：

1.text，单行文本框

value属性，设置单行文本框默认值
size属性，设置文本框的长度
maxlength，设置最多可以输入的字符数

2.password，密码文本框，属性与单行文本框一样。

3.radio，单选框

name表示单选按钮所在的组名，value表示单选按钮的取值，这两个属性必须设置。如果想默认选择某项，可添加checked。

4.checkbox，多选框

5.button或reset或submit，按钮

value的取值就是按钮上的文字。

6.file，文件上传

三、多行文本框

四、下拉列表

与无序列表相像，由select和option标签对配合使用。

select标签有两个属性：muitiple（设置下拉列表可以选择多项）和size（设置下拉列表显示几个列表项，取值为整数）。<select multiple></select>
option有checked（是否选中）和value（选项值）两个属性。

五、第九章课后编程题

11.11-11.12 第十章框架、十一章 CSS简介

一、通常使用iframe标签实现内嵌架构，即在当前页面再嵌入另一个网页。

二、CSS引入方式：

外部样式表：必须用link标签引入，且放在head标签内

内部样式表

必须在style标签内定义，style标签放在head标签内。

div{color:red;}

</style>

行内样式表

在标签的style属性中定义。

11.13 第十二章CSS选择器

一、元素的两个基本属性：id（只能出现一次）和class（可以出现多次）

二、选择器

1.选择器，即用一种方式把想要的元素选中。

2.常见实用选择器：

元素选择器
id选择器（#
class选择器（.
后代选择器（#父元素子元素
群组选择器

三、课后编程题

可选用群组选择器较为简单。

11.14 第十三章字体样式

一、字体样式：

字体类型：font-family
字体大小：font-size

font-size的属性取值有两种，一种是“关键字”，如small,medium,large等。另一种是“像素值”，如16px等。还可以取em、百分比等。

字体粗细：font-weight

font-weight属性取值有两种，一种是100~900的数值，另一种是关键字，如normal（正常，默认值）、lighter（较细）、bold（较粗）、bolder（很粗）。

字体风格：font-style

normal（正常，默认）、italic（斜体）、oblique（斜体）

字体颜色：color

#000000是黑色，#FFFFFF是白色

二、CSS注释：/*注释内容*/

HTML注释：

三、课后编程题

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style type="text/css">

p{

font-family: 微软雅黑，苹方;

font-size: 14px;

font-weight: bold;

color: red;

}

</style>

</head>

<body>

<p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p>

</body>

</html>

11.15 第十四章文本样式

一、文本样式：

首行缩进：text-indent

语法：text-indent：像素值；（像素值一般设置为font-size的两倍）

水平对齐：text-align

语法：text-align：取值；（其属性取值有三个：left，center，right，不仅对文本有效，对图片即img元素也有效）

文本修饰：text-decoration

同上，其属性取值有4个：none（去除所有的划线效果，默认）；underline（下划线）；line-through（中划线）；overline（顶划线）

大小写：text-transform

none（无转换，默认）；uppercase（转换为大写）；lowercase（转换为小写）；capitalize（将每个单词首字母转换为大写）

行高：line-height
间距：letter-spacing（字间距）、word-spacing（词间距，一般只针对于单词）

二、课后编程题

11.16 第十五章边框样式

一、整体样式

border-width、border-style（none无样式、dashed虚线、solid实线）、border-color

二、局部样式

上边框border-top、下边框border-bottom、左边框border-left、右边框border-right.

11.17 第十六章列表样式

一、列表项符号：list-style-type

1.定义列表项符号： list-style-type:取值

list-style-type是针对于ol或ul的，属性取值有有序列表：demical、lower-roman、upper-roman、lower-alpha、upper-alpha；无序列表：disc、circle、square

2.去除列表项符号：list-style-type：none

二、列表项图片：list-style-image

list-style-image：url（图片路径）；

三、课后习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #u{
            list-style-type:none;
        }
        a{
            text-decoration:none;
            color: pink;
        }
    </style>
</head>
<body>
    <ul id="u">
        <li><a href="https://www.baidu.com/" target="_blank">Top1:百度</a></li>
        <li><a href="" target="_blank">Top2:淘宝</a></li>
        <li><a href="" target="_blank">Top3:新浪</a></li>
        <li><a href="" target="_blank">Top4:网易</a></li>
        <li><a href="" target="_blank">Top5:搜狐</a></li>
    </ul>
</body>
</html>

11.18 第十七章表格样式

1、表格标题样式：

caption-side:取值；（top顶部，bottom底部）

2、表格边框合并：

border-collapse：取值；（separate有空隙，collapse无空隙）只限用于表格，不能用于其他元素。

3、表格边框间距：

border-spacing:像素值；

以上三种属性都是在table元素中定义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格练习</title>
    <style type="text/css">
        tr{border: 1px solid red;}
        table{border-collapse:collapse;}
        table{caption-side:bottom;}
    </style>

   
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>250</td>
        </tr> 
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>520</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td colspan="2">385</td>
        </tr>
    </table>
</body>
</html>