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

最新推荐文章于 2024-11-05 10:53:19 发布
最新推荐文章于 2024-11-05 10:53:19 发布
阅读量1.4k 收藏 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
关注
专栏目录
JavaWeb基础知识：Html与Css基础入门
Pinger的博客
07-23 3146
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
Java Web基础入门第十七讲 Servlet开发——request对象
热门推荐
李阿昀的博客
07-16 2万+
HttpServletRequest介绍HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，HTTP请求头中的所有信息都封装在这个对象中，开发人员通过这个对象的方法，可以获得客户这些信息。Request常用方法获得客户机信息 getRequestURL方法返回客户端发出请求时的完整URL。 getRequestURI方法返回请求行中的资源名部分。 URI
【javaweb】学习日记Day2 - JavaScript入门
weixin_61639349的博客
08-14 1695
JavaScript基础语法 Vue前端学习
JavaWeb学习记录 Day1（JavaWeb入门）
赈川
07-13 648
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 1853
Vue项目系统开发 - Element ui组件库学习记录
JavaWeb--尚硅谷
张一
01-24 1027
JavaWeb day1 HTML&&CSS 1、B/S软件的结构 Browser Server 客户端：浏览器 服务器端：WEB服务器 2、前端的开发流程 Ps：美术实现：网页设计师根据需求设计网页 前端：将设计做成静态网页 java程序员：将静态网页修改为动态网页 3、网页的组成部分 页面包括内容（结构）、表现、行为 内容：页面中可以看到的数据，html技术来展示 表现：内容在页面上的展示形式，如布局颜色大小等，一般由CSS技术实现（CSS 是一种描述 HTML 文档样式的语
javaweb开发入门-request对象
lideguo1979的专栏
08-20 2406
HttpServletRequest HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，HTTP请求头中的所有信息都封装在这个对象中，开发人员通过这个对象的方法，可以获得客户这些信息 request常用方法 l获得客户机信息
传智博客 JavaWeb方面的所有知识 听课记录 经典
hgfujffg的博客
11-15 363
传智博客 JavaWeb方面的所有知识 听课记录 经典
传智博客(JavaWeb方面的所有知识)听课记录(经典)
jeofey的专栏
07-24 2559
一、       JavaWeb基础 第一天： 1．Eclipse详解： (1).Bad versionnumber in .class file：编译器版本和运行(JRE)版本不符合。高的JRE版本兼容低版本的编译器版本。 (2).当程序有错误的时候，使用Debug as 运行程序。双击语句设置断点。程序运行到此处停止。点击跳入方法的内部代码。点击跳过，执行下一条代码，点
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
java教程超全面javaweb教程28天day2- 03 css和html的四种结合方式
08-31
java教程超全面javaweb教程28天day2-_03_css和html的四种结合方式
java教程超全面javaweb教程28天day2- 02 css的简介
08-31
java教程超全面javaweb教程28天day2-_02_css的简介
java教程超全面javaweb教程28天day2- 04 css的优先级
08-31
java教程超全面javaweb教程28天day2-_04_css的优先级
java教程超全面javaweb教程28天day2- 08 css的盒子模型
08-31
java教程超全面javaweb教程28天day2-_08_css的盒子模型
嵌入式通信协议：UART简明学习笔记
weixin_73867577的博客
10-31 822
学习UART串口的简明学习笔记
C 学习（4）
最新发布
search7的博客
11-05 532
C语言学习，每个模块来自工作中的？？？
ORB-SLAM2源码学习：ORBextractor.cc：IC_Angle 利用灰度质心法求解关键点方向角
2301_76831056的博客
11-01 686
IC_Angle 利用灰度质心法求解关键点方向角并在computeOrientation函数中被调用计算图像中所有特征点的方向。
嵌入式通信协议：MODBUS简明学习笔记
weixin_73867577的博客
11-02 313
学习Modbus的简明学习笔记
SPI通信详解-学习笔记
qq_45059758的博客
11-04 366
SPI通信
JavaWeb学习笔记：HTML/CSS/JS源码指南
资源摘要信息: "JavaWeb学习笔记，包括简单的HTML、CSS、JS.zip" 知识点详细说明： 1. HTML (超文本标记语言) - HTML是构成网页内容的基本元素。它使用标签来定义网页的各个部分，如标题、段落、链接、图片和其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值