jsp2024.3.21(4) html基础

已于 2024-03-21 19:44:47 修改
阅读量627 收藏 19
点赞数 29
文章标签： html 前端 javascript
于 2024-03-21 19:40:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64798714/article/details/136918384
版权

一、实验目的

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

樱花Cherry Blossoms
关注
  • 29
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JetBrains RubyMine v2024.1 安装教程 (Rails/Ruby集成开发环境)
wyqshusan的博客
04-24 532
JetBrains RubyMine是一款杰出而全面的Ruby代码编辑器，能够深入识别动态语言的细节，为用户提供智能编码辅助功能。它能够自动检测错误代码段，并提供智能的编写和修复代码的建议，帮助用户进行代码重构。此外，RubyMine还能够及时提示和标记错误，并为用户提供详尽的代码解释和分析，帮助用户理解和改正代码编写中的错误。RubyMine支持JavaScript、HTML、CSS、Java和JSP等语言的开发，并提供多种集成工具，可轻松配置自动部署功能，支持通过FTP或SFTP进行部署。此外，Ruby
Redis_学习笔记（2024.04）
dameizizizi123的博客
04-02 548
技术的分类解决功能性的问题：Java、Jsp、RDBMS、Tomcat、HTML、Linux、JDBC、SVN解决扩展性的问题：Struts、Spring、SpringMVC、Hibernate、Mybatis解决性能的问题：NoSQL、Java线程、Hadoop、Nginx、MQ、ElasticSearchWeb1.0时代Web1.0的时代，数据访问量很有限，用一夫当关的高性能的单点服务器可以解决大部分问题。Web2.0时代。
技术周总结2024.06.03～06.09(K8S & HikariCP数据库连接池)
xinkuaile的专栏
06-08 859
K8S脑图 & HikariCP数据库连接池
基于java eclipse+jsp+mysql+servlet+Spring的学生信息管理系统基础版
热门推荐
java李阳勇的博客
07-07 1万+
特别是近几年来，国家政策的调整，我国高等院校大规模的扩招，给高等院校的教学管理、学生管理、后勤管理等方面都带来不少的冲击。其包含的数据量大，涉及的人员面广，而且需要及时更新，故较为复杂，难以单纯地依靠人工管理，而且传统的人工管理方式既不易于规范化，管理效率也不高，我国各类高等院校中还有相当一部分学生档案管理还停留在纸介质的基础上，尤其是中、小学对学生档案的管理更是落后，这样的管理机制已经不能适应时代发展的要求，其管理方法将浪费许多人力和物力。学生管理：添加学生、查看学生列表信息、查看学生资料。
JSP动态网站入门基础.ppt
04-12
JSP动态网站入门基础.ppt
if.zip_If..._html_jsp
09-23
在IT行业中，网页开发是一项核心技能，而"if.zip_If..._html_jsp"这个压缩包中的内容显然与网页的逻辑控制有关。这个标题暗示了我们正在处理一个基于条件判断的逻辑流程，用于根据用户的年龄来决定他们可以访问的...
jsp简答题共4页.pdf.zip
10-31
这通常是一个教学或学习资料，涵盖了JSP的基础知识、核心概念以及可能的考试或测试题目。 JSP是Java平台上的一个动态网页技术，它允许开发者将静态HTML内容与动态Java代码结合，以创建交互式的Web应用。以下是基于...
jsp基础技巧.ppt
11-16
**JSP基础技巧详解** **一、JSP技术概述** JSP（JavaServer Pages）是Sun Microsystems公司推出的一种用于开发动态网页的技术标准。它基于Java Servlet，允许在HTML页面中嵌入Java代码片段和JSP特定标记，从而构建...
jsp-api.jar
07-03
jsp-api.jar 好东西，需要的下载，好东西，需要的下载。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 900
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
使用 XPath 定位 HTML 中的 img 标签
Z_suger7的博客
07-18 1178
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
[HTML]一文掌握
CSDN20221005的博客
07-21 584
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
前端学习（二）之HTML
2302_79795489的博客
07-18 927
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
每日60秒新闻早报单页文字版HTML源码
2401_86030425的博客
07-17 297
每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。
HTML零基础自学笔记（上）-7.18
weixin_45802917的博客
07-21 591
HTML是什么？都有哪些常用标签？文件的相对路径和绝对路径，特殊字符
Web响应式设计———1、Grid布局
最新发布
Violetto_Yan的博客
07-21 254
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
Html review1
Violetto_Yan的博客
07-20 273
7、input 里的type如果是email 和url（网址）、number（数字）会自动验证。audio src=“资源路径” controls 进度条 autoplay 自动播放。iframe src=“path” name=“框架表示名” width height。number的属性 min最小值 max最大值 step步长，每次增加/减少多少。行内元素的宽度是内容撑起来的，几个行内可以在一行a、strong、em。表单的初级验证，减轻服务器的压力，在前端进行简单的验证。header 标题头部。
六边形动态特效404单页HTML源码
爱酷码的博客
07-17 1361
动态悬浮的六边形，旁边404文字以及跳转按钮，整体看着像科技二次元画风，页面简约美观，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值