html之编写表格(个人信息)

**

首先知道做表格的几个重要属性:

**
bgcolor:设置表格的背景色 ,有两种表达:#字母(如:#ffddee),颜色(如:white,blue,red)
align: 设置内容居中center,左对齐left,右对齐right
border:设置表格的边框
cellspacing:设置单元格和单元格之间的距离
width:设置表格的宽度
height:设置表格的高度
colspan:跨列数
rowspan:跨行数
caption:设置表格的标题信息

input是表单的组件,用于接受来自用户的数据,属性如下:
type用于设定组件类型,常用的有
text 单行文本框
password 密码框
file 附件选择器
radio 单选按钮
checkbox 复选按钮
submit 提交按钮
reset 重置按钮
data 日期控件

select用于表示下拉列表或列表,而option用于表示选项,常包含select中


代码:

在这里插入图片描述


预览:

在这里插入图片描述

  • 5
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的个人简介首页的HTML代码,使用div Css布局: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简介</title> <style> /* 头部 */ header { background-color: #333; color: white; padding: 20px; text-align: center; } /* 主体部分 */ .main { display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { font-size: 36px; margin-top: 0; } p { font-size: 18px; line-height: 1.5; text-align: center; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } img { max-width: 100%; height: auto; margin-top: 20px; } /* 底部 */ footer { background-color: #333; color: white; padding: 10px; text-align: center; position: absolute; bottom: 0; width: 100%; } </style> </head> <body> <header> <h1>张三的个人简介</h1> </header> <div class="main"> <img src="https://via.placeholder.com/200x200" alt="头像"> <p>大家好,我是张三。</p> <ul> <li><strong>年龄:</strong>25岁</li> <li><strong>学历:</strong>本科</li> <li><strong>职业:</strong>软件工程师</li> <li><strong>兴趣爱好:</strong>看电影、打游戏、旅游</li> </ul> </div> <footer> © 2021 张三 </footer> </body> </html> ``` 这个页面由三个部分组成:头部、主体和底部。头部包含一个居中的标题,底部包含版权信息。主体包含个人简介的内容,包括头像、介绍和一些信息,以及一个无序列表展示个人信息。利用flex布局进行主体部分的布局,使其在不同屏幕大小时具有良好的响应式体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值