web前端(html)练习

这篇具有很好参考价值的文章主要介绍了web前端(html)练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一题

web前端(html)练习,前端,html

1. 用户名为文本框,名称为 UserName,长度为 15,最大字符数为 20。

2. 密码为密码框,名称为 UserPass,长度为 15,最大字符数为 20。

3. 性别为两个单选按钮,名称为 sex,值分别为男和女,男默认选中。

4. 爱好是三个多选按钮,名称为 like,值分别为写作、听音乐、体育。

5. 省份为下拉框,名称为 province,选项的键-值对为 Key:陕西省,value:shaanxi ;Key:山西省,value:shanx;陕西省默认选中。
6. 自我介绍为多行文本框,名称为 intro,宽 25,高 5,默认值为“这个家伙什么也没留下”。

7. 提交按钮,名称为“send”,标签为“提交”。

8. 重置按钮,名称为“reset”,标签为“重置”。

9. 参照图使用表格定位表单。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
</head>
<body>
<form action="" method="post">
<table>
    <tr>
        <td value="UserName">用户名:</td>
        <td><input type="text" name="Username" placeholder="姓名"></td><br>
    </tr>
    <tr>
        <td value="UserPass">密码:</td>
        <td><input type="password" name="UserPass" placeholder="密码"></td><br>
    </tr>
    <tr>
        <td >性别:</td>
        <td><input type="radio" name="gender" checked value="男"> 男 <input type="radio" name="gender" value="女"> 女</td> <br>
    </tr>
    <tr>
        <td>爱好:</td>
        <td><input type="checkbox" name="like" value="写作" > 写作 <input type="checkbox" name="like" value="听音乐" > 听音乐 <input type="checkbox" name="like" value="体育" > 体育 </td><br>
    </tr>
    <tr>
        <td>省份:</td>
        <td><select name="province">
                <option  selected value="shaanxi"> 陕西省</option>
                <option value="shanx"> 山西省 </option>   
            </select></td> <br>
    </tr>
    <tr>
        <td>自我介绍:</td>
        <td><textarer name="intro" cols="25" rows="5"> 这个家伙什么也没留下 </textarer> </td><br>
    </tr>
    <tr>
        <td></td>            
        <td><input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置"></td>
</form>
</table>
</body>
</html>

web前端(html)练习,前端,html

第二题

web前端(html)练习,前端,html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>工商银行电子汇款单</title>
</head>
<body>
<table width="800" border="1" cellspacing="0">
<h1>工商银行电子汇款单<h1>
    <tr>
        <td width="200" colspan="2"><strong>回单类型</strong></td>
        <td width="400">网上汇款转账</td>
        <td width="200" colspan="2"><strong>指令序号</strong></td>
        <td width="400">HQH000000000013878172</td>
    </tr>
    <tr>
        <td rowspan="4"><strong>收款人</strong></td>
        <td >户名</td>
        <td>老牟</td>
        <td rowspan="4"><strong>付款人</strong></td>
        <td>户名</td>
        <td>老刘</td>
    </tr>
    <tr>
        <td width="130"><strong>卡号</strong></td>
        <td>000000000001</td>
        <td width="130"><strong>卡号</strong></td>
        <td>000000000002</td>
    </tr>
    <tr>
        <td width="130">地区</td>
        <td>南京</td>
        <td width="130">地区</td>
        <td>杭州</td>
    </tr>
    <tr>
        <td width="130"><strong>网点</strong></td>
        <td>工商江苏南京业务处理中心</td>
        <td width="130"><strong>网点</strong></td>
        <td>江苏徐州业务中心</td>
    </tr>
    <tr>
        <td width="200" colspan="2"><strong>币种</strong></td>
        <td>人民币</td>
        <td width="200" colspan="2"><strong>钞汇标志</strong></td>
        <td>钞票</td>
    </tr>
    <tr>
        <td width="200" colspan="2"><strong>金额</strong></td>
        <td>1.00元</td>
        <td width="200" colspan="2"><strong>手续费</strong></td>
        <td>0.57元</td>
    </tr>
    <tr>
        <td width="200" colspan="2"><strong>合计</strong></td>
        <td width="800" colspan="4">人民币(大写):壹元整</td>
    </tr>
    <tr>
        <td width="200" colspan="2"><strong>交易时间</strong></td>
        <td>2017年6月1日</td>
        <td width="200" colspan="2"><strong>时间戳</strong></td>
        <td>2017-06-01-13.00.00。0000</td>
    </tr>
</table>
<h2>票据打印时间:2017-06-01 15:00:12 <h2>
<h3><del>票据打印单位:江苏徐州业务中心</del><h3>
操作员:大曾
</body>
</html> 

web前端(html)练习,前端,html

第三题

web前端(html)练习,前端,html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>将进酒</title>
</head>
<body>
<h1>将进酒·君不见 唐 李白</h1>
<table>
<tr>
    <td><img src="libai.png" width="200" height="300"></td><br>
    <td >君不见,黄河之水天上来,奔流到海不复回。<br>

        君不见,高堂明镜悲白发,朝如青丝暮成雪。<br>

        人生得意须尽欢,莫使金樽空对月。<br>

        天生我材必有用,千金散尽还复来。<br>

        烹羊宰牛且为乐,会须一饮三百杯。<br>

        岑夫子,丹丘生,将进酒,杯莫停。<br>

        与君歌一曲,请君为我倾耳听。<br>

        钟鼓馔玉不足贵,但愿长醉不愿醒。<br>

        古来圣贤皆寂寞,惟有饮者留其名。<br>

        陈王昔时宴平乐,斗酒十千恣欢谑。<br>
        
        主人何为言少钱,径须沽取对君酌。<br>

        五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。</td>
</tr>
</table>
</body>    
</html>

第四题

web前端(html)练习,前端,html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>豆瓣电影</title>
</head>
<body>
<table>
<h1>热门电影板块</h1>
<hr size="5" color="black" width="1000" align="left">
<nav>最近热门电影  |  热门  |  最新  |  豆瓣高分  |  冷门佳片  |  华语  |  欧美  |  韩国  |  日本  |  更多>></nav>
<hr size="5" color="black" width="1000" align="left">
<tr>
    <td ><img src="猜火车.png" width="200" height="250"></td>
    <td ><img src="贝尔科实验.png" width="200" height="250"></td>
    <td ><img src="加州公路巡警.png" width="200" height="250"></td>
    <td ><img src="歌声不绝.png" width="200" leight="300"></td>
</tr>
<tr>
    <td>猜火车8.1</td>
    <td>贝尔科实验6.0</td>
    <td>加州公路巡警6.8</td>
    <td>歌声不绝6.3</td>
</tr>
<tr>
    <td><img src="明日的我与昨日的我.png" width="200" height="250"></td>
    <td><img src="速度与激情8.png" width="200" height="250"></td>
    <td><img src="疾速特攻.png" width="200" height="250"></td>
    <td><img src="金刚狼.png" width="200" height="250"></td>
</tr>
<tr>
    <td>明日的我与昨日的我</td>
    <td>速度与激情8</td>
    <td>疾速特攻</td>
    <td>金刚狼3:殊死一战</td>
</tr>
</table>
</body>
</html> 

web前端(html)练习,前端,html文章来源地址https://www.toymoban.com/news/detail-816866.html

到了这里,关于web前端(html)练习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【web前端基础之HTML】——HTML基本知识

    hn 元素用于HTML文件的标题输出,一行只显示一个(块元素),具有换行输出和加粗的效果。n的值是1~6,代表6个级别标题,1字号最大,随数字增大字号减小。 案例:demo1.html⬇️ 效果图⬇️ br 是个单标签,没有 结束标记,主要功能是让文字换行输出。 案例:demo2.html⬇️ 效

    2023年04月19日
    浏览(55)
  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(41)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(56)
  • web前端——HTML+CSS实现奥运五环

    web前端——HTML+CSS实现奥运五环  

    2024年02月05日
    浏览(51)
  • 前端 -- 基础 网页、HTML、 WEB标准 扫盲详解

    网页是构成网站的基本元素,它通常由 图片、链接、文字、声音、视频等元素组成。  通常我们看到的网页 ,常见以 .html 或  .htm  后缀结尾的文件, 因此俗称 HTML 文件  HTML 指的是 超文本标记语言,它是用来描述网页的一种语言  HTML 不是一种编程语言,而是一种 标记语

    2024年02月12日
    浏览(56)
  • web前端——HTML+CSS实现九宫格

    web前端——HTML+CSS实现九宫格

    2024年02月05日
    浏览(44)
  • 前端面试题-HTML、、web综合问题(四)

    1 css sprite是什么,有什么优缺点 概念:将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和元素尺⼨调节需要显示的背景图案。 优点: 减少 HTTP 请求数,极⼤地提⾼⻚⾯加载速度 增加图⽚信息重复度,提⾼压缩⽐,减少图⽚⼤⼩ 更换⻛格⽅便,只需在⼀张或⼏张图⽚上

    2024年02月13日
    浏览(52)
  • 前端面试题-HTML、HTTP、web综合问题(三)

    26 你做的⻚⾯在哪些流览器测试过?这些浏览器的内核分别是什么? IE : trident 内核 Firefox : gecko 内核 Safari : webkit 内核 Opera :以前是 presto 内核, Opera 现已改⽤Google - Chrome 的 Blink 内核 Chrome:Blink (基于 webkit ,Google与Opera Software共同开发) 27 div+css的布局较table布局有什么优点?

    2024年02月13日
    浏览(55)
  • 前端面试题-HTML、HTTP、web综合问题(二)

    14 WEB标准以及W3C标准是什么? 标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离 15 xhtml和html有什么区别? ⼀个是功能上的差别 主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ,并且浏览器也能快速正确地编译⽹⻚ 另外是书写习惯的差别 XHTML 元素必须被

    2024年02月12日
    浏览(51)
  • 前端面试题-HTML、HTTP、web综合问题(一)

    1 前端需要注意哪些SEO 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减⼩, title值强调重点即可,重要出现不要超过2次,⽽且要靠前,不同⻚⾯ title 要有所不同; description 把⻚⾯内容⾼度概括,⻓度合适,不可过分堆砌,不同⻚⾯description 有所

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包