当前位置：首页 > article >正文

JAVA WEB — HTML CSS 入门学习

article 2024/12/28 22:08:19

本文为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 设置文本对齐方式

<!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)

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

div标签一行只显示一个（独占一行）

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

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

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

不可以设置宽高

<!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) 表格标签

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

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

<!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属性控制输入形式

<!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.kler.cn/a/377176.html