jsp2024.3.21(4) html基础

news2024/11/13 10:39:00

一、实验目的

1、html 文件的基本结构；

2、html 的常用标记；

<HTML>

<HEAD>

   ……

</HEAD>

<BODY>

 ……

</BODY>

</HTML>

二、实验项目内容（实验题目）

HTML常用标记

1．<!DOCTYPE> 标签

2. <head> 标签

3．<font> 标签 字体、大小、字号等

4．<h>标题标签 标题h1-h6

5．p标签 段落

6．文本区域标记 area

7．列表标记 dl结合 <dt>和 <dd> ; ul结合<li>

8．框架标记（frameset）

9．body标记

10．table表格标记 <tr><th>  <tr> <td>

11．链接和加载

12．Input、button等文本、按钮标签

完成以下例题并将网页的运行结果截图保存到实验报告中。

 

三、源程序（实验步骤/实验过程/算法）(newfile是例二，newfile2是例三，newfile3是例四，newfile4是例五，newfile5是例六，newfile6是例七，newfile7是例八

例2

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>示例代码</title>

<head>

<body>

<h1>文本格式标签</h1>

<p>&lt;p&gt;标签标识段落文本</p>

</body>

</html>

例3

<%@ page language="java" contentType="text/html; utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>示例代码</title>

</head>

<body>

<p>例如，针对下面这个一元二次方程:</p>

<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>

<p>我们使用<big> <b>分解因式法</b></big>来演示解题思路如下:</p>

<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>

<p><small>得:</small><br /><i>x</i><sub>1</sub>=1<br >

   <i>x</i><sub>2</sub>-4</p>

</body>

</html>

例4

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title>示例代码</title>

</head>

<body>

<h1>解一元二次方程</h1>

<p>一元二次方程求解有4种方法:</p>

<ul>

   <li>直接开平方法</li>

   <li>配方法</li>

   <li>公式法</li>

   <li>分解因式法</li>

</ul>

</body>

</html>

例5

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>示例代码</title>

</head>

<body>

<h1>成语词条列表</h1>

<dl>

<dt>知无不言,言无不尽</dt>

<dd>知道的就说,要说就毫无保留。</dd>

<dt>智者千虑,必有一失</dt>

<dd>不管多聪明的人，在很多次的考虑中,也一定会出现个别错误。</dd>

</dl>

</body>

</html>

例6

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>示例代码</title>

</head>

<body>

<a href "http://www.baidu.com/"">去百度搜索</a>

</body>

</html>

例7

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>示例代码</title>

</head>

<body>

   <table summary="ASCII是英文American Standard Code for Information

   Interchange的缩写。ASCII编码是目前计算机最通用的编码标准。因为计算机只能接受数字信息，

   ASCII编码将字符转换为数字来表示，以便计算机能够接受和处理。">

   <caption>ASCHI字符集(节选)</caption>

  

   <tr>

   <th>十进制</th>

   <th>十六进制</th>

   <th>字符</th>

   </tr>

  

   <tr>

   <td>9</td>

   <td>9</td>

   <td>TAB(制表符)</td>

   </tr>

  

   <tr>

   <td>10</td>

   <td>A</td>

   <td>换行</td>

   </tr>

  

   <tr>

   <td>13</td>

   <td>D</td>

   <td>回车</td>

   </tr>

  

</table>

</body>

</html>

例8

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset-utf-8" />

<title>示例代码</title>

</head>

<body>

<form id="forml" name="forml" method="post" action="">

<P>单行文本域:<input type="text" name="textfield" id="textfield" ></p>

<P>密码域:<input type="password" name="passwordfield" id="passwordfield" ></p>

<p>p多行文本域:<textarea name="textareafield" id="textareafield"></textarea></p>

<p>复选框:复选框1<input name="checkbox 1" type="checkbox" value=""/>

      复选框2<input name="checkbox2" type="checkbox" value一""/>

</p>

<p>单选按钮:

   <input name-"radiol" type="radio" valuc=""/>按钮1

   <input name="radio2" type="radio" valuc=""/>按钮2

   </p>

<p>下拉菜单:

   <sclect name="selectlist">

   <option value-"1">选项1</option>

   <option value—"2">选项2</option>

   <option value-"3">选项3</option>

   </select>

</p>

<p>

<input type="submit" name-"button" id="button" value="提交" />

</p>

</form>

</body>

</htm>

四、实验分析、总结

例2

例3

例4

例5

例6

例7

例8

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1535601.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

说说你对webpack的理解？解决了什么问题？

说说你对webpack的理解？解决了什么问题？

文章目录 一、背景二、问题三、是什么参考文献 一、背景 Webpack 最初的目标是实现前端项目的模块化&#xff0c;旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候&#xff0c;我们会通过文件划分的形式实现模块化&#xff0c;也就是将每个功能及其相关状态数据各…
阅读更多...
idea2023 运行多 springboot 实例

idea2023 运行多 springboot 实例

概要 1、修改idea运行多实例&#xff08;本地测试负载&#xff09; 你可能用到其他 1、改造项目缓存token 至redis 支持负载均衡部署 SpringSecurity6.0RedisJWTMP基于token认证功能开发&#xff08;源码级剖析可用于实际生产项目&#xff09;_springsecurity redis管理token…
阅读更多...
【Django开发】前后端分离美多商城项目第3篇：用户部分,1. 后端接口设计：【附代码文档】

【Django开发】前后端分离美多商城项目第3篇：用户部分,1. 后端接口设计：【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业。项目准备&#xff0c;配置1. 修改settings/dev.py 文件中的路径信息,2. INS…
阅读更多...
关于订单到期关闭的实现方案

关于订单到期关闭的实现方案

前言 在电商、支付等系统中&#xff0c;一般都是先创建订单(支付单)&#xff0c;再给用户一定的时间进行支付&#xff0c;如果没有按时支付的话&#xff0c;就需要把之前的订单(支付单)取消掉。这种类似的场景有很多&#xff0c;还有比如到期自动收货、超时自动退款、下单后自…
阅读更多...
API 接口渗透测试

API 接口渗透测试

1 API 接口介绍 1.1 RPC&#xff08;远程过程调用&#xff09; 远程过程调用&#xff08;英语&#xff1a;Remote Procedure Call&#xff0c;缩写为 RPC&#xff09;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无…
阅读更多...
爬虫分析-基于Python的空气质量数据分析与实践

爬虫分析-基于Python的空气质量数据分析与实践

概要 本篇文章利用了Python爬虫技术对空气质量网站的数据进行获取&#xff0c;获取之后把数据生成CSV格式的文件&#xff0c;然后再存入数据库方便保存。再从之前24小时的AQI&#xff08;空气质量指数&#xff09;的平均值中进行分析,把数据取出来后&#xff0c;对数据进行数据…
阅读更多...
glibc内存管理ptmalloc

glibc内存管理ptmalloc

1、前言 今天想谈谈ptmalloc如何为应用程序分配释放内存的&#xff0c;基于以下几点原因才聊它&#xff1a; C/C 70%的问题是内存问题。了解一点分配器原理对解决应用程序内存问题肯定有帮助。C也在用ptmalloc. 当你在C中new一个对象时&#xff0c;底层还是依赖glibc中的ptma…
阅读更多...
基于SpringBoot精品在线试题库系统

基于SpringBoot精品在线试题库系统

采用技术 基于SpringBoot精品在线试题库系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 系统功能结构图 学生管理 教师管理 专业管理 试卷管理 …
阅读更多...
【阿里魔搭】modelscope包下载安装

【阿里魔搭】modelscope包下载安装

最终解决方案&#xff1a;使用源码安装modelscope 这里写目录标题 问题描述&#xff1a;pip安装包冲突安装步骤 问题描述&#xff1a;pip安装包冲突 一开始的是在3.11的虚拟环境下使用命令行pip install "modelscope[nlp]" -f https://modelscope.oss-cn-beijing.al…
阅读更多...
基于时空上下文（STC）的运动目标跟踪算法，Matlab实现

基于时空上下文（STC）的运动目标跟踪算法，Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…
阅读更多...
MyBatis：XML操作

MyBatis：XML操作

&#x1f451;专栏内容&#xff1a;MyBatis⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、MyBatis XML方式1、配置数据库2、指明XML路径3、写持久层代码 二、基础操作1、新增2、删除3、更新4、查找Ⅰ、开启驼峰命…
阅读更多...
权限提升-Web权限提升篇划分获取资产服务后台系统数据库管理相互转移

权限提升-Web权限提升篇划分获取资产服务后台系统数据库管理相互转移

知识点 1、权限提升转移-分类&高低&场景 2、Web权限提升及转移-后台&数据库 3、后台权限及转移-转移对象&后台分类 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及转移 4、域控权限提升及转移 基础点 0、为什么我们要学…
阅读更多...
Spring AI Embeddings 和 Vector 入门

Spring AI Embeddings 和 Vector 入门

在前面 Spring AI Chat 简单示例 中介绍了 Chat 的基本用法&#xff0c;本文在此基础&#xff08;主要是pom.xml&#xff09;上继续探索 Embedding 和 Vector。 官方文档&#xff1a; embeddings: https://docs.spring.io/spring-ai/reference/api/embeddings/openai-embedding…
阅读更多...
java算法第30天 | ● 332.重新安排行程 ● 51. N皇后 ● 37. 解数独

java算法第30天 | ● 332.重新安排行程 ● 51. N皇后 ● 37. 解数独

今天是三道困难题&#xff0c;一刷可以先跳过。 332.重新安排行程 本题的重点是使用Map<String,Map<String,Integer>>存储路径以便递归中根据上一个地点检索接下来的选择。注意&#xff0c;因为要求按字母顺序排列优先级&#xff0c;所以内层的Map要用TreeMap<…
阅读更多...
Jupyter Notebook介绍、安装及使用教程

Jupyter Notebook介绍、安装及使用教程

Jupyter Notebook介绍、安装及使用教程 一、什么是Jupyter Notebook&#xff1f;简介组成部分网页应用文档Jupyter Notebook的主要特点 二、安装Jupyter Notebook先试用&#xff0c;再决定安装安装前提使用Anaconda安装使用pip命令安装 三、运行Jupyter Notebook帮助启动默认端…
阅读更多...
html5cssjs代码 032 边框属性示例

html5cssjs代码 032 边框属性示例

html5&css&js代码 032 边框属性示例 一、代码二、解释 该HTML文件定义了一个网页页面&#xff0c;主要介绍了HTML5中CSS边框属性的用法。 一、代码 <!DOCTYPE html> <html lang"zh-cn"><head><title>编程笔记 html5&css&j…
阅读更多...
图Graph及相关算法（Dijkstra，Kruskal）

图Graph及相关算法（Dijkstra，Kruskal）

目录 无向图 有向图 邻接矩阵 邻接表 图的bfs&#xff0c;dfs 二部图&#xff08;二分图&#xff09; 有向无环图&#xff08;DAG&#xff09; 拓扑排序&#xff08;Topological Sort&#xff09; AOV网 迪杰斯特拉Dijkstra 最小生成树 克鲁斯卡尔&#xff1a;Krus…
阅读更多...
回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测

回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测 目录 回归预测 | Matlab基于SAO-BiLSTM雪融算法优化双向长短期记忆神经网络的数据多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SAO-B…
阅读更多...
Linux系统——Mysql索引补充知识

Linux系统——Mysql索引补充知识

目录 一、索引介绍 1.索引的优点 2.索引的分类 3.索引的技术名词 3.1回表 3.2覆盖索引 3.3最左匹配 3.4索引下推 4.索引匹配方式 4.1全值匹配 4.2最左前缀匹配 4.3匹配列前缀 4.4匹配一个范围值 4.5精确匹配某一列并范围匹配另一列 4.6只访问索引的查询 一、索引…
阅读更多...
银行OA系统|基于SpringBoot架构+ Mysql+Java+ B/S结构的银行OA系统设计与实现(可运行源码+数据库+设计文档)

银行OA系统|基于SpringBoot架构+ Mysql+Java+ B/S结构的银行OA系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023