HTML 案例

最新推荐文章于 2024-08-12 21:44:16 发布
最新推荐文章于 2024-08-12 21:44:16 发布
阅读量31 收藏
点赞数
分类专栏： HTML+CSS 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55932637/article/details/134487419
版权 

<!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>
    <h4>青春不常在</h4>
    <table width="700" >
        <!-- 第一行 性别  女  男-->
        <tr>
            <td>
                性别:
            </td>
            <td>
                <!-- 添加图片和文字到label里，可以增加用户体验，点击图片或文字就可以选择性别 -->
                <input type="radio" name="sex" id="nv"> 
                <label for="nv"> <img src="women.jpg" alt="" width="20">  女</label>

                <input type="radio" name="sex" id="nan"> 
                <label for="nan"> <img src="man.jpg" alt="" width="20">  男</label> 
                 
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2001</option>
                    <option value="">2001</option>
                    <option value="">2003</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">01</option>
                    <option value="">02</option>
                    <option value="">03</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区:</td>
            <td> 
                <input type="text" value="山东">        
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked"> <label for=""> 未婚</label> 
                <input type="radio" name="marry"> <label for="">已婚</label> 
                <input type="radio" name="marry"> <label for="">离婚</label> 
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>
                学历:
            </td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <!-- 第6行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love" id=""> 可爱的
                <input type="checkbox" name="love" id=""> 妩媚的
                <input type="checkbox" name="love" id=""> 小鲜肉
                <input type="checkbox" name="love" id="" checked="checked"> 都喜欢
            </td>
        </tr>
        <!-- 第7行 -->
        <tr>
            <td>自我介绍</td>
            <td><textarea name="" id="" cols="20" rows="5"></textarea></td>
        </tr>
        <!-- 第8行 -->
        <tr>
            <td></td>
            <td><input type="submit" name="" id="" value="免费注册"></td>
        </tr>
        <!-- 第9行 -->
        <tr>
            <td></td>
            <td><input type="checkbox" name="" id="" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第10行 -->
        <tr>
            <td></td>
            <td><a href="#">我是会员，立即登录</a></td>
        </tr>
        <!-- 第10行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>单身</li>
                    <li>抱着严肃的态度</li>
                </ul>
            </td>
        </tr>

    </table>
    
    
</body>
</html>

帝吃藕和
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
我的电子相册网页HTML案例
blotemj.blog.csdn.net
07-13 1万+
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta baidu-gxt-verify-token="2db4e1f7e98ac9f0df41cf01eb606765"> <title>我的电子相册</title> <scr...
html5效果案例,10个优秀HTML5网站案例赏析
weixin_29740913的博客
06-03 3598
随着Adobe的弃Flash转投HTML5，HTML5又开始吸引着大众的目光。与现在使用的HTML标记语言相比，HTML5有更多的标签和属性，使用更为灵活，功能更为强大。现在已经有很多前沿的HTML5网站开始使用HTML5，本文收集整理出了10个非常优秀的HTML5网站。那么，什么才是优秀的HTML5网站？因为HTML5还没有成为国际标准，旧的浏览器还无法支持HTML5，所以优秀的HTML5网站示...
HTML案例
gezongbo的博客
02-24 2207
HTML 基础案例案例1 标题和超链接案例2 表格案例3 增加管理员案例4 修改个人信息 案例1 标题和超链接 <!DOCTYPE html> <html> <head> <title>第一个HTML文档</title> <!-- 设置页面中文的显示编码--> <meta charset="UTF-8"/>
html案例
ho622的博客
03-04 2313
案例1 01.第一个HTML文件.html <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> [外链图片转存e\案例1...
HTML案例之注册页面
rihjyy的博客
02-07 1万+
HTML案例之注册页面 经过前面的学习，我们已经学了很多的标签和语法了，HTML的学习即将告一段落，我们一起来做一个综合的练习：做一个简单的小说网站的注册页面。 废话不多说，直接上代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
HTML案例：旅游网站首页
weiyoo55的博客
09-02 6538
案例：旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格，则使用 3.如果某一行有多个单元格 <tr> ​ <td> ​ <table> </table> ​ </td> </tr> 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
HTML案例—搜索框
Cap07博客
11-21 6946
【代码】HTML案例—搜索框。
HTML入门学习的案例
itboy
02-25 1940
案例1：hello.html <html> <body> <title>html技术</title> </body> <body> hello </body> </html> 案例2：第一个html.html <html> <head> <meta...
HTML入门学习笔记+详细案例
热门推荐
Biteht的博客
04-22 1万+
✨HTML入门学习笔记+详细案例 作者介绍: 🎓作者:偷偷敲代码的青花瓷🐱‍🚀 👀作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩🤳,今天和大家分享的章节是HTML基础,如果有错误❌,欢迎指正哟😋,咋们废话不多说,跟紧步伐,开始学习吧~😊 文章目录1.什么是HTML2.入门实例3.HTML标签详解3.1 标题标签3.2 段落标签3.3 换行标签3.4 格式化标签3.5 链接标签外部链接内部
html案例：导航栏布局案例
I'm LINKSINKE
06-22 2782
要求 实现一个简单的导航菜单，没有子菜单。 代码如下： <!doctype html> <html lang="zh-Han-cmn"> <head> <meta charset="UTF-8"> <title>导航栏布局案例</title> <style type="text/css" rel="styleshe...
一号店网站HTML案例
05-11
【一号店网站HTML案例】是一个非常适合初学者进行实践和提升HTML及CSS3技能的资源。这个案例涵盖了构建电商网站的基本元素和设计技巧，是检验学习成果并深化理解的理想平台。 HTML（HyperText Markup Language）是...
我的html案例
07-10
这个“我的html案例”可能是一个学习项目，旨在展示HTML的基本用法，特别是如何构建一个登录和注册页面，这是许多网站的核心功能。 HTML由一系列的元素组成，每个元素都由标签包裹，比如`<html>`、`<head>`、`...
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1584
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
html--前端
m0_60274660的博客
08-07 369
只有body中的标签的内容才会输出到中断；如果要看script标签中的javascript代码的输出，需要按F12,点击Console查看。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 585
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
html复习
m0_73280507的博客
08-12 642
Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。外链选择，友站友情链接。
html实现funnel图
最新发布
Debug yourself!
08-12 614
这些方法中，使用JavaScript库（如ECharts）是最强大且灵活的，可以处理复杂的数据和交互。如果只是简单的静态漏斗图，CSS方法也可以满足需求。这是最简单和推荐的方式，因为这些库提供了内置的漏斗图功能，并且可以高度自定义。如果你不想依赖外部库，可以使用纯HTML和CSS来实现一个简单的漏斗图。你还可以使用SVG（矢量图形）直接绘制漏斗图。// 使用刚指定的配置项和数据显示图表。// 初始化echarts实例。// 指定图表的配置项和数据。
Html详解——Vue基础
敲厉害的燕宝的博客
08-07 1139
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
html案例隔行变色
05-26
以下是一个实现隔行变色的 HTML 案例： ```html <!DOCTYPE html> <html> 隔行变色 table { border-collapse: collapse; } td { padding: 10px; border: 1px solid black; } tr:nth-child...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值