javaweb之html知识回顾_javaweb中p标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74167954/article/details/135710916

一.基础知识

（1）结构介绍

HTML 指的是超文本标记语言: HyperText Markup Language

对于html语言离不开的就是<>标记（也可以解读为标签）一般格式都是<**>内容</**>（下面会具体讲解）

他的基本格式就是如下图所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>声明为html文档版本

<html>则是根标记,<html>标志文档的开始</html>标志文档的结束，也就是说你的代码必须在html标记内部进行写入

<head>标签是头部标记，用来封装文档的头部信息

<body>标记是主题标记，显示的是你的网页的所有内容

（2）标记介绍（下面的代码都是在body标记内部写的）

首先介绍下标记的分类，大部分标记都是成对出现的（包含开始标记与结束标记），因此这类标记被称为双标记，当然对应的就有单标记（这里大家知道就可以）

1.p标签是段落标签，就是我们在浏览网页的时候看见的一大段的文字

   <p>这是一个段落标签</p>
    <p>我还会回来的</p>

2.标题标记，一般都是那些字体较大的（从1到6代表的是他们字体的大小不等）

    <h1>你好世界</h1>
    <h2>你好世界</h2>
    <h3>你好世界</h3>
    <h4>你好世界</h4>
    <h5>你好世界</h5>
    <h6>你好世界</h6>

3.img标记，又被称为图像标记

内部的src属性是放入图片的路径，内部可以对图片进行设置大小格式

路径位置分为绝对路径以及相对路径
绝对路径：绝对的磁盘文件路径（复制你的文件地址）、绝对的网络路径（在浏览器中复制图片的地址）

相对的路径（相当于你当前项目内的文件）：./当前目录的文件 ../上一级目录文件
宽度以及高度的设置是可以进行像素px直接设置大小或者百分比（相对于浏览器而言）

<img src="C:\Users\Lenovo\Desktop\feed1.jpg" width="100" height="50">新浪微博>正文

4.audio音频标记，vido视频标记

     <!-- 视频标记 -->
     <video src="C:\Users\Lenovo\Desktop\原神.mp4"></video>
     <!-- 音频标记 -->
     <audio src="./video/原神.mp4"></audio>

到这里是不是想着原神启动哈哈哈嗝，但是我的老婆动不了呀，怎么办，哎，别急，这里就要说到这两个标签的坑啦

这里呢就是需要你自己在标签内部写一个对应的controls属性

     <!-- 视频标记 -->
     <video src="C:\Users\Lenovo\Desktop\原神.mp4" controls></video>
     <!-- 音频标记 -->
     <audio src="./video/原神.mp4" controls></audio>

好的宝子们来请大家看我老婆！！！！！！！！

video标记展示视频

5.table表格标记，tr控住行，td控制列（可以控制大小属性，以及分割线宽度）

border边框宽度，width表格宽度，cellspacing单元格之间的空间

    <table border="1px" width="600px" cellspacing="0px">
        <tr>
            <td>你好</td>
            <td>刘宇成</td>
            <td>考试</td>
            <td>过不过</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>刘宇成</td>
            <td>考试</td>
            <td>过</td>
        </tr>
    </table>

6.form表单标记（就是对于我们平时写的调研），来吧直接看代码

 <form action="" method="post">
        姓名：<input type="text" name="name" id=""><br>
        密码: <input type="password" name="password"><br>
        性别:<label><input type="radio" name = "gender" value="1">男</label>
            <label><input type="radio" name="gender" value="2">女 </label> <br>
        爱好:<label><input type="checkbox" name="hobby" value="Java"> java </label>
        <label ><input type="checkbox" name="hobby" value="game">game</label>
       <label><input type="checkbox" name="hobby" value="sing"> sing </label><br>
       图像: <input type="file" name="image"> <br><br>
       生口: <input type="date" name="birthday"> <br><br>
       时间: <input type="time" name="time"> <br><hr>
       日期时间: <input type="button" name="datetime"> <br><br>
       邮箱: <input type="email" name="email"> <br><br>
       年龄:<input type="number" name="age"> <br><hr>
       学历:<select name="degree">
        <option value="">-----请选择------</option>
        <option value="1">本科</option>
        <option value="2">大专</option>
        <option value="3">研究生</option>
        <option value="4">博士</option>
       </select><br>
       <textarea name="description"  cols="30" rows="10"></textarea>
       <input type="hidden" name="id" value="1">
    </form>

好的，宝子们我来介绍一波。

所有的表单属性都是包含在form标记内部，label代表聚焦标记，可以点击文字就能选上。

select顾名思义--选择，所以他属于下拉选择标记，配合option来进行选项的选择，值得一提的是

他会默认把你的第一个option内容输出来作为提示

对应的type属性可以指定不同的类型大家可以查看，这里我说下他的单选框，单选框必须确报对应的name属性一致，才可以进行单选判断

action规定提交表单向何处进行发送url路径（不指定就默认当前页面）
method规定的是用于发送表单数据的方式，
get在网址进行，长度有限制，默认值
post在请求体当中进行的接收

下图是post方式，在对应的本地网络传输进行了数据展示

   <form action="" method="post">
        <!-- 必须指定对应的数据name -->
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="提交">
    </form>

接下来是get方法，他是在你的网址链接上进行的输出

    <form action="" method="get">
        <!-- 必须指定对应的数据name -->
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="提交">
    </form>

7.列表标记

无序列表ul与li

<ul>
    <li>属性1</li>
    <li>属性2</li>
    <li>属性3</li>
</ul>

原点是可以利用后续的css来进行替换

8.a超链接标记

哈哈哈，宝子们这里就不给大家展示啦，害怕被封号哈哈哈，大家可以自己去试试

hre属性就是存放你的网址链接，可以是你自己的html文件也可以是你在浏览器上找的你喜欢的网站链接哟。

<a href="https://blog.youkuaiyun.com/m0_74167954?type=blog">点我带你体验不一样的</a>

好的，老表们，今天的分享就到此结束啦，下一步就是发css以及jsp的知识。欢迎大家评论留言哟