【javaweb】学习日记Day1 - HTML CSS入门

最新推荐文章于 2024-05-23 16:57:23 发布
最新推荐文章于 2024-05-23 16:57:23 发布
阅读量893 收藏 1
点赞数
分类专栏： Javaweb 文章标签： 学习 html css 前端 学习方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61639349/article/details/132238312
版权

目录

一、图片标签 

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径 （推荐）

二、标题标签 

三、水平线标签 

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接 

六、视频标签 

七、音频标签 

八、换行、段落、文本加粗

九、页面布局 

  • src：指定图片的url（绝对路径 / 相对路径）
  • width：宽度 （px：像素，%：相对于父元素的百分比）
  • height：高度 （px：像素，%：相对于父元素的百分比）

① 绝对路径

1.绝对磁盘路径

  • 右键图片属性 —— 安全 —— 复制对象名

  • <img src="C:\Users\24453\Desktop\容宝网站\img\sina.jpg">

2.绝对网络路径

  • 右键网页图片—— 在新标签页中打开图片 —— 复制路径
  • <img src="https://img-home.csdnimg.cn/images/20201124032511.png">

② 相对路径 （推荐）

  • ./    当前目录，可省略
  • ../   上一级目录

二、标题标签  <h1> - <h6> 

三、水平线标签  <hr>

四、标题样式

1、CSS引入样式

① 行内样式

写在标签style属性中（不推荐）

<h1 style="属性名:属性值;属性名:属性值;"中国新闻网</h1>

② 内嵌样式

写在style标签中（可以写在页面任何位置，通常写在head标签中）

<style>
    h1{
        属性名:属性值;
        属性名:属性值;
       }
</style>

③ 外嵌样式

写在一个单独的.css文件中（需要通过link标签在网页中引入）

<link rel="stylesheet" href="css/news.css">

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 字符集是UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 -->
    <title>页面标题</title>

    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: brown;
        }
    </style> 

    <!-- 方式三：外嵌样式 -->
    <link rel="stylesheet" href="./news.css">

</head>
<body>
    <img src="img/sina.jpg" width="7%"> 

    <div style="font-size: 6px;">日常 > 分享</div>

    <!-- 方式一：行内样式 -->
    <h1 style="color: firebrick;">标题样式</h1> 

    <h1>标题样式</h1>

    <hr>
    2023年8月11日 13:14 容宝网
    <hr>

</body>
</html>

2、CSS选择器

优先级：id选择器 > 类选择器 > 元素选择器

① 元素选择器

元素名称{
    color:red;
}

h1{
    color:red;
}

<h1> 新闻联播网 </h1>

② id选择器

#id属性值{
    color:red;
}

#hid{
    color:red;
}

<h1 id="hid"> 新闻联播网</h1>

③ 类选择器

.class属性值{
    color:red;
}

.cls{
    color:red;
}

<h1 class="cls"> 新闻联播网 </h1>

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 字符集是UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 -->
    <title>震惊！！</title>

    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: #4d4f53;
        }
        /*元素选择器*/
        span{
            font-size: 9px;
        }

        /*类选择器*/
        .cls{
            font-size: 13px;
        }

        /*id选择器*/
        #time{
            font-size: 13px;
            color: #888888;
        }
    </style> 

</head>
<body>
    <img src="img/sina.jpg" width="7%"> <span>恋爱日常 > 分享</span>

    <h1>震惊！！</h1>

    <hr>
    <span id="time">2023年8月11日 13:14</span> <span class="cls">容宝网</span>
    <hr>

</body>
</html>

五、超链接 

<a href="https://baidu.com">容宝网</a>
  • href：指定资源访问的url
  • target：指定在何处打开链接
    • -self：默认值，在当前页面打开
    • -blank：在空白页面打开

实例：

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 字符集是UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 -->
    <title>震惊！！</title>

    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: #4d4f53;
        }
        /*元素选择器*/
        span{
            font-size: 9px;
        }
        a{
            color: black;
            font-size: 9px;
            text-decoration: none; /*设置文本为一个标准文本*/
        }

        /*类选择器*/
        .cls{
            font-size: 13px;
        }

        /*id选择器*/
        #time{
            font-size: 13px;
            color: #888888;
        }
    </style> 

</head>
<body>
    <img src="img/sina.jpg" width="7%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2445374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span>

    <h1>震惊！！</h1>

    <hr>
    <span id="time">2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a>
    <hr>

</body>
</html>

六、视频标签  <video>

<video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放-->

七、音频标签  <audio>

<audio src="audio/1.mp3" controls></audio>

八、换行、段落、文本加粗

<br>   换行

<p>   段落

<b> <strong>   文本加粗

line-height  设置行高

text-indent  首行缩进

text-align   文本水平对其方式

&nbsp;   生成一个空格

九、页面布局  <div> <span>

1、div

  • 一行只显示一个(独占一行)
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 可以设置宽高（width、height)

2、span

  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高( width、height)

3、盒子模型

<style>
    div{
        width:200px;
        height:200px;
        box-sizing:border-box;  /*指定width height为盒子的高宽*/
        background-color:red;   /*背景色*/

        padding:20px 20px 20px 20px;  /*内边距 上 右 下 左 （顺时针）*/
        border:10px solid red;        /*边框宽度  线条类型  颜色*/
        margin:30px 30px 30px 30px;   /*外边距 上 右 下 左 （顺时针）*/
    }
</style>

十、表格标签  <table>

标签描述备注
<table>

定义表格整体

可以包裹多个<tr>

border：规定表格边框宽度
width：规定表格宽度
cellspacing：规定单元格间的空间
<tr>表格的行，可以包裹多个<td>
<td>单元格如果是表头单元格，可以替换为<th>，有加粗和居中效果

十一、表单标签  <form>

1、主体 

  • action：表单提交的url，往何处提交数据，如果不指定，默认提交到当前页面
  • method：表单提交方式
    • get：在url后面拼接表单数据，比如?用户名=容也同学&年龄=20，url长度有限制，默认值
    • <form action="" method="get">
    用户名：<input type="text" name="用户名">
    年龄：<input type="text" name="年龄">

    <input type="submit" value="提交">
</form>

    • post：在消息体中传递，参数大小无限制
    • <form action="" method="post">
    用户名：<input type="text" name="用户名">
    年龄：<input type="text" name="年龄">

    <input type="submit" value="提交">
</form>

2、表单项

（1）input

  • 表单项，通过type属性控制输入形式

 

（2）select

  • 定义下拉列表，<option>定义列表项

（3）textarea

  • 定义文本域
<!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="用户名"><br><br>
        密码：<input type="password" name="密码"><br><br>
        性别：<label><input type="radio" name="性别" value="1">男</label>
              <label><input type="radio" name="性别" value="2">女</label><br><br>
        用餐偏好：<label><input type="checkbox" name="中餐">中餐</label>
                 <label><input type="checkbox" name="西餐">西餐</label>
                 <label><input type="checkbox" name="日料">日料</label>
                 <label><input type="checkbox" name="韩餐">韩餐</label>
                 <label><input type="checkbox" name="东南亚风味">东南亚风味</label><br><br>
        生日：<input type="date" name="生日"><br><br>
        时间：<input type="time" name="时间"><br><br>
        邮箱：<input type="email" name="邮箱"><br><br>
        年龄：<input type="number" name="年龄"><br><br>
        学历：<select name="学历">
                <option value="">--------请选择---------</option>
                <option value="1">本科</option>
                <option value="2">大专</option>
                <option value="3">硕士</option>
                <option value="4">博士</option>
        </select><br><br>
        头像：<input type="file" name="image" ><br><br>
        个人简介：<textarea name="个人简介" cols="30" rows="10"></textarea><br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" name="按钮">
        <br>
    </form>
</body>
</html>

十二、代码展示

<!DOCTYPE html>  <!-- 文档类型为html -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 字符集是UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 设置浏览器兼容性 -->
    <title>震惊！西安居然发生了这种事！</title>

    <!-- 方式二：内嵌样式 -->
    <style>
        h1{
            color: #4d4f53;
        }
        /*元素选择器*/
        span{
            font-size: 9px;
        }
        a{
            color: black;
            font-size: 9px;
            text-decoration: none; /*设置文本为一个标准文本*/
        }
        p{
            text-indent: 35px;  /*首行缩进*/
            line-height: 30px;  /*设置行间距*/
        }
        video{
            display: block;
            margin: 0 auto;
        }
        table{
            text-align: center;
        }

        /*类选择器*/
        .cls{
            font-size: 13px;
        }

        /*id选择器*/
        #time{
            font-size: 13px;
            color: #888888;
        }

        #plast{
            text-align: right;  /*设置对其方式*/
        }

        #center{
            width:65%;
            /*margin:0% 17.5% 0% 17.5%;    设置外边距：上 右 下 左 */
            margin:0 auto;
        }

        #mid{
            display: block;
            margin: 0 auto;
        }
    
    </style> 

</head>
<body>

    <div id="center">

        <!-- —————————————————————— 标题部分 ———————————————————————— -->
        <img src="img/sina.jpg" width="12%"> <a href="http://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/m&ek=1&kp=1&pt=0&bo=AAYFBgAGBQYWECA!&tl=3&vuin=2374256&tm=1691762400&dis_t=1691762594&dis_k=df10ce7ce1b689b7c90b15bc539e7536&sce=60-4-3&rf=viewer_311" target="_blank">恋爱日常</a><span> > 分享</span>

        <h1>震惊！西安居然发生了这种事！</h1>

        <hr>
        <span id="time">&nbsp; &nbsp; 2023年8月11日 13:14</span> <a href="https://blog.csdn.net/weixin_61639349?type=blog"><span class="cls">容宝网</span></a>
        <hr>

        <!-- —————————————————————— 正文部分 ———————————————————————— -->
        
        <p>
            <b>容宝网消息</b>（聚焦西安）：据了解，xx。
        </p>
        
        <img id="mid" src="./img/htmlMTXX_MH20230807_214202042.jpg" width="300px">

        <p>
            xxxxxxx购置了西瓜和葡萄。
        </p>

        <img id="mid" src="./img/htmlMX_MH20230807_204455741.jpg" width="300px">

        <p>
            由于许xxxx
        </p>

        <table border="0" cellspacing="5">
            <tr>
                <td><img src="./img/htmlMTXX_MH20230807_211045065.jpg" width="300px"></td>

                <td><img src="./img/htmlMTXX_MH2230807_204911532.jpg" width="300px"></td>

                <td><img src="./img/htmlMTXX_MH2023080_220415058.jpg" width="300px"></td>
            </tr>
        </table>

        <p>
            第二天，xxx
        </p>
        <video src="./video/VID_20230808_173135.mp4" controls width="200px"></video>  <!--controls是允许播放-->

        <p id="plast">
            责任编辑：小白  SN242
        </p>

    </div>
</body>
</html>

Roye_ack
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb学习资料---PDF格式.zip
02-05
JavaWeb学习资料---PDF格式，希望能够学习者提供帮助，文档中包含多个JavaWeb学习环节，循序渐渐地介绍了JavaWeb的相关知识
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-HTML标签的介绍.avi
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
javaWeb学习资料部分---图解版.zip
10-18
简单的整理了一些javaWeb关于域对象的学习资料
javaweb教程超全面day1- 01 html的简介
08-31
javaweb教程超全面day1-_01_html的简介
【javaweb】学习日记Day2 - JavaScript入门
weixin_61639349的博客
08-14 547
JavaScript基础语法 Vue前端学习
JavaWeb学习记录 Day1（JavaWeb入门）
赈川
07-13 380
Day 1 2019年7月13日。 这是我学习JavaWeb的一天。 这一天，我学到了以下的知识。 JavaWeb需要掌握的知识 JavaSE 基础知识（面向对象，IO，多线程） HTML（表单：post/get） CSS（选择器） js（会写就好） jQuery（掌握基本句式） MySQL（增删改查） JDBC（使用JDBC操作数据库） - 加载驱动 - 获取连接 - 创建一个执行SQL的对象...
【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门
weixin_61639349的博客
08-21 1332
Vue项目系统开发 - Element ui组件库学习记录
JavaWeb基础知识：Html与Css基础入门
Pinger的博客
07-23 3082
Day01 html与css基础入门1.html的常见标签和实战1.1 a标签<a href="https://www.baidu.com" target="_blank">点我送福利哦！</a> // target属性值_blank表示另取空白页打开网页，用new有同样的效果 1.2 img标签<img src="plmm.jpg" width="100px" height="200px" alt
JavaWeb--尚硅谷
张一
01-24 803
JavaWeb day1 HTML&&CSS 1、B/S软件的结构 Browser Server 客户端：浏览器 服务器端：WEB服务器 2、前端的开发流程 Ps：美术实现：网页设计师根据需求设计网页 前端：将设计做成静态网页 java程序员：将静态网页修改为动态网页 3、网页的组成部分 页面包括内容（结构）、表现、行为 内容：页面中可以看到的数据，html技术来展示 表现：内容在页面上的展示形式，如布局颜色大小等，一般由CSS技术实现（CSS 是一种描述 HTML 文档样式的语
CSS浮动（CSS从入门到精通学习第四天）
m0_49067926的博客
05-22 1010
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
引用实战学习
qiuzhiuser的博客
05-19 154
【代码】引用实战学习。
JVM学习-执行引擎
丢爸
05-21 1013
当然是否需要启动JIT编译器将字节码直接编译为对应平台的本地机器指令，则需要根据代码被调用。大部分的程序代码转换为物理机的目标代码或虚拟机能执行的指令集之前，都需要经过下图各个步骤。，将其直接编译为对应平台的本地机器指令，以此提升Java程序的执行性能。”，JIT编译器在运行时会针对那些频繁被调用的热点代码做出。Java代码编译是由Java源码编译器来完成，流程图如下。而定，关于那些需要被编译为本地代码的字节码，称为“Java字节码的执行是由JVM执行引擎来完成。
llama-factory学习个人记录
qq_55736201的博客
05-22 1047
1.llama-factory部署在LLaMA-Factory项目中，单显卡可以用命令或训练，多显卡只能用用命令的方式。
[BT]小迪安全2023学习笔记（第27天：Web攻防-SQL数据类型注入）
Bluetuan的博客
05-23 157
在SQL中，数字可以不需要单引号，但是字符串需要单引号闭合（不然识别不了）
qmt量化交易策略小白学习笔记第10期【qmt编程之获取股票订单流数据--内置Python】
fanglue3705的博客
05-23 300
获取股票订单流数据 获取股票在某个价位的订单数量 提示 1.该数据通过get_market_data和get_market_data_ex接口获取，period参数选择orderflow1m或者orderflow1d 2.获取历史数据前需要先用download_history_data下载历史数据，订单流数据仅提供orderflow1m周期数据下载，其他周期的订单流数据都是通过1m周期合成的 3.订单流版 权限数据 #内置python 原型 python
学习其他推理判断
最新发布
小琳猫的博客
05-23 1004
学习其他推理判断
Vitis HLS 学习笔记--控制驱动TLP-处理deadlock
hi94的博客
05-22 970
在数据流优化中，通道类型、握手机制、FIFO大小和死锁避免都是关键因素。通过Dataflow查看器和协同仿真数据，您可以有效地优化设计，提高性能并避免潜在问题。
javaweb出现HTTP Status 500 - java.lang.RuntimeException错误是什么原因
06-08
1. 代码错误：Java 运行时异常通常是由代码错误引起的，比如空指针异常、数组越界异常等等。 2. 依赖问题：如果您使用了第三方库或框架，可能由于依赖的版本不兼容或者缺失某些依赖导致出现异常。 3. 配置问题：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值