JavaWeb系列一: HTML

已于 2024-09-05 14:13:20 修改
阅读量1.1k 收藏 2
点赞数 1
分类专栏： JavaWeb 文章标签： html 前端 java
于 2023-03-01 10:36:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18817831/article/details/129244424
版权

目录

在这里插入图片描述

🎉 欢迎来到 JavaWeb系列一: HTML 🎉

在本篇文章中，我们将初步了解和学习 HTML。HTML（超文本标记语言）是构建网页的基础，通过掌握 HTML，您可以创建和设计各种网页内容。

🔧 本篇需要用到的项目: html项目

B/S软件开发架构简述

●JavaWeb技术体系图. 一图胜千言

B/S架构
1.B/S框架，意思是前端(Browser 浏览器)和服务器端(Server)组成的系统的框架结构。

2.B/S架构也可理解为web架构，包含前端、后端、数据库三大组成部分。

3.示意图 ， 看前面的图即可

 前端
前端开发技术工具包括三要素：HTML、CSS 和 JavaScript，还有很多高级的前端框架，如bootstrap、jquery，VUE 等。
 后端
后端开发技术工具主要有：Net、JAVA、PHP, Go 等
 数据库
主流的三种关系型数据库：Mysql、SQLserver、Oracle ，还有 Nosql 非关系型数据库：Redis、ogodb 等。

HTML官方文档

地址: https://www.w3school.com.cn/html/index.asp

离线文档:W3School 离线手册(2017.03.11 版).chm

网页

网页的组成

结构(HTML)
HTML是网页内容的载体, 内容就是网页制作者放在页面上想要让用户浏览的信息, 可以包含文字, 图片, 视频等.

表现(CSS)
CSS样式是表现, 就像网页的外衣. 比如, 标题字体, 颜色变化, 或为标题加入背景图片, 边框等. 所有这些用来改变内容外观的东西称之为表现.

行为(JavaScript, jQuery)
JavaScript是用来实现网页上的特效效果. 如: 鼠标滑过弹出下拉菜单, 或鼠标滑过表格的背景颜色改变, 还有购物网站中图片的轮换, 可以这么理解, 有动画的, 有交互的一般都是用JavaScript实现的.

案例演示

https://www.jd.com/

说一下:
ff 进入到调试页面 ctrl+shift+i
谷歌浏览器 进入到调试页面 ctrl+shift+i

HTML介绍

HTML是什么

1.HTML(HyperText Mark-up Language)即超文本标签语言.

2.HTML文本是由HTML标签组成的文本, 可以包括文字, 图形, 动画, 声音, 表格, 链接等.

3.HTML的结构包括头部Head, 主体Body两大部分, 其中头部描述浏览器所需的信息, 而主题则包含所要说明的具体内容.

HTML运行方式

本地访问

在这里插入图片描述

浏览器使用情况分布: https://tongji.baidu.com/main/overview/demo/overview/index

远程访问

在这里插入图片描述

HTML快速入门

需求: 使用idea 编写hello.html, 查看运行效果.

1.创建java项目 html

在这里插入图片描述

2.创建html页面 hello.html

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello,你好</title>
</head>
<body>
hello,你好
</body>
</html>

注意事项和细节

1.HTML文件不需要编译, 直接由浏览器进行解析执行.

2.可以选择的浏览器, 是你电脑安装有的浏览器, 如果没有安装这个浏览器, 会报错.

HTML基本结构

<!--DOCTYPE 文档类型说明-->
<!DOCTYPE html>
<!--使用语言的地区 en 表示英国 美国 en-US-->
<html lang="en">
<!--html头-->
<head>
    <!--charset 文件的字符集-->
    <meta charset="UTF-8">
    <!--文件标题-->
    <title>赵志伟</title>
</head>
<!--body体, 主体-->
<body>
    <!--内容 注释快捷键: ctrl+/ 格式化: ctrl + alt + l-->
    <!--单标签-->
    <hr/>
    mary <br/>
    hello, 赵志伟
</body>
<!--表示整个html页面的结束-->
</html>

HTML标签/元素

官方文档

1.在线文档: https://www.w3school.com.cn/

2.离线文档:W3School 离线手册(2017.03.11 版).chm

基本说明

1.HTML标签用两个尖括号’<>'括起来.

2.HTML标签一般是双标签, 比如<b>和</b>, 前一个标签是起始标签, 后一个标签为结束标签.

3.两个标签之间的文本是html元素的内容.

4.某些标签称为单标签, 因为它只需单独使用就能完整地表达意思. 如<br/><hr/>

5.HTML元素指的是从开始标签到结束标签的所有代码.

在这里插入图片描述

注意事项和细节

1.创建tab-detail.html, 说明标签使用的细节.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签细节</title>
</head>
<body>
<!--标签使用细节:
    1.标签不能交叉嵌套
    2.标签要正确关闭
    3.注释不能嵌套 Bad character
    4.tml 语法不严谨,有时候标签不闭合, 属性值不带""也不报错
-->
<!--标签不能交叉嵌套-->
<div><span>你好</span></div>
<!--<div><span>你好</div></span> Element span is not closed-->
<!--标签要正确关闭-->
<span>你好</span>
<!--注释不能嵌套 Bad character-->
<!--html 语法不严谨,有时候标签不闭合, 属性值不带""也不报错-->
<font color="blue">李四</font>
<font color=blue>李四</font>
</body>
</html>

font字体标签

应用实例, 创建font.html, 在网页上显示, 北京, 并修改字体为 微软雅黑, 颜色为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font字体标签</title>
</head>
<body>
<!--字体标签
    应用实例, 创建`font.html`, 在网页上显示, 北京,
并修改字体为 微软雅黑, 颜色为蓝色
    font是字体标签,它可以用来修改文本的字体, 颜色, 大小(尺寸)
    1.color属性: 修改颜色
    2.face属性: 修改字体
    3.size属性: 修改文本大小
    注意: 对应标签的属性, 没有顺序要求
    -->
<font face="微软雅黑" color="blue" size="40">北京</font>
</body>
</html>

字符实体

1.在网页上显示一些特殊的符号, 称为字符实体(也叫符号实体).

2.应用实例, 创建char-entity.html. 将<br/>以为本的方式显示在页面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符实体</title>
</head>
<body>
<!--特殊字符 应用实例
    把<hr/>显示在页面上
    常用的特殊字符:
    <: &lt;
    >: &gt;
    空格: &nbsp;
-->
example
<!--浏览器会将 <hr/> 解析成一条直线-->
<hr/>
to    m<br/><!--默认一个空格-->
&lt;hr/&gt;<!--封号不要忘记-->
to&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m
</body>
</html>

字符实体一览表

常用的字符实体

在这里插入图片描述

其它字符实体

在这里插入图片描述

标题标签

1.标题使用<h1>-<h6/>标签进行定义. </h1>定义最大的标题, </h6>定义最小的标题.

2.应用实例 创建title.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<!--
    标题标签
    1.h1~h6都是标题标签, h1最大, h6最小
    2.align属性 是对其属性
    (1)left: 默认左对齐
    (2)center: 居中
    (3)right: 右对齐
-->
<h1 align="center">标签1</h1>
<h1>标签2</h1>
<h1 align="right">标签3</h1>
<h1>标签4</h1>
<h1>标签5</h1>
<h1>标签6</h1><!--最多到h6-->
</body>
</html>

超链接标签

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

2.应用实例 创建link.html, 链接到 搜狐网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
    老韩说明：
    1.a标签 是超链接
    2.href 属性设置链接的地址
    3.target 属性设置哪个目标进行跳转
        _self: 表示当前页(默认值), 即使用当前页替换目标页
        _blank: 表示打开新页面进行跳转
    4.mailto: 点击超链接，打开邮件
    -->
<a href="http://www.baidu.com" target="_self">百度</a><br/>
<a href="http://www.sohu.com" target="_blank">搜狐</a><br/>
<a href="mailto:978964140@qq.com">发送邮件</a>
</body>
</html>

无序列表ul/li

1.ul/li 基本语法

在这里插入图片描述

2.应用实例 创建ul_li.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li标签</title>
</head>
<body>
<!--
    ul: 无序列表
    li: 列表项
    type属性: 指定列表项前的符号
-->
<ul type="circle">
    <li>张飞</li>
    <li>关羽</li>
    <li>赵云</li>
    <li>黄忠</li>
    <li>马超</li>
</ul>
</body>
</html>

有序列表ol/li

1.基本语法

在这里插入图片描述

2.应用实例 创建ol-li.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
<h1>五虎上将</h1>
<ol type="1" start="3"><!--3,4,5,6,7-->
  <li>张飞</li>
  <li>赵云</li>
  <li>关羽</li>
  <li>黄忠</li>
  <li>马超</li>
</ol>
</body>
</html>

图像标签(img)

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

2.应用实例 创建img.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--应用实例
    img标签: 图片标签, 用来显示属性
    src属性: 可以设置图片的路径
    width属性: 设置图片的宽度
    height属性: 设置图片的高度
    border属性: 设置图片边框大小
    alt属性: 设置当指定路径找不到图片时, 用来代替显示的文本内容
    相对路径: 从工程名开始算起
    绝对路径: 盘符:/目录:/文件名

    在web中路径分为相对路径和绝对路径
    相对路径: . 表示当前文件所在的目录
             .. 表示当前文件所在的上一级目录
    文件名: 表示当前文件所在目录的文件, 相当于 ./文件名 ./可以省略
    绝对路径: 正确格式是: http://IP地址:port/工程名/资源路径, 即使用url方式定位资源, 可能是个css, 也可能是个js
             错误格式是: 盘符:/目录:/文件名, 这种方式一般指本地打开, 但是找不到服务器中的资源
-->
<h1>图像</h1>
<!--
  src="imgs/1.jpg" 表示当前目录下的imgs文件夹下的1.jpg
  在进行图片缩放时, 建议指定width或者height即可, 浏览器会按照比例显示
-->
<!--如果只是指定width或者height, 浏览器会按照比例显示, 图片不会变形-->
<img src="imgs/1.jpg" width="200"><br/><!--按比例缩放-->
<!--如果同时指定width和height, 自己需要计算, 否则图像会变形-->
<img src="imgs/1.jpg" width="200" height="400"><br/><!--比例遭到破坏-->
<img src="imgs/1.jpg" width="200" border="10"><br/><!--指定边框-->
<img src="imgs/2.jpg" width="200" border="10" alt="图片找不到啦!"><!--指定alt-->
</body>
</html>

表格标签

1.基本语法

在这里插入图片描述

2.应用实例, 创建table.html, 显示3行3列的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签使用</title>
</head>
<body>
<!--
    说明
    table标签: 是表格标签
    border属性: 设置表格标签边框大小
    width属性: 设置表格宽度
    height属性: 设置表格高度
    align属性: 设置表格相对于页面的对齐方式
    cellspacing属性: 设置单元格间距
    tr标签: 行标签
    th标签: 表头标签
    td标签: 单元格标签
    align标签: 设置单元格文本对齐方式
    b标签: 加粗
    px: 表示像素
-->
<h1 align="center">表格标签使用</h1>
<table width="500" border="5" align="center">
  <tr>
    <th>姓名</th><!--表头, 字体自动居中, 加粗-->
    <th>年龄</th>
    <th>爱好</th>
  </tr>
  <tr>
    <td>第1行第1列</td>
    <td>第1行第2列</td>
    <td>第1行第3列</td>
  </tr>
  <tr>
    <td>第2行第1列</td>
    <td>第2行第2列</td>
    <td>第2行第3列</td>
  </tr>
  <tr>
    <td>第3行第1列</td>
    <td>第3行第2列</td>
    <td>第3行第3列</td>
  </tr>
</table>
</body>
</html>

表格标签-跨行跨列表格

1.编写如下网页

在这里插入图片描述

2.思路:
(1)先把整个表格的完整的行和列,展示出来5*3
(2)再使用合并的技术,进行合并
(3)如果是16进制的颜色, 前面#

3.创建table2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列表格</title>
</head>
<body>
<!--
    在同一行合并列: colspan="列数", 然后去掉多余的列
    在同一列合并行: colspan="函数", 然后去掉多余的行
    cellspacing: 指定单元格间的空隙大小, 0表示没有空隙
    bordercolor: 指定表格边框的颜色
    border: 表格边框
    width: 表格宽度
-->
<table align="center" border="1" bordercolor="blue" cellspacing="0" width="500">
  <tr>
    <td colspan="3">星期一菜谱</td><!--合并列, 在同一行合并3列-->
  </tr>
  <tr>
    <td rowspan="2">素菜</td><!--合并行, 跨行合并-->
    <td>青草茄子</td>
    <td>花椒扁豆</td>
  </tr>
  <tr>
    <td>小葱豆腐</td>
    <td>炒白菜</td>
  </tr>
  <tr>
    <td rowspan="2">荤菜</td><!--合并行, 跨行合并-->
    <td>油闷大虾</td>
    <td>海参鱼翅</td>
  </tr>
  <tr>
    <td>红烧肉<img src="imgs/1.jpg" width="100"></td>
    <td>烤全羊</td>
  </tr>
</table>

</body>
</html>

form表单标签

基本介绍

在这里插入图片描述

在这里插入图片描述

解读: url表示定位一个web资源的路径, method主要有两种 get, post.

input标签

1.新建input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
您的姓名: <input type="text" name="姓名"><br/><br/>
<input type="checkbox" name="fruits">苹果
<input type="checkbox" name="fruits">香蕉<br/>
<input type="radio" name="fruits2">苹果
<input type="radio" name="fruits2">香蕉<br/><br/>
<input type="hidden" name="add" value="隐藏元素">这里有一个隐藏元素<br/><br/>
<input type="image" name="pic" width="400" src="imgs/1.jpg">
</body>
</html>

select / textarea标签

1.新建select_textarea.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select-textarea标签</title>
</head>
<body>
<form action="input.html" method="post">
  请选择你的爱好:
  <select name="hobby">
    <option value="chess1">围棋</option>
    <option value="chess2">五子棋</option>
    <option value="chess3">象棋</option>
  </select><br/><br/>
  <textarea name="content"></textarea><br/><br/>
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>
</body>
</html>

应用实例

1.编写如下网页, 创建form_login_html_ok.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单登录</title>
</head>
<body>
<!--
    form标签: 表单标签
    action属性: 表示提交到哪个页面
    method属性: 提交方式, 常用 get 和 post
    input type="text" 输入框
    input type="password" 密码框
    input type="submit" 提交按钮
    input type="reset" 重置按钮
    
    提示: 为了汉字对齐, 输入全角的空格即可
    method不写默认是get
-->
<h1>登陆系统</h1>
<form action="ol-li.html" method="get">
  用户名:<input type="text" name="username"><br/>
  密　码:<input type="password" name="password"><br/>
  <input type="submit" value="登录"> <input type="reset" value="重新填写">
</form>
</body>
</html>

2.表单综合案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--
    要用表单标签 把input元素包起来
    要给input标签设置name属性, 不然数据提交不到服务器
    注意: checkbox是复选框, radio是单选框, 如果希望是同一组,要保证name属性一致
    checkbox radio select 提交的是value的值
-->
<form action="ol_li.html" method="post">
    用户注册信息<br/>
    用户名称:<input type="text" name="username"><br/>
    用户密码:<input type="password" name="password"><br/>
    确认密码:<input type="password" name="password"><br/>
    请选中你喜欢的运动项目<br/>
    <input type="checkbox" name="sport" value="basketball" checked>篮球1<br/>
    <input type="checkbox" name="sport" value="soccer">足球1<br/>
    <input type="checkbox" name="sport" value="ping pang">乒乓球1<br/>
    请选择性别<br/>
    <input type="radio" name="sex" value="male" checked>男<br/>
    <input type="radio" name="sex" value="female">女<br/>
    请选择喜欢的城市<br/>
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
    自我介绍<br/>
    <textarea rows="6" cols="20"></textarea><br/>
    选择你的文件(头像)<br/>
    <input type="file" name="myfile"><br/>
    <input type="submit" value="提交啦"/>
    <input type="reset" value="重置"/><!--这里有没有结束标志都可以-->
</form>
</body>
</html>

3.form-format.html, 表单格式化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格格式化</title>
</head>
<body>
<form action="ol_li.html" method="get">
    <table align="center" width="600px">
        <tr>
            <th colspan="2"><h1>用户注册信息</h1></th>
        </tr>
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>喜欢的运动项目</td>
            <td><input type="checkbox" name="sport" value="basketball" checked>篮球
                <input type="checkbox" name="sport" value="soccer">足球
                <input type="checkbox" name="sport" value="ping pang">乒乓球
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="sex" value="male" checked>男
                <input type="radio" name="sex" value="female">女
            </td>
        </tr>
        <tr>
            <td>喜欢的城市</td>
            <td><select name="city">
                <option>--选择--</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
            </select></td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea rows="6" cols="20"></textarea></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表示将form表单的数据提交给哪个url, 即服务器的哪个资源(servlet)
2.method表示提交的方式, 主要是get / post
3.表单提交的时候, 表单某个元素项没有name属性值, 数据是不会发送给服务器的
4.对应的select, checkbox, radio提交的是value里的值
5.对应的复选框checkbox, 可以提交多个值,但name是统一的,sport=basketball&sport=soccer&sport=ping+pang
6.提交的数据一定要放在form表单中,否则数据不会提交
get 和 post的区别简述
1.get请求数据是显示在浏览器地址栏
2.get请求是不安全的
3.get请求有长度限制
4.post请求数据是和http传输的,藏在http请求体里, 相对安全
5.post传输的数据理论上是没有长度限制的,但是在实际的应用中,也不能太大

get请求

1.浏览器地址栏中的地址是: action属性[+ ? + 请求参数], 请求参数的格式是: name=value&name=value&name=value

示例: http://localhost:63342/html/ol_li.html?username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sex=male&city=beijing&myfile=4.wav

2.不安全;

3.它有数据长度的限制(不同的浏览器规定不一样, 一般2K)

post请求

1.浏览器地址栏中的地址只有action属性值,提交的数据是携带在http请求中,但是不会展示在地址栏, 示例: http://localhost:63342/html/ol_li.html

2.它真正发送的内容在请求头,抓包之后如下所示:

在这里插入图片描述

请求头
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 129
Content-Type: application/x-www-form-urlencoded
Cookie: Idea-6ebd3569=faa9d4e5-0604-49e7-8d6f-e8cb42e3da0c
Host: localhost:63342
Origin: http://localhost:63342
Referer: http://localhost:63342/html/form_detail.html?_ijt=899jn6q3snt19psj52q3u2sr6a&_ij_reload=RELOAD_ON_SAVE
sec-ch-ua: “Chromium”;v=“110”, “Not A(Brand”;v=“24”, “Microsoft Edge”;v=“110”
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: “Windows”
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36 Edg/110.0.1587.57
x-forwarded-for: 4.2.2.2
username=978964140%40qq.com&password=123&password=123&sport=basketball&sport=soccer&sport=ping+pang&sex=male&city=beijing&myfile=

3.相对get更安全, 如果要防抓包,还能用https协议;

4.理论上没有长度限制;

div标签

1.div标签可以把文档分成独立的, 不同的部分.

2.div是一个块级元素. 它的内容自动地开始一个新行, 不需要写<br/>

3.应用实例 div.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div容器标签</title>
</head>
<body>
<div>
  hello,world
</div>
<div>
  <h3 style="color: blue">This is a h3</h3>
</div>
<div>
  <a href="http://www.baidu.com" target="_blank">goto 百度</a>
</div>
</body>
</html>

p标签

1.p标签定义段落.

2.p标签会自动在其前后创建一些空白

3.应用实例 p.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
这是一个段落
这是一个段落
这是一个段落
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<div>这是一个段落</div>
<div>这是一个段落</div>
<div>这是一个段落</div>
</body>
</html>

在这里插入图片描述

span标签

1.span标签是内联元素[内嵌元素/行内元素], 不像块级元素(如div标签, p标签)有换行的效果.

2.如果不对span应用样式, span标签没有任何的显示效果.

3.span标签往往为了单独地控制某个关键内容.

4.语法<span>内容</span>

5.应用实例 span.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
<h1>span标签演示</h1>
<p><span style="color: blue">span标签1</span></p> span标签2 span标签3
</body>
</html>

课后作业

课后作业1：员工表格

需求：编写代码，创建homework01.html, 显示如下效果.

在这里插入图片描述

1.创建homework01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
</head>
<body>
<h1 align="center">雇员薪资信息</h1>
<!--4行6列-->
<table align="center" style="text-align: center" border="2" borderColor="#44309D" bgcolor="#CDCACE" cellspacing="0" width="600">
  <tr>
      <th colspan="6"><h2>员工信息表</h2></th>
  </tr>
  <tr>
    <th>编号</th>
    <th>名字</th>
    <th>性别</th>
    <th>薪水</th>
    <th>职位</th>
    <th>email</th>
  </tr>
  <tr>
    <td>111</td>
    <td>宋江</td>
    <td>男</td>
    <td>1000.00</td>
    <td>总裁</td>
    <td>sj@163.com</td>
  </tr>
  <tr>
    <td>111</td>
    <td>宋江</td>
    <td>男</td>
    <td>1000.00</td>
    <td>总裁</td>
    <td>sj@163.com</td>
  </tr>
  <tr>
    <td>111</td>
    <td>宋江</td>
    <td>男</td>
    <td>1000.00</td>
    <td>总裁</td>
    <td>sj@163.com</td>
  </tr>
</table>
</body>
</html>

课后作业2: 课程表

需求：编写代码，创建homework02.html, 显示如下效果.

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业2</title>
</head>
<body>
<h1 align="center">课程表</h1>
<!--8行8列-->
<table align="center" style="text-align: center" cellspacing="0" border="1" bordercolor="blue" width="800">
  <tr>
    <td colspan="8"><h1>课程表</h1></td>
  </tr>
  <tr>
    <th>项目</th>
    <th colspan="5">上课</th>
    <th colspan="2">休息</th>
  </tr>
  <tr>
    <th>星期</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期日</th>
  </tr>
  <tr>
    <td rowspan="4">上午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
    <td rowspan="4">休息</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
    <td>计算机</td>
  </tr>
  <tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
    <td>计算机</td>
  </tr>
  <tr>
    <td>政治</td>
    <td>英语</td>
    <td>体育</td>
    <td>历史</td>
    <td>地理</td>
    <td>计算机</td>
  </tr>
  <tr>
    <td rowspan="2">下午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td>计算机</td>
    <td rowspan="2">休息</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
    <td>计算机</td>
  </tr>
</table>
</body>
</html>

🔜 下一篇预告: JavaWeb系列二: CSS

📚 目录导航 📚

  1. JavaWeb系列一: HTML
  2. JavaWeb系列二: CSS
  3. JavaWeb系列三: JavaScript学习 上
  4. JavaWeb系列三: JavaScript学习 下
  5. JavaWeb系列四: XML 和 DOM4J
  6. JavaWeb系列五: Tomcat
  7. JavaWeb系列六: 动态WEB开发核心(Servlet) 上
  8. JavaWeb系列七: 动态WEB开发核心(Servlet) 下
  9. JavaWeb系列八: WEB 开发通信协议(HTTP协议)
  10. JavaWeb系列九: 手动实现Tomcat底层机制
  11. JavaWeb系列十: web工程路径专题
  12. JavaWeb系列十一: Web 开发会话技术(Cookie, Session)
  13. JavaWeb系列十二: 服务器端渲染技术(JSP) 上
  14. JavaWeb系列十三: 服务器端渲染技术(JSP) 下
  15. JavaWeb系列十四: JavaWeb三大组件之监听器Listener
  16. JavaWeb系列十五: JavaWeb三大组件之过滤器Filter
  17. JavaWeb系列十六: jQuery初步入门
  18. JavaWeb系列十七: jQuery选择器 上
  19. JavaWeb系列十八: jQuery选择器 下
  20. JavaWeb系列十九: jQuery的DOM操作 上
  21. JavaWeb系列二十: jQuery的DOM操作 下

💬 读者互动 💬
在学习 HTML 的过程中，您有哪些新的发现或疑问？欢迎在评论区留言，让我们一起讨论吧！😊

~ 小团子
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JAVAWEB编程题
m0_69095728的博客
06-26 554
【代码】JAVAWEB编程题。
JavaWeb全套教程笔记_前端技术
weixin_46040278的博客
05-15 1227
本系列笔记仅作为JavaWeb阶段学习参考,不光记一定要上手实践操作
JavaWeb:JavaWeb
05-02
JSP标签、脚本元素和EL（Expression Language）是其主要组成部分，其中EL用于简化数据的获取和显示，而JSTL（JSP Standard Tag Library）提供了一系列标准标签库，如JSTL Core、JSTL SQL等，用于简化页面逻辑。...
JAVAWEB-14：MySQL
04-01
JDBC提供了一系列接口和类，如`Connection`、`Statement`、`PreparedStatement`、`ResultSet`等，用于执行SQL语句和处理查询结果。`Statement`用于执行静态SQL，而`PreparedStatement`则允许预编译SQL，提高安全性...
JavaWeb系列教程
12-31
JavaWeb系列教程是针对那些想要深入理解企业级Java应用程序开发的初学者或进阶开发者而设计的。这个教程全面覆盖了JavaWeb开发的核心技术，帮助学习者构建强大的Web应用程序。以下是一些关键知识点的详细解释： 1. ...
Java_JavaWeb:JavaWeb
03-31
3. **JSTL（JavaServer Pages Standard Tag Library）**：为了简化JSP页面，JSTL提供了一系列标签库，用于处理常见任务，如循环、条件判断、国际化等，让代码更易读且更符合MVC（模型-视图-控制器）设计模式。...
vue3中vite基于vite-plugin-html的多入口打包
k0933的博客
08-30 427
1、安装vite-plugin-html。3、配置vite.config.js。
网站开发：HTML + CSS - CSS选择器
qq_51222843的博客
09-03 1331
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
HTML：charset讲解
Weiki的博客
09-02 1004
HTML：charset讲解
VitePress 文件路由解析：从 Markdown 到 HTML 的映射艺术
软考鸭
09-05 321
VitePress 采用文件路由的方式，将 Markdown 文件的目录结构直接映射为生成的 HTML 页面的 URL 路径。这种设计使得网站的结构清晰易懂，同时也方便了内容的组织和维护。VitePress 的文件路由机制为文档网站的构建提供了一种直观且高效的方式。通过简单地组织和编写 Markdown 文件，你可以快速生成结构清晰、易于导航的静态网站。无论是个人博客、项目文档还是企业官网，VitePress 都是一个值得尝试的选择。
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 1271
捕捉一只耿鬼
HTML 文本标签
qq_40107571的博客
09-05 262
HTML 文本标签
HTML第一课 语法规范与常用标签
2301_80062351的博客
09-05 485
◆ HTML 语法规范 ◆ HTML 常用标签 4.2 标题标签 4.3 段落和换行标签 4.4文本格式化标签 4.5和标签 4.6图像标签和路径 4.7超链接标签 1.外部链接 2.内部链接 3.空链接 4.下载链接 5.锚点链接 ◆ HTML 中的注释和特殊字符​编辑
SpringBoot开发——结合Thymeleaf模板整合HTML
最新发布
bjzhang75的博客
09-05 814
Thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。它是一个开源的Java库，基于Apache License 2.0许可。Thymeleaf提供了一个用于整合Spring MVC的可选模块，在应用开发中，你可以使用Thymeleaf来完全代替JSP或其他模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。
HTML和HTML5有什么区别
m0_56131422的博客
08-30 1429
HTML，即超文本标记语言，是构建网页的标准语言。最初版本的HTML简单地定义了网页的结构和内容，包括文本、图片、链接等元素。HTML的基本标签包括等，它们帮助浏览器正确渲染网页内容。HTML5是HTML的第五个主要版本，旨在解决Web开发中的一些长期存在的问题，并引入了许多新功能。HTML5不仅扩展了现有功能，还增强了对多媒体、图形和应用程序的支持。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 473
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
关于前端服务器字体的引用
qq_69304031的博客
09-02 457
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
js对象操作常用方法
m0_75276704的博客
09-02 567
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
JavaWeb开发基础：HTML与CSS美化网页
作为一种标记语言，HTML并不需要复杂的编程逻辑，而是通过一系列标签来指示浏览器如何展示页面内容。 在描述中提到，Java学习对于学生来说非常有益，尤其在JavaWeb开发领域。JavaWeb应用广泛，涵盖了从简单的网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~ 小团子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值