html全网最详细知识点

已于 2022-04-30 16:21:40 修改
阅读量457 收藏
点赞数 1
分类专栏： html 文章标签： html5 前端
于 2022-04-27 12:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58490958/article/details/124447242
版权
本文详细介绍了HTML中表格的创建与样式调整，包括跨行跨列、带有列标题的表格，以及CSS的基础使用如选择器、文本样式、边框样式等。随后深入讲解了如何使用CSS修饰表单元素，涉及表单提交方式、用户注册与登录的HTML表单设计。此外，文章还涵盖了CSS的高级特性，如透明度、阴影效果、过渡和动画，适合初学者进阶学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里写目录标题

html界面介绍

<!DOCTYPE html><!--H5的版本声明-->

<!--HTML根标签-->
<html lang="en">
<!--
    头部标签:主要用于对整个页面进行设置
-->
<head>
    <!--
        设置当前页面的编码集
        UTF-8:国际编码支持全球所有国家的语言
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
        移动端自适应
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--标题标签-->
    <title>我的网页</title>
</head>

<!--body标签中是页面显示的内容-->
<body>
     欢迎使用VSCode开发HTML项目  
     <a href="2.HTML基本标签的使用(一).html">HTML基本标签的使用</a>  
</body>

</html>

HTML标签的使用

            background:设置背景图片
h:标题标签，HTML中包含6级标题,h1-h6
            align:设置对齐方式(left<默认>,center,right)
        font:字体标签,用于对字体文本进行设置
            size="100":设置字体大小
            color="red":设置字体颜色
            face="宋体":设置字体类型
 p:段落标签
 br:换行标签
 hr:水平线标签
            color="red":设置颜色
            width="500":设置水平线宽度
            align="left":设置对齐方式
            size="10":设置水平线粗细
 img:图片标签
            src:指定图片的位置
            width:设置图片的宽度
            height:设置图片的高度
            title:设置图片的提示文本
 audio:设置背景音乐标签
            src:指定音乐的位置(mp3)
            autoplay:设置背景音乐是否自动播放
            loop:背景音乐的循环播放的方式
 video:视频标签
            src:指定视频的位置
 a:超链接标签(用于与其他页面关联的标签)
            href:指定要关联的页面的位置
href属性中的"#"表示当前页,"1"是锚记名**
            target="_black":指定连接的目标页面的显示方式为在新     页面中显示(默认替换当前页面)
            name:设置超链接的名字(锚记名)
marquee:滚动标签(跑马灯效果)
            behavior="alternate":设置滚动方式,默认为scroll
            scrolldelay="1":设置滚动延迟时间
            scrollamount="50":设置滚动速度
            direction="right":设置滚动方向
            οnmοuseοver="stop()":当鼠标悬浮时停止
            οnmοuseοut="start()":当鼠标离开时让滚动继续
ul:无序列表
            type:用于指定项目符号
ol:有序列表
            type:用于指定项目符号
        li:该标签需要与ul或ol一起使用，表示一个列表项
        dl:自定义列表的外围标签
        dt:自定义列表的列表标题
        dd:自定义列表的列表项
        b:加粗标签
        i:设置斜体标签
        u:加下划线标签

表格标签

表格标签的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
  
</head>
<body>
    <!--
        表格标签
        table:表格的外框
            border="1":表格的边框为1个像素
            width="500":设置表格的宽度
            height="200":设置表格的高度
            align="center":表格在HTML文档中对齐方式
            cellspacing:设置单元格与单元格之间的间距
            cellpadding:设置填充距离(单元格的边框与内容之间的距离)
            borderColor="red":设置表格边框颜色
            bgColor:设置整个表格的背景色
            background:设置表格的背景图片

        tr:行标签
            bgColor:行背景色
        td:单元格标签(列标签)
            bgColor:单元格背景色
            colspan:跨列属性(横向跨列)
            rowspan:跨行属性(纵向跨行)
        th:列标题标签，该标签自带样式(内容居中并加粗显示)
    -->
    <table border="1" width="500" background="../images/u=4069854689,43753836&fm=193&f=GIF.jpg" bgColor="yellow" borderColor="red" height="200" align="center" cellspacing="0" cellpadding="0">
        <tr align="center" bgColor="cornflowerblue">
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td bgcolor="GREEN">地址</td>
        </tr>
        <tr align="center">
            <td>1</td>
            <td>小强</td>
            <td>男</td>
            <td>20</td>
            <td>西安市</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>小花</td>
            <td>女</td>
            <td>20</td>
            <td>商洛市</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>小胖</td>
            <td>男</td>
            <td>21</td>
            <td>西安市</td>
        </tr>
        <tr align="center">
            <td>4</td>
            <td>小瘦</td>
            <td>男</td>
            <td>22</td>
            <td>西安市</td>
        </tr>
    </table>
</body>
</html>
跨行跨列的表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" borderColor="red" cellspacing="0" cellpadding="0" align="center" width="600" height="200">
        <tr>
            <td></td>
            <td colspan="3"></td>           
        </tr>
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>
带有列标题的表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tbody tr{
            color: red;
        }
    </style>
</head>
<body>
    <table border="1" width="500" background="../images/u=4069854689,43753836&fm=193&f=GIF.jpg" bgColor="yellow" borderColor="red" height="200" align="center" cellspacing="0" cellpadding="0">
        <thead>
            <tr bgColor="cornflowerblue" height="50">
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th bgcolor="GREEN">地址</th>
            </tr>      
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小强</td>
                <td>男</td>
                <td>20</td>
                <td>西安市</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小花</td>
                <td>女</td>
                <td>20</td>
                <td>商洛市</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小胖</td>
                <td>男</td>
                <td>21</td>
                <td>西安市</td>
            </tr>
            <tr>
                <td>4</td>
                <td>小瘦</td>
                <td>男</td>
                <td>22</td>
                <td>西安市</td>
            </tr>
        </tbody>
        
    </table>
</body>
</html>
table:表格的外框
        border="1":表格的边框为1个像素
        width="500":设置表格的宽度
        height="200":设置表格的高度
        align="center":表格在HTML文档中对齐方式
        cellspacing:设置单元格与单元格之间的间距
        cellpadding:设置填充距离(单元格的边框与内容之间的距离)
        borderColor="red":设置表格边框颜色
        bgColor:设置整个表格的背景色
        background:设置表格的背景图片
tr:行标签
        bgColor:行背景色
td:单元格标签(列标签)
        bgColor:单元格背景色
        colspan:跨列属性(横向跨列)
        rowspan:跨行属性(纵向跨行)
th:列标题标签，该标签自带样式(内容居中并加粗显示)

表单标签

两种提交方式:get和post
            (1) get:默认的提交方式 (2) post
            get与post的区别:
             (1) - get提交方式提交的参数在浏览器地址栏中显示(不安全)
                 - post提交方式提交的参数在浏览器地址栏中不显示(安全)
             (2) - get提交方式提交的数量有限，大小不能超过255个字节
                 - post提交方式提交的数据量无限制(可以提交大数据量表单)
            超链接的提交方式为get方式
            总结：表单提交都设置为post方式
用户注册
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <!--
        form:表单的外围标签，所有表单元素需放在该标签内部
            name:设置表单的名字
            * action:用于指定表单提交的位置
            * method:设置表单的提交方式，目前我们可以使用以下两种提交方式:
                (1) get:默认的提交方式 (2) post
                get与post的区别:
                    (1) - get提交方式提交的参数在浏览器地址栏中显示(不安全)
                        - post提交方式提交的参数在浏览器地址栏中不显示(安全)
                    (2) - get提交方式提交的数量有限，大小不能超过255个字节
                        - post提交方式提交的数据量无限制(可以提交大数据量表单)
                超链接的提交方式为get方式
                总结：表单提交都设置为post方式
        input:输入框标签，该标签在表单多个元素中使用，通过input标签中type属性区分不同的表单元素
            type:
                 --text:普通文本框
                 --password:密码框
                 --radio:单选按钮
                 --date:日期框
                 --number:数字框
                 --checkbox:复选框
                 --file:文件域，用于选择文件
                 --hidden:该元素在页面上不会显示，但会向服务器传递数据
                 --submit:提交按钮，功能按钮，作用是将表单中填写的数据提交给服务器
                 --reset:重置按钮，功能按钮，作用是将表单中的数据恢复到初始状态
                 --button:普通按钮，该按钮没有任何功能，是HTML预留给开发人员的按钮
                        该按钮虽然默认没有任何功能，但开发人员可以使用JavaScript为该按钮开发任何功能
                 --image:图片按钮，功能按钮，该按钮的功能和submit一样，该按钮将一张图片做为按钮使用(不建议使用)

            id="username":元素的唯一标识
            name="username":标签名
            placeholder="请输入用户名":提示文本
            value:用于向服务器传输的数据
        textarea:文本域标签，其中可以编写多行文本数据
            rows="10":文本域中同时显示的行数
            cols="50":文本域中同时显示的列数
        select:下拉列表的外围标签
        option:该标签在select标签内部使用，用于定义列表项
            value:该属性的是向服务端传递的数据
            该标签的标签体只用于页面显示，不能传递此数据
        label:存放文本的标签，该标签属于语义标签，默认没有任何效果
            for:设置当用户单击label是哪个元素获得焦点
    -->
    <h2>用户注册</h2>
    <form name="registerForm" action="3.2注册成功.html" method="post">
        <input type="hidden" value="10" name="userId"/>
        <label for="username">用户名:</label><input type="text"  id="username" name="username" placeholder="请输入用户名"/>
        <br/>
        <label>照片:</label><input type="file" name="photo"/>
        
        <br/>
        <label for="password">密码:</label><input type="password" name="password" id="password" placeholder="请输入密码"/>
        <br/>
        <label>性别:</label><input type="radio" name="sex" id="boy" value="男" checked/><label for="boy">男</label>
                                <input type="radio" name="sex" id="girl" value="女"/><label for="girl">女</label> 
        <br/>
        <label>出生日期:</label><input type="date" name="birthday"/>
        <br/>
        <label for="age">年龄:</label><input type="number" name="age" />
        <br/>
        <label>爱好:</label>
                    <input type="checkbox" name="hobbys" id="hobbys1" value="篮球"/><label for="hobbys1">篮球</label> 
                    <input type="checkbox" name="hobbys" value="逛街"/>逛街
                    <input type="checkbox" name="hobbys" value="网游"/>网游
                    <input type="checkbox" name="hobbys" vlaue="睡觉" checked/>睡觉
        <br/>
        <label>请选择省份:</label>
            <select name="province">
                <option>---请选择省份---</option>
                <option value="sxs">陕西省</option>
                <option value="scs">四川省</option>
                <option value="hns">河南省</option>
                <option value="gss">甘肃省</option>
                <option value="sds">山东省</option>
                <option value="hbs">河北省</option>
            </select>
        <br/>
        <label for="">自我介绍</label>
            <textarea name="jieshao" rows="10" cols="50"></textarea>
        <br/>
        <input type="submit" value="提交按钮"/>
        <input type="reset" value="重置按钮"/>
        <input type="button" value="普通按钮"/>
        <input type="image" src="../images/u=2141219545,3103086273&fm=193&f=GIF.jpg" width="150" height="50">
       <!--
           在form表单中button标签默认为提交按钮，但如果不在form表单中使用button标签默认没有提交功能
       -->
        <button>提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">普通按钮</button>
    </form>


    <button>提交按钮</button>
</body>
</html>
注册成功
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">注册成功</h2>
</body>
</html>
登录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="3.4登录成功.html" method="post">
        <table align="center" border="0" cellspacing="5" width="300" height="80">
            <tr>
                <td align="right">
                    <label for="username">用户名:</label>
                </td>
                <td>
                    <input type="text" name="username" id="username"/>
                </td>
            </tr>
            <tr>
                <td  align="right">
                    <label for="password">密码:</label>
                </td>
                <td>
                    <input type="password" name="password" id="password"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button>登录</button>
                    <button type="reset">重置</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

CSS的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*在Style标签中定义样式表*/
        /*
            p是选择器，选择器用于指定当前样式规则对网页中哪些HTML元素起作用
            如果选择器的名字为一个HTML标签的名字，则该选择器称为"标签选择器"
            标签选择器自动修饰页面中根该选择器名称一样的标签
        */
        p{/*花括号中定义样式规则*/
            /*一条样式规则,"冒号"前为规则名，"冒号"后为规则值*/
          color:red;/*设置字体颜色*/
          font-size: 38px;/*设置字体大小*/
          font-weight: bold;/*设置加粗字体*/
          font-family: "宋体"; /*设置字体类型*/ 
        }
    </style>
</head>
<body>
    <p>CSS样式表修饰P标签</p>
    <h1>标题标签</h1>
    <p>另一个P</p>
</body>
</html>
2、选择器的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            当多个不同的标签中部分标签元素要使用相同样式时
            此时我们选用"类选择"来定义样式表
            类选择的定义，在类名前加上"."
            类样式默认对任何元素不起作用,类样式需要在标签中使用class属性调用
            那个标签元素调用了该类样式，则类样式对那个标签起作用
        */
        .myClass{
            color: red;
            font-size: 38px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>这是一个段落标签</p>
    <h2 class="myClass">这是一个二级标题标签</h2>
    <p class="myClass">bold是设置字体粗细的一个加粗值，该值为7(可以简单理解为加粗)</p>
</body>
</html>
3、CSS常用样式表-文本样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-indent: 30px;/*首行缩进样式*/
            text-align: left;/*文本对齐方式*/
            /*word-spacing:50px;设置单词间距(设置空格长度)*/
            letter-spacing: 2px;/*设置字间距*/
            line-height: 30px;/*设置行高*/
            font-size: 26px;/*设置字体大小*/
            font-family:"宋体";/*设置字体类型*/
            color: seagreen;/*设置字体颜色*/
            font-weight:bold;/*设置字体加粗*/
            font-style:italic;/*设置斜体*/
            /*
                设置文本的水平线
                underline:下划线
                none:不显示水平线
                overline:上划线
                line-through:中间水平线(删除线)
            */
            text-decoration:underline;

        }
    </style>
</head>
<body>
    <p>
        标签选择器:HTML中存在的标签名做为选择器的名字，<br/>则当前页面中同标签的所有元素遵循该样式规则显示
        <br/>
        类选择器:定义一个类选择器，并在其中定义样式规则，<br/>在需要时使用标签中的class属性调用类选择器;（类选择器的定义:.类名）
    </p>
    <p>
        3.ID选择器:将一个HTML标签中的ID属性做为选择器使用，<br/>ID选择器只能针对同id的标签起作用，不需要调用(ID选择器的定义:#id{})
    </p>
    <p>
        welcome to jiazhong 
    </p>
</body>
</html>
4、CSS常用样式表-边框样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
           
            font-size: 26px;/*设置字体大小*/
            font-family:"宋体";/*设置字体类型*/
            /*
                统一设置四周的边框(上、下、左、右)
                参数1(1px):设置边框的宽度
                参数2(solid):设置边框的样式(solid实心边框,dashed虚线边框,double双线边框)
                参数3:边框颜色
            */
            /* border: 1px double red; */
            /*
                单独设置四周边框的宽度、风格、颜色
            */
            /* border-width: 1px;
            border-style: dashed;
            border-color: red; */
            /*
            单独设置上下左右边框
            */

            border-bottom:1px dashed red;
            border-left: 1px solid blue;
            border-right: 1px double green;
            border-top:1px dotted orange;
        }
        h2{
            border: 1px solid red;
        }

        label{
            border: 1px solid red;
        }
        a{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>
        标签选择器:HTML中存在的标签名做为选择器的名字，<br/>则当前页面中同标签的所有元素遵循该样式规则显示
        <br/>
        类选择器:定义一个类选择器，并在其中定义样式规则，<br/>在需要时使用标签中的class属性调用类选择器;（类选择器的定义:.类名）
    </p>
    <p>
        3.ID选择器:将一个HTML标签中的ID属性做为选择器使用，<br/>ID选择器只能针对同id的标签起作用，不需要调用(ID选择器的定义:#id{})
    </p>
    <p>
        welcome to jiazhong 
    </p>


    <h2>二级标题标签</h2>
    <label>文本标签</label>
    <a href="">超链接</a>
</body>
</html>
5、CSS常用样式表-背景样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /*background-color: orange;设置背景颜色*/
            /*设置背景图片*/
            background-image: url(../images/u=2141219545\,3103086273&fm=193&f=GIF.jpg);
            /*
                设置背景是否重复
                 no-repeat:不重复
                repeat-x:横向重复
                repeat-y:纵向重复
            */
            background-repeat: no-repeat;
            /*
            设置背景大小按100%比例自动缩放
            它会让背景图占满整个页面
            */
            background-size: 100%;
        }
    </style>
</head>
<body>
    
</body>
</html>
6、使用样式表修饰表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
        table{
            width: 800px;
            border: 1px solid red;
            border-spacing: 0px;/*边框间距*/
            border-collapse: collapse;/*合并边框*/
            text-align: center;
            background-image: url(../images/u=3601447414\,1764260638&fm=193&f=GIF.jpg);
            background-size:100%;
        }
        /*同时设置td和th两个标签的样式*/
        td,th{
            border: 1px solid red;
            height: 50px;
            font-size: 18px;
            color:tomato;
        }
        th{
            background-color: silver;
            color: snow;
        }
    </style>
</head>
<body>
   
    <table align="center">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>小强</td>
            <td>男</td>
            <td>20</td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小花</td>
            <td>女</td>
            <td>20</td>
            <td>商洛市</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小胖</td>
            <td>男</td>
            <td>21</td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>4</td>
            <td>小瘦</td>
            <td>男</td>
            <td>22</td>
            <td>西安市</td>
        </tr>
    </table>
</body>
</html>
7、使用样式表修改表单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        table{
            width: 600px;
            border: 0px solid red;
            border-spacing: 0px;
            border-collapse: collapse;
            font-size: 22px;
        }
        td{
            border: 0px solid red;
            height: 50px;
            
        }
        /*
        设置所有奇数的td样式
        */
        td:nth-child(odd){
            text-align: right;
            padding-right: 10px;
            
        }

        .txt{
            width: 300px;
            height: 40px;
            font-size: 20px;
            padding-left: 10px;
            
            border: 1px solid tomato;
            border-radius: 3px;
            outline: none;/*取消输入框的外部轮廓样式*/
            background-color:sandybrown;
            color: #fff;
            margin-bottom: 10px;/*底部空白*/
        }

        textarea{
            width: 300px;
            height: 100px;
            outline: none;/*取消输入框的外部轮廓样式*/
            background-color:sandybrown;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            border: 1px solid tomato;
            padding-left: 10px;
        }

        button{
            width: 180px;
            height: 50px;
            border: 0px;
            background-color:darkorange;
            color: #fff;
            border-radius: 5px;
            font-size: 20px;
            letter-spacing: 3px;
            cursor: pointer;/*鼠标样式,设置为手掌*/
        }
        button:hover{/*设置按钮的悬浮效果*/
            background-color:red;
        }
        button:active{/*设置按钮单击效果(活动效果)*/
            /**
                设置阴影效果
                参数1:设置阴影的水平位置
                参数2:设置阴影的垂直位置
                参数3:设置阴影距离
                参数4:阴影颜色
            */
            box-shadow: 0px 0px 10px rgb(76, 104, 231);
        }
    </style>
</head>

<body>

    <h2 align="center">用户注册</h2>
    <form name="registerForm" action="3.2注册成功.html" method="post">
        <table align="center">
            <tr>
                <td><label for="username">用户名:</label></td>
                <td>
                    <input class="txt" type="text" id="username" name="username" placeholder="请输入用户名" />
                </td>
            </tr>
            <tr>
                <td><label for="password">密码:</label></td>
                <td>
                    <input class="txt" type="password" name="password" id="password" placeholder="请输入密码" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>性别:</label>
                </td>
                <td>
                    <input type="radio" name="sex" id="boy" value="男" checked /><label for="boy">男</label>
                    <input type="radio" name="sex" id="girl" value="女" /><label for="girl">女</label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>出生日期:</label>
                </td>
                <td>
                    <input class="txt" type="date" name="birthday" value="2020-10-10" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>爱好:</label>
                </td>
                <td>
                    <input type="checkbox" name="hobbys" id="hobbys1" value="篮球" /><label for="hobbys1">篮球</label>
                    <input type="checkbox" name="hobbys" value="逛街" />逛街
                    <input type="checkbox" name="hobbys" value="网游" />网游
                    <input type="checkbox" name="hobbys" vlaue="睡觉" checked />睡觉
                </td>
            </tr>
            <tr>
                <td>
                    <label>请选择省份:</label>
                </td>
                <td>
                    <select class="txt" name="province">
                        <option>---请选择省份---</option>
                        <option value="sxs">陕西省</option>
                        <option value="scs">四川省</option>
                        <option value="hns">河南省</option>
                        <option value="gss">甘肃省</option>
                        <option value="sds">山东省</option>
                        <option value="hbs">河北省</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">自我介绍:</label>
                </td>
                <td>
                    <textarea name="jieshao"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center;">
                    <button>提交按钮</button>
                    <button type="reset">重置按钮</button>
                </td>
            </tr>
        </table>


    </form>


</body>

</html>
8、其他样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" contfloat:left;nt="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;/*取消项目列表前的项目符号*/
            /*设置项目符号为自定义图片*/
            /* list-style-image: url(../images/Dingtalk_20211031144313.jpg);
             */

            float:left;/*将纵向元素变为横向排列元素(不建议使用)*/

        }
        p{
            border: 1px solid red;
            width: 500px;
            height: 100px;
        }
        span{
            border:1px solid red;
            width: 500px;
            height: 100px;
            /*
                显示元素的显示方式为行块级元素
                设置为行块级元素后就可以自动调整宽度和高度
            */
            display: inline-block;
            margin-top:50px;/*设置上边距*/
            padding-left: 50px;/*设置左填充*/
            padding-top:30px;/*设置顶部填充*/
        }
    </style>
</head>
<body>
    <ul>
        <li>注册</li>
        <li>登录</li>
        <li>查看商品</li>
        <li>购买</li>
    </ul>

    <p>

    </p>
    <span>
        span
    </span>
</body>
</html>
9、超链接样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            超链接包含以下几种样式:
            1.超链接的默认样式
                a:link{}
            2.超链接访问过的样式
                a:visited{}
            3.超链接的悬浮样式(鼠标悬浮在超链接时的样式)
                a:hover{}
            4.超链接的活动样式
                a:active{}
        */
        a:link{
            text-decoration: none;/*去掉超链接的下划线*/
            letter-spacing: 2px;
            margin:10px;
            font-weight: bold;
        }
       
        a:visited{
            color: yellowgreen;
        }

        a:hover{
            color: red;
            /* font-size: 18px; */
        }
        a:active{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="8.其他样式.html">其他样式</a>
    <a href="7.使用样式表修饰表单.html">表单修饰</a>
</body>
</html>
10、使用超链接实现页面导航效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            border: 0px solid red;
            padding-left: 0px;
            /* text-align: center; */
            display: flex;/*设置当前元素使用弹性布局*/
            flex-direction: row;/*横向布局(默认为横向布局)*/
            justify-content: center;/* 设置主轴的对齐方式 */
            /* align-items: center;设置主轴对齐方式 */
           
        }
        li{
            list-style: none;/*去掉列表前的项目符号*/
            /*float: left;使用浮动效果会让当前元素脱离父元素(不收父元素管理)不建议使用*/
        }

        a:link{
            text-decoration: none;
            color: blue;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: yellowgreen;
        }

        a.nav:link{
            border: 1px solid #fff;
            border-radius: 5px;
            width: 150px;
            height: 60px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 60px;/*当设置行高和总高度一致时自动上下居中*/
            background-color: darkorange;
            color: #fff;
            font-size: 20px;
            letter-spacing: 5px;
            font-weight: bold;
        }

        a.nav:visited{
            border: 1px solid #fff;
            width: 150px;
            height: 60px;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 60px;/*当设置行高和总高度一致时自动上下居中*/
            background-color: darkorange;
            color: #fff;
            font-size: 20px;
            letter-spacing: 5px;
            font-weight: bold;
        }
        a.nav:hover{
            background-color:greenyellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#" class="nav">首页</a>
        </li>
        <li>
            <a href="#" class="nav">教育</a>
        </li>
        <li>
            <a href="#" class="nav">财经</a>
        </li>
        <li>
            <a href="#" class="nav">军事</a>
        </li>
        <li>
            <a href="#" class="nav">抗疫</a>
        </li>
        <li>
            <a href="#" class="nav">台湾</a>
        </li>
        <li>
            <a href="#" class="nav">影视</a>
        </li>
        <li>
            <a href="#" class="nav">音乐</a>
        </li>
        <li>
            <a href="#" class="nav">综艺</a>
        </li>
        <li>
            <a href="#" class="nav">关于我们</a>
        </li>
    </ul>
    <p>
        <a href="">进入查看</a>
        
    </p>
</body>
</html>
11、透明样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url(../images/u=350949237\,2668017024&fm=193&f=GIF.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
            background-attachment:fixed;/*设置背景图固定*/
            overflow: hidden;/*隐藏滚动条*/
        }
        p{
            width: 100%;
            height: 300px;
           
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            font-weight: bold;
            /*
                使用三色素设置字体颜色，并设置透明度
            */

            color: rgba(0, 0, 255,.5);
        }
        div{
            width: 90%;
            height: 100px;
            border-radius: 10px;
            background-color:rgba(255, 255, 255, .7);
            padding-left: 10px;
            padding-top: 5px;
        }
    </style>
</head>
<body>

    <div>
        快过年了，要放假了！
    </div>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
    <p>
        CSS半透明字体
    </p>
</body>
</html>
12、阴影样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            height: 100px;
            text-align: center;
            font-size: 100px;
            font-weight: bold;
            color: red;
            letter-spacing: 30px;
            /*
                设置字体阴影
                参数1:设置阴影的水平距离
                参数2:设置阴影的垂直距离
                参数3:设置阴影距离
                参数4:设置阴影颜色
            */
            text-shadow: 0px 0px 20px rgb(247, 247, 2);
        }
        div{
            margin:0 auto;/*设置DIV居中*/
            width: 600px;
            height: 200px;
            background-color: rgb(159, 243, 4);
            border: 0px solid red;
            border-radius: 10px;
            /*
                设置盒子阴影(区域阴影)
            */
            box-shadow: 0px 0px 20px red;
        }
    </style>
</head>
<body>
    <p>
        阴影字体
    </p>
    <div>

    </div>
</body>
</html>
13、过度效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin:0 auto;
            width: 500px;
            height: 500px;
            background-color: red;
            /* transition: background-color 2s linear 500ms; */

        }
        div:hover{/*设置DIV的悬浮样式*/
            cursor: pointer;
            background-color:yellowgreen;
            transition: background-color 2s linear 500ms;
            
        }

        p{
          width: 10px;
          height: 100px;
          background-color: red;  
          /**
            过滤效果
            参数1:过渡属性(样式属性);
            参数2:过滤所需的使用(s秒,ms毫秒)
            参数3:过滤的时间曲线(linear匀速)
            参数4:延迟时间(等待多长时间开始过滤)
            */
          transition: width 5s linear 500ms,height 5s linear 500ms;
        }
        p:hover{
            cursor: pointer;
            width: 100%;
            height: 800px;
            transition: width 5s linear 500ms,height 5s linear 500ms;
        }
    </style>
</head>
<body>
    <div></div>
    <p></p>
</body>
</html>
14、动画效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            top:10px;
            left:10px;
            width: 100px;
            height: 100px;
            background-color: red;
            
        }

        /*
            定义动画
        */
        @keyframes move {
            from{
                left:10px;
            }
            to{
                left:1300px;
            }
        }
        /* div:hover{
            animation: move 2s 0s;
        } */
    </style>
</head>
<body>
    <div></div>   
    <br/><br/><br/><br/><br/><br/>
    <button onclick="moveTest()">动起来</button> 
    <script>
        function moveTest(){
            let divObj = document.querySelector("div");
            divObj.style.animation="move 2s 0s";
            //设置到达终点后的动作(forwards:停到最后一帧)
            divObj.style.animationFillMode="forwards";
        }
    </script>
</body>
</html>
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
禅思院
02-19 798
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
【网络安全 | 开发】全网最详细Go笔记（3w字总结）
热门推荐
等风来
10-12 1万+
Go语言中的每个文件都属于一个包（package）。包声明用于定义当前文件所属的包名，不同的包之间可以通过包名进行引用和调用。包的声明必须是在源文件中非注释的第一行，且每一个Go程序都包含一个名为main的包。
【前端】【HTML】基础知识
我的的博客哦
03-06 7368
🔰HTML指的是超文本语言，它是用来描述网页的的一种语言。🔰HTML不是编程语言，而是一种标记语言。🔰标记语言是一套标记标签。
HTML相关知识点
weixin_41123761的博客
03-18 250
1、新的 HTML5 文档类型和字符集是？HTML5 文档类型很简单：1&lt;!doctype html&gt;HTML5 使用 UTF-8 编码示例：1&lt;meta charset=”UTF-8″&gt;2、请描述一个网页从开始请求道最终显示的完整过程？（1）在浏览器中输入网址；（2）发送至DNS服务器并获得域名对应的WEB服务器IP地址；（3）与WEB服务器建立TCP连接；（4）浏览器向...
什么是HTML？
最新发布
dingxingaq的博客
03-20 3356
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言，不是编程语言而是一种标记语言。所谓超文本，有2 层含义：1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。语法1. HTML 标签是由尖括号包围的关键词，例如。2. HTML 标签通常是成对出现的，例如 和 ，我们称为双标签。
html相关知识点
水墨青
12-12 258
javaScript: js历史:(了解) 网景公司: 做浏览器: 网景导航者 给页面增加动态效果,提高用户体验度. 仿造java语言编写了一门新的语言 --- liveScript liveScript语言只需要解释就可以执行,用来解释liveScript语言的解释器被称之为引擎. 将引擎内置到网景导航者中. 微软: 做系统: IE浏览器 ECMA: js概述: Java...
HTML知识点
前端小菜
12-12 378
1、样式表 行间样式表： 内部样式表: 外部样式表: 2、边框 边框的方向：上右下左 边框的形状：非矩形（可以做一个三角 形） 3、背景 重要： background-attachment    背景图是否滚动      fixed     固定在浏览器可视区域内      scroll    跟随滚动条滚动 4、文字 多行文字测量行高： （
Python全网最全知识点总结
m0_63394128的博客
03-22 7799
计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在Python中，能够直接处理的数据类型有以下几种： 一、整数 Python可以处理任意大小的整数，当然包括负整数，在Python程序中，整数的表示方法和数学上的写法一模一样，例如：1，100，-8080，0，等等。 计算机由于使用二进制，所以，有时候用十六进制表示整数比较方便，十六进制用0x前缀
全网最详细的Spring入门教程
阿杰同学的博客
12-24 1100
首先入口是xml或者注解或者其他形式，要实现beanDefinationReader接口，然后 读取的时候，会将他们解析为bean的定义信息；beanFactory在加载bean信息实例化（底层用的反射）之前，spring加了一个接口beanFactoryPostProcessor,用作扩展用。beanFactory内部实例化bean之后，在要初始化bean对象之前，增加了一个一系列aware接口，将他的容器，以及工厂都暴露出来供使用者做扩展用。
全网最全javaweb知识总结项目servler,jsp简单易上手,新手来拿-源代码
12-23
这个"全网最全javaweb知识总结项目"提供的源代码涵盖了上述多个知识点，新手可以通过学习和实践，深入理解JavaWeb开发的核心概念和技术。同时，提供的软件/插件可能包括开发工具、IDE插件或其他辅助开发资源，有助于...
css中清除浮动的方式
qq_46472106的博客
08-09 144
清除浮动的方式 什么是浮动： 元素使用float:left/right;后，会脱离文档流，父级元素因此失去支撑（如果没有设置高度），下面的元素就会忽略父元素开始布局 常用方式： 浮动元素的父级元素：overflow:hidden; 浮动元素的父级元素： ::after{clear:both;content:’’;display:block;} 浮动元素的同级：添加一个空标签，并且设置clear:both; ...
Html相关知识点
十年呵护的专栏
12-02 806
web 基础的课程 html css javascript--js 后续 服务器端技术 jquery.ajax 静态页面(客户端技术) html:页面的内容用适当的元素显示 CSS:设置页面元素的外观/样式 Js:页面元素添加动态的显示效果 开发环境:记事本,文本编辑器 运行环境: 浏览器 动态页面,服务器端技术:提交 JSP PHP ASP.NET html课程...
HTML基础知识点
weixin_43827227的博客
02-12 1162
前言 html的基础知识不难，但大多都是记忆部分，故整理了一下知识点，以后忘记的时候方便重新捡起来。知识点并非是我原创，是我看的黑马程序员javaweb系列里自带的，但与视频还是有一定的出入，我边看视频边细化知识点，然后填充对应的知识点使其更加简单易懂，毕竟这篇博客的目标对象是什么都不懂的新手和像我一样学了以后过段时间就忘得干干净净的人orz。下面进入正题。 目录 前言 【内容：html基...
HTML知识点总结
weixin_45239190的博客
08-05 335
HTML学习前置知识 1.前后端分离 目前企业级项目都是基于前后端分离的项目 java ssh ssm jsp（前端页面） 前端：页面的重构（HTML、CSS、JS）+数据交互（使用工具和后台服务交互） 后端工程师：java =>接口 2.B/S架构（ Browser/Server，浏览器/服务器模式） 基于：浏览器 = 服务器 校园官网：浏览器 = 学校服务器 学生管理系统：浏览器 = 公司服务器 ...
Html相关知识点大纲&注意点
barbed的博客
08-08 284
Html学习知识点大纲&注意点 这几天学习了html，做一下知识点的大纲，方便学习以及回顾。 在学习和使用html的过程中，还有一些是我们需要注意的点。 比如 1、块级元素和行内元素可以放到块级元素内，块级元素不可以放到行内元素内（也不是真的不可以，只是最好不要把块级元素放进行内元素内）。 2、块级元素和行内元素是可以相互转化的。 3、块级元素，独占一行，设置宽高有效。行内元素，与其他行内元素共享一行，设置宽高无效。img，元素既不是块级元素页不是行内元素。 ...
学习HTML的知识点总结
Zrf2191318455的博客
11-01 3010
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
HTML全套基础知识点（代码式讲解）
Jan's的博客
10-05 1060
HTML大致框架 <html> <!-- HTML语言有多个版本，比如HTML4、XHTML2.0、HTML5 HTML5是现在常用的版本--> <!-- !DOCTYPE属性是文档声明属性可以告诉网页当前语言使用的是什么版本，比如下面 --> <!DOCTYPE HTML> <!-- HTML默认为HTML5，所以我们直接<!DOCTYPE HTML> --> <!-- 这是
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值