JAVA WEB — HTML CSS 入门学习

news2024/11/24 16:25:10

本文为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

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

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

相关文章

深度学习:卷积神经网络中的im2col

im2col 是一种在卷积神经网络&#xff08;CNN&#xff09;中常用的技术&#xff0c;用于将输入图像数据转换为适合卷积操作的矩阵形式。通过这种转换&#xff0c;卷积操作可以被高效地实现为矩阵乘法&#xff0c;从而加速计算。 在传统的卷积操作中&#xff0c;卷积核&#xff…

【论文阅读】Associative Alignment for Few-shot Image Classification

用于小样本图像分类的关联对齐 引用&#xff1a;Afrasiyabi A, Lalonde J F, Gagn C. Associative alignment for few-shot image classification[C]//Computer Vision–ECCV 2020: 16th European Conference, Glasgow, UK, August 23–28, 2020, Proceedings, Part V 16. Spri…

HCIP-HarmonyOS Application Developer V1.0 笔记(五)

弹窗功能 prompt模块来调用系统弹窗API进行弹窗制作。 当前支持3种弹窗API&#xff0c;分别为&#xff1a; 文本弹窗&#xff0c;prompt.showToast&#xff1b;对话框&#xff0c;prompt.showDialog&#xff1b;操作菜单&#xff0c;prompt.showActionMenu。 要使用弹窗功能&…

【办公类-04-04】华为助手导出照片视频分类(根据图片、视频的文件名日期导入“年-月-日”文件夹中,并转移到“年-月”文件中整理、转移到“年”文件夹中整理)

背景需求 最近带班&#xff0c;没有时间整理照片&#xff0c;偶尔导一次&#xff0c;几个月的照片。发现用电脑版“华为手机助手“中的WLAN连接”与华为手机的“华为手机助手”连接&#xff0c;速度更快、更稳定&#xff0c;不会出现数据线连接时碰碰就断网的问题 1、先打开电…

人工智能技术:未来生活的“魔法师”

想象一下&#xff0c;未来的某一天&#xff0c;你醒来时&#xff0c;智能助手已经为你准备好了早餐&#xff0c;你的智能家居系统根据你的心情和日程安排调整了室内的光线和音乐&#xff0c;而你的自动驾驶汽车已经在门口等你。这不是科幻小说&#xff0c;这是人工智能技术为我…

Golang | Leetcode Golang题解之第538题把二叉搜索树转换为累加树

题目&#xff1a; 题解&#xff1a; func getSuccessor(node *TreeNode) *TreeNode {succ : node.Rightfor succ.Left ! nil && succ.Left ! node {succ succ.Left}return succ }func convertBST(root *TreeNode) *TreeNode {sum : 0node : rootfor node ! nil {if n…

信号带宽和上升沿的关系:【图文讲解】

目录 1&#xff1a;什么是信号带宽 2&#xff1a;带宽计算公式 3&#xff1a;实际应用 这里讨论的信号&#xff0c;是指数字信号&#xff0c;默认为方波信号。 方波是一种非正弦曲线的波形&#xff0c;具有明确的“高”和“低”两个电平值&#xff0c;且占空比&#xff08;…

大数据新视界 -- 大数据大厂之 Impala 性能优化:从数据压缩到分析加速(下)(8/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

SpringAI QuickStart

Spring AI 官方文档&#xff1a;Spring AI Spring AI 是一个面向 AI 工程的应用框架&#xff0c;其目标是将 Spring 生态系统的可移植性和模块化设计等设计原则应用到AI 领域&#xff0c;并推动将 POJO 作为应用的构建块应用于 AI 领域。 其特点是跨 AI 供应商支持的便携式 A…

Matplotlib | 条形图中的每个条形(patch)设置标签数据的方法

方法一 不使用子图对象如何给形图中的每个条形设置数据 plt.figure(figsize(8, 4)) sns.countplot(xWorkout_Frequency (days/week), datadf)plt.title(会员每周锻炼频率分布) plt.xlabel(锻炼频率 (每周次数)) plt.ylabel(人数)# 获取当前活动的轴对象 ax plt.gca()# 循环遍…

浅析Android Handler机制实现原理

0. 背景描述 Android系统出于对简单、高效的考虑&#xff0c;在设计UI体系时采用了单线程模型&#xff0c;即不会在多个线程中对同一个UI界面执行操作。简单是指单线程模型可以不用考虑和处理在多线程环境下操作UI带来的线程安全问题&#xff0c;高效是指单线程模型下无需通过…

美格智能5G车规级通信模组: 5G+C-V2X连接汽车通信未来十年

自2019年5G牌照发放开始&#xff0c;经过五年发展&#xff0c;我国5G在基础设施建设、用户规模、创新应用等方面均取得了显著成绩&#xff0c;5G网络建设也即将从基础的大范围覆盖向各产业融合的全场景应用转变。工业和信息化部数据显示&#xff0c;5G行业应用已融入76个国民经…

LINUX下的Mysql:Mysql基础

目录 1.为什要有数据库 2.什么是数据库 3.LINUX下创建数据库的操作 4.LINUX创建表的操作 5.SQL语句的分类 6.Mysql的架构 1.为什要有数据库 直接用文件直接存储数据难道不行吗&#xff1f;非得搞个数据库呢&#xff1f; 首先用文件存储数据是没错&#xff0c;但是文件不方…

使用yolov3配置文件训练自己的数据

目录 前言 一、准备数据集 二、创建文件结构 三、格式化文件 1.data文件夹 2.config文件夹 四、修改yolo的配置文件 1.train文件 2.json2yolo文件 3.datasets文件 前言 使用yolov3框架训练自己的数据大致分为这四步&#xff1a; 准备数据集创建文件结构格式化文件 …

vue组件在项目中的常用业务逻辑(3)

获取完后台接口数据后&#xff0c;需将数据在页面中进行动态展示。 一、在getters中简化数据&#xff1a; 二、在search>index.vue中写计算属性&#xff0c;实现将接口的goodsList模块数据展示在vue的search上&#xff1a; 三、1.用v-for循环数据&#xff0c;一共十个&…

改变自己最快的方式,就5个字,早践行早受益

学习和工作效率不高&#xff0c;总是被屏幕上突然弹出的各种消息扰乱大脑&#xff0c;打破既定节奏&#xff1f; 在如今这个娱乐至死的时代&#xff0c;短视频横行&#xff0c;网络聊天&#xff0c;吃喝玩乐极度便捷&#xff0c;娱乐触手可得&#xff0c;我们的注意力被太多东…

FLINK单机版安装部署入门-1

文章目录 FLINK单机版安装部署高于1.9.3需要修改配置文件flink-conf.yaml(低于1.9.3可以跳过)linux启动集群windows下启动Flink提交任务方式命令方式提交运行WordCount任务运行streaming任务 web页面提交任务取消Job java: Compilation failed: internal java compiler error高…

【Linux系列】Linux 和 Unix 系统中的`set`命令与错误处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Python | Leetcode Python题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; class Solution:def complexNumberMultiply(self, num1: str, num2: str) -> str:real1, imag1 map(int, num1[:-1].split())real2, imag2 map(int, num2[:-1].split())return f{real1 * real2 - imag1 * imag2}{real1 * imag2 imag1…