jsp2024.3.21(4) html基础

一、实验目的

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.hqwc.cn/news/557536.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch面试系列-02

Elasticsearch面试系列-02

1. 如何监控 Elasticsearch 集群状态？ Marvel可以很简单的通过Kibana监控Elasticsearch。支持实时查看集群健康状态和性能，也可以分析过去的集群、索引和节点指标。 2. ElasticSearch 是否有架构？ 1、ElasticSearch可以有一个架构。架构是描述文档类型以及如何处理文档的不…
阅读更多...
【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

第一部分&#xff1a;无线网络勘测设计评分标准 序号评分项评分细项评分点说明评分方式分值1点位设计图AP编号AP编号符合“AP型号位置编号”完全匹配5AP型号独立办公室、小型会议室选用WALL AP110完全匹配5员工寝室选用智分&#xff0c;其他用放装完全匹配5其它区域选用放装AP…
阅读更多...
zabbix企业微信的告警媒介配置

zabbix企业微信的告警媒介配置

简介&#xff1a; Zabbix企业微信告警媒介可用于向特定群组成员发送提醒通知。 前提条件&#xff1a; 完成Zabbix告警平台的搭建后&#xff0c;需将群机器人添加至告警提醒群中。 企业微信群聊——右上角三个点——添加群机器人 保存好产生的webhook地址&#xff08;注意&…
阅读更多...
01、Lua 入门教程

01、Lua 入门教程

Lua 入门教程 Lua是一种轻量小巧的脚本语言&#xff0c;用标准C语言编写并以源代码形式开放&#xff0c; 其设计目的是为了嵌入应用程序中&#xff0c;从而为应用程序提供灵活的扩展和定制功能。 Lua是巴西里约热内卢天主教大学&#xff08;Pontifical Catholic University of…
阅读更多...
探索数据结构：顺序栈与链式栈的原理、实现与应用

探索数据结构：顺序栈与链式栈的原理、实现与应用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 栈的定义 栈简单来说就是一种只允许在一端进行操作(插入与删除&…
阅读更多...
后端返回文件流，前端导出excel

后端返回文件流，前端导出excel

1. 请求 2. 检查接口 3. 导出代码 &#xff08;如果可以导出&#xff0c;且表格为undefined&#xff0c;把new Blob([res]换成new Blob([res.data], 或者在检查后端是不是返回的blob对象&#xff09; ExportWaterEventListPage(data).then(res > {// console.log("导…
阅读更多...
【ubuntu20.04+tensorflow-gpu1.14配置】

【ubuntu20.04+tensorflow-gpu1.14配置】

ubuntu20.04tensorflow-gpu1.14配置 目录0. 版本注意事项说明1. 个人目录下载后配置系统环境变量2. anaconda配置所有环境&#xff08;过程简便&#xff0c;但容易出现不兼容问题&#xff09;3. 验证tensorflow-gpu4. 一些细节 目录 总结出两种方法 个人目录 下载cuda和cudnn…
阅读更多...
Lombok插件的安装和使用说明

Lombok插件的安装和使用说明

什么是Lombok?? Lombok是一个通过注解以达到减少代码的Java库,如通过注解的方式减少get,set方法,构造方法等。 //普通的实体类public class Student {private Integer id;private Integer age;public Integer getId () {return id;}public void setId (Integer id) {this.id …
阅读更多...
Flink GateWay、HiveServer2 和 hive on spark

Flink GateWay、HiveServer2 和 hive on spark

Flink SQL Gateway简介 从官网的资料可以知道Flink SQL Gateway是一个服务&#xff0c;这个服务支持多个客户端并发的从远程提交任务。Flink SQL Gateway使任务的提交、元数据的查询、在线数据分析变得更简单。 Flink SQL Gateway的架构如下图&#xff0c;它由插件化的Endpoi…
阅读更多...
痛失offer的八股

痛失offer的八股

java面试八股 mysql篇&#xff1a; 事物的性质&#xff1a; 事物的性质有acid四特性。 a&#xff1a;automic&#xff0c;原子性&#xff0c;要么全部成功&#xff0c;要么全部失败&#xff0c;mysql的undolog&#xff0c;事物在执行的时候&#xff0c;mysql会进行一个快照读…
阅读更多...
tcp seq ack

tcp seq ack

seq&#xff08;Sequence Number&#xff09;&#xff1a;32bits&#xff0c;表示这个tcp包的序列号。tcp协议拼凑接收到的数据包时&#xff0c;根据seq来确定顺序&#xff0c;并且能够确定是否有数据包丢失。 ack&#xff08;Acknowledgment Number&#xff09;&#xff1a;3…
阅读更多...
官宣｜阿里巴巴捐赠的 Flink CDC 项目正式加入 Apache 基金会

官宣｜阿里巴巴捐赠的 Flink CDC 项目正式加入 Apache 基金会

摘要&#xff1a;本文整理自阿里云开源大数据平台徐榜江 (雪尽)&#xff0c;关于阿里巴巴捐赠的 Flink CDC 项目正式加入 Apache 基金会&#xff0c;内容主要分为以下四部分&#xff1a; 1、Flink CDC 新仓库&#xff0c;新流程 2、Flink CDC 新定位&#xff0c;新玩法 3、Flin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023