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  POST
            get   在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

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

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

相关文章

第十五章 Vue工程化开发及Vue CLI脚手架

目录 一、引言 二、Vue CLI 基本介绍 三、安装Vue CLI 3.1. 安装npm和yarn 3.2. 安装Vue CLI 3.3. 查看 Vue 版本 四、创建启动工程 4.1. 创建项目架子 4.2. 启动工程 五、脚手架目录文件介绍 六、核心文件讲解 6.1. index.html 6.2. main.js 6.3. App.vue 一、…

【1个月速成Java】基于Android平台开发个人记账app学习日记——第4天,注册登录功能设计

24.11.03 1.修改项目目录 从今天开始将正式进行功能的设计&#xff0c;首先需要对原来的项目结构进行修改&#xff0c;主要是添加新的文件夹用于存放新的文件。下面进行展示和讲解&#xff1a; 我用红圈圈出了新添加的文件夹&#xff0c;介绍下它们都是干啥的&#xff1a; da…

动态库实现lua网络请求GET, POST, 下载文件

DLL需要使用的网络封装 WinHttp异步实现GET, POST, 多线程下载文件_webclient post下载文件-CSDN博客文章浏览阅读726次。基于WinHttp封装, 实现异步多线程文件下载, GET请求, POST请求_webclient post下载文件https://blog.csdn.net/Flame_Cyclone/article/details/142644088…

unet中的attn_processor的修改(用于设计新的注意力模块)

参考资料 文章目录 unet中的一些变量的数据情况attn_processorunet.configunet_sd 自己定义自己的attn Processor &#xff0c;对原始的attn Processor进行修改 IP-adapter中设置attn的方法 参考的代码&#xff1a; 腾讯ailabipadapter 的官方训练代码 unet中的一些变量的数据…

深度学习基础—序列采样

引言 深度学习基础—循环神经网络&#xff08;RNN&#xff09;https://blog.csdn.net/sniper_fandc/article/details/143417972?fromshareblogdetail&sharetypeblogdetail&sharerId143417972&sharereferPC&sharesourcesniper_fandc&sharefromfrom_link …

Qt中的Model与View5: QStyledItemDelegate

目录 QStyledItemDelegate API 重载公共函数 保护函数 重载保护函数 当在 Qt 项目视图中显示模型数据时&#xff0c;例如 QTableView&#xff0c;每个项目由代理绘制。此外&#xff0c;当项目被编辑时&#xff0c;提供一个编辑器小部件&#xff0c;该小部件在编辑时显示在项…

AI打造超写实虚拟人物:是科技奇迹还是伦理挑战?

内容概要 在这个科技飞速发展的时代&#xff0c;超写实虚拟人物仿佛从科幻小说中走进了我们的日常生活。它们以生动的形象和细腻的动作&#xff0c;不仅在影视、广告和游戏中吸引了无数目光&#xff0c;更让我们对AI技术的未来充满了期待和疑惑。这些数字化身在逼真的外貌下&a…

海浪中的记忆:海滨学院班级回忆录开发

3系统分析 3.1可行性分析 通过对本海滨学院班级回忆录实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本海滨学院班级回忆录采用SSM框架&#xff0c;JAVA作为开…

文本串的应用(1)

一、文本串的加密解密操作 一个文本串可用事先给定的字母映射表进行加密。 例如&#xff0c;假设字母映射表为&#xff1a; a b c d e f g h i j k l m n o p q r s t u v w x y z n g z q t c o b m u h e l k p d a w x f y i v r s j 则字符串“encrypt”被加密为“tkz…

MCU裸机任务调度架构

第1章 方式一(平均主义) int main(int argc, char **argv){/* RTC 初始化 */bsp_RTC_Init(&rtc);/* 串口初始化 */uartInit(115200);/* LED初始化 */ledInit();while(1){// 任务1(获取传感器数据)// 任务2// 任务3} } 1.1 平均主义的缺陷 获取传感器数据可以600ms去读取一…

【力扣专题栏】面试题 01.02. 判定是否互为字符重排,如何利用数组模拟哈希表解决两字符串互排问题?

题解目录 1、题目描述解释2、算法原理解析3、代码编写(1)、两个数组分别模拟哈希表解决(2)、利用一个数组模拟哈希表解决问题 1、题目描述解释 2、算法原理解析 3、代码编写 (1)、两个数组分别模拟哈希表解决 class Solution { public:bool CheckPermutation(string s1, stri…

【OJ题解】C++实现反转字符串中的每个单词

&#x1f4b5;个人主页: 起名字真南 &#x1f4b5;个人专栏:【数据结构初阶】 【C语言】 【C】 【OJ题解】 题目要求&#xff1a;给定一个字符串 s &#xff0c;你需要反转字符串中每个单词的字符顺序&#xff0c;同时仍保留空格和单词的初始顺序。 题目链接: 反转字符串中的所…

全新更新!Fastreport.NET 2025.1版本发布,提升报告开发体验

在.NET 2025.1版本中&#xff0c;我们带来了巨大的期待功能&#xff0c;进一步简化了报告模板的开发过程。新功能包括通过添加链接报告页面、异步报告准备、HTML段落旋转、代码文本编辑器中的文本搜索、WebReport图像导出等&#xff0c;大幅提升用户体验。 FastReport .NET 是…

【数据结构与算法】第8课—数据结构之二叉树(堆)

文章目录 1. 树1. 什么是树&#xff1f;1.2 树的相关概念1.3 树的表示法 2. 二叉树2.1 特殊的二叉树2.2 二叉树的性质2.3 二叉树的存储结构 3. 实现顺序结构二叉树3.1 堆的概念3.2 堆的实现3.2.1 堆的数据结构3.2.2 堆的初始化3.2.3 堆插入数据3.2.4 删除堆顶数据3.2.5 堆的判空…

Spring的高效开发思维(三)

时间&#xff1a;2024年 11月 02日 作者&#xff1a;小蒋聊技术 邮箱&#xff1a;wei_wei10163.com 微信&#xff1a;wei_wei10 音频&#xff1a;喜马拉雅 大家好&#xff0c;欢迎来到“小蒋聊技术” 我是小蒋&#xff01;。小蒋今天想和大家聊聊Spring Cloud微服务架构&am…

TEC半导体致冷工作原理:【图文详讲】

目录 1&#xff1a;什么是TEC 2&#xff1a;TEC工作原理 3&#xff1a;TEC结构 4&#xff1a;TEC技术参数 5&#xff1a;TEC选型 6&#xff1a;实物TEC 7&#xff1a;手机散热器 1&#xff1a;什么是TEC TEC半导体致冷器&#xff08;Thermo Electric Cooler&#xff09…

Linux开发讲课47--- 详解 Linux 中的虚拟文件系统

虚拟文件系统是一种神奇的抽象&#xff0c;它使得 “一切皆文件” 哲学在 Linux 中成为了可能。 什么是文件系统&#xff1f;根据早期的 Linux 贡献者和作家 Robert Love 所说&#xff0c;“文件系统是一个遵循特定结构的数据的分层存储。” 不过&#xff0c;这种描述也同样适用…

海的记忆篇章:海滨学院班级回忆录项目

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了海滨学院班级回忆录的开发全过程。通过分析海滨学院班级回忆录管理的不足&#xff0c;创建了一个计算机管理海滨学院班级回忆录的方案。文章介绍了海滨学院班级回…

【WebRTC】WebRTC的简单使用

目录 1.下载2.官网上的使用3.本地的使用 参考&#xff1a; 【webRTC】一、windows编译webrtc Windows下WebRTC编译 1.下载 下载时需要注意更新python的版本和网络连接&#xff0c;可以先试试ping google。比较关键的步骤是 cd webrtc-checkout set https_proxy127.0.0.1:123…

【05】如何解决tomcat命令提示符控制台乱码问题

Web项目开发过程中&#xff0c;直接在命令提示符窗口中通过输入startup.bat命令运行tomcat&#xff0c;在新弹出的tomcat命令提示符窗口中输出的中文是乱码问题的处理。 如何解决tomcat命令提示符控制台乱码问题 文章目录 如何解决tomcat命令提示符控制台乱码问题1.解决问题思路…