HTML（day2）

最新推荐文章于 2024-06-18 21:42:26 发布
最新推荐文章于 2024-06-18 21:42:26 发布
阅读量198 收藏
点赞数
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61226216/article/details/122549710
版权

目标

 

表格标签

 

<body>
    <table>
        <tr> <td>姓名</td> <td>性别</td> <td>年龄</td></tr>
        <tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
        <tr><td>张学友</td> <td>男</td> <td>58</td></tr>
        <tr><td>黎明</td> <td>男</td> <td>57</td></tr>
    </table>
</body>

 

<body>
    <table>
        <tr> <th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
        <tr><td>张学友</td> <td>男</td> <td>58</td></tr>
        <tr><td>黎明</td> <td>男</td> <td>57</td></tr>
    </table>
</body>

 

 

 表格属性（了解）

 

 

 案例

 

<body>
    <table border="1" cellspacing="0" align="center" width="500" height="500">
        <tr><th>排名</th><th>关键字</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
        <tr><td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg"></td>
            <td>245</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="images/up.jpg"></td>
            <td>124</td>
            <td>4498489</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="images/up.jpg"></td>
            <td>2423</td>
            <td>87676</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="images/up.jpg"></td>
            <td>65464</td>
            <td>35434</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="images/up.jpg"></td>
            <td>78676</td>
            <td>34534</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="images/up.jpg"></td>
            <td>45323</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>

        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="images/up.jpg"></td>
            <td>237</td>
            <td>345354</td>
            <td><a href="#">贴吧</a> <a href="#">百度</a> <a href="#">百科</a></td>
        </tr>
    </table>
</body>

 

 表格结构标签

 

 

 合并单元格（难点）

 

 

 

<body>
    <table border="1" cellspacing="0" align="center" width="500" height="500">
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

 

 

 

 列表标签

 无序列表

 

 

 有序列表（理解）

 

 自定义列表

 

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

 

 

 表单标签

 

 

 

 

 

 

 

 

 

 

 

<body>
    <form>
        <!-- text 这里是文本框 可以输入字 -->
        用户名：<input type="text" name="usename" value="请输入用户名" maxlength="8"> <br>
        <!-- password 密码框 -->
        密码：<input type="password" name="pwd"> <br>
        <!-- radio 是单选按钮 可以实现多选一-->
        <!-- name是表单元素名字 这里性别单选按钮的name相同 才能实现多选一 -->
        <!-- 单选按钮和复选框 可以设置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" checked="checked"> <br>
        <!-- 点击了提交按钮 可以把form里表单元素里面的值 提交到后台服务器 -->
        <input type="submit" value="免费注册"> 
        <!-- 重置按钮可以还原我们表单元素默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button 后期搭配js使用 -->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 上传文件使用的 -->
        上传文件:<input type="file">
    </form>
</body>

 

<body>
    <label for="text">用户名:</label> <input type="text" id="text"> <br>
    <input type="radio" name="sex" id="sex1"><label for="sex1">男</label>
    <input type="radio" name="sex" id="sex2"><label for="sex2">女</label>
</body>

 下拉表单

<body>
    <form>
        籍贯:
        <select>
            <option>北京</option>
            <option selected="selected">河南</option>
            <option>天津</option>
            <option>上海</option>
            <option>江苏</option>
        </select>
    </form>
</body>

 

 

 文本域

 

 

 综合案例

 

<body>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="500">
    <form>
        <tr>
        <td>性别</td>
        <td><input type="radio" name="sec" id="nan"><label for="nan"><img src=images/man.jpg> 男</label>
        <input type="radio" name="sec" id="nv"><label for="nv"><img src=images/women.jpg> 女</label> </td>
        </tr>
        <tr>
        <td>生日</td>
        <td><select>
            <option selected="selected">请选择年</option>
            <option>2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
        </select>
        <select>
            <option selected="selected">请选择月</option>
            <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 selected="selected">请选择日</option>
            <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></td>
        </tr>
        <tr>
        <td>所在地区</td>
        <td><input type="text" value="河南安阳" maxlength="10"> <br>
        婚姻状况
        <input type="radio" name="sec" id="weihun" checked="checked"><label for="weihun">未婚</label>
        <input type="radio" name="sec" id="yihun"><label for="yihun">已婚</label>
        <input type="radio" name="sec" id="lihun"><label for="lihun">离婚</label></td>
        </tr>
        <tr>
        <td>学历</td>
        <td><input type="text" value="幼儿园" maxlength="5"> </td>
        </tr>
        <tr>
        <td>喜欢的类型</td>
        <td><input type="checkbox" name="leixing" id="wumei"><label for="wumei">妩媚</label>
        <input type="checkbox" name="leixing" id="jiaoxiu"><label for="jiaoxiu">娇羞</label>
        <input type="checkbox" name="leixing" id="kaifang"><label for="kaifang">开放</label>
        <input type="checkbox" name="leixing" id="qingchun"><label for="qingchun">清纯</label></td>
        </tr>
        <tr>
        <td>自我介绍</td>
        <td><textarea>自我介绍</textarea><br>
        </td>
        </tr>
        <tr>
        <td></td>
        <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" checked="checked">我同意注册条款</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">我是会员,立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </form>
    </table>
</body>

 

查阅文档

 

surprise126
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day2作业.html
08-01
day2作业.html
week2day2
02-18
week2day2
day01-HTML附件
07-23
day01-HTML附件
HTML5_day01
08-05
HTML5_day01:主要记录了sublime的信息以及安装，和Package Control的插件管理器，和Emmet插件的简略使用
community_day2
02-15
community_day2牛客社区项目
HTML前端
2302_77125952的博客
06-15 543
比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签。提供许多标签，不同标签功能不同，网页就是通过这些标签描述出来的，最终由浏览器解释运行我们看到的网页。HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。<标签 属性=“ ”/>完成一个特定的设置功能，没有标签体 换行标签。<开始标签>标签名</结束标签> 闭合标签（双标签）标签中可以有属性：可以标签属性。table标签：表格标签。tr标签：表格中的行。td标签：表格单元格。
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
weixin_42283461的博客
06-14 385
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
超文本标记语言（HTML）简介
一起coding，一起嗨。
06-15 507
超文本标记语言（HTML）简介
DAY02 HTML
adminstate的博客
06-15 800
HTML基础学习
【html】如何利用HTML+CSS制作自己的印章
weixin_56334307的博客
06-10 746
大家有没有尝试过用HTML和CSS制作自己的印章.首先印章圆形的边框。
HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)
weixin_42283461的博客
06-13 879
HTML静态网页成品作业(HTML+CSS)—— 家乡山西介绍网页(3个页面)
前段。html
lllzhou的博客
06-12 674
查看</a><a th:href="@{/user/create}">新增</a><a th:href="@{/}">返回</a><a th:href="@{/}">返回操作编辑用户
JavaFX HTMLEditor
最新发布
lrh122800的博客
06-18 155
HTMLEditor控件是一个富文本编辑器，具有以下功能。HTMLEditor类返回HTML字符串中的编辑内容。
HTML下雪/烟花
joe_g12345的博客
06-12 1525
html实现下雪效果效果
404 页面代码
梦寻汝的博客
06-12 375
【代码】404 页面代码。
HTML-CSS练习例子
pacong的博客
06-09 1334
HTML CSS 练习 https://icodethis.com 作为前端练习生。不敲代码只看，入门是很慢的，所以直接实战是学习前端最快的途径之一。 这个网站练习HTML CSS的，可以打开了解一下，可以每天打卡，例子简单，循序渐进，设计的也比较好看。 下面是练习，当然布局的方法有很多，下面是一种。 01基础 这是第一个练习，但是很多大佬做出了，很多不一样的效果 比如： 设计稿 代码 <!DOCTYPE html> <html lang="en"> <head&
html圆盘钟表纯js有解释【搬代码】
weixin_52001174的博客
06-15 822
/xy中的 x = a + b * Math.cos(angle);a + 位置a调整的是数字的位置，数字越大越向右下偏移；b的位置设置数字距离中心多远。使用的idear中的html编写。
HTML 全局属性介绍及示例
一起coding，一起嗨。
06-17 354
HTML 全局属性介绍及示例
HTML静态网页成品作业(HTML+CSS)—— 非遗皮影戏介绍网页(6个页面)
weixin_42283461的博客
06-12 1173
HTML静态网页成品作业(HTML+CSS)—— 非遗皮影戏介绍网页(6个页面)
11.作业 1、导入day02数据库 2、导入java项目 3、创建html页面4、编写测试代码自动化完成注册功能
05-24
1. 导入day02数据库： 首先需要在MySQL中创建一个名为day02的数据库，然后将day02.sql文件导入到该数据库中。可以使用以下命令： ``` mysql -u username -p day02 < day02.sql ``` 其中，`username`为MySQL的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值