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

news2025/1/15 13:11:55

目录

一、图片标签 

① 绝对路径

1.绝对磁盘路径

2.绝对网络路径

② 相对路径 （推荐）

二、标题标签 

三、水平线标签 

四、标题样式

1、CSS引入样式

① 行内样式

② 内嵌样式

③ 外嵌样式

2、CSS选择器

① 元素选择器

② id选择器

③ 类选择器

五、超链接 

六、视频标签 

七、音频标签 

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

九、页面布局 

1、div

2、span

3、盒子模型

十、表格标签 

十一、表单标签 

1、主体 

2、表单项

（1）input

（2）select

（3）textarea

十二、代码展示

一、图片标签  <img>

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

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

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

相关文章

74HC595驱动7x11点阵屏（LED-7X11-JHM）DEMO

74HC595驱动7x11点阵屏（LED-7X11-JHM）DEMO

起因 由于我之前做了一个点阵时钟 &#xff0c;但是无奈LED点阵屏价格比较贵&#xff0c;所以想找一个价格较为便宜的点阵来做便宜一点的点阵方案&#xff0c;再淘宝上看到有那种五毛钱一个的7x11的LED点阵&#xff0c;所以就想着试试搞一下这种点阵屏&#xff0c;这个由于是7…
阅读更多...
Ajax 笔记（一）—— Ajax 入门

Ajax 笔记（一）—— Ajax 入门

笔记目录 1. Ajax 入门1.1 Ajax 概念1.2 axios 使用1.2.1 URL1.2.2 URL 查询参数1.2.3 小案例-查询地区列表1.2.4 常用请求方法和数据提交1.2.5 错误处理 1.3 HTTP 协议1.3.1 请求报文1.3.2 响应报文 1.4 接口文档1.5 案例1.5.1 用户登录&#xff08;主要业务&#xff09;1.5.2…
阅读更多...
SpringBoot案例-部门管理-根据id查询

SpringBoot案例-部门管理-根据id查询

目录 根据页面原型&#xff0c;明确需求 查看接口文档 思路分析 接口功能实现 控制层&#xff08;Controller类&#xff09; 业务层&#xff08;Service类&#xff09; 业务类 业务实现类 持久层&#xff08;Mapper类&#xff09; 接口测试 前后端联调 根据页面原型&…
阅读更多...
JlinkV8 - 8步修复Jlink固件

JlinkV8 - 8步修复Jlink固件

现象 用着用着Jlink设备可以检测到&#xff0c;但是MDK检测不到设备序列号&#xff0c;换一个Jlink即可正常识别与烧录&#xff0c;很大概率是Jlink固件丢了&#xff0c;我用的山寨版本&#xff0c;市面基本是山寨版本 解决办法 1、查看Jlink的芯片型号&#xff0c;比如我打开…
阅读更多...
练习第30天

练习第30天

选择 多线程可以提高CPU利用率 不能提高内存的利用率 A B A C A B A B C 编程 最难的问题最难的问题__牛客网 #include <iostream> #include <string> #include <unordered_map> using namespace std;//给个字符串翻译出来 // int main() {unordered_…
阅读更多...
怎么开通Tik Tok海外娱乐公会呢？

怎么开通Tik Tok海外娱乐公会呢？

TikTok作为全球知名的社交媒体平台&#xff0c;吸引了数亿用户的关注和参与。许多公司和个人渴望通过开通TikTok直播公会进入这一领域&#xff0c;以展示自己的创造力和吸引更多粉丝。然而&#xff0c;成为TikTok直播公会并非易事&#xff0c;需要满足一定的门槛和申请找cmxyci…
阅读更多...
小体积，大能量！邂逅飞凌OKMX6ULL开发板

小体积，大能量！邂逅飞凌OKMX6ULL开发板

机缘巧合参加了飞凌嵌入式的试用活动&#xff0c;也很幸运被任命为新品体验官&#xff0c;那么看下是哪一款核心板和底板吧。 →核心板&#xff1a;FETMX6ULL-C核心板 FETMX6ULL-C核心板采用NXP i.MX6ULL处理器开发设计&#xff0c;采用低功耗的ARM Cortex-A7架构&#xff0c…
阅读更多...
MySQL语句总和之MySQL数据库与表结构操作

MySQL语句总和之MySQL数据库与表结构操作

目录 1、启动MySQL服务 2、进入MySQL数据库 3、退出数据库 4、查看MySQL数据库所有库 5、创建、删除、使用、查看所处库操作 6、创建表 7、查看表结构 8、表结构操作 1&#xff09;修改表名 2&#xff09;自增长操作 3)添加一个address字段放在Phone字段后面 4)添加…
阅读更多...
题34（在排序数组中查找元素的第一个和最后一个位置）

题34（在排序数组中查找元素的第一个和最后一个位置）

使用二分查找 此题的关键在于找到左端点和右端点 找中点 两种操作 左端点用第一个方式 右端点用第二种&#xff0c;避免死循环 二分模板 class Solution { public:vector<int> searchRange(vector<int>& nums, int target) {if(nums.size()0) return{-…
阅读更多...
项目管理师基础之项目管理计划和项目文件

项目管理师基础之项目管理计划和项目文件

项目管理过程中&#xff0c;会使用并产生两大类文件&#xff1a;项目管理计划和项目文件。内容一般如下&#xff1a; 整个项目生命周期需要收集、分析和转化大量的数据。从各个过程收集项目数据&#xff0c;并在项目团队内共享。在各个过程中所收集的数据经过结合相关背景的分…
阅读更多...
（6）所有角色数据分析-6

（6）所有角色数据分析-6

http://t.csdn.cn/KrurEhttp://t.csdn.cn/KrurE &#xff08;5&#xff09;中的页面&#xff0c;倾向于向用户展示所有数据&#xff0c;但却没有对数据进行比较、分析&#xff0c;用户不能直观的感受到各种数据之间的关系与变化幅度&#xff0c;所以&#xff0c;下面将向用户提…
阅读更多...
强大的公式编辑器 —— MathType最新版本安装与使用

强大的公式编辑器 —— MathType最新版本安装与使用

强大的公式编辑器 —— MathType最新版本安装与使用 由于使用了很长时间的机械硬盘出现坏道&#xff0c;安装在其中的MathType6.9&#xff08;精简版&#xff09;也没办法使用了&#xff0c;本来想安装个高版本的MathType&#xff0c;比如MathType7.4&#xff0c;但在网上苦苦…
阅读更多...
HTTP请求性能分析 - 简单

HTTP请求性能分析 - 简单

使用随手可得的工具&#xff0c;尽量少的前置要求&#xff0c;来完成任务。 0. 目录 1. 前言2. 分析工具2.1 基于Chrome DevTools 的Timing2.1.1 关于Network标签页下的Timing部分2.1.2 一些注意项 2.2 基于Curl 命令 3. 剩下的工作 1. 前言 对于业务开发选手而言&#xff0c;…
阅读更多...
阿里云服务器搭建Magento电子商务网站图文教程

阿里云服务器搭建Magento电子商务网站图文教程

本文阿里云百科分享使用阿里云服务器手动搭建Magento电子商务网站全流程&#xff0c;Magento是一款开源电商网站框架&#xff0c;其丰富的模块化架构体系及拓展功能可为大中型站点提供解决方案。Magento使用PHP开发&#xff0c;支持版本范围从PHP 5.6到PHP 7.1&#xff0c;并使…
阅读更多...
建设全球研发中心城市，长沙的“破”与“立”

建设全球研发中心城市，长沙的“破”与“立”

文 | 智能相对论 作者 | 范柔丝 顺应全球科技革命和产业变革浪潮&#xff0c;响应国家和全省发展战略&#xff0c;向全球研发中心城市见可而进的长沙&#xff0c;落地动作不断。 省委书记沈晓明在2023互联网岳麓峰会上前瞻性地为长沙擘画“全球研发中心城市”的蓝图后&#…
阅读更多...
每期一个小窍门: go 的小接口多组合思想

每期一个小窍门: go 的小接口多组合思想

go中的接口更加灵活 通过隐式约定实现 类似奥卡姆剃刀 尽量把小功能抽象成为一个独立接口复杂接口最好由简单子功能接口组合而来传参如无必要, 勿扩大接口范围, 保持简单
阅读更多...
AI绘画（2）stable diffusion绘制人像

AI绘画（2）stable diffusion绘制人像

使用AI绘画&#xff0c;看起来很简单&#xff0c;但要画好就很难&#xff0c;又是另一回事。使用AI绘画&#xff0c;是有着技巧和窍门。 现在&#xff0c;我们开始stable diffusion的一个心得分享。今天教程的主题是画人物。 由于是stable diffusion的输入文本是英文&#xff…
阅读更多...
GB/T28181设备接入端如何应用到数字城管场景？

GB/T28181设备接入端如何应用到数字城管场景？

什么是数字城管&#xff1f; 数字城管&#xff0c;又称“数字化城市管理”或“智慧城管”&#xff0c;是一种采用信息化手段和移动通信技术来处理、分析和管理整个城市的所有城管部件和城管事件信息&#xff0c;促进城市管理现代化的信息化措施。 数字城管通过建立城市管理信息…
阅读更多...
Ubantu安装Docker(完整详细)

Ubantu安装Docker(完整详细)

先在官网上查看对应的版本:官网 然后根据官方文档一步一步跟着操作即可 必要准备 要成功安装Docker Desktop&#xff0c;必须&#xff1a; 满足系统要求 拥有64位版本的Ubuntu Jammy Jellyfish 22.04&#xff08;LTS&#xff09;或Ubuntu Impish Indri 21.10。 Docker Deskto…
阅读更多...
无涯教程-Perl - pos函数

无涯教程-Perl - pos函数

描述 此函数用于查找最后匹配的子字符串的偏移量或位置。如果指定了SCALAR,它将返回该标量变量上最后一个匹配项的偏移量。 您还可以为此函数分配一个值(例如pos($foo) 20;),以更改下一个匹配操作的起点。 偏移是从第零位置开始的计数器。 语法 以下是此函数的简单语法- …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023