前端之HTML

小赵睡不醒：

已于 2023-04-07 09:59:20 修改

阅读量93

点赞数

分类专栏： javaweb 文章标签： html 前端 css

于 2023-04-07 09:44:35 首次发布

本文链接：https://blog.csdn.net/m0_63932157/article/details/130004664

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

javaweb整体框架

网页的组成

HTML 是什么

1.HTML 即超文本标签语言(可以展示的内容类型很多)。
2.HTML文本是由HTML标签组成的文本。可以包括文字，图形，动画，声音，表格，链接等。
3.HTML 的结构包括头部(Head) ，主体(Body) 两大部分。

快速入门

<!--文档类型说明 注释-->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英语美国 -->
<html lang="en">
  <!--HTML 头 -->
  <head>
    <!--charser 文件的字符集 -->
    <meta charset="UTF-8">
    <!--文件标题 -->
    <title>Title</title>
  </head>
  <!--body 体，主体部分 -->
  <body>
    <!-- 内容 -->
    hello,world
  </body>
</html>

注意：
1.HTML 文件不需要编译，直接由浏览器进行解析执行。
2.可以选择的浏览器，是电脑安转有的浏览器，如果没有安装这个浏览器，会报错。

HTMl 标签注意事项

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--
    1.标签不能交叉嵌套
    2.标签必须正确关闭
    3.注释不能嵌套
    4.html 语法不严谨，有时标签不闭合，属性值也不带"" 也不会报错
    -->
    <!--1.标签不能交叉嵌套 要一一对应-->
    <div><span>tom</span>></div>
    <!--2.标签必须正确关闭-->
    <span>jack</span>>
    <!--3.注释不能嵌套-->
    <!--4.html 语法不严谨，有时标签不闭合，属性值也不带"" 也不会报错-->

  </body>
</html>

front 字体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--字体标签
1。应用:在网页显示北京，并修改字体为微软雅黑，颜色为 blue
2.front 标签是字体标签，可以用来修改文本的字体，颜色，大小
(1)color 属性修改颜色
(2)face 属性修改字体
(3)size 属性修改文本大小
对应标签的属性，顺序不做要求
-->
<front color="blue" size="10px" face="微软雅黑"> 北京 </front>

</body>
</html>

字符实体

1.在网页上显示一些特殊符号，称为字符实体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--  浏览器会将 <hr/> 解析成一条线-->
<!--特殊字符 将 <hr/> 变成文本，显示在页面上
常用特殊字符 :
<: &lt;
>: &gt;
空格: &nbsp;
-->
<hr/>
&lt;hr/&gt;
smith &nbsp smith
</body>
</html>

标题标签

1.标题使用，标签进行定义。< h1 > 定义最大的标签。< h6 > 定义最小的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--应用:演示标题 1 到 标题 6
 align : 属性是对其属性
 left :左对齐(默认)
 center :居中
 right : 右对齐
 -->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4 align="left">标签4</h4>
<h5 align="right">标签5</h5>
<h6>标签6</h6>

</body>
</html>

超链接标签

1.超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同网页的不同位置，还可以是一个图片，一个电子邮件，一个文件，甚至一个应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
说明:
a 标签是 超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
    _self : 表示当前页面(默认值) 使用当前页替换目标页
    _blank: 表示打开新页面进行跳转
-->
<a herf="https://www.bilibili.com"> bilibili</a><br/>
<a herf="https://www.bilibili.com" target="_blank">bilibili2</a><br/>
<!--点击超链接，打开邮件-->
<a herf="mailto:tom@sohu.com">联系管理员</a>

</body>
</html>

无序列表ul/li

基本语法：

列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
ul : 表示无序列表
li : 列表项
type属性 :指定列表前的符号
-->
<h1>五虎将</h1>
<ul >
  <li>jack</li>
  <li>tom</li>
  <li>lili</li>
  <li>john</li>
  <li>smith</li>
</ul>

</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
ol 表示有序列表
li 列表项
type属性: 指定列表项前排序方式
type 设定数目款式，其值有五种，默认为 start="1"

-->
<h1>五虎将</h1>
<ol type="1">
    <li>jack</li>
    <li>tom</li>
    <li>lili</li>
    <li>john</li>
    <li>smith</li>
</ol>

</body>
</html>

图像标签img

1.img 标签可以在 html 页面上显示图片

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

<!--
在 web 中路径分为绝对路径和相对路径
相对路径 : . 表示当前文件夹的目录
        .. 表示当前文件夹的上一级目录
 文件名： 表示当前文件所在目录对的文件，相当于 ./文件名./..
 绝对路径: 正确格式 : https//IP地址:port/工程名/资源路径 使用 url 定位资源
        错误格式: 盘符:/目录/文件名
-->
<h1>图片标签</h1>
<!--./ imgs/.... 表示当前目录下 imgs 文件夹的 文件-->
<!--进行图片缩放时，指定 width 或者 height 即可，会自动按照比例缩放-->
<img src="./imgs/1.png" width="400"><br/>
<img src="./imgs/1.png"  alt="美女找不到"><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:是加粗标签
px:表示像素
-->

<tbale width="500"  border="6" align="center">
  <h1>表格标签的使用</h1>
    <th>
      <td>姓名</td>
      <td>住址</td>
      <td>邮件</td>
    </th><br/>
    <tr>
      <td>第1行第一列</td>
      <td>第1行第二列</td>
      <td>第1行第二列</td>
    </tr><br/>
    <tr>
      <td>第2行第一列</td>
      <td>第2行第二列</td>
      <td>第2行第二列</td>
    </tr><br/>
    <tr>
      <td>第3行第一列</td>
      <td>第3行第二列</td>
      <td>第3行第二列</td>
    </tr><br/>
</tbale>

</body>
</html>

跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
合并行 : colspan="列数"
合并行 : rowspan="行数"
cellspacing : 指定单元格间的空隙大小，0表示没有空隙
bordercolor : 指定表格边框的颜色
width : 表格的宽度
-->
  
<!--1.先把表格的行和列展示出来
    2.再使用合并
    3.把第一行的三列合并了
    4.如果是十六进制的颜色，要加 #
-->
<table border="1" bordercolor="#E87efA" cellspacing="0" width="500px">
  <tr>
<!--   合并了三列 -->
    <td align="center" colspan="3">第1行第1列</td>

  </tr>
  <tr>
<!--    合并行 跨行-->
    <td rowspan="2">第2行第1列</td>
    <td>第2行第2列</td>
    <td>第2行第3列</td>
  </tr>
  <tr>
<!-- 把第三行的第一列删除 -->
    <td>第3行第2列</td>
    <td>第3行第3列</td>
  </tr>
  <tr>
    <td rowspan="2">第4行第1列</td>
    <td>第4行第2列</td>
    <td>第4行第3列</td>
  </tr>
  <tr>
<!-- 把第五行的第一列删除 -->
    <td>红烧肉<img src="imgs/1.png" width="100"></td>
    <td>第5行第3列</td>
  </tr>

</table>
</body>
</html>

form(表单)标签介绍

<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1. form 表示表单
2. action 提交到哪个页面
3.method 提交方式，常用 get 和 post
4.input type=text 输入框
5.input type=password 密码框
6.input type=submint 提交按钮
7.input type=reset 重置按钮
为了和汉字对齐，输入全角的空格即可
method 不写默认是 get
 ok.html 是在同一级目录下查找的
-->

<h1>登录系统</h1>
<form action="ok.html" method="get">
  用户名:<input type="text" name="username"><br/>
  密 码:<input type="password" name="username"><br/>
  <input type="submit" value="登录"><input type="reset" value="重新填写">
    <input type="image" src="imgs./1.png" width="40" value="登录">
</form>

</body>
</html>

//ok.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
<h1>恭喜你，登录成功</h1>
</body>
</html>

input标签/元素

select/option/textarea 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
form 标签就是表单
input type=text : 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组
checked="checked"表示默认选中input

type=checkbox 是复选框，checked="checked"表示选中的意思

input type=reset 是重置按钮 value 属性修改按钮上的文本
input type=submit 是提交按钮 value 属性修改按钮上的文本
input type=button 是按钮 value 属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域
当我们发送某些消息，而这些消息，不需要用户参与，就可以使用隐藏域(
提交的同时发送非服务器)

select 标签是下拉列表框
option 标签是下拉列表框中的选项
selected="selected"设置默认选中

textrea 表示多行文本输入框(起始标签和结束)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
一定不要忘了用 form 标签把 input 包起来
一定要给 input 元素设置 name 属性 否则，数据提交不到服务器
注意checkbox 是复选框，如果希望是同一组，要保证 name 属性一致.
注意在 checkbox select radio 提交数据时，提交的是 value 的值，不是页面的值
-->
<form>
    用户注册信息<br/>
    用户名称:<input type="test" name="username"><br/>
    用户密码:<input type="password" name="username"><br/>
    确认密码:<input type="password" name="username"><br/>
    请选中你喜欢的运动项目:<br/>
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="pq" checked>排球<br/>
    请选择你的性别:<br/>
    <input type="radio" name="gender" value="male">男<br/>
    <input type="radio" name="gender" value="female">女<br/>
    请选择你喜欢的城市
    <select name="city">
        <option>--选择--</option>
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select><br/>
    自我介绍
    <textarea rows="6" cols="20"></textarea><br/>
    选择你的文件<input type="file" name="myfile"><br/>
    <input type="submit" value="提交"><input type="reset" value="重置">
    
</form>
</body>
</html>

表单格式化

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

<form>
  用户注册信息<br/>
  <table>
    <tr>
      <td>用户名称:</td>
      <td><input type="test" name="username"></td>
    </tr>
    <tr>
      <td>用户密码:</td>
      <td><input type="password" name="pwd"></td>
    </tr>
    <tr>
      <td>确认密码:</td>
      <td><input type="password" name="pwd1"></td>
    </tr>
    <tr>
      <td>请选中你喜欢的运动项目:<td/>
      <td><input type="checkbox" name="sport" value="lq">篮球
        <input type="checkbox" name="sport" value="zq" checked>足球
        <input type="checkbox" name="sport" value="pq" checked>排球
      </td>
    </tr>
    <tr>
      <td>请选择你的性别:<td/>
      <td><input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女</td>
    </tr>
    <tr>
      <td>请选择你喜欢的城市:<td/>
      <td><select name="city">
        <option>--选择--</option>
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
      </select></td>
    </tr>
    <tr>
      <td>自我介绍</td>
      <td><textarea rows="6" cols="20"></textarea><br/></td>
    </tr>
    <tr>
      <td>选择你的文件</td>
      <td><input type="file" name="myfile"></td>
    </tr>
    <tr>
      <td><input type="submit" value="提交"></td>
        <td><input type="reset" value="重置"></td>
    </tr>
  </table>
</form>

</body>
</html>

表单提交的注意事项

1.action 属性设置提交的服务器地址。
2.method 属性设置提交的方式 GET(默认) 或 POST。
3.表单提交的时候，数据没有发给服务器的三种情况：

表单某个元素没有 name 属性值。
单选，复选(下拉列表的option 标签)都需要添加 vlaue 属性，以便发送给服务器。
表单项不在提交的 form 标签中。

4.注意在 checkbox select radio 提交数据时，提交的是 value 的值，不是页面的值。
5.对于 checkbox 复选框，可以提交多个字，但是name 是统一的。都是 sport。

6.GET 请求的特点：

浏览器的地址栏的地址:action属性[+?+请求参数] 请求参数的格式是 name=value&name=value。
不安全。
有数据长度限制。

7.POST 请求的特点：

浏览器地址栏只有action 属性值，提交的数据是携带在http 请求中，不会限制在地址栏。
相对于GET 请求安全。
理论上没有数据长度的限制。

div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.<div> 标签可以把文档分割为独立的，不同的部分
2.<div> 是一个块级元素，它的内容自动地开始一个新行，不需要写 <br/>
-->
hello,world
<div>
  <h3 style="color:blue">this is a h3</h3>
  <a href="http://www.baidu.com">goto 百度 </a>
</div>
</body>
</html>

p标签和span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.<p> 标签定义段落
2. p 元素会在自动在其前后创建一些空白
-->
hello,world
<p>段落2</p>
<p>段落1</p>
<p>段落3</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.span 标签是内联元素，不像块级元素有换行的效果
2.如果不对span 应用样式，span 标签没有任何显示效果
专门去修饰或者强调的内容
往往是为了单独控制某个单独的内容
-->
你的购物车有<span style="color:red;font-size:40px">10</span>个商品

</body>
</html>