H5+CSS+JS:链接，表格

最新推荐文章于 2022-07-11 20:58:00 发布
最新推荐文章于 2022-07-11 20:58:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 文章标签： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjhap/article/details/82179960
版权

链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
     <a href="http://www.jikexueyuan.com">点击我</a>
     <a href="http://www.baidu.com">
         <img src="images/2.jpg" width="400px" height="400px" alt="l00000ogoo">  <!--图片的长宽-->
     </a>
    <a name="tips">hello</a>         <!--name标签指定的文档内的链接-->
     <br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a href="#tips">跳转到hello</a>
</body>
</html>
  • name指定标签内的链接：回到顶部……

表格

  • 表格行和列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <caption>表1</caption>
    <tr>
        <th>0</th>
        <th>0</th>
        <th>0</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>
</body>
</html>

效果

  • 表格内的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <tr>
        <td>第一列</td>
        <td>第二列</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>
            我想吃了
        </td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

这里写图片描述

  • 单元格边距和单元格间距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" cellpadding="10">  <!--单元格边距-->
    <caption>边距变大</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" cellspacing="10">  <!--单元格间距-->
    <caption>间距变大</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

这里写图片描述

  • 背景颜色和背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<p>表格</p>
<table border="1" bgcolor="#7fff00">
    <caption>bgcolor</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
<br/>
<table border="1" background="images/1.png">
    <caption>background</caption>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr></tr>
</table>
</body>
</html>

这里写图片描述

mjhap
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表格样式CSS
09-13
表格设计样式，为CSS代码，可直接引用，但未对表格大小进行设置。
学生信息管理系统(html + js + css)
07-01
总结来说，"学生信息管理系统(html + js + css)"是一个集成了HTML结构、CSS样式和JavaScript交互的实例，它充分展示了前端技术在实际项目中的应用，是学习和提升Web开发技能的理想平台。通过这样的项目实践，开发者...
H5使用js追加表格进行操作
MissGentlemen的博客
12-01 1789
.table td { border: 1px solid black; width: 100px; background-color: white; } .table{ background-color: #000000; } 账号 密码 批量删除全选反选   用户名 密码 操作
H5+JS表格全选和删除
qq_34856792的博客
12-12 699
H5+JS表格全选和删除
CSS嵌入式样式表
weixin_33739541的博客
09-08 350
为什么80%的码农都做不了架构师？>>> ...
CSS链接、列表、表格和轮廓
smell201611010513的博客
04-09 192
1.CSS链接 1.1 设置链接样式 能够设置链接样式的CSS属性有很多种（例如color，font-family，background等等)。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。 链接的四种样式： a:link-普通的、未被访问的链接 a:visited-用户已访问的链接 a:hover-鼠标指针位于链接的上方（鼠标滑过链接） a:active-链接被点击的时刻 ...
HTML+CSS+JS超全参考手册
08-15
此外，还包括了图片`<img>`、链接`<a>`、表格`<table>`、表单`<form>`、多媒体`<audio>`和`<video>`等元素的使用方法和属性配置。 CSS（Cascading Style Sheets）则负责网页的样式设计，使网页具有美观的视觉效果。...
5套H5+bootstrap框架写的后台管理模板
03-18
4. 根据需要调整布局和组件，可能涉及修改CSS和JavaScript代码。 5. 集成后端逻辑，将模板与服务器端的数据和服务进行连接。 通过使用H5和Bootstrap构建的后台管理模板，开发者可以节省大量时间和精力，快速实现...
html5后端模板，html5+css
07-27
HPlus通常包含一系列预定义的页面布局、组件和小工具，如导航菜单、按钮、表格、图表、表单元素等，这些都是构建后台管理系统的基础元素。这样的模板极大地提高了开发效率，使得开发者可以快速构建出符合企业级标准...
最新H5大圣完整运营版源码+透视+完美控制+防反杀
06-19
1. HTML5游戏开发：利用HTML5、CSS3和JavaScript等技术，构建跨平台的网页游戏，可以在不同的浏览器和设备上运行。 2. 游戏逻辑与控制：游戏的核心算法和玩家操作响应，包括角色移动、战斗系统、游戏进程控制等。 3....
H5表单美化
10-26
h5+css3做的表单美化，方便修改，快来试试吧！！！！！！！！！
html+css实现数据图表的展示效果
09-25
一下收集分享的数据图表的展示效果，是完全用html和css来实现的。通过仔细研究学习这些案例对于我们学习css会有很大帮助的。
漂亮的表格css+html
06-27
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！@
js版本电子表格完整版
11-22
js版本电子表格，可用于在线显示文档，可参考已经实现的部分直接展现表格数据。
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
yzq0820的博客
07-11 5446
目录一、表格表单的随机选择效果展示（表单内容可以根据自己需要进行修改）1.H5的布局第一步：第二步：2.CSS布局3.JS的布局第一步：第二步：第三步：二、简单的随机点名效果展示（可以自己修改内容）1.H5布局2.CSS布局3.JS布局第一步：第二步：三、可以自己暂停的随机点名可以给整个表格内容设置一个内边距，里面的文字可以自己添加，这里用了英文乱码，没有任何的其他意义，知识一个展示效果。可以给整个表格内容设置一个内边距，里面的文字可以自己添加，这里用了英文乱码，没有任何的其他意义，知识一个展示效果。可以给
html5动态grid 表格,[CSS]Grid表格总结
weixin_39944638的博客
06-09 649
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？Css网格平常用到的时候还是蛮多的，并且十分的灵活的，但是我不太熟悉它的使用，而且总是忘记，所以在此稍微的记一下。一、对网格容器进行设置1.将HTML元素化为网格容器display: grid;你还可以将网格中的单元格也化成网格容器，形成网格中的网格。2.在网格中添加行或列grid-template-columns: 5...
grid之表格属性及css函数
cfyfcyf的博客
06-19 334
css函数 repeat fit-content minmax 1、repeat： 跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写 可用范围：grid-template-column，grid-template-row 实例：repeat（auto-fill，minmax（50px,100px）） auto-fill:以网格项为准自动填充， auto-fit：以网格容器为准自动...
Ajax+Css表格（转载）
天高地厚的专栏
12-18 1221
  并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。 并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格
第讲-css动态网站制作优秀文档.ppt
最新发布
11-14
CSS还可以实现网页的动态效果，例如动态菜单、动态表格等。 四、CSS的应用 CSS广泛应用于网页设计、网页开发、动态网站制作等领域。使用CSS可以制作出更加美观、更加实用的网页，提高用户体验。同时，CSS也可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值