HTML、CSS --javaweb学习笔记

记录一些重要的知识点

CSS引入方式

  • 行内样式:<h1 style="...">
  • 内嵌样式:<style>…</style>
  • 外联样式:xxx.css <link href="...">

颜色表示

  • 关键字:red、green.......
  • rgb表示法:rgb(255,0,0)、rgb(134,100,89)
  • 十六进制:#ff0008、#cccccc、#ccc

CSS选择器:用来选取需要设置样式的元素(标签)

<span>标签

  • <span>是一个在开发网页时大量会用到的没有语义的布局标签
  • 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

路径

  • 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
  • 相对路径:从当前文件开始查找。(./:当前目录,../:上级目录)

超链接标签:<a>

属性:

  • href:指定资源访问的url
  • target:指定在何处打开资源链接
  • self:默认值,在当前页面打开
  • blank:在空白页面打开

text-decoration:规定添加到文本的修饰,none表示定义标准的文本(去除超链接下划线)

视频标签:<video>

  • src:规定视频的url
  • controls:显示播放控件
  • width:播放器的宽度
  • height:播放器的高度

<br> 换行
<hr>水平线
<p>...</p>  段落标签
<strong>、<b>   加粗
&nbsp;  空格占位符
line-height:设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
 

div

  • 盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
  • 盒子模型组成:内容区域(content)、内边距区域(padding)、:边框区域(border)、外边距区域(margin)

布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签:<div><span>
特点:

div标签:

  • 一行只显示一个(独占一行)
  • 宽度默认是父元素的宽度,高度默认由内容撑开
  • 可以设置宽高(width、height)

span标签:

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高(width、height)

CSS属性:

  • width:设置宽度
  • height:设置高度
  • border:设置边框的属性,如:1pxsolid #080;
  • padding:内边距
  • margin:外边距  (上右下左)

注意:如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上-位置,如:padding -top、padding -left、padding -right

表格标签

场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表

<table>:定义表格
<tr>:定义表格中的行,一个<tr>表示一行
<th>:表示表头单元格,具有加粗居中效果
<td>:表示普通单元格

表单标签

场景:在网页中主要负责数据采集功能,如 注册、登录等数据采集
标签:<form>

表单项:不同类型的input 元素、下拉列表、文本域等

  • <input>:定义表单项,通过type属性控制输入形式
  • <select>:定义下拉列表
  • <textarea>:定义文本域

属性:

  • action:规定当提交表单时向何处发送表单数据,URL
  • method:规定用于发送表单数据的方式。GET、POST
    get:表单数据拼接在url后面,?username=java,大小有限制
    post:表单数据在请求体中携带,大小没有限制

表单项

  • <input>:表单项,通过type属性控制输入形式
  • <select>:定义下拉列表,<option>定义列表项。
  • <textarea>:文本域

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540272.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java快速构建飞书API消息推送、消息加急等功能

文章目录 飞书机器人自定义机器人自定义应用机器人 自定义应用发送消息普通文本 text富文本 post图片 image文件 file语音 audio视频 media消息卡片 interactive分享群名片 share_chat分享个人名片 share_user 批量发送消息消息加急发送应用内加急发送短信加急 发送电话加急spr…

【随身wifi京东金榜排名】格行vs华为vs上赞随身wifi哪款最好用?格行随身wifi官方正品,格行随身wifi怎么样?

第一名&#xff1a;格行随身wifi 综合分99.1 随身WiFi行业领跑品牌 &#xff0c;15年行业经验 &#xff0c;随身WiFi口碑榜第一名。轻便小巧&#xff0c;支持三网通&#xff0c;可以随时随地提供稳定高速的网络连接。使用目前先进的马维尔芯片&#xff0c;信号稳定&#xff0…

Unet++(pytorch实现)

Unet++网络 Dense connection Unet++继承了Unet的结构,同时又借鉴了DenseNet的稠密连接方式(图1中各种分支)。 作者通过各层之间的稠密连接,互相连接起来,就像Denset那样,前前后后每一个模块互相作用,每一个模块都能看到彼此,那对彼此互相熟悉,分割效果自然就会变好…

位像素海外仓管理系统对接ERP系统教程,一对一教学

在海外仓管理过程中&#xff0c;对接ERP系统的重要性不言而喻的。这种对接不仅能让数据实时共享&#xff0c;还能让海外仓管理者优化整个供应链管理流程。 因此&#xff0c;今天小编就来教大家&#xff0c;海外仓仓库系统是怎么对接ERP物流系统的&#xff1f; 1.分析需求 在对接…

2024年危险化学品经营单位安全管理人员证考试题库及试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位安全管理人员证考试题库及危险化学品经营单位安全管理人员试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff0…

Docker 镜像推送到docker hub

查看容器 #sudo docker ps -a commit容器为镜像 $ sudo docker commit d7b5e8d56a75 ubuntu_pytorch39_v4 #sha256: ********** 查看镜像信息 $ sudo docker images 登录 docker hub $ sudo docker login --username用户名 registry.cn-beijing.aliyuncs.com #密码 为…

2024年mathorcup数学建模思路及论文助攻

题目C题 物流网络分拣中心货量预测及人员排班 电商物流网络在订单履约中由多个环节组成&#xff0c;图1是一个简化的物流网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包裹按照不同流向进行分拣并发往下一个场地&#xff0c;最终使包裹到达消费者…

在 macOS 上安装 Jenkins

Jenkins常用命令&#xff1a; 安装最新的 LTS 版本&#xff1a; brew install jenkins-lts 安装特定的 LTS 版本&#xff1a; brew install jenkins-ltsYOUR_VERSION 启动Jenkins服务&#xff1a; brew services start jenkins-lts 重启Jenkins服务&#xff1a; brew services…

[大模型]Yi-6B-Chat FastApi 部署调用

Yi-6B-Chat FastApi 部署调用 环境准备 在 Autodl 平台中租赁一个 3090 等 24G 显存的显卡机器&#xff0c;如下图所示镜像选择 PyTorch–>2.0.0–>3.8(ubuntu20.04)–>11.8&#xff08;11.3 版本以上的都可以&#xff09;。 接下来打开刚刚租用服务器的 JupyterLab…

文件上传【2】--靶场通关

1.前端禁用js绕过 上传文件&#xff0c;进行抓包&#xff0c;没有抓到&#xff0c;说明这里的验证是前端js验证跳出的弹窗 禁用js后&#xff0c;php文件上传成功。 2.文件上传.htaccess 上传png木马后连接不上 代码中存在.htaccess&#xff0c;判断此时应该就是需要用到.htac…

Xlinx相关原语讲解导航页面

原语就是对FPGA底层器件的直接调用&#xff0c;与IP功能是类似的&#xff0c;将原语的参数变成IP配置时的GUI界面参数&#xff0c;可能会更加直观。IP的缺陷在于繁杂&#xff0c;比如SelectIO IP内部包含IDDR、ODDR等等IO转换的功能&#xff0c;如果只想使用单沿转双沿一个功能…

Python根据主播直播时间段判定订单销售额归属

写在前面&#xff1a;最近在群里看到一个这样的直播电商的场景觉得还是挺有趣的&#xff0c;于是就想用Python来实现。 需求描述&#xff1a;根据主播直播时间段结合销售订单的付款时间判断所属销售的归属 生成主播在线直播时间段数据 from datetime import datetime, timed…

图片合成二维码怎么实现?图片二维码的生成技巧

图片合成二维码如何制作呢&#xff1f;现在很多的二维码都会提供图片预览的功能&#xff0c;我们可以用手机扫描二维码来查看图片的信息&#xff0c;比如很多的产品信息、旅游攻略、产品海报等等类型经常会制作这种类型的二维码。 其实图片制作二维码的方法很简单&#xff0c;…

自建远程桌面服务器,控制免root安卓手机和pc

RustDesk是一个开源的远程桌面软件&#xff0c;它允许用户通过互联网在不同设备之间共享桌面和控制权限。这款软件以最少的配置提供了自托管和安全保障&#xff0c;是一个类似于TeamViewer的开源替代品​ (RustDesk)​。RustDesk支持在Windows、macOS、Linux、iOS、Android以及…

2023年MathorCup数学建模D题航空安全风险分析和飞行技术评估问题解题全过程文档加程序

2023年第十三届MathorCup高校数学建模挑战赛 D题 航空安全风险分析和飞行技术评估问题 原题再现 飞行安全是民航运输业赖以生存和发展的基础。随着我国民航业的快速发展&#xff0c;针对飞行安全问题的研究显得越来越重要。2022 年 3 月 21 日&#xff0c;“3.21”空难的发生…

基于ES-EKF的LiDAR/GNSS/IMU传感器融合轨迹估计(附项目源码)

基于改进EKF的LiDAR/GNSS/IMU传感器融合轨迹估计&#xff08;附项目源码&#xff09; 算法概述PredictionCorrectionES-EKF算法融合算法实现轨迹估计实验结果 最近在研究传感器融合&#xff0c;看到一个很好的开源项目&#xff0c;适合小白学习&#xff0c;为以后做传感器融合、…

再谈C语言——理解指针(一)

内存和地址 内存 在讲内存和地址之前&#xff0c;我们想有个⽣活中的案例&#xff1a; 假设有⼀栋宿舍楼&#xff0c;把你放在楼⾥&#xff0c;楼上有100个房间&#xff0c;但是房间没有编号&#xff0c;你的⼀个朋友来找你玩&#xff0c; 如果想找到你&#xff0c;就得挨个房…

Vue 移动端(H5)项目怎么实现页面缓存(即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置)keep-alive缓存及清除keep-alive缓存

一、需求 产品要求&#xff1a;Vue移动端项目进入列表页&#xff0c;列表页需要刷新&#xff0c;而从详情页返回列表页&#xff0c;列表页则需要缓存并且还原页面滚动条位置 二、实现思路 1、使用Vue中的keep-alive组件&#xff0c;keep-alive提供了路由缓存功能 2、因为我项…

《黑马点评》Redis高并发项目实战笔记(上)P1~P43

P1 Redis企业实战课程介绍 P2 短信登录 导入黑马点评项目 首先在数据库连接下新建一个数据库hmdp&#xff0c;然后右键hmdp下的表&#xff0c;选择运行SQL文件&#xff0c;然后指定运行文件hmdp.sql即可&#xff08;建议MySQL的版本在5.7及以上&#xff09;&#xff1a; 下面这…

冲刺2024年思维100春季线上比赛:做做历年思维100真题(附答案)

今天是2024年4月13日&#xff0c;距离2024年春季思维100活动第一阶段的线上比赛4月20日还有7天。今年思维100活动的考试重点是什么呢&#xff1f;虽然主办方未公布&#xff0c;我们可以从历年的思维100真题中来分析和推测&#xff0c;把历年真题和背后的知识点吃透了&#xff0…