web前端开发实验——1

最新推荐文章于 2024-05-11 09:58:50 发布

可以燎原的星星

最新推荐文章于 2024-05-11 09:58:50 发布

阅读量1.1k

点赞数 1

分类专栏： # Web 文章标签： html 前端 web

本文链接：https://blog.csdn.net/qq_46476515/article/details/127337235

版权

Web 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一、文字段落标记的应用

1、新建一个网页文件，添加文字。

2、使用h2标题标记设置主标题文字，使用文字格式标记设置标题颜色为#006600，文字居中对齐，副标题颜色为#999，居中对齐。

3、正文文字字体微软雅黑，字号4号，颜色#333。正文文字字体微软雅黑，字号4号，颜色#333。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字段落标记的应用</title>
    <style type="text/css">
        h2{text-align: center;color: #006600;}
        h3{color: #999;align-content: center;}
        p{font-family: 微软雅黑;font-size: 14pt;color: #333;}
    </style>
</head>
<body>
<div>
    <h2><a href="http//www.baidu.com"> 眷思量全家桶</a></h2>
    <h3>演员就位</h3>
    <p>男主：镜玄<br>女主：屠丽<br></p>
</div>
</body>
</html>

二、使用有序列表标记和<img>标记完成网页的创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<div>
    <ol>
        <li ><img src="/images/J1.jpg" style="width: 150px;height: 80px;font-size: 14pt;">天下</li>
        <li><img src="/images/J2.jpg" style="width: 150px;height: 80px;font-size: 14pt;">仿佛昨天</li>
        <li><img src="/images/J3.jpg" style="width: 150px;height: 80px;font-size: 14pt;">给女儿的一封信</li>
        <li><img src="/images/J5.jpg" style="width: 150px;height: 80px;font-size: 14pt;">少年中国说</li>
        <li><img src="/images/J6.jpg" style="width: 150px;height: 80px;font-size: 14pt;">然后你成了想成为的自己</li>
    </ol>
</div>
</body>
</html>

三、使用HTML表格标记制作课程表网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
<table border="1" style="border-collapse: collapse"><!--1 边框粗细，2 去内边框-->
    <tr>
        <td colspan="6" style="text-align: center">课程表</td>
    </tr>
    <tr>
        <td></td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
    </tr>
    <tr>
        <td>第一节</td>
        <td>语文</td>
        <td>数学</td>
        <td>科学</td>
        <td>英语</td>
        <td>政治</td>
    </tr>
    <tr>
        <td>第二节</td>
        <td>数字</td>
        <td>英语</td>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
    </tr>
</table>
</body>
</html>

四、利用表单标记和表格标记编写一个网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标记应用</title>
</head>
<body>
<table>
    <tr>
        <td>用户名：</td>
        <td><input name="yname" id="yname" type="text"></td></tr>
    <tr>
        <td>密码：</td>
        <td><input name="ypawd" id="ypawd" type="password"></td>
    </tr>
    <tr>
        <td>所在省份：</td>
        <td>
            <select>
                <option value="anhui">安徽</option>
                <option value="jiangs">江苏</option>
                <option value="chongq">重庆</option>
                <option value="hubei">湖北</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>兴趣爱好：</td>
        <td>
            <input name="yaih"  type="checkbox" value="book">看书
            <input name="yaih"  type="checkbox" value="music">音乐
            <input name="yaih"  type="checkbox" value="wan">旅游
        </td>
    </tr>
    <tr><td style="vertical-align: top">个人介绍：</td>
        <td><textarea name="self"cols="30" rows="5"readonly="readonly" >介绍下自己</textarea></td>
    </tr>
    <tr style="margin-left: 100px">
        <td><input type="submit" value="提交"></td>
        <td><input type="submit" value="重置"></td>
    </tr>
</table>
</body>
</html>