JAVA WEB — HTML CSS 入门学习

本文为JAVAWEB 关于HTML 的基础学习

一  概述

HTML 超文本标记语言

  • 超文本 超越文本的限制 比普通文本更强大 除了文字信息 还可以存储图片 音频 视频等
  • 标记语言 由标签构成的语言
  • HTML标签都是预定义的 HTML直接在浏览器中运行 在浏览器解析 

CSS  是一种用来表现HTML或XML等文件样式的计算机语言,它是对HTML标记语言的一种样式描述,并定义了其中元素的显示方式。

  • 定义:CSS是一种用来美化页面和控制页面布局的语言。

  • 功能

    • 美化界面:设置标签文字大小、颜色、字体加粗等样式。
    • 控制布局:设置浮动、定位等样式,使网页布局更加灵活自如。

二  使用

(1) 基础标签和样式

[1] 标题标签 

  • 标签:<h1>...</h1> (h1-h6 重要程度依次递减)
  • 注意:HTML标签都是预定义好的 不能自己随意定义

[2] 水平线标签

<hr>

[3] 图片标签

<img src = "..." width = "..." height = "...">
  • src : 指定图像的url(绝对路径/相对路径)
  • width : 图像的宽度 height:图像的高度(像素/相对于父元素的百分比)
  • 绝对路径:绝对磁盘路径(D://XXXX)绝对网络路径 (https://XXXX)
  • 相对路径::从当前文件开始查找(./ 当前目录 ../ 上级目录)
<!DOCTYPE html>
<html lang="en">
<head><!--使用字符集UTF-8--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>***与文艺工作者的故事|一见如故的情谊</title>
</head>
<body><img src = "../JPG/news_logo.png"> 新浪政务>正文<h1>***与文艺工作者的故事|一见如故的情谊</h1><hr>2024年10月31日 15:44 新华社<hr>
</body>
</html>

[4] 标题样式 

<span>标签:

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

CSS 样式控制:

CSS 引入方式:

  • 行内样式: 写在标签的style属性中
  • 内嵌样式: 写在style标签中(可以写在页面任何位置 但通常约定写在head标签中)
  • 外联样式:写在一个独立的.css文件中(通常需要link标签在网页中引入)

css 选择器:

  • 元素选择器:元素名称{color:red (样式设定)}
  • Id选择器:      #id属性值{color:red} 
  • 类选择器:     .class属性值{color:red}
  • 优先级: id选择器 > 类选择器 > 元素选择器

 颜色表示:

  • 关键字:red,green...
  • rgb表示法:rgb(255,0,0),rgb(134,100,89)
  • 十六进制:#ff0000,#cccccc,#ccc
<!DOCTYPE html>
<html lang="en">
<head><!--使用字符集UTF-8--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>***与文艺工作者的故事|一见如故的情谊</title><style>#hid{color:#4D4F53;}#time{color: #968D92;font-size: 13px; /*设置字体大小*/}</style>
</head>
<body><img src = "../JPG/news_logo.png"> 新浪政务>正文<h1 id = "hid">***与文艺工作者的故事|一见如故的情谊</h1><hr><span id = "time">2024年10月31日 15:44 </span><span>新华社</span><hr>
</body>
</html>

[5]超连接

  • 标签:<a href="..." target="..."></a>
  • href :指定资源访问的url
  • target:指定在何处打开链接 _self:默认值 在当前页面打开 _blank:在空白页面打开

[6]视频标签

<video>

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

[7]音频标签

<audio>

  • src:规定音频的url
  • controls:显示播放控件

[8]段落标签 

<p>

[9]CSS属性 

  • color 颜色属性 控制文字颜色
  •  font-size 字体大小

  • text-indent 设置首行缩进

  • line-height 设置行高

  • text-alogn 设置文本对齐方式

c9b4edd1ab1e4d33b17eadb362d01a48.png

<!DOCTYPE html>
<html lang="en">
<head><!--使用字符集UTF-8--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>***与文艺工作者的故事|一见如故的情谊</title><style>#hid{color:#4D4F53;}#time{color: #968D92;font-size: 13px; /*设置字体大小*/}a{color: #000;text-decoration: none;  /*标准文本*/}p{text-indent: 35px; /*设置首行缩进*/line-height: 45px; /*设置行高*/}#plast{text-align:right;}</style>
</head>
<body><img src = "../JPG/news_logo.png"> <a href="https://gov.sina.com.cn/"  target="_self"> 新浪政务></a>正文<h1 id = "hid">***与文艺工作者的故事|一见如故的情谊</h1><hr><span id = "time">2024年10月31日 15:44 </span><a href="https://h.xinhuaxmt.com/vh512/share/12257712?newstype=1006&homeshow=1"  target="_self"> 新华社</a><hr><video src="../VIDEO/***与文艺工作者的故事|一见如故的情谊_新浪新闻.mp4" controls width="950px"></video><p>  1978年,贾大山凭借小说《取经》斩获全国首届短篇小说奖,成为文坛冉冉升起的新星。乡村的生活体验让贾大山擅长发掘基层群众的苦乐浮沉。 </p><img src="../JPG/01.gif"><p>  1982年,来到正定任职的***第一个登门拜访的,就是作家贾大山。文学艺术、戏曲电影、古今中外、社会人生……两人一见如故,无话不谈。此后的几年里,他们的交往更加频繁了,两人促膝交谈,常常到午夜时分。</p><img src="../JPG/02.gif"><p>  作为一名作家,贾大山有着洞察社会人生的深邃目光和独特视角。***后来感念:“在与大山作为知己相处的同时,我还更多地把他这里作为及时了解社情民意的窗口和渠道,把他作为我从政与为人的参谋和榜样。”</p><img src="../JPG/03.gif"><p>  1982年冬,在众人举荐和县领导反复动员劝说下,贾大山挑起了文化局长的重担。***回忆这段经历时曾说:“他本身就来自于群众,他不愿意做官,是我生拉硬拽让他去当县文化局局长。”贾大山不负***的信任,为正定文化事业呕心沥血。</p><img src="../JPG/04.gif"><p>  1985年5月,***即将调离正定。分别的那一晚,两人又一次长谈,临别前流下了激动的泪水。1997年,贾大山罹患癌症,不幸去世。***撰写《忆大山》一文,回忆与贾大山在正定的宝贵情谊。</p><img src="../JPG/05.gif"><p>  2014年10月,***在文艺工作座谈会上提起已逝故人贾大山:“他给我印象最深的就是忧国忧民情怀,‘处江湖之远则忧其君’。”****勉励文艺工作者“与人民同呼吸、共命运、心连心”。</p><img src="../JPG/06.jpg"><p>     策划:孙志平、樊华<br>  统筹:韩珅、王志斌<br>  编导:李俞辉、单畅<br>  记者:曲澜娟、李俞辉<br>  摄像:左洪泽<br>  包装:郭雨晗<br>  配音:王帅龙<br>  新华社音视频部制作</p><p id="plast">责任编辑:王树淼 SN242</p></body>
</html>

(2) 页面布局

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

6c66202de98848949c0be95aac3bea0c.png

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

        div标签        一行只显示一个(独占一行)

                           宽度默认是父元素的宽度,高度默认由内容撑开

                           可以设置宽 高(width height)
        span标签    一行可以显示多个

                            宽度和高度默认由内容撑开

                            不可以设置宽高

 33aae5b24a1f4ce994b0316e128383b7.png0f1a6cdda5e140bdb4f45a712e1ec332.png

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div{width:200px;height:200px;box-sizing:border-box; /*指定height weight 为盒子的宽高*/background-color:aquamarine; /*背景色*/padding: 20px 20px 20px 20px; /* 内边距 上 右 下 左 */border: 10px solid red; /* 边框 宽度 线条类型 颜色*/margin:30px 30px 30px 30px; /*外边框 上 右 下 左*/}</style>
</head>
<body><div>A A A A A A A A A A A A</div>
</body>
</html>
  #center{width:65%;margin:0% 17.5% 0% 17.5%; /* 0 auto*/ /* 出现四个值 是上右下左 出现三个值 是上(左右)下 出现是两个值 是(上下)(左右)*/}

 padding 可以只设置某一个方向的边框 可以在padding后面加上-位置 如padding-top,padding-left


(3) 表格标签

  • 场景:在网页中以表格(行 列)形式整齐展示数据

26542d15893e41c991d56afcab1db6d5.png

157a5d788eee43dd9879ff3eb524ff39.png

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格演示t</title>
</head>
<body><table border="lpx" cellspacing="0" width="600px"><tr><th>序号</th><th>学号</th><th>性名</th><th>性别</th></tr><tr><td>1</td><td>23130001</td><td>张三</td><td>男</td></tr><tr><td>2</td><td>23130002</td><td>李四</td><td>女</td></tr></table>
</body>
</html>

(4) 表单和表单项标签

  • 场景:在网页中主要负责数据采集功能 例如注册登录等的数据采集
  • 标签:<form>
  • 表单项:不同类型的input元素,下拉列表,文本域等 

             <input>  定义表单项 通过type属性控制输入形式

            <selset> 定义下拉列表

            <textarea> 定义文本域

  • 属性

            action 规定当提交表单时向何处发送表单数据 URL

            method 规定用于发送表单数据的方式 GET  POST

07f07e9ae6e64df79065a9e88cd2190c.png

<!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 规定当提交表单时向何处发送表单数据 URL 不指定时默认是提交到当前界面method 规定用于发送表单数据的方式 GET  POSTget   在url后面拼接表单数据 但是url长度有限制poet  在消息体(请求体)中传递 参数大小无限制--><form action="" method="get">用户名:<input type="text" name="usetname">年龄:<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>

 <input>  定义表单项 通过type属性控制输入形式 

1a4a1d8ac514421ba5ee01faf44ecf29.png

b3d1e7160dc44136a5a46a0231ff66e8.png

<!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="name"><br><br>密码:<input type="password" name="password"><br><br>性别:<label><input type="radio" name="gender" value="1">男</label><label><input type="radio" name="gender" value="2">女</label> <br><br>爱好:<label><input type="checkbox" name="hobby" value="java">java</label><label><input type="checkbox" name="hobby" value="game">game</label><label><input type="checkbox" name="hobby" value="sing">sing</label><br><br>图像:<input type="file" name="image"><br><br>生日:<input type="date" name="birthday"> <br><br>时间:<input time="time"><br><br>日期时间:<input type="datetime-local" name="datetime"><br><br>邮箱:<input type="email" name="email"><br><br>年龄:<input type="number" name="age"><br><br>学历:<select name="degree"><option value="">----请选择----</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>描述:<textarea name="description" cols="30" rows="10"></textarea><br><br><input type="hidden" name="id" value="1"><!--表单常见按钮--><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body>
</html>

                                                                                                                      学习时间 2024-10-31

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

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

相关文章

ASRPRO 日历2

为避免与天问的ID冲突 ID前加10000 为使识别更顺畅 将 日期-月份 12月21日 合并 ;时间 10点25分 合并 通过串口获取日期 为使用常用词 计倒时 下周 明天,需通过串口获取当前日期 + 命令词 增加 我的 A的 B的 关系词 与任务 生日 买菜 增加 可自定义 任务 执行程序 双进…

Linux——Linux基础指令

Linux基本指令 文章目录 Linux基本指令1. 基础五指令(1) whoami(2) who(3) pwd(4) ls(5) clear 2. 文件常见命令(1) touch(2) mkdir(3) cp(4) mv(5) rm(6) cd 3. 常见IO命令(1) cat(2) tac(3) head(4) tail(5) more(6) less 4. 拓展命令(1) man手册(2) which(3) file(4) date(5…

雷池社区版 7.1.0 LTS 发布了

LTS&#xff08;Long Term Support&#xff0c;长期支持版本&#xff09;是软件开发中的一个概念&#xff0c;表示该版本将获得较长时间的支持和更新&#xff0c;通常包含稳定性、性能改进和安全修复&#xff0c;但不包含频繁的新特性更新。 作为最受欢迎的社区waf&#xff0c…

出海企业如何借助云计算平台实现多区域部署?

云计算de小白 如需进一步了解&#xff0c;请单击链接了解有关 Akamai 云计算的更多信息 在本文中我们将告诉大家如何在Linode云计算平台上借助VLAN快速实现多地域部署。 首先我们需要明确一些基本概念和思想&#xff1a; 部署多区域 VLAN 为了在多区域部署中在不同的 VLAN …

RDD转换算子:【map】

功能&#xff1a; 对RDD中每个元素调用一次参数中的函数&#xff0c;并将每次调用的返回值放入一个新的RDD中&#xff08;一对一&#xff09; 语法&#xff1a; def map(self , f: T -> U ) -> RDD[U]f&#xff1a;代表参数是一个函数 T&#xff1a;代表RDD中的每个元…

如何更好的crud

一、DDD是什么&#xff1f; DDD全名叫做Domins drives Design&#xff1b;领域驱动设计。再说的通俗一点就是&#xff1a;通过领域建模的方式来实现软件设计。 问题来了&#xff1a;什么是软件设计&#xff1f;为什么要进行软件设计&#xff1f; 软件开发最主要的目的就是&…

AI赋能酒店设计|莱佛士学生成功入围WATG设计大赛

近日&#xff0c;由Wimberly Allison Tong & Goo&#xff08;WATG&#xff09;主办的“用人工智能重新构想酒店行业的未来”设计比赛正式拉开帷幕。这场设计比赛&#xff0c;不仅是为了庆祝WATG即将步入80周年&#xff0c;更是为了激发年轻设计师们的创造力和探索实践精神&…

Netty原来就是这样啊(二)

前言: Netty其实最大的特点就是在于对于对NIO进行了进一步的封装,除此以外Netty的特点就是在于其的高性能 高可用性,下面就会一一进行说明。 高性能: 我在Netty原来就是这样啊(一)-CSDN博客 解释了其中的零拷贝的技术除此以外还有Reactor线程模型,这个Reactor线程模型的思想…

对于相对速度的重新理解

狭义相对论速度合成公式如下&#xff0c; 现在让我们尝试用另一种方式把它推导出来。 我们先看速度的定义&#xff0c; 常规的速度合成方式如下&#xff0c; 如果我们用速度的倒数来理解速度&#xff0c; 原来的两个相对速度合成&#xff0c; 是因为假定了时间单位是一样的&am…

idea 导入Spring源码遇到的坑并解决

1.下载相关文件 通过百度网盘分享的文件&#xff1a;Spring 链接&#xff1a;https://pan.baidu.com/s/1r9rkGOCaY9SFn9ecng5cIg?pwd8888 提取码&#xff1a;8888 2.配置gradle环境 gradle下载地址 需要翻墙下 https://services.gradle.org/distributions/ 我选择的是 grad…

红队-linux基础(1)

声明 通过学习 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频,做出的文章如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一.openssl 1、openssl passwd -1 123 openssl是一个开源的…

迈入国际舞台,AORO M8防爆手机获国际IECEx、欧盟ATEX防爆认证

近日&#xff0c;深圳市遨游通讯设备有限公司&#xff08;以下简称“遨游通讯”&#xff09;旗下5G防爆手机——AORO M8&#xff0c;通过了CSA集团的严格测试和评估&#xff0c;荣获国际IECEx及欧盟ATEX防爆认证证书。2024年11月5日&#xff0c;CSA集团和遨游通讯双方领导在遨游…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集补充:制作空洞骑士独有的EventSystem和InputModule

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作空洞骑士独有的EventSystem和InputModule总结 前言 hello大家好久没见&#xff0c;之所以隔了这么久才更新并不是因为我又放弃了这个项目&#xff0c;而…

你们要的App电量分析测试来了

Batterystats 是包含在 Android 框架中的一种工具&#xff0c;用于收集设备上的电池数据。您可以使用 adb 将收集的电池数据转储到开发计算机&#xff0c;并创建一份可使用 Battery Historian 分析的报告。Battery Historian 会将报告从 Batterystats 转换为可在浏览器中查看的…

<项目代码>YOLOv8 学生课堂行为识别<目标检测

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

如何在家庭网络中设置静态IP地址:一份实用指南

在家庭网络环境中&#xff0c;IP地址扮演着至关重要的角色。大多数家庭用户依赖路由器的DHCP&#xff08;动态主机配置协议&#xff09;来自动分配IP地址&#xff0c;但在某些情况下&#xff0c;手动设置静态IP地址能为家庭网络带来更多的便利性与稳定性&#xff0c;尤其是在涉…

编译cartographer和cartographer_ros 过程

环境 ros 版本 : noetic 工控机版本: firefly 工控机cpu类型: arm64 工控机系统: ubuntu 20.04 关于cartographer 如果是ros1中cartographer和cartographer_ros 都需要编译安装&#xff0c;并且在实际运行中cartographer和cartographer_ros 是有交互的。 而如果是在ros2中只…

vue系列==vue组件

vue系列vue组件 1、组件样式控制 1.1全局样式控制 1.2局部样式控制 1.3深度样式控制 2、组件通信 2.1组件父与子之间的通信props 2.1.1简单数组接收模式 2.1.2简单对象和复杂对象接受模式 2.2 组件通信之ref与defineExpose ref 的作用 defineExpose 的作用 运用 re…

智慧水肥一体化:道品科技现代农业的智能管理模式

智慧水肥一体化是现代农业中一种重要的管理模式&#xff0c;它通过信息技术和物联网技术的结合&#xff0c;实现对水资源和肥料的智能化管理。这一系统的主要功能包括环境监测、集中管理、智能控制、主动报警和数据管理。以下将分别对这些功能进行详细阐述&#xff0c;并探讨智…

ES入门:查询和聚合

安装完ElasticSearch 和 Kibana后我们开始学习 为了方便测试&#xff0c;使用kibana的dev tool来进行学习测试&#xff1a; 测试工具 从索引文档开始 插入 向 Elasticsearch 索引 customer 的 _doc 类型的文档 id 为 1 的文档发送 PUT 请求的例子。 请求体为 JSON 格式&am…