【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>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

06 - 文件的差异和恢复

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 文件的差异2. 文件的恢复 工作区&#xff1a;本地进行修改的code 暂存区&#xff1a;执行了 git add <filename> 命令之后 版本库&#xff1a;执行了 git commit <...>…

写给 Android 应用工程师的 Binder 原理剖析

一. 前言 这篇文章我酝酿了很久&#xff0c;参考了很多学习文档&#xff0c;读了很多源码&#xff0c;却依旧不敢下笔。生怕自己理解上还有偏差&#xff0c;对大家造成误解&#xff0c;贻笑大方。又怕自己理解不够透彻&#xff0c;无法用清晰直白的文字准确的表达出 Binder 的…

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…

金蝶软件实现导入Excel数据分录行信息到单据体分录行中

>>>适合KIS云专业版V16.0|KIS云旗舰版V7.0|K/3 WISE 14.0等版本<<< 金蝶软件中实现[导入Excel数据业务分录行]信息到[金蝶单据体分录]中,在采购订单|采购入库单|销售订单|销售出库单等类型单据中,以少量的必要字段在excel表格中按模板填列好,很方便快捷地从…

学习笔记十四:K8S最小调度单元POD概述

K8S最小调度单元POD概述 k8s核心资源Pod介绍Pod是什么Pod如何管理多个容器Pod网络Pod存储代码自动发版更新收集业务日志 Pod工作方式自主式Pod控制器管理的Pod(防误删除) 如何基于Pod运行应用 k8s核心资源Pod介绍 K8s官方文档&#xff1a;https://kubernetes.io/ K8s中文官方文…

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

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

【C语言】静态通讯录 -- 详解

一、实现目标 1、功能 保存 1000 个联系人的信息添加联系人删除联系人修改联系人查找联系人排序 2、个人信息&#xff08;结构体&#xff09; 名字年龄性别电话地址 二、创建文件 test.c&#xff08;专门测试通讯录的功能&#xff09;contact.c&#xff08;接口的实现&#xf…

C语言实现三子棋游戏

大家好&#xff0c;欢迎观看Mr.kanglong的CSDN博客&#xff0c;今天和大家讨论的是如何使用C语言来实现三子棋游戏。相信大家儿时或多或少玩过三子棋游戏&#xff0c;那么怎么用C语言实现这样一个游戏呢&#xff1f;且听亢龙娓娓道来~ 目录 三子棋介绍 游戏效果 实现代码 gam…

大语言模型之二 GPT发展史简介

得益于数据、模型结构以及并行算力的发展&#xff0c;大语言模型应用现今呈井喷式发展态势&#xff0c;大语言神经网络模型成为了不可忽视的一项技术。 GPT在自然语言处理NLP任务上取得了突破性的进展&#xff0c;扩散模型已经拥有了成为下一代图像生成模型的代表的潜力&#x…

第三届“赣政杯”网络安全大赛 | 赛宁筑牢安全应急防线

​​为持续强化江西省党政机关网络安全风险防范意识&#xff0c;提高信息化岗位从业人员基础技能&#xff0c;提升应对网络安全风险处置能力。由江西省委网信办、江西省发展改革委主办&#xff0c;江西省大数据中心、国家计算机网络与信息安全管理中心江西分中心承办&#xff0…

Vue在页面输出JSON对象,测试接口可复制使用

效果图&#xff1a; 数据处理前&#xff1a; 数据处理后&#xff1a; 代码实现&#xff1a; HTML: <el-table height"600" :data"tableData" border style"width: 100%" tooltip-effect"dark" size"mini"><el-…

考研 408 | 【计算机网络】 应用层

导图 网络应用模型 客户/服务器&#xff08;c/s&#xff09;模型 P2P模型 DNS 域名 域名服务器 域名解析过程 文件传输协议FTP FTP服务器和用户端 FTP工作原理 电子邮件 电子邮件的信息格式 组成结构 邮件服务器的功能&#xff1a; 1.发送&接收邮件 2.给发件人报告邮…

【JavaEE进阶】Bean 作用域和生命周期

文章目录 一. 关于Bean作用域的实例1. lombok2. 实例代码 二. 作用域定义1. Bean的六种作用域2. 设置作用域 三. Spring 执行流程和 Bean 的生命周期1. Spring 执行流程2. Bean生命周期 一. 关于Bean作用域的实例 注意在此例子中需要用到lombok 1. lombok lombok是什么? Lo…

Coremail AI实验室:利用高级语境和视觉智能进行钓鱼邮件检测

在这个日益数字化的时代&#xff0c;对电子邮件安全需求是至关重要的。新兴的高级威胁邮件&#xff1a;应用社工技术的钓鱼邮件&#xff0c;仿冒公检法的钓鱼邮件等等&#xff0c;都需要更高级的防御策略。 Coremail邮件安全人工智能实验室&#xff0c;整合了高级文本语境理解和…

使用 Visual Studio GoogleTest编写 C/C++ 单元测试——入门篇

入门教程 Visual Studio 新建 GoogleTest项目&#xff0c;一路选默认参数 pch.h #pragma once#include "gtest/gtest.h"int add(int a, int b);pch.cpp #include "pch.h"int add(int a, int b) {return a b; }test.cpp #include "pch.h"TES…

HTML详解连载(3)

HTML详解连载&#xff08;3&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽表单作用使用场景 input标签基本使用示例type属性值以及说明 input标签占位文本示例注意 单选框 radio代码示例 多选框-checkbox注意代码示例 文本域作用标签&#xff1…

抖音关键词搜索小程序排名怎么做

抖音关键词搜索小程序排名怎么做 1 分钟教你制作一个抖音小程序。 抖音小程序就是我的视频&#xff0c;左下方这个蓝色的链接&#xff0c;点进去就是抖音小程序。 如果你有了这个小程序&#xff0c;发布视频的时候可以挂载这个小程序&#xff0c;直播的时候也可以挂载这个小…

快速使用Linux系统中SSH

在Linux系统中&#xff0c;使用SSH代理跳板机是一种有效的方式&#xff0c;可以实现安全连接和访问远程服务器。本文将详细介绍SSH代理跳板机的设置和使用方法。 什么是SSH代理跳板机&#xff1f; SSH代理跳板机是一种在Linux系统中使用SSH协议实现的代理服务器。通过配置相关…

bytesec靶场

靶场下载 https://www.vulnhub.com/entry/hacknos-os-bytesec,393/ 下载完成后进入配置修改网卡 教程 配置 第一步&#xff1a;启动靶机时按下 shift 键&#xff0c; 进入以下界面 第二步&#xff1a;选择第二个选项&#xff0c;然后按下 e 键&#xff0c;进入编辑界面 将…

DRF的filter组件

DRF的Filter组件 如果某个API需要传递一些条件进行搜索&#xff0c;其实就在是URL后面通过GET传参即可&#xff0c;例如&#xff1a; /api/users?age19&category12在drf中filter组件可以支持条件搜索。 1. 自定义filter # models.py from django.db import modelsclas…