第一周HTMl作业

最新推荐文章于 2024-11-12 11:19:19 发布

Haiviul

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量381

点赞数 15

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Haiviul/article/details/136954913

版权

本文详细描述了一个HTML表单的设计，包括用户输入字段如用户名、密码、性别、爱好等，以及C/S和B/S架构的应用。同时介绍了CSS的选择器和样式设置，如`.a`到`.D`类的hover效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table  width="400px" height="25px" border="2" cellspacing="0">
        <caption >用户注册</caption>
    <tr align="center">
        <td>用户名</td>
        <td><input type="text"></td>
    </tr>
    
    <tr align="center">
        <td>密码</td>
        <td><input type="password"></td>
    </tr>
    <tr align="center">
        <td>性别</td>
        <td><input type="radio" name="sex" value="男" checked>男
        <input type="radio" name="sex" value="女">女</td>
    </tr>
    <tr align="center">
        <td>爱好</td>
        <td><input type="checkbox" value="写作">写作
        <input type="checkbox" value="听音乐">听音乐
        <input type="checkbox" value="体育">体育</td>
    </tr>
    <tr align="center">
        <td>省份</td>
        <td>
            <select name="city" >
                <option value="广东">广东</option>
            </select>
        </td>
    </tr>
    <tr align="center">
        <td>自我介绍</td>
        <td>
            <form action="">
            <textarea name="liuyan" id="" cols="30" rows="5" ></textarea>
        </form></td>
    </tr>
    <tr align="center"><td></td>
        <td>
        <button type="submit">提交</button> 
        <button type="submit">重置</button>
        </td>
    </tr>
    </table>
    

</body>
</html>

应用软件：

c/s架构：客户端和服务器

b/s架构：浏览器和服务器

web前端：html5、css3、javascript

html：超文本标记语言

超链接:<a herf=""></a>

图像标签：<img src="">

网页：

标题标签只能从：<h1> ~<h6>

标签分两类：一类为行内标签，一类为块标签

行内标签：只会占用自身内容的位置，不会独占一行span

块标签：独占一行div、h1—h6

锚链接：id class

列表：

有序列表：ol>li

无序列表：ul>li

dl>dt--dd

无语义标签：<div> <span>

表单:数据交互的一种方式（登录窗口，同意协议时的打勾窗口）

form action=""

基本选择器：

标签选择器

类选择器（.）

id选择器（#）

通配符选择器（*）

子代选择器，后代选择器，逗号选择器

优先：id选择器（0，1，0，0）>类选择器（0，0，1，0）>标签选择器（0，0，0，1）>通配符选择器（0，0，0，0）

！important（1，0，0，0）

<!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>
        .a{
    display: inline-block;
    width: 200px;
    height: 150px;
    background-color: pink;
    text-align: center;
    line-height: 58px;
    color: white;
    text-decoration: none;
}
.A{
    background: url(../images/bg1.png) no-repeat;
}
.A:hover{
    background-image: url(../images/bg5.png);
}
.B{
    background: url(../images/bg2.png) no-repeat;
}
.B:hover{
    background-image: url(../images/bg6.png);
}
.C{
    background: url(../images/bg3.png) no-repeat;
}
.C:hover{
    background-image: url(../images/bg7.png);
}
.D{
    background: url(../images/bg4.png) no-repeat;
}
.D:hover{
    background-image: url(../images/bg8.png);
}
    </style>
</head>
<body>
    <div class="nav">
        <a href="#" class="A">五彩导航</a>
        <a href="#" class="B">五彩导航</a>
        <a href="#" class="C">五彩导航</a>
        <a href="#" class="D">五彩导航</a>
    </div>
    
</body>
</html>