html综合实例(二)-链接,表格,列表，表单,的使用

最新推荐文章于 2023-02-09 14:41:26 发布
最新推荐文章于 2023-02-09 14:41:26 发布
阅读量393 收藏 5
点赞数 3
分类专栏： 前端篇 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51670115/article/details/126645336
版权

文章目录

链接的使用

  • 代码及其注释
<!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>

    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank"> 腾讯 </a>
    target 打开窗口的方式 默认是 _self 当前窗口打开页面  _blank新窗口打开页面
    <a href="http://www.bkys.world" target="_self">bkys</a>

    <h4>内部链接：网站内部页面间的相互链接</h4>
    创建页面
    <a href="01-vscode创建页面.html" target="_blank">创建页面</a>

    <h4> 空链接 #</h4>
    <a href="#">空链接</a>

    <h4>下载链接 文件是.exe zip等</h4>
    <a href="1.zip">下载链接</a>

    <h4>网页元素的链接</h4>
    <a href="http://bkys.fun"><img src="111.jpg"/></a>
    
    <h4>锚点链接</h4>
    <a href="01-vscode创建页面.html" target="_blank">创建页面</a><br/>
 
    <!-- 我想喝咖啡 -->
    <!-- 这个公司没有年终奖的，兄弟们别指望了，别来了
    我写的这个代码一堆bug，你不用改了-->
    空格&nbsp;&nbsp;空格
    <!-- <p>这是一个段落标签    -->
     &lt; p &gt;

</body>
</html>
  • 效果展示
    在这里插入图片描述

表格的使用

  • 代码及其注释
<!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>
    <p>表格</p>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="700" heigth="300">
        <tr> 
            <th>排名</th> 
            <th>关键词</th> 
            <th>趋势</th> 
            <th>今日搜索</th> 
            <th>最近七日</th> 
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>123</td>
            <td>456</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> </td>

        </tr>
               
    </table>

</body>
</html>
  • 效果展示
    在这里插入图片描述
表格之合并单元格
  • 代码及其注释
<!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>
    
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="700" heigth="300">
        <thead> 
            <tr> 
                <!-- <th></th>  -->
                <th colspan="2"></th> 
                <th></th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <td></td>
                <td></td>
            </tr>
        </tbody>            
        </table>
        
</body>
</html>
  • 效果展示
    在这里插入图片描述

列表的使用

  • 代码及其注释
<!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>
    <h1>无序列表</h1>
    <h4>你喜欢得食物</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>罐头</li>
        <li>
            <P>
                world
            </P>
        </li>
    <ul>

    <h1>有序列表</h1>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>张 300</li>
        <li>张 200</li>
        <li>张 100</li>
    </ol>

    <h1>自定义列表</h1>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>

</body>
</html>
  • 效果展示
    在这里插入图片描述

表单的使用

  • 代码及其注释
<!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>表单元素</title>
</head>
<body>
   
     <form action="xxx.php" method="get">
         <!-- text 文本框 -->
        <label for="text">用户名: </label> <input type="text" id="text" name="username" value="请输入用户名" maxlengh="6"><br/>
        <!-- password 密码框 -->
        密码: <input type="password" name="pwd"><br/>
        <!-- radio 单选框 -->
        <!-- name 表单元素的名字 -->
        <!-- 单选按钮和复选框可以设置默认属性check属性 -->
        性别： 男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"> <br>
        <!-- checkbox 复选框 -->
        爱好： 吃饭<input type="checkbox" name1="hobby"> 睡觉<input type="checkbox" name="hobby"> 学习<input type="checkbox" name="hobby">
        <br>
        <!-- 普通按钮 button  后期结合js-->
        <input type="button" value="获取短信验证码">
        <input type="submit" value="免费注册">
        <!-- 重置  -->
        <input type="reset" value="重新设置">
        <br>
        <!-- 文件域 上传文件 -->
        上传图像：<input type="file"><br>
        <!-- 下拉表单元素 -->
        籍贯：
        <select>
            <option>陕西</option>
            <option>上海</option>
            <option>北京</option>
            <option>大连</option>
            <option selected="selected">火星</option><br>
        </select>
        <!-- 文本域 -->
        意见反馈：<textarea cols="50" rows="5">反馈</textarea>

    </form>

</body>
</html>
  • 效果展示
    在这里插入图片描述
LibraFree
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1334
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
HTML系列之表格、表单综合案例
StayAlive1887的博客
07-01 1412
要求：用HTML实现下面的效果。要求：用HTML实现下面的效果。
Html表单与表格结合
weixin_45742613的博客
11-16 1516
表单、表格 html表单与表格的结合 <!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&gt
HTML列表、表格、表单、超链接、音视频标签、内嵌
shao_xuan_的博客
10-03 925
HTML列表、表格、表单、超链接、音视频标签、内嵌列表1、无序列表2、有序列表3、无序有序列表嵌套练习4、效果展示表格1、作用2、表格标签3、表格的常用属性表单1、用途2、标签3、注意事项4、表格表单页面布局练习5、效果展示超链接1、作用2、标签音频标签视频标签内嵌框架标签 列表 1、无序列表 标签符号:<ul></ul>用于页面中没有顺序的列举项。 格式：<ul type='值'></ul>type属性设置标号的类型。值如下： 取值 作用 d
HTML表单表格综合练习
qq_34416191的博客
06-06 2716
QQ注册 欢迎注册QQ账号 注册邮箱:  
html网页综合项目实战
12-07
index2.html和index3.html可能是对基本HTML结构的扩展或修改，可能涉及更复杂的布局、表格（）、列表（, , ）、表单（）以及交互元素，如按钮（）和输入框（）。这些元素和标签的使用，让网页具备了更多功能和交互性...
网页设计实验 综合实例
04-22
网页设计实验中的综合实例是将所学的网页制作技术整合并应用于实际的网页设计中，以创建一个简单而美观的页面。在这个实验中，我们主要涉及了以下知识点： 1. **表格布局**：首先，实验要求创建一个四行三列的表格...
《Dreamweaver-CC实例教程》教学大纲.docx
12-18
《Dreamweaver CC实例教程》是一本针对高职院校数字媒体专业学生的教材，旨在全面系统地教授如何使用Adobe Dreamweaver CC 2019进行网页设计。教学大纲围绕实际操作和理论知识相结合的方式展开，旨在培养学生的实战...
Html 网络编程实例(PDG).rar
07-09
在“wangye77”这个文件中，可能包含了分步骤的HTML编程实例，可能涵盖如何创建布局、添加图片、创建链接、处理表单数据等方面。这些实例将帮助初学者通过动手实践来加深对HTML的理解，同时也适用于有一定经验的...
Axure综合实例【axure8】.zip
最新发布
01-18
这个名为"Axure综合实例【axure8】.zip"的压缩包很可能包含了使用Axure RP 8版本创建的一系列综合实例，帮助用户学习和掌握如何高效地构建网站或应用的交互原型。 在Axure RP 8中，用户可以创建各种类型的原型，...
html---表格和表单的使用
橘子女侠
11-06 591
html—表格和表单的使用 1. 表格： 1.1 基本语法： &amp;amp;amp;lt;table&amp;amp;amp;gt; &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp;amp;lt;td&amp;amp;amp;gt;单元格内容&amp;amp;amp;lt;/td&amp;amp;amp;gt; ... &amp;amp;amp;lt;
HTML(二)列表与表格的使用
小王的博客
04-22 254
一、列表标签 二、表格标签 三、块级标签 四、网页的布局
HTML学习笔记二--表单及表格的结合使用个人简历制作
qq_45231291的博客
06-02 1869
一、表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
专注于Java领域开发 关注我 带你玩转Java
07-20 1509
学习了表格、图片、列表、超链接这些标签 来做个表单练习
HTML中表格与表单的使用
SE_FUE_的博客
02-09 883
•table标签：表格整体上下合并→只保留最上的，删除其他•左右合并→只保留最左的，删除其他。•th标签：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示（替换掉td）②：1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来。•caption标签：表格整体大标签，默认在表格整体顶部居中位置显示。（表格结构标签写在table标签内部，表格标签内部用于包裹tr标签）①：1.使用label标签把内容（如：文本）包裹起来。•select标签：下拉菜单的整体。
【HTML】表单和表格配合案例
MY9_19的博客
04-20 1872
表单和表格配合案例 使用表格和表单相互嵌套，将表格实现可填写，效果图如下： Html示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>人员信息</title> <link rel="stylesheet" href="for_table.css"> </head> <body> <div
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2538
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
html如何运用表格，表单
zqq277的博客
06-02 342
示例如图的任务
HTML表格与表单
whhcs的博客
02-20 2595
目录HTMl表格与表单HTML表格表格常用标签表格常用属性表格demo实现效果实现代码HTML表单html表格与表单综合demo实现效果代码 HTMl表格与表单 HTML表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。   表格常用标签
HTML/CSS/JS 实战教程：综合案例与网站开发流程
3. **HTML页面布局**：使用HTML标记语言构建网页的基本框架，定义标题、段落、列表、表格等元素，同时通过`<div>`等容器元素实现页面布局。 4. **添加素材与功能**：将准备好的素材插入到HTML页面中，如使用`<img>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LibraFree

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值