博客
关于我
css基础07-表格和表单
阅读量:224 次
发布时间:2019-03-01

本文共 1316 字,大约阅读时间需要 4 分钟。

HTML/CSS基础知识

表格与布局

表格在网页中是展示数据的重要方式,但默认情况下表格是没有tbody标签的。如果需要添加表格的主体部分,可以直接在<table>标签中添加<tbody>标签,或者浏览器会自动为你生成。需要注意的是,<thead>用于表头,<tbody>用于表格主体。

表单元素

表单是网页中常见的交互元素,<form>标签用于定义表单,<input>用于文本输入,<select>用于下拉选择,<textarea>用于多行文本输入,<button>用于按钮。要提高表单的可用性,可以将相关的表单项组合在一个<fieldset>中,并为每个组添加描述性<legend>标签。

CSS单位rem

rem是一个相对单位,它的大小基于浏览器的默认字体大小(通常是16px)。以下是关于rem的一些常用知识:

  • 用户适应性布局:浏览器会根据屏幕尺寸调整网页布局,选择合适的字体大小、图片尺寸和按钮大小。
  • 根元素字体大小:如果你在<html>标签中设置font-size,所有使用rem的单位都会相应变化。
  • 常用值:大多数浏览器的默认字体大小是16px,因此1rem=16px12px=0.75rem10px=0.625rem。在移动端开发中,建议使用rem单位来实现响应式设计。

CSS默认样式

了解浏览器的默认样式可以帮助你快速搭建网页。以下是一些常用的默认样式:

  • 所有元素的marginpadding默认为0。
  • 链接标签<a>默认没有下划线和文本高亮,text-decoration: none;可以去掉这些样式。
  • 列表项<li>默认没有列表样式,可以用list-style: none;去掉。
  • 为了防止高度溢出,可以给容器元素添加box-sizing: border-box;样式。

移动端开发技巧

在移动端开发时,<html>标签的字体大小可以通过设置font-size: 10px;来调整。这会使得1rem=10px,从而可以通过调整<html>中的font-size来轻松实现页面缩放。这种方法特别适用于移动端,通过只修改<html>标签内的内容,可以快速生成不同屏幕尺寸的页面。

常用CSS属性补充

  • fieldset与legend<fieldset>用于将表单项分组,<legend>用于给分组添加描述。
  • rem单位转换:如果需要快速将px转换为rem,可以使用在线工具如www.ofmonkey.com/front/rem
  • ** viewport meta标签**:在<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">可以让页面适应不同屏幕尺寸。

快捷键参考

  • 按下+键可以快速输入一些常用标签。
  • 按下Ctrl+B可以快速插入链接标签。
  • 按下Ctrl+T可以快速插入表单标签。

以下是一个示例<html>文件的基本结构:

我的网页标题

请注意,以上示例仅供参考,具体情况请根据实际需求调整。

转载地址:http://sgjv.baihongyu.com/

你可能感兴趣的文章
nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)
查看>>
Nginx配置代理解决本地html进行ajax请求接口跨域问题
查看>>
nginx配置全解
查看>>
Nginx配置参数中文说明
查看>>
nginx配置域名和ip同时访问、开放多端口
查看>>
Nginx配置好ssl,但$_SERVER[‘HTTPS‘]取不到值
查看>>
Nginx配置如何一键生成
查看>>
Nginx配置实例-负载均衡实例:平均访问多台服务器
查看>>
Nginx配置文件nginx.conf中文详解(总结)
查看>>
Nginx配置负载均衡到后台网关集群
查看>>
ngrok | 内网穿透,支持 HTTPS、国内访问、静态域名
查看>>
NHibernate学习[1]
查看>>
NHibernate异常:No persister for的解决办法
查看>>
NIFI1.21.0_Mysql到Mysql增量CDC同步中_日期类型_以及null数据同步处理补充---大数据之Nifi工作笔记0057
查看>>
NIFI1.21.0_NIFI和hadoop蹦了_200G集群磁盘又满了_Jps看不到进程了_Unable to write in /tmp. Aborting----大数据之Nifi工作笔记0052
查看>>
NIFI1.21.0通过Postgresql11的CDC逻辑复制槽实现_指定表多表增量同步_增删改数据分发及删除数据实时同步_通过分页解决变更记录过大问题_02----大数据之Nifi工作笔记0054
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_根据binlog实现数据实时delete同步_实际操作04---大数据之Nifi工作笔记0043
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置binlog_使用处理器抓取binlog数据_实际操作01---大数据之Nifi工作笔记0040
查看>>
NIFI从MySql中增量同步数据_通过Mysql的binlog功能_实时同步mysql数据_配置数据路由_实现数据插入数据到目标数据库_实际操作03---大数据之Nifi工作笔记0042
查看>>
NIFI从MySql中离线读取数据再导入到MySql中_03_来吧用NIFI实现_数据分页获取功能---大数据之Nifi工作笔记0038
查看>>