JavaWeb02——基础标签及样式（黑马视频笔记）

最新推荐文章于 2025-08-08 10:50:58 发布

原创最新推荐文章于 2025-08-08 10:50:58 发布 · 404 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#笔记 #html #前端

java_web 专栏收录该内容

4 篇文章

订阅专栏

1.普通标签

1.1 视频标签

·视频标签: <video>

·标签属性：

        src: 规定视频播放的url

        controls: 显示播放控件

        width、height: 设置播放器的宽度和高度

1.2 音频标签

·标签：<audio>

·标签属性：

src:音乐的url

controls:显示播放控件

1.3 空占位符

在html中无论输入多少空格,只会显示1个空格，因此可以用空格占位符 "&nbsp"

·未使用空格占位符,连续输入3个空格：你好！

·使用空格占位符,连续3个空格：你好！

2.盒子模型

2.1 什么是盒子模型？

页面中的所有标签，都可以看成一个盒子，由盒子将页面中的元素包含在一个矩形区域中，通过盒子的视角更方便进行页面布局。

2.2 盒子模型的组成

·content:内容区域 ·padding:内边距
·border:边框 ·margin:外边区域

2.3 布局标签

        实际上，这些盒子属性是用来修饰一些布局标签的，常见的布局标签有 <span>、<div>

<span>: 一行可以显示多个span标签,height和width是默认由内容撑开的,不可设置

                效果：

<div>: 一行只能有1个div标签，宽度默认为父元素的宽度，高度由内容撑开,可以设置宽和高

        效果：

3.表格标签

3.1 标签及说明

·<table>: 定义表格整体，可以包括多个<tr>

         ·属性：

                ·border: 表的边框宽
        ·width: 表宽 (style中)
        ~~·cellspacing:~~ 单元之间的空间(已经不用了，用border-spacing)(style中)

·<tr>: 定义表格的 “行”，可以包括多个td/th

·<td>: 定义表格的 “普通内容单元格”

·<th>: 定义表格的 “表头单元格”

效果展示：
 <table border="5px" style="width: 400px;border-spacing: 0px; text-align: center;">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>a123</td>
            <td>a班</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>b124</td>
            <td>b班</td>
        </tr>

    </table>

整体代码：

<!--正文、盒子，表格-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{text-indent: 10px; }
        .a2{text-indent: 15px;}
        .a3{text-indent: 40px;}
        .div1{
            width: 400px;
            height: 300px;
            box-sizing: border-box;  /*如果这里没写，那么上面的高和宽指定的是content的，但是这里写了border，这里指的是border以内的大小*/
            background-color:antiquewhite;
            padding: 10px;  /*设置内边距大小*/
            border: 5px solid burlywood; /*设置边框的大小及颜色*/
            margin: 30px; /*设置外边距*/
            
        }
        b{
            color: blue;
        }


    </style>
</head>
<body>
    <h1>1.正文部分</h1>
    <h2>1.1 视频标签</h2>
            <p style="text-indent: 10px;">·视频标签:<b>video</b></p>
            <p style="text-indent: 15px;">·标签属性：</p> 
            <p style="text-indent: 40px;">src:规定视频播放的url</p>
            <p style="text-indent: 40px;">controls:显示播放控件</p>
            <p style="text-indent: 40px;">width、height:设置播放器的宽度和高度</p>
        <video src="xxxx" controls="true" width="600px">反诈视频</video>
    
    <h2>1.2 音频标签</h2>
        <p class="a1">·标签：<b>audio</b></p>
        <p class="a2">·标签属性：</p>
        <p class="a3">src:音乐的url</p>
        <p class="a3">controls:显示播放控件</p>
        <audio src="xxxx" controls="true"> </audio>

    <h2>1.3 空占位符</h2>
        <p class="a1">在html中无论输入多少空格,只会显示1个空格，因此可以用空格占位符 <b>"& nbsp"</b></p>
        <p class="a2">·未使用空格占位符,连续输入3个空格:你   好！</p>
        <p class="a2">·使用空格占位符,连续3个空格:你 &nbsp; &nbsp; &nbsp;好！</p>
<hr>




    <h1>2.盒子模型</h1>

    <h2>2.1 什么是盒子模型？</h2>
        <p class="a2">页面中的所有标签，都可以看成一个盒子，由盒子将页面中的元素包含在一个矩形区域中，通过盒子的视角更方便进行页面布局。</p>
    
    <h2>2.2 盒子模型的组成</h2>
        <div class="div1">
            <img src="E:\java\java_web\img\box.png" width="350px" height="200px" style="text-align: center;">
            <b>·content:</b>内容区域
            <b>·padding:</b>内边距<br>
            <b>·border:</b>边框
            <b>·margin:</b>外边区域
        </div>

    <h2>2.3 布局标签</h2>
        <p class="a1">实际上，这些盒子属性是用来修饰一些布局标签的，常见的布局标签有 <b>《span》</b>、<b>《div》</b></p>
    
        <p class="a2"><b style="color: blue;">《span》:</b> 一行可以显示多个span标签,height和width是默认由内容撑开的,不可设置</p>
            <span  style="margin-left: 100px;">效果：</span>
            <span>span1</span>  <span>span2</span>

        <p class="a2"><b style="color: blue;">《div》:</b> 一行只能有1个div标签,宽度默认为父元素的宽度，高度由内容撑开,可以设置宽和高</p>
            <span style="margin-left: 100px;">div盒子模型的效果见上盒子模型的组成部分</span>

<hr>

    <h1>3.表格标签</h1>
    <h2>3.1 标签及说明</h2>

    <p class="a1"><b>·table:</b> 定义表格整体，可以包括多个<b>tr</b></p>
    <p class="a3">·属性：</p>
    <div style="margin-left: 80px;">
        ·border: 表的边框宽度<br>
        ·style中：<br>
        &nbsp; &nbsp;·width: 表宽<br>
        &nbsp; &nbsp;·cellspacing: 单元之间的空间(已经不用了，用border-spacing)
    </div>

    <p class="a1"><b>·tr:</b> 定义表格的 “行”，可以包括多个<b>td/th</b></p>
    <p class="a1"><b>·td:</b> 定义表格的 “普通内容单元格”</p>
    <p class="a1"><b>·th:</b> 定义表格的 “表头单元格”</p>
    
    <p class="a1">效果展示：</p>
    
    <table border="5px" style="width: 400px;border-spacing: 0px; text-align: center;">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>a123</td>
            <td>a班</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>b124</td>
            <td>b班</td>
        </tr>



    </table>


</body>
</html>