学习笔记-JavaWeb入门-浅学HTML

fixxxxxxx

已于 2023-07-29 14:48:08 修改

阅读量110

点赞数

文章标签：学习笔记

于 2023-07-28 20:54:11 首次发布

本文链接：https://blog.csdn.net/fixxxxxxx/article/details/131957601

版权

实现标题

标题排版

绝对路径可填写磁盘绝对路径，也可填写绝对网络路径，推荐使用相对路径。

相对路径： ./：当前目录，./可以省略

../：上一级目录，../不可省略

图片的宽度高度只指定一个时，图片会等比例缩放

效果演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html入门-实现标题排版</title>
</head>
<body>
    <!-- 绝对网络路径 -->
    <img src="https://i0.hdslb.com/bfs/face/a71b4dd6647ddf0c813bcf74e062edab9224cb0e.jpg@96w_96h_1c_1s_!web-avatar.webp" width="120px"> 首页 直播 游戏中心 漫画
    <h1>html入门-实现标题排版</h1>
    <hr>
    html入门
    <hr>
</body>
</html>

标题样式

效果演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html入门-实现标题样式</title>
    <!-- 方式2：内嵌样式-->>
    <!-- <style>
        h1{
            color: brown;
        }
    </style> -->
    
    <!-- 方式3：外联样式 -->
    <link rel="stylesheet" href="./css/news.css">
</head>
<body>
    
    <!-- 绝对网络路径 -->
    <img src="https://i0.hdslb.com/bfs/face/a71b4dd6647ddf0c813bcf74e062edab9224cb0e.jpg@96w_96h_1c_1s_!web-avatar.webp" width="120px">
    首页 直播 游戏中心 漫画
    <!-- 方式1 ：行内样式 -->
    <!-- <h1 style="color:rgb(71, 71, 59) ;">html入门-实现标题排版</h1> -->
    <h1 >html入门-实现标题样式</h1>
    <hr>
    html入门
    <hr>
</body>
</html>

三种方式得到的效果都是下图

颜色表示形式

演示：

CSS选择器

id选择器可以给标签指定id属性，再通过id设置CSS属性。通过#id名来使用

类选择器可以根据标签中指定的class属性来选择对应的元素。通过.class名来使用

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

演示：

<style>
        h1 {
            /* color: brown; */
            color: rgb(104,104,104);
            /* color: #f00; */
         }
         
        #sp1 {
            color: rgb(180, 181, 190);
            font-size: 14px;
        }
        #sp2 {
            color: rgb(31, 31, 31);
        }
       /*  .cls1 {
            color: rgb(31, 31, 31);
        } */
</style>
.......
<span class="cls1" id="sp1">2023/7/27 14:14 </span>  <span class="cls1" id="sp2">江西</span>

span-size用来设置字体大小。

超链接

超链接默认为蓝色加下划线，可使用text-decoration规定添加到文本的修饰，none表示定义标准的文本。

演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html入门-超链接</title>
    <!-- 方式2：内嵌样式-->
    <style>
        h1 {
            /* color: brown; */
            color: rgb(104, 104, 104);
            /* color: #f00; */
        }

        #sp1 {
            color: rgb(180, 181, 190);
            font-size: 14px;
        }

       /*  #sp2 {
            color: rgb(210, 86, 86);
        } */
        a {
            color: rgb(36, 36, 36);
            text-decoration: none   /* 设置文本为一个标准的文本 */
        }

        /*  .cls1 {
            color: rgb(31, 31, 31);
        } */
    </style>

    <!-- 方式3：外联样式 -->
    <!-- <link rel="stylesheet" href="./css/news.css"> -->
</head>

<body>

    <!-- 超链接使用 -->
    <a href="https://www.bilibili.com/video/BV1m84y1w7Tb?p=9&vd_source=6cce9aa8c79acee33ecedde0f4f1a082"
        target="_blank"><img
            src="https://i0.hdslb.com/bfs/face/a71b4dd6647ddf0c813bcf74e062edab9224cb0e.jpg@96w_96h_1c_1s_!web-avatar.webp"
            width="120px"></a>
    
    <!-- 方式1 ：行内样式 -->
    <!-- <h1 style="color:rgb(71, 71, 59) ;">html入门-实现标题排版</h1> -->
    <h1>html入门-超链接</h1>
    <hr>
    <span class="cls1" id="sp1">2023/7/27 14:14 </span> <span class="cls1" id="sp2"><a
            href="https://blog.csdn.net/fixxxxxxx?spm=1000.2115.3001.5343" target="_blank">fixxx的主页</a> </span>
    <hr>
</body>

</html>

黑马的图片和 "fixxx的主页"都可点击，点击即进入到对应的网站。

实现正文

正文排版

换行标签：<br>

CSS样式

演示：

...
<style>
    
        p {
            text-indent: 38px;
            line-height: 30px;
            font-size: 20px;
        }
        #plast {
            font-size: 20px;
            text-align: right;
        }
</style>
...


<body>
    <p>
        <b>触发器</b> 是与表有关的数据库对象，指在insert/update/delete之前或折后，出发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性，日志记录，数据校验等操作。
    </p>

    <p>
        使用别名<b>OLD</b> 和<b>NEW</b> 来引用触发器中发生变化的记录内容，这与其他的数据库是相似的。现在触发器还只支持行级触发，不支持语句级触发。
    </p>

    <p id="plast">
        <b>以上内容均学自b站黑马JavaWeb视频</b> 
    </p>
</body>

页面布局

盒子模型

演示：

...
<style>
     div {
            width: 600px;
            height: 200px;
            box-sizing: border-box; /*指定width height为盒子的高，宽*/
            background-color: aquamarine; /* 背景色 */
            padding: 20px; /* 内边距   四边若不同 则按顺时针指定 */
            border : 10px solid red;/*  边框，宽度 线条类型 颜色 */
            margin:30px; /* 外边距 四边若不同 则按顺时针指定 */
             
         }
</style>
...
<body>
    <div>
        聚集索引选取规则：
        <br>
        --如果存在主键，主键索引就是聚集索引
        <br>
        --如果不存在主键，将使用第一个唯一（UNIQUE）索引作为聚集索引
        <br>
        --如果表没有主键，或没有合适的唯一索引，则InnoDB会自动生成一个rowid作为聚集索引
        <br>
        回表查询：先通过二级索引找到对应主键，再通过聚集索引找到对应行数据。

    </div>
</body>

CSS属性：

...
...
    div {
            width: 65%;
            /* margin:0% 17.5% 0% 17.5%; */
            margin: 0 auto;
        }
...

...
<body>
    <div id="center">
        <a href="https://www.bilibili.com/video/BV1m84y1w7Tb?p=9&vd_source=6cce9aa8c79acee33ecedde0f4f1a082"
            target="_blank"><img
                src="https://i0.hdslb.com/bfs/face/a71b4dd6647ddf0c813bcf74e062edab9224cb0e.jpg@96w_96h_1c_1s_!web-avatar.webp"
                width="120px"></a>


        <h1>html入门-正文排版</h1>
        <hr>
        <span class="cls1" id="sp1">2023/7/27 14:14 </span> <span class="cls1" id="sp2"><a
                href="https://blog.csdn.net/fixxxxxxx?spm=1000.2115.3001.5343" target="_blank">fixxx的主页</a> </span>
        <hr>
        <!-- 正文部分 -->
        <!-- 视频 -->
        <video src="D:\video\random\wine.mp4" controls="controls" width="100px"></video>

        <!-- 音频 -->
        告白之夜：
        <audio src="D:\musics\Ayasa绚沙 - 告白の夜.mp3" controls></audio>

        <p>
            <b>触发器</b>
            是与表有关的数据库对象，指在insert/update/delete之前或折后，出发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性，日志记录，数据校验等操作。
        </p>

        <p>
            使用别名<b>OLD</b> 和<b>NEW</b> 来引用触发器中发生变化的记录内容，这与其他的数据库是相似的。现在触发器还只支持行级触发，不支持语句级触发。
        </p>

        <p id="plast">
            <b>以上内容均学自b站黑马JavaWeb视频</b>
        </p>

    </div>
</body>

页面实现了居中

表格标签

演示：

...
<style>
        td {
            text-align: center;
        }
</style>
...
<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>品牌</th>
            <th>CEO</th>
        </tr> 

        <tr>
            <td>1</td>
            <td>小米</td>
            <td>阿雷</td>
        </tr>
        <tr>
            <td>2</td>
            <td>华为</td>
            <td>阿任</td>
        </tr>
    </table>
</body>

表单标签

演示：

<!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="get">
        用户名：<input type="text" name="username">
        年龄：<input type="text" name="age">

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

</html>

提交一次数据后：

action不指定时，默认提交到当前页面。

表单项标签

演示：

<!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: 25%;
            margin: 10% auto;

        }
    </style>
</head>

<body>
    <div>
        <form action="" method="post">
            用户名：<input type="text" name="username"> <br><br>
            年龄：<input type="text" name="age"><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="c++">c++</label>
            <label ><input type="checkbox" name="hobby" value="python">python</label><br><br>
            生日：<input type="date" name="birthday" id=""><br><br>
            时间：<input type="time" name="time" id=""><br><br>
            日期时间： <input type="datetime-local" name="datetime" id=""><br><br>
            邮箱：<input type="email" name="email" id=""><br><br>
            年龄：<input type="number" name="age" id=""><br><br>
            学历：<select name="degree" id="">
                <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="reset" value="重置" >
            <input type="button" value="按钮">
            <input type="submit" value="提交" id="last">
        </form>
    </div>
</body>

</html>