JavaWed第二章：HTML和CSS的知识制作静态网页

news2024/12/26 11:53:52

目录

前言

一.HTML和CSS的介绍

 💖HTML的基本框架

二.HTML常用标签大全

三.资源路径讲解

💖路径

💖图片 img标签讲解

 💖超链接标签讲解

四.CSS

💖CSS的引入方式

五.HTML页面布局

💖盒子模型介绍

💖盒子模型组成

💖盒子模型的代码

 六.HTML的表格与表单

 💖表格制作

 💖表单制作

✨表单的基本格式

✨表单项的介绍

总结

🎁个人主页：tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
🎥 本文由 tq02 原创，首发于 CSDN🙉
🎄 本章讲解内容：JavaWed的HTML和CSS学习

🎁欢迎各位→点赞👍 + 收藏⭐ + 评论📝+关注✨

 编译器：VS Code

前言

        在讲述HTML和CSS之前。我们需要确保是否安装了VSCode编译器。如果你还未安装，博主安装教导指南：http://t.csdn.cn/IdTFU

一.HTML和CSS的介绍

HTML:超文本标记语言，分为2个部分组成：超文本和标记语言

CSS：层叠样式表，用于控制页面的样式。

联系：CSS直接控制了HTML语言的大小、颜色等。

例如：使用HTML输出一句话，但是通过CSS，可以控制文字的大小、颜色、对齐方式。

 💖HTML的基本框架

HTML使用标签来构成语言，而标签分为了两种：

  1. 带有标签体的标签< a>标签体< /a >
  2. 不带标签体的标签(自结束标签)< br/>,< hr/>

实例与讲解：

  1. 上图是HTML文档中必需的最基本的标签，<head>与<boby>
  2. 每一个标签都有其特性，但是大部分标签都是需要对应的闭合标签，例如：</head>就是<head>的闭合标签
  3. <head>标签:用于定义文档的头部,描述了文档的各种属性和信息,可包含标签:：<base>, <link>, <meta>, <script>, <style>, 以及 <title>
  4. <body> 标签:包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

二.HTML常用标签大全

        类型        标签                       描述
    基础标签        <p>        定义一个段落
        <br>      定义简单的换行  
        <hr>        定义水平线
        <!-...-->        定义一个注释
     格式        <b>        定义粗体文本
        < i >        定义斜体文本
        < u >        定义下划线文本
      < em >        定义强调文本
      < del >        定义被删除的文本
      < time >        定义一个时间/日期
        表单      <form>        定义一个 HTML 表单，用于用户输入
     < input >        定义一个输入控件
     < label >        定义input元素的标注
     < button >        定义按钮
    < select >        定义选择列表（下拉列表）
     < option >        定义选择列表中的选项
图像< img >定义图像
< audio >定义声音，比如音乐或其他音频流
< video>定义一个音频或视频
链接< a >定义一个链接
< link >定义文档与外部资源的关系
表格< table >定义一个表格
< th >定义表格中的表头单元格
< tr >定义表格中的行
< td >定义表格中的单元
样式< style >定义文档的样式信息
< div >定义文档中的节
< span >定义文档中的节
< header >定义一个文档头部部分

 注:CSS是层叠样式表,因此,最后一行是CSS当中的.

三.资源路径讲解

在HTML文档中,我们可能会需要使用图片 视频等,但是我们又怎么使用呢?

答案:通过资源路径放入

💖路径

路径可分为2种,绝对路径  相对路径

  1. 绝对路径:又细分成2种,一种是磁盘路径,另一种是网络路径
  2. 相对路径:指以当前文件资源所在的目录为参照基础，链接到目标文件资源的路径。

绝对路径

 1.磁盘路径:某个文件在电脑当中的位置.

 2.网络路径:指在计算机上查找的到的图片或者文档的链接(url):      

        图片的 网络路径查找->右击图片,复制图像链接

 相对路径

相对路径中，有三个特殊含义的字符

 ./ : 代表的当前目录

../:代表的是上一级目录

/ : 代表跟目录，在win下指的是c盘，在linux下是跟目录，基本不用

例如:

当游戏文档访问奥特曼图片时,由于图片和游戏文档在相同的目录下,

相对路径为: ./奥特曼.png    

而../one/cc/电影记录.doc    ../代表上一个目录(one)  /则代表当前目录下的某个文件

注:  ./单独出现时,可以省略

💖图片<img>标签讲解

用于在文档中插入图片

语法格式:  

  1. <img src="图片资源路径" >
  2. <img src="图片资源路径"  width(或 length)=' 20px(或者 20%) ' >

第一种 将图片按原本大小展开.

第二种  输入宽度或者高度,会自动成比例展开,百分比是原来图片的宽度(高度)的百分比.

 💖超链接<a>标签讲解

用于添加链接,当你点击文字时,自动跳转相关链接

语法格式:

  1. <a href= ""  target = " " >   文本内容   </a>

href : 指定资源访问的url(链接)

target :  指定如何打开链接页面 (2种方法,  _self:当前页面      _blank: 新的页面) 默认:_self

<html lang="en">
<head>
    <title>Document</title>
</head>

<body>   
        //点击tq02的博客,就可以进入
     <a herf="https://blog.csdn.net/m0_74097410?type=blog" target=_blank >
        tq02的博客
    <a>
</body>
</html>

四.CSS

💖CSS的引入方式

        想要控制页面样式,则需要在HTML文档中引入CSS,以便控制文档格式.

注:        color:设置文本颜色         font-size:文本大小(数字后加px)

1.行内样式

        写在某个标签中的style属性当中.

语法格式: <标签名 style="   样式控制要求 ">  内容   </标签名>

 示例：

 2.外联样式

        写在一个单独的.css文件当中,需要时,直接调用.

//new.css文件
p{
    color: red; 
    font-size: 18px;"
}

//html文档
<html lang="en">
<head>
    <title>Document</title>
    
    //引入一个层叠样式表 herf接收文件路径
    <link rel="stylesheet"  herf="new.css">

</head>

<body>
    
</body>
             //文档内容显示出来依然是  红色字体  字体大小为18
    <p >
        我爱中国，我爱学习，我爱Java，我爱CSDN
    </p>

</html>

3.内嵌样式

        写在style标签当中,然后进行使用.而这种方法又叫css选择器,接下来我们讲解三种CSS选择器.分别为:元素选择器  id选择器  类选择器   

注:三种选择器必须在style标签当中,而style标签得在 head标签 里

 

 完整代码:

<html lang="en">
<head>
    <title>Document</title>
<style>
    //元素选择器
      p{
         color:red;
        }
    //id选择器
     #d{
        color:red;
       }
    //类选择器
    .cls{
         color:red;
       }
</style>

</head>
<body>    
</body>     
 //--------------元素选择器  
     <p>
        我爱中国，我爱Java，我爱学习。
    </p>
//--------------id选择器
    <p  id="d">
        我爱中国，我爱Java，我爱学习。
    </p>
//--------------类选择器
     <p class="cls">
       我爱中国，我爱Java，我爱学习。
    </p>

</html>

五.HTML页面布局

       你有没有发现,我们编译出来的页面,似乎是全屏的,而不像平常的页面,可以把内容放在中间,例如下图,图中很明显内容是居中的,可是这到底是怎么操作的呢?

💖盒子模型介绍

        页面中的每一个标签，都可看做是一个 “盒子” ，通过盒子的视角更方便的进行布局,在网页当中也需要使用盒子模型,而我们可以在当前网页右击,点击检查,然后可以从已计算中查看到盒子模型。

💖盒子模型组成

  CSS 中规定每个盒子分别由： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成.

内容区域（content）: 我们存放的数据,可以设置高和宽

➢ 属性： width / height
➢ 常见取值：数字+px

边框区域(border): 设置边框粗细、边框样式、边框颜色效果

        作用        属性名                    属性值
边框粗细border-width                        数字+px
边框样式border-stylesolid（实线）、dashed（虚线）dotted（点线）
边框颜色border-color                颜色取值

 如：border：10px  solid  red；注：中间没有逗号

内边距（ padding ）：设置 边框 与 内容区域 之间的距离

语法格式：padding ：上边距   右边距    下边距     左边距；

边距的取值：数+px 、 百分数

例：padding：10px  20px   30px  40px；上边距为10，右边距为20 下边距为30  左边距为40

        padding：20px；                              上下左右的边距都为20

        padding：20%；                               上下边距的距离都为页面的百分之20

外边距（margin）：设置边框以外， 盒子与盒子之间的距离

语法格式： margin：上边距   下边距    左边距     右边距；

边距取值：数+px  、百分数

 💖盒子模型的代码

        盒子模型的创建：使用元素选择器----div{ }, 将盒子模型的数据包裹在div{ }当中并且必须得在style<>标签当中。

        使用时： 将需要的排版的内容放在<div>  内容  </div>当中。

 代码格式：

<html lang="en">
<head>
    <title>Document</title>
    <style>
        div{
            /* 盒子模型的各项数据 */
        }
    </style>  
</head>

<body>   
   <div>
        <!-- 放置在 内容区域 的文本内容 -->
   </div>
</body>
</html>

而代码可能又存在三种情况

  1. 正常情况，每一个属性都存在。
  2. 某个属性不存在，例如，没有标明padding的值，则为0。
  3. 使用了box-sizing属性，当box-sizing=border-box时，原本content的高与宽，变成了border的高与宽了。

实例1：

 实例2：

 注：如果padding(内边距）、margin(外边距)、border(边框)在在代码中没有写出来，默认是为0。

 实例3：

 六.HTML的表格与表单

 💖表格制作

表格的制作，需要使用到<table>标签，以及<tr>、<td>、<th>等

并且单元格的大小完全由字体大小所支撑。

标签描述属性值
<table>定义表格整体border（边框宽度）、width（表格高度）、cellspacing（单元之间的空间）
<tr>表格的行无
<td>定义单元格的内容无
<th>定义表头单元格，加粗无

代码示例：

<html lang="en">
<head>
    <title>Document</title>
</head>

<body>   

    <table border="10px" cellspacing="0" width="200px">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>照片</th>
            <th>种族</th>
        </tr>
        <tr>
            <td>1</td>
            <td>奥天</td>
            <td><img src="https://i03piccdn.sogoucdn.com/3224facac5e1b61a" width="=100px"></td>
            <td>神秘系</td>
        </tr>
        <tr>
            <td>2</td>
            <td>沫沫</td>
            <td><img src="https://newsimg.5054399.com/uploads/userup/2306/21140255C28.jpg" width="100px"></td>
            <td>超神</td>
        </tr>
        <tr>
            <td>3</td>
            <td>伊乐</td>
            <td><img src="https://newsimg.5054399.com/uploads/userup/2306/211400423429.jpg" width="100px"></td>
            <td>无</td>
        </tr>
    </table>

</body>
</html>

 💖表单制作

问：什么是表单？

答：可以包含 单选框、复选框、单选框、文本域等 

问：表单的标签是什么？

答：<form>

问：那如何表示为单选框或者复选框呢？

答：使用表单项  通过type属性   控制输入形式！

✨表单的基本格式

标签为<form>  属性有 action、method等。

action: 规定当提交表单时向何处发送表单数据----->链接

method:规定用于发送 表单数据 的方法----->get、post

< form action=" url " method="  post/get  ">   
    //各种各样的表单项
</form>

注  get：表单数据拼接在 url 后面，传输大小有限制

      post： 表单数据在请求体中携带，大小无限制

✨表单项的介绍

 <input>: 表单项，通过控制type属性控制 输出形式

<select>： 定义下拉列表 ，<option> 定义列表项

<textarea>：文本域

单行的输入字段

type取值：text

语法格式：<input  type="text"  name=" 表单的名称  ">

例如：

密码框

type取值：password

语法格式：<input  type="password"  name=" 表单的名称  ">

例如：

单选框

type的取值：radio

语法格式是：<input  type="radio"  name=" 表单的名称  "   value=" 当前框的名字 ">

由于是单选框，所以得 表单的名称 一样。

时间框

时间分为三种，日期、时间、日期时间。

type的取值分别为：data    time     datatime-local

例如：

下拉框 

不是使用input了，而是select、option，其option属性是 value。

例如：

文本域

不使用input，不同于单行输入框，可以选择框的宽和高，对应的属性：col、row

例如：

常见按钮框

分别是：按钮、垂直、提交

对应的type：button  、reset 、submit，属性值：value

例如：

 细心的小伙伴们肯定可以发现，此时此刻，value的值直接显示在了按钮上。

总结

        看你看到这里的时候，恭喜你成功得熟悉了HTML和CSS的操作。为了加深印象，博主写了一份代码供大家参考，以此来快速掌握HTML和CSS的操作。

<head>
    <title>游戏</title>
    <style>
        #a{
            width:592;  height: 397;
           background-image: url(//背景图链接 );
            
            border: 5px  solid  blanchedalmond;
            margin: 13% 32% 0% 32%;
        }

        h1{
            text-align:center;
            font-size: 30px;;
            color: black;
        }

      p{
        text-align:center;
      }

      #s{
        width: 100px;
        text-align:center;
      }
    </style>
</head>

<body>   
    <br>
    <div id="a"  >
        <h1>
            拳击游戏
        </h1>
        <br><br><br><br><br><br><br><br>
        <p>
            玩家： <input type="text" name="name"><br><br>
            性别：<label><input type="radio" name="graden" value="1">男</label>&nbsp;
                <label><input type="radio" name="graden" value="2">女</label><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>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="进入游戏">  <input type="button" value="关闭游戏">
        </p>
     </div> 
</body>
</html>

                                                                                                              --------------懒惰的tq02

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

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

相关文章

小米手机文件误删还有救，这10个工具请收好！

小米手机文件误删还有救，这10个工具请收好！

说到智能手机&#xff0c;小米以其令人印象深刻的功能和实惠的价格成为一个受欢迎的品牌。然而&#xff0c;与任何其他智能手机一样&#xff0c;小米设备上可能会由于各种原因而发生数据丢失。幸运的是&#xff0c;有多种恢复软件可以帮助您从小米设备中检索丢失或删除的数据。…
阅读更多...
vue2 配置less

vue2 配置less

在vue2中配置less&#xff0c;需要安装less和less-loader npm install less less-loader5 --save-dev 直接安装less-loader会报错&#xff0c;提示如下&#xff1a; 安装less 3.0.0版本 npm install less3.3.0 然后在安装less-loader就ok啦。 在vue中使用&#xff0c;设置…
阅读更多...
三维空间离散点如何拟合平面？

三维空间离散点如何拟合平面？

文章目录 0.引言1.算法原理2.算法实现 0.引言 在点云建模过程中&#xff0c;有时需要对扫描建模的点云进行标定&#xff0c;在实际使用中往往以地面做为参照平面&#xff0c;需要将扫描的三维空间点云进行拟合平面&#xff0c;以便纠正扫描结果。本文对三维空间离散点拟合平面算…
阅读更多...
学习Vue3——watch(侦听器)

学习Vue3——watch(侦听器)

基本用法 watch有三个参数 第一个参数是监听源 第二个参数回调函数cb&#xff08;newVal,oldVal&#xff09; 第三个参数一个options配置项 监听单个属性 <template><div>姓:<input v-model"lastName" type"text" /></div><…
阅读更多...
PostgreSQL 自增主键冲突问题分析及解决办法

PostgreSQL 自增主键冲突问题分析及解决办法

创建一个test表 create table test (id integer default nextval(test_id_seq::regclass) not nullconstraint test_pkprimary key,c1 integer );插入数据 insert into test (c1) values (1); insert into test (c1) values (2); insert into test (c1) values (3);发现自增I…
阅读更多...
自定义指令实现按钮加密

自定义指令实现按钮加密

1. 需求描述 给按钮加一个密码保护&#xff0c;输入的密码正确之后才能进行下一步操作。 2. 实现思路 1. 直接在点击事件里面处理密码校验&#xff0c; <!-- template --> <el-button type"warning" click"handlePub">发布</el-button&…
阅读更多...
Unity Android打包成Apk之后 紫屏 无内容

Unity Android打包成Apk之后 紫屏 无内容

打包成Apk之后 打开游戏 过完logo是紫色的屏幕什么都没有 解决方法&#xff1a; 打开项目的目录&#xff1a; 删除除了 .vscode assets package 之外的所有文件夹 然后重新打开就可以了
阅读更多...
【owt】发送侧接收并处理rtcp包 调用堆栈

【owt】发送侧接收并处理rtcp包 调用堆栈

发送测接收rtcp包并处理大神分析的RTCPReceiver处理的rtcp包 WebRTC源码之RTCPReceiver源码分析 可以看到xr是207MediaStream::read 中 通过 fb_sink_->deliverFeedback(std::move(packet)); 分发rtcp fbsink是 VideoFramePacketizer int VideoFramePacketizer::deliverFee…
阅读更多...
HTML入门基础知识

HTML入门基础知识

一、简介 什么是HTML&#xff1f; HTML是用来描述网页的一种语言。它指的是超文本标记语言&#xff0c;是一种标记语言&#xff0c;是一套标记。标签HTML使用标记标签来描述网页 HTML基本结构如图&#xff1a; 二、基础内容 HTML的基本标签 HTML 标签 HTML 标记标签通常被称为…
阅读更多...
Linux 的逻辑世界与 Windows 的复杂性

Linux 的逻辑世界与 Windows 的复杂性

Linux的逻辑世界与Windows的复杂性 作为操作系统&#xff0c;Linux 和 Windows 都在全球用户心中赢得了一席之地。 这两种系统都很常用&#xff0c;每种都有不同的原因和目的。 作为一名有用的 AI 助手&#xff0c;我有机会广泛使用 Linux 和 Windows&#xff0c;并且我想探索…
阅读更多...
rewrite实验示例

rewrite实验示例

一、基于域名跳转 要求用户输入旧域名可以直接跳转到新域名 vim /usr/local/nginx/conf/nginx.conf systemctl restart nginx.service 查看元素可以看到返回301&#xff0c;实现了永久重定向跳转&#xff0c;而且域名后的参数也正常跳转 二、基于客户端 IP 访问跳转 要求除…
阅读更多...
ncnn vulkan 以类的方式推理示例

ncnn vulkan 以类的方式推理示例

ncnn vulkan 以类的方式推理示例 flyfish 环境 ncnn-android-vulkan.zip 20230517 opencv 4.6.0 开发环境Qt 6.2.4 模型 yolov5_62 构建套件 Clang arm64-v8a ndk 25 和api 28版本如下 头文件 #ifndef YOLOV5GPU_H #define YOLOV5GPU_H#include <string> #include &l…
阅读更多...
C#调用Matlab--解决外部引用包问题（全网唯一）

C#调用Matlab--解决外部引用包问题（全网唯一）

1、好久没写文章了&#xff0c;今天给大家带来的是C#调用matlab程序的解决方案。 2、应用场景&#xff1a;C#调用matlab网上已经有很多文章了&#xff0c;但本文主要解决的是无法调用时的问题。 如当Matlab调用外部包&#xff08;CVX、IPOPT、gurobi、yalmip等优化求解器&…
阅读更多...
STM32--DHT11温湿度传感器

STM32--DHT11温湿度传感器

本文介绍基于STM32F103实现的DHT11温湿度传感器数据采集及显示&#xff0c;完整代码见文末链接 一、DHT11传感器简介 DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器。它应用专用的数字模块采集技术和温湿度传感技术&#xff0c;确保产品具有极高的可…
阅读更多...
LabVIEW轿厢电梯控制系统

LabVIEW轿厢电梯控制系统

LabVIEW轿厢电梯控制系统 随着国民经济的快速发展&#xff0c;私家车不再是奢侈的商品&#xff0c;逐渐属于大众。大城市中越来越多的汽车对交通和环境造成了灾难性的影响&#xff0c;尤其是市中心遭受了损失。市中心拥堵和停车困难是两大交通问题。增加停车位以留出更多车辆是…
阅读更多...
一个vue3注册表单，自定义element-ui的label样式

一个vue3注册表单，自定义element-ui的label样式

<template><div class"form"><div class"backLogin"><div class"text">已有账号&#xff1f;</div><el-button click"toLogin" typeprimary>立即登录</el-button></div><div clas…
阅读更多...
elment-ui的Cascader 级联选择器，点击lable 也能选中前面的复选框

elment-ui的Cascader 级联选择器，点击lable 也能选中前面的复选框

直接mounted里加就OK啦 mounted() {// Cascader 级联选择器: 点击文本就让它自动点击前面的input就可以触发选择。setInterval(function() {document.querySelectorAll(.el-cascader-node__label).forEach(el > {el.onclick function() {if (this.previousElementSibl…
阅读更多...
解码奇思妙想：揭秘力扣解压缩编码列表的独特解题之道

解码奇思妙想：揭秘力扣解压缩编码列表的独特解题之道

本篇博客会讲解力扣“1313. 解压缩编码列表”的解题思路&#xff0c;这是题目链接。 题目要返回一个数组&#xff0c;这个数组是多大呢&#xff1f;由于下标是偶数的元素决定了每个数据要写入几次&#xff0c;所以要对这些项求和&#xff0c;就知道答案数组要开多大了。 接着&…
阅读更多...
从零开始理解Linux中断架构（13）--Linux中断域

从零开始理解Linux中断架构（13）--Linux中断域

由于计算机系统日益复杂，外设中断数量不断增加，系统可能同时需要多个中断控制器进行级联，中断源需要统一管理，面对这样的状况，Linux对各种中断控制器进行抽象，对如何进行硬件中断号到IRQ number映射关系上进行进一步抽象出通用与设备无关的架构，通用中断处理代码中就有了…
阅读更多...
SpringBoot整合FastDFS笔记

SpringBoot整合FastDFS笔记

SpringBoot整合FastDFS笔记 FastDFS是国人余庆开发的一个的分布式存储系统&#xff0c;github地址是https://github.com/happyfish100/fastdfsFastDFS的特性:1、分组存储&#xff0c;灵活简洁、对等结构&#xff0c;不存在单点2、 文件ID由FastDFS生成&#xff0c;作为文件访问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023