【前端学习日志】HTML表格&表单&注册页面案例+CSS选择器

编程语言 2023-07-01 22:14:31 阅读次数: 0

今日学习

一、HTML部分

在这里插入图片描述

1.表格的基本语法

        <tr> <td>姓名</td>  <td>性别</td> <td>年龄</td> </tr>
        <tr> <td>甲</td>  <td>男</td> <td>18</td> </tr>
        <tr> <td>乙</td>  <td>女</td> <td>20</td> </tr>
        <tr> <td>丙</td>  <td>男</td> <td>19</td> </tr>

2.表头单元格标签

    <tr> <th>姓名</th>  <th>性别</th> <th>年龄</th> </tr>
    <tr> <td>甲</td>  <td>男</td> <td>18</td> </tr>
    <tr> <td>乙</td>  <td>女</td> <td>20</td> </tr>
    <tr> <td>丙</td>  <td>男</td> <td>19</td> </tr>

3.还是表头单元格标签

    <table align="center" border="1" cellpadding="20" cellspacing="0" width="2s">
        <tr> <th>姓名</th>  <th>性别</th> <th>年龄</th> </tr>
        <tr> <td>甲</td>  <td>男</td> <td>18</td> </tr>
        <tr> <td>乙</td>  <td>女</td> <td>20</td> </tr>
        <tr> <td>丙</td>  <td>男</td> <td>19</td> </tr>
    </table>

效果如下：

4.小说排行榜案例

代码太长了我直接放结果图了
效果如下：

在这里插入图片描述

5.合并单元格

 <table width="500" height="249" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td> </td> <td colspan="2"> </td> 
            </tr>
 
            <tr> <td> </td> <td> </td> <td> </td> </tr>
            <tr> <td> </td> <td rowspan="2"> </td> <td> </td> </tr>
            <tr> <td>  </td> <td> </td> </tr>

效果如下：

在这里插入图片描述

6.无序列表

<body>
    <h4>您喜欢的食物？</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>

效果如下：
在这里插入图片描述

7.有序列表

    <h4>您喜欢的食物？</h4>
    <ol>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ol>

效果如下：
在这里插入图片描述

8.自定义列表

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

效果如下：
在这里插入图片描述

9.表单域

    <form action="demo.php" method="post" name="name1">
        <!-- 学习基础时暂时不用表单域提交数据，协商from标签即可 -->
        <!-- action传数据 method传输方法 name区分姓名 -->
    </form>

10.Input表单元素

   <form action="demo.php" method="post" name="name1">
        <!-- text文本框，用户可以在里面输入任何字 -->
        <!-- maxlength设置最大值 -->
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br />
        <!-- password密码框，用户看不见输入的密码 -->
        密码：  <input type="password" name="password"> <br />
        <!-- radio单选按钮，实现选择  -->
        <!-- name是表单元素名字 这里性别单选按钮必须有相同的名字name才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked，当页面打开的时候默认选中 -->
        性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br />
        <!-- checkbox多选按钮，实现多选 -->
        爱好：
        吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打豆豆<input type="checkbox" name="hobby"> <br />
        <input type="radio" name="agree" value="agree" checked="checked">我同意此条款 <br />
        <!-- submit提交按钮/reset重置 -->
        <input type="submit" value="免费注册"> 
        <input type="reset"  value="重置">
        <!-- button普通按钮 后期结合JS一起使用 -->
        <input type="button" value="获取短信验证码"> <br />
        <!-- file文件上传 -->
        <input type="file" value="上传头像">
    </form>

效果如下：
在这里插入图片描述

11.lable标签

    <label for="text">用户名：</label><input type="text" id="text" > <br />
    性别：
    <label for="nan">男</label><input type="radio" id="nan">
    <label for="nv">女</label><input type="radio" id="nv">

lable标签效果如下：
光标挪到字体时也能选中radio

12.下拉表单

    籍贯：
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">贵州</option>
    </select>

效果如下：
在这里插入图片描述

13.文本域

    <form >
        留言：
        <textarea cols="50" rows="5">请留言</textarea>
    </form>

效果如下：
在这里插入图片描述

14.注册页面案例

    <h3>青春不常在，抓紧谈恋爱</h3>
    <form action="demo.php" method="post" name="name1">
        姓名：
        <input type="text" value="请输入姓名" maxlength="6" name="username"> <br />
        性别：
        <input type="radio" value="男" name="sex" id="man">
        <label for="man">男</label>
        <input type="radio" value="女" name="sex" id="woman">
        <label for="woman">女</label> <br />
        生日：
        <select>
            <option>2000</option><option>2001</option><option>2002</option>
            <option>2003</option><option>2004</option><option>2005</option>
        </select>
        <select>
            <option>1</option><option>2</option><option>3</option>
            <option>4</option><option>5</option><option>6</option>
            <option>7</option><option>8</option><option>9</option>
            <option>10</option><option>11</option><option>12</option>           
        </select>
        <select>
            <option>1</option><option>2</option><option>3</option>
            <option>4</option><option>5</option><option>6</option>
            <option>7</option><option>8</option><option>9</option>
            <option>10</option><option>11</option><option>12</option>           
        </select>
        <br />
        所在地区：
        <input type="text" name="adress" value="请填写地址"><br />
        婚姻状况：
        <input type="radio" value="未婚" name="option" id="wei">
        <label for="wei">未婚</label>
        <input type="radio" value="已婚" name="option" id="yi">
        <label for="yi">已婚</label>
        <input type="radio" value="离婚" name="option" id="li">
        <label for="li">离婚</label> <br />
        学历：
        <input type="text" name="xueli" value="请填写学历"><br />
        喜欢的类型：
        <input type="checkbox" name="hobby" id="wumei">
        <label for="wumei">妩媚的</label>
        <input type="checkbox" name="hobby" id="keai">
        <label for="keai">可爱的</label>
        <input type="checkbox" name="hobby" id="xianrou">
        <label for="xianrou">小鲜肉的</label>
        <input type="checkbox" name="hobby" id="all">
        <label for="all">都喜欢</label>
        <br />
        自我介绍
        <textarea>自我介绍</textarea><br />
        <input type="submit" value="免费注册">
        <input type="radio" name="agree" checked="checked" >我同意注册条款和会员加入标准
        <br />
        <a href="https://www.bilibili.com/video/BV1uT4y1P7CX/?spm_id_from=333.788.videocard.0.com" target="_blank">我是会员，立即登录</a>
        <h5>我承诺</h5>
        <ul>
            <li>已满十八岁，单身</li>
            <li>抱着严肃的态度</li> 
            <li>真诚寻找另一半</li>
        </ul>
    </form>

效果如下：
在这里插入图片描述

以上，html部分学完
开始进入css的学习

二、CSS部分

在这里插入图片描述

1.CSS标签选择器

    <style>
        /* 标签选择器：写上标签名 */
        p{
      
      
            color: rgb(146, 188, 103);
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <p>我是段落</p>
    <ul>
        <li>我是ul里面的li</li>
    </ul>
    <ol>
        <li>我是ol里面的ol</li>
    </ol>

效果如下：
在这里插入图片描述

2.类选择器

    <style>
        .bule{
      
      
            color: deepskyblue;
        }
        .red{
      
      
            color: brown;
        }
    </style>
</head>
<body>
    <!-- .类名{属性1，属性值1} -->
    <ul>
        <li class="bule">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li>江南</li>
    </ul>

效果如下：
在这里插入图片描述

3.利用类画三个盒子

    <style>
        .one{
      
      
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
        .two{
      
      
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="one"></div>

效果如下：
在这里插入图片描述

4.类选择器的多命名使用

 <style>
        .red{
      
      
            color: firebrick;
        }
        .font35{
      
      
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华 </div>

5.id选择器

    <style>
        /* 只能调用一次 */
        #pink{
      
      
            color:pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔—杰克逊</div>

6.通配符选择器

    <style>
        *{
      
      
            color:darkmagenta;
        }
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>

7.文字属性

在这里插入代码片  <style>
    p{
      
      
        /* 字体 */
        font-family: '宋体';
        /* 粗细 */
        font-weight: 400;
        /* 大小 */
        font-size: 30px;
        /* 样式 （正常Or倾斜）*/
        font-style:italic;
        /* 复合属性：简写的方式 */
        /* font: font-style font-weight font-sizw/line-height font-family; */
        /* font:italic 700 16px/20px '微软雅黑' */
        /* 文字对齐 */
        text-align: center;
        /* 装饰文本 */
        text-decoration: underline;
        /* 文字缩进 */
        text-indent: 2em;
        /* 文本间距 */
        line-height: 26px;
    }
    </style>

8.新闻案例

效果如下：
在这里插入图片描述

三、写在最后

今天明显比昨天学的多了
省略了很多做详细笔记的时间（。）
目前是觉得没有什么难度的，只是标签太多容易忘

在这里插入图片描述明天见朋友们~

猜你喜欢

转载自blog.csdn.net/P9ulp/article/details/125761610
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022