当前位置: 首页 > news >正文

【javaweb】学习日记Day1 - HTML CSS入门

目录

一、图片标签 

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径 (推荐)

二、标题标签 

三、水平线标签 

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接 

六、视频标签 

七、音频标签 

八、换行、段落、文本加粗

九、页面布局 

1、div

2、span

3、盒子模型

十、表格标签 

十一、表单标签 

1、主体 

2、表单项

(1)input

(2)select

(3)textarea

十二、代码展示


一、图片标签  <img>

  • src:指定图片的url(绝对路径 / 相对路径)
  • width:宽度 (px:像素,%:相对于父元素的百分比)
  • height:高度 (px:像素,%:相对于父元素的百分比)

① 绝对路径

1.绝对磁盘路径

  • 右键图片属性 —— 安全 —— 复制对象名
  • <img src="C:\Users\24453\Desktop\容宝网站\img\sina.jpg">

2.绝对网络路径

  • 右键网页图片—— 在新标签页中打开图片 —— 复制路径
  • <img src="https://img-home.csdnimg.cn/images/20201124032511.png">

② 相对路径 (推荐)

  • ./    当前目录,可省略
  • ../   上一级目录

二、标题标签  <h1> - <h6> 

三、水平线标签  <hr>

四、标题样式

1、CSS引入样式

① 行内样式

写在标签style属性中(不推荐)

<h1 style="属性名:属性值;属性名:属性值;"中国新闻网</h1>

② 内嵌样式

写在style标签中(可以写在页面任何位置,通常写在head标签中)

<style>h1{属性名:属性值;属性名:属性值;}
</style>

③ 外嵌样式

写在一个单独的.css文件中(需要通过link标签在网页中引入)

<link rel="stylesheet" href="css/news.css">

实例:

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>页面标题</title><!-- 方式二:内嵌样式 --><style>h1{color: brown;}</style> <!-- 方式三:外嵌样式 --><link rel="stylesheet" href="./news.css"></head>
<body><img src="img/sina.jpg" width="7%"> <div style="font-size: 6px;">日常 > 分享</div><!-- 方式一:行内样式 --><h1 style="color: firebrick;">标题样式</h1> <h1>标题样式</h1><hr>2023年8月11日 13:14 容宝网<hr></body>
</html>

2、CSS选择器

优先级:id选择器 > 类选择器 > 元素选择器

① 元素选择器

元素名称{color:red;
}h1{color:red;
}<h1> 新闻联播网 </h1>

② id选择器

#id属性值{color:red;
}#hid{color:red;
}<h1 id="hid"> 新闻联播网</h1>

③ 类选择器

.class属性值{color:red;
}.cls{color:red;
}<h1 class="cls"> 新闻联播网 </h1>

实例:

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊!!</title><!-- 方式二:内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}</style> </head>
<body><img src="img/sina.jpg" width="7%"> <span>恋爱日常 > 分享</span><h1>震惊!!</h1><hr><span id="time">2023年8月11日 13:14</span> <span class="cls">容宝网</span><hr></body>
</html>

五、超链接 

<a href="https://baidu.com">容宝网</a>
  • href:指定资源访问的url
  • target:指定在何处打开链接
    • -self:默认值,在当前页面打开
    • -blank:在空白页面打开

实例:

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊!!</title><!-- 方式二:内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}</style> </head>
<body><img src="img/sina.jpg" width="7%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2445374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span><h1>震惊!!</h1><hr><span id="time">2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a><hr></body>
</html>

六、视频标签  <video>

<video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放-->

七、音频标签  <audio>

<audio src="audio/1.mp3" controls></audio>

八、换行、段落、文本加粗

<br>   换行<p>   段落<b> <strong>   文本加粗line-height  设置行高text-indent  首行缩进text-align   文本水平对其方式&nbsp;   生成一个空格

九、页面布局  <div> <span>

1、div

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

2、span

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

3、盒子模型

<style>div{width:200px;height:200px;box-sizing:border-box;  /*指定width height为盒子的高宽*/background-color:red;   /*背景色*/padding:20px 20px 20px 20px;  /*内边距 上 右 下 左 (顺时针)*/border:10px solid red;        /*边框宽度  线条类型  颜色*/margin:30px 30px 30px 30px;   /*外边距 上 右 下 左 (顺时针)*/}
</style>

十、表格标签  <table>

标签描述备注
<table>

定义表格整体

可以包裹多个<tr>

border:规定表格边框宽度
width:规定表格宽度
cellspacing:规定单元格间的空间
<tr>表格的行,可以包裹多个<td>
<td>单元格如果是表头单元格,可以替换为<th>,有加粗和居中效果

十一、表单标签  <form>

1、主体 

  • action:表单提交的url,往何处提交数据,如果不指定,默认提交到当前页面
  • method:表单提交方式
    • get:在url后面拼接表单数据,比如?用户名=容也同学&年龄=20,url长度有限制,默认值
    • <form action="" method="get">用户名:<input type="text" name="用户名">年龄:<input type="text" name="年龄"><input type="submit" value="提交">
      </form>

    • post:在消息体中传递,参数大小无限制
    • <form action="" method="post">用户名:<input type="text" name="用户名">年龄:<input type="text" name="年龄"><input type="submit" value="提交">
      </form>

2、表单项

(1)input

  • 表单项,通过type属性控制输入形式

 

(2)select

  • 定义下拉列表,<option>定义列表项

(3)textarea

  • 定义文本域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head><body><form action="" method="post">用户名:<input type="text" name="用户名"><br><br>密码:<input type="password" name="密码"><br><br>性别:<label><input type="radio" name="性别" value="1">男</label><label><input type="radio" name="性别" value="2">女</label><br><br>用餐偏好:<label><input type="checkbox" name="中餐">中餐</label><label><input type="checkbox" name="西餐">西餐</label><label><input type="checkbox" name="日料">日料</label><label><input type="checkbox" name="韩餐">韩餐</label><label><input type="checkbox" name="东南亚风味">东南亚风味</label><br><br>生日:<input type="date" name="生日"><br><br>时间:<input type="time" name="时间"><br><br>邮箱:<input type="email" name="邮箱"><br><br>年龄:<input type="number" name="年龄"><br><br>学历:<select name="学历"><option value="">--------请选择---------</option><option value="1">本科</option><option value="2">大专</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>头像:<input type="file" name="image" ><br><br>个人简介:<textarea name="个人简介" cols="30" rows="10"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" name="按钮"><br></form>
</body>
</html>

十二、代码展示

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head><meta charset="UTF-8">  <!-- 字符集是UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 --><title>震惊!西安居然发生了这种事!</title><!-- 方式二:内嵌样式 --><style>h1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}p{text-indent: 35px;  /*首行缩进*/line-height: 30px;  /*设置行间距*/}video{display: block;margin: 0 auto;}table{text-align: center;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}#plast{text-align: right;  /*设置对其方式*/}#center{width:65%;/*margin:0% 17.5% 0% 17.5%;    设置外边距:上 右 下 左 */margin:0 auto;}#mid{display: block;margin: 0 auto;}</style> </head>
<body><div id="center"><!-- —————————————————————— 标题部分 ———————————————————————— --><img src="img/sina.jpg" width="12%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span><h1>震惊!西安居然发生了这种事!</h1><hr><span id="time">&nbsp; &nbsp; 2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a><hr><!-- —————————————————————— 正文部分 ———————————————————————— --><p><b>容宝网消息</b>(聚焦西安):据了解,xx。</p><img id="mid" src="./img/htmlMTXX_MH20230807_214202042.jpg" width="300px"><p>xxxxxxx购置了西瓜和葡萄。</p><img id="mid" src="./img/htmlMX_MH20230807_204455741.jpg" width="300px"><p>由于许xxxx</p><table border="0" cellspacing="5"><tr><td><img src="./img/htmlMTXX_MH20230807_211045065.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2230807_204911532.jpg" width="300px"></td><td><img src="./img/htmlMTXX_MH2023080_220415058.jpg" width="300px"></td></tr></table><p>第二天,xxx</p><video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放--><p id="plast">责任编辑:小白  SN242</p></div>
</body>
</html>

相关文章:

【javaweb】学习日记Day1 - HTML CSS入门

目录 一、图片标签 ① 绝对路径 1.绝对磁盘路径 2.绝对网络路径 ② 相对路径 &#xff08;推荐&#xff09; 二、标题标签 三、水平线标签 四、标题样式 1、CSS引入样式 ① 行内样式 ② 内嵌样式 ③ 外嵌样式 2、CSS选择器 ① 元素选择器 ② id选择器 ③…...

贴吧照片和酷狗音乐简单爬取

爬取的基本步骤 很简单&#xff0c;主要是两大步 向url发起请求 这里注意找准对应资源的url&#xff0c;如果对应资源不让程序代码访问&#xff0c;这里可以伪装成浏览器发起请求。 解析上一步返回的源代码&#xff0c;从中提取想要的资源 这里解析看具体情况&#xff0c;一…...

Databend 开源周报第 106 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 数据脱敏 Data…...

Mysql中使用存储过程插入decimal和时间数据递增的模拟数据

场景 Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据&#xff1a; Mysql插入数据从指定选项中随机选择、插入时间从指定范围随机生成、Navicat使用存储过程模拟插入测试数据_mysql循环插入随机数据_霸道流氓气质的博客…...

IL汇编ldc指令学习

ldc指令是把值送到栈上&#xff0c; 说明如下&#xff0c; ldc.i4 将所提供的int32类型的值作为int32推送到计算堆栈上&#xff1b; ldc.i4.0 将数值0作为int32推送到计算堆栈上&#xff1b; ... ldc.i4.8 将数值8作为int32推送到计算堆栈上&#xff1b; ldc.i4.m1 将数值-…...

【Redis基础篇】浅谈分布式系统(一)

一、浅谈分布式系统 1. 单机架构&#xff1a;只有一台服务器&#xff0c;这个服务器负责所有的工作。 如果遇到了服务器不够的场景怎么处理? 开源&#xff1a;增加更多的硬件资源节流&#xff1a;软件上的优化&#xff0c;优化代码等…一台服务器资源使用有限&#xff0c;就…...

CSS中的calc()函数有什么作用?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的calc()函数及其作用⭐ 作用⭐ 示例1. 动态计算宽度&#xff1a;2. 响应式布局&#xff1a;3. 自适应字体大小&#xff1a;4. 计算间距&#xff1a; ⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点…...

由浅入深学习Tapable

文章目录 由浅入深学习TapableTapable是什么Tapable的Hook分类同步和异步的 使用Sync*同步类型钩子基本使用bailLoopWaterfall Async*异步类型钩子ParallelSeries 由浅入深学习Tapable webpack有两个非常重要的类&#xff1a;Compiler和Compilation。他们通过注入插件的方式&a…...

YOLOv5白皮书-第Y6周:模型改进

&#x1f4cc;本周任务&#xff1a;模型改进&#x1f4cc; 注&#xff1a;对yolov5l.yaml文件中的backbone模块和head模块进行改进。 任务结构图&#xff1a; YOLOv5s网络结构图: 原始模型代码&#xff1a; # YOLOv5 v6.0 backbone backbone:# [from, number, module, args]…...

word之插入尾注+快速回到刚才编辑的地方

1-插入尾注 在编辑文档时&#xff0c;经常需要对一段话插入一段描述或者附件链接等&#xff0c;使用脚注经常因占用篇幅较大导致文档页面内容杂乱&#xff0c;这事可以使用快捷键 ControlaltD 即可在 整个行文的末尾插入尾注&#xff0c;这样文章整体干净整洁&#xff0c;需…...

Qt扫盲-QTableView理论总结

QTableView理论总结 一、概述二、导航三、视觉外观四、坐标系统五、示例代码1. 性别代理2. 学生信息模型3. 对应视图 一、概述 QTableView实现了一个tableview 来显示model 中的元素。这个类用于提供之前由QTable类提供的标准表&#xff0c;但这个是使用Qt的model/view架构提供…...

从外部访问K8s中Pod的五种方式

hostNetwork、 hostPort、 NodePort、 LoadBalancer、 Ingress 暴露Pod与Service一样&#xff0c;因为Pod就是Service的backend 1、hostNetwork&#xff1a;true 这是一种直接定义 Pod 网络的方式。 如果在 Pod 中使用 hostNetwork:true 配置&#xff0c; pod 中运行的应用程序…...

什么是A股交易接口_(股票交易c接口)开发原理

A股交易接口是指用于与国内的证券交易所&#xff08;上海证券交易所和深圳证券交易所&#xff09;进行股票买卖交易的电子接口或软件系统。A股交易接口是金融机构、券商以及个人投资者的必备掌握操作技能之一&#xff0c;它提供了实时的股票行情、交易下单、撤单、查询账户信息…...

STM32F4X NVIC中断概念

STM32F4X NVIC中断概念 CPU查询状态两种方式轮询查询中断查询 STM32有关中断的概念中断向量表系统中断外设中断中断号中断优先级 STM32F4X NVIC控制器NVIC控制器简介NVIC寄存器优先级分组 STM32F4X中断配置优先级分组设置配置外设中断 CPU查询状态两种方式 在讲解中断的概念之…...

关于consul的下载方法

linux下 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo sudo yum -y install consulwindow下 https://developer.hashicorp.com/consul/downloads 然后把里面的exe文件放在gopath下就行了 验证…...

应用在汽车前照灯系统中的环境光传感芯片

为了保证行车照明的安全性和方便性&#xff0c;减轻驾驶员的劳动强度。近年来&#xff0c;出现了许多新的照明控制系统&#xff0c;例如用于日间驾驶的自动照明系统、光束调节系统、延迟控制等。尤其是汽车自适应前照灯系统&#xff0c;它是一种能够自动改变两种以上的光型以适…...

Python Flask+Echarts+sklearn+MySQL(评论情感分析、用户推荐、BI报表)项目分享

Python FlaskEchartssklearnMySQL(评论情感分析、用户推荐、BI报表)项目分享 项目背景&#xff1a; 随着互联网的快速发展和智能手机的普及&#xff0c;人们越来越倾向于在网上查找餐厅、购物中心、酒店和旅游景点等商户的点评和评分信息&#xff0c;以便做出更好的消费决策。…...

开源项目-高校自动排课系统

哈喽,大家好,今天给大家带来一个开源项目-基于遗传算法的一个高校自动排课系统,同时也是一个前后端分离项目。 前端:React 后端:SpringBoot+MyBatis+MySQL数据库 高校自动排课系统的主要功能包括查询模块,安排教学区域,排课页面三部分 登录 查询模块 可以根据学年…...

IP网络广播系统草坪音箱景区系统防水石头,草坪音箱的应用

IP网络广播系统草坪音箱景区系统防水石头,草坪音箱的应用 SV-7045V是深圳锐科达电子有限公司的一款防水网络草坪音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率20W。常用场景&#xff1a;公园ip草坪音箱&…...

拒绝摆烂!C语言练习打卡第二天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4dd;…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...