javaweb学习

ITjingxinbao

已于 2023-06-28 21:53:31 修改

阅读量205

点赞数

分类专栏： javaweb 文章标签：学习

于 2023-06-28 12:28:10 首次发布

本文链接：https://blog.csdn.net/ITjingxinbao/article/details/131423331

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本结构和常用标签的用法，包括文档类型声明、字符集设置、标题标签（h1-h6）、font标签（颜色、大小、字体）、超链接（a标签）、图片（img标签）、有序列表（ol标签）、无序列表（ul标签）、特殊符号、表格（table标签）以及表单元素（form标签、input类型）。这些内容构成了HTML页面构建的基础。

摘要由CSDN通过智能技术生成

html初步使用

<!DOCTYPE html>//文档类型说明注释
<html lang="en">//使用语言的地区en表示美国英国
<head>
    <meta charset="UTF-8">//文件的字符集
    <title>Title</title>文件的标题
</head>
<body>
hh,njad
</body>
</html>

font标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>front标签</title>
</head>
<!--color属性改变颜色
face属性修改字体 size属性修改文本大小-->
<body>
<font color="#8a2be2" size="40px" face="微软雅黑">北京 </font>
</body>
</html>

标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--h1是最大标签 h6是最小标签
align属性是对齐属性 left是左对齐 center是居中 right是右对齐-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3  align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>

在这里插入图片描述

图片标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--img标签是图片标签用来显示图片
src属性设置图片的路径 width属性设置图片的宽度
height属性设置图片的高度 border属性图片边框大小
alt属性设置当前指定路径找不到图片代替显示的文本内容
-->
<h1>图片标签演示</h1>
<img src=".idea/1.png" width="400" border="10px" ><br/>
<img src=".idea/2.png" alt="美女找不到" ><br/>
</body>
</html>

在这里插入图片描述

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a标签是超链接
href属性设置连接的地址 terget属性设置那个目标进行跳转
self表示当前页面 blank表示打开新页面进行跳转-->
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sohu.com" target="_blank">搜狐2</a><br/>

</body>
</html>

ol有序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--ol表示有序列表
li列表项 type属性指定列表项排序方式 type设定数目款式
1阿拉伯数字 a小写字母 A是大写字母 i是小写罗马数字 I是大写罗马数字-->
<h1>五虎将</h1>
<ol type="A" start="3">
    <li>jack</li>
    <li>tom</li>
    <li>jbk</li>
    <li>jlck</li>
    <li>ck</li>

</ol>
</body>
</html>

在这里插入图片描述

ul无序标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--ul表示无序列表 li列表项 taget属性指定列表项符号-->
<h1>五虎将</h1>
<ul type="circle">
    <li>jack</li>
    <li>tom</li>
    <li>jbk</li>
    <li>jlck</li>
    <li>ck</li>

</ul>
</body>
</html>

特殊符号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<是&lt
 >是&gt 空格是&nbsp-->
jack <hr/>
&lt;hr/&gt;
smith smith2&nbsp;&nbsp;&nbsp;hsp<br/>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--table标签是表格标签border 设置表格标签
width 设置表格宽度height align表格相对与页面的对齐方式
cellspacing设置单元格间距 tr是行标签 th是表头标签
td是单元格标签 align设置单元格文本对齐方式 b是加粗标签-->
<h1>表格标签的使用</h1>
<table width="500px" border="1" height="400" align="center">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第一列 </td>
        <td>第一行第一列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

表格练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--合并列colspan 列数
合并行 rowspan 行数
cellspace指定单元格的空隙大小 0表示没有空隙
border表格边框 width表格的宽度-->
<table>
    <tr border="1" width="500" cellspace="0"
        bordercolor="red">
        <td align="center" colspan="3">星期一菜谱</td>

    </tr>
    <tr>
        <td rowspan="2">第二行第一列</td>
        <td>第二行第二列</td>
        <td>第三行第三列</td>
    </tr>
    <tr>
        <td>第三行第2列</td>
        <td>第三行第3列</td>
    </tr>
    <tr>
        <td rowspan="2">第四行第一列</td>
        <td>第四行第二列</td>
        <td>第四行第三列</td>
    </tr>
    <tr>
        <td>第五行第二列<img src="./2.png" width="100
"></td>
        <td>第五行第三列</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--form表示表单 action提交到那个页面
method提交方式 常用get和post
input type=text输入框 input type=password密码框
input type=submit提交框 input type=reset 重置按钮-->
<h1>登陆系统</h1>
<form action="ok.html" method="get">
    用户名:<input type="text" name="username"><br/>
    密码:<input type="text" name="username"><br/>
    <input type="submit" value="登陆">
    <input type="reset" value="重新填写">
</form>
</body>
</html>