html基础

已于 2024-03-15 20:41:50 修改
阅读量185 收藏
点赞数 1
文章标签： html 前端 javascript
于 2024-03-15 20:39:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64746086/article/details/136748590
版权

 1.注册

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>

<body>
    <div align="center">
        <table border="1px" cellspacing="0" cellpadding="0">
            <tr>
                <h1>用户注册</h1>
            </tr>
            <form action="URL" method="post">
                <tr>
                    <td>用户名：<input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>头像: <input type="file" name="photo"></td>
                </tr>
                <tr>
                    <td>密码：<input type="text" name="password"></td>
                </tr>
                <tr>
                    <td>
                        性别:<input type="radio" name="gender">男
                        <input type="radio" name="gender">女
                    </td>
                </tr>
                <tr>
                    <td>爱好：打篮球<input type="checkbox" name="habbit">放风筝
                        <input type="checkbox" name="habbit">踢足球<input type="checkbox" name="habbit">
                    </td>
                </tr>
                <tr>
                    <td>其它<input type="checkbox" name="habbit"><input type="text" name="habbit" id=""></td>
                </tr>
                <tr>
                    <td>
                        省份：<select name="cars" id="cars">
                            <option>陕西</option>
                            <option>北京</option>
                            <option>上海</option>
                            <option>贵州</option>
                        </select>
                    </td>
                </tr>
                <tr><button type="submit">点击提交</button></tr>
                <td>
                    自我介绍：<input  type="text" style="width:200px; height:150px;" />
                </td>
            </form>

        </table>
    </div>
</body>

</html>

通过div调整位置 通过表格划分输入框

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>
</head>
<body>
    <h3>工商银行电子汇款单</h3>
    <table border="1" cellspacing="0" cellpadding="0" width="1000px">
        <tr>
            <td colspan="2"><strong>回单类型</strong></td>
            <td style="width: 300px;">网上转账汇款</td>
            <td colspan="2"><strong>指令序号</strong></td>
            <td style="width: 300px;">1231231231231231231321</td>
        </tr>
        <tr>
            <!-- style采用text-align让字体居中 -->
            <td rowspan="4" style="width: 20px; text-align: center;"><strong>收款人</strong></td>
            <td>户名</td>
            <td>老牛</td>
            <td rowspan="4" style="width: 20px; text-align: center;" ><strong>付款人</strong></td>
            <td>户名</td>
            <td>老文</td>
        </tr>
        <tr>
            <td><strong>卡号</strong></td>
            <td>1</td>
            <td><strong>卡号</strong></td>
            <td>2</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>西安</td>
            <td>地区</td>
            <td>北京</td>
        </tr>
        <tr>
            <td><strong>网点</strong></td>
            <td>陕西西安</td>
            <td><strong>网点</strong></td>
            <td>北京北京</td>
        </tr>
        <tr>
            <td colspan="2"><strong>币种</strong></td>
            <td>人民币</td>
            <td colspan="2"><strong>钞汇标志</strong></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><strong>金额</strong></td>
            <td>100元</td>
            <td colspan="2"><strong>手续费</strong></td>
            <td>0.1元</td>
        </tr>
        <tr>
            <td colspan="2"><strong>合计</strong></td>
            <td colspan="4">人民币（大写）： 壹百元整</td>
        </tr>
        <tr>
            <td colspan="2"><strong>交易时间</strong></td>
            <td><i>1999-99-99</i></td>
            <td colspan="2"><strong>时间戳</strong></td>
            <td><i>1999-99-99</i></td>
        </tr>
    </table>    
    <p>票据打印时间：1999-99-99  00：01：00</p>
    <p><del>票据打印单位:北京北京</del></p>
    <p>操作员：大鸟</p>
</body>
</html>

rowspan:所占列数

colspan:所占行数

3.古诗词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗词</title>
</head>
<body>
    <div style="float: left;">
        <img src="http://www.exam58.com/uploads/allimg/140107/200T33I9-0.jpg" >
    </div>
    <div>
        <h3 align="center"> 滁州西涧</h3>
        <p align="center">韦应物</p>
        <p align="center">独怜幽草涧边生，上有黄鹂深树鸣。</p>
        <p align="center">春潮带雨晚来急，野渡无人舟自横。</p>
    </div>

</body>
</html>

4.豆瓣电影 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣电影</title>
</head>

<body>
    <h1>热门电影</h1>
        <p><div>  最近热门  电影  热门  最新  豆瓣高分  冷门佳片  华语  欧美  日韩 </div></p>

    <table border="1px" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2902498511.webp" alt=""><br>无敌舒克和贝塔
            </td>
            <td><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2902227445.webp" alt=""><br>沙丘2</td>
            <td><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2903145026.webp" alt=""><br>第二十条</td>
            <td><img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2903717056.webp" alt=""><br>蜘蛛夫人</td>
        </tr>
    </table>
</body>

</html>

图片来自豆瓣 侵权必删（邮箱 yirenyikougua@foxmail）

　　0.0　　
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础
11-02
HTML基础 ppt
HTML基础知识点
qq_40046544的博客
07-27 8224
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6036
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
全网最全HTML基础
a1085653724的博客
04-20 4903
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
头歌-HTML基础
somewon的博客
03-06 8980
四川师范大学 头歌 web应用开发
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
HTML基础之表单制作
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 658
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 327
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 128
HTML,CSS,JavaScript,DOM的理解
python+pytest+pytest-html+allure集成测试案例
codelearning的专栏
05-21 230
为pytest-html的参数，运行测试后，会在当前路径下生成report.html的报告，同时html集成了CSS样式内容。下面是python+pytest+pytest-html+allure四个组件同时集成使用的简单案例。src/main.py文件内容如下，实现一个接口，通过requests的get方法请求测试站点的资源。为allure-pytest的参数，指定allure结果文件的路径。由于测试站点在国外，测试时偶尔会出现网络问题，可以多运行几次测试。文件，指示当前文件夹为一个包。
5.小程序页面布局 - 记账页面(名目布局、绘制键盘、引用picker时间选择组件)
KelvinLiu
05-18 795
记账小程序的记账页面，flex布局，自定义键盘，选择图片加样式提交
媒体查询：响应式设计的核心
最新发布
aike13ky的博客
05-21 220
媒体查询是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、设备类型、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕尺寸自动调整页面的布局、字体大小、图片尺寸等，从而为用户提供更加舒适和便捷的浏览体验。规则来定义条件表达式。条件表达式可以是设备的媒体类型（如。媒体查询的语法非常简洁明了，它使用。等）以及逻辑运算符（如。等）、设备的特性（如。
html基础手册下载
12-31
你可以在网上找到很多关于HTML基础手册的下载资源。可以在搜索引擎上输入关键词“HTML基础手册下载”，然后浏览搜索结果找到适合自己的下载链接。同时，你也可以在一些知名的学术网站或者技术论坛上寻找HTML基础手册...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值