html,

news2025/1/15 16:44:32

目录

  • 1. html新建
    • 1.1 html基本结构
    • 1.2 html细节
  • 2. 标签
    • 2.1 font标签
    • 2.2 字符实体
    • 2.3 标题标签
    • 2.4 超链接标签
    • 2.5 列表标签
    • 2.6 图片标签
    • 2.7 表格标签
    • 2.8 表单标签
      • 2.8.1基本使用
      • 2.8.2表单综合练习
      • 2.8.3表单格式化
      • 2.8.4表单使用细节
      • 2.8.5get请求
      • 2.8.6post请求
    • 2.9 其它标签
      • 2.9.1div标签
      • 2.9.2段落标签
      • 2.9.3span标签
  • 3. 课后作业
    • 3.1 作业1
    • 3.2 作业2

1. html新建

在这里插入图片描述

1.1 html基本结构

在这里插入图片描述

1.2 html细节

在这里插入图片描述

2. 标签

2.1 font标签

在这里插入图片描述

2.2 字符实体

在这里插入图片描述

2.3 标题标签

在这里插入图片描述

2.4 超链接标签

在这里插入图片描述

2.5 列表标签

  • 无序列表
    在这里插入图片描述
  • 有序列表
    在这里插入图片描述

2.6 图片标签

在这里插入图片描述
在这里插入图片描述

2.7 表格标签

  • 基本使用
    在这里插入图片描述
  • 用合并的方式打印一个菜谱
    在这里插入图片描述
    思路:
    1.先把整个表格的完整的行和列,展示出来5*3
    2.再使用合并的技术,进行合并
    在这里插入图片描述

2.8 表单标签

2.8.1基本使用

在这里插入图片描述

2.8.2表单综合练习

在这里插入图片描述

2.8.3表单格式化

<!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>

2.8.4表单使用细节

在这里插入图片描述

2.8.5get请求

  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)

2.8.6post请求

  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. 理论上没有长度限制;

2.9 其它标签

2.9.1div标签

在这里插入图片描述

2.9.2段落标签

在这里插入图片描述

2.9.3span标签

在这里插入图片描述

3. 课后作业

3.1 作业1

在这里插入图片描述

<!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>编号</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>

3.2 作业2

在这里插入图片描述

<!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" border="2" borderColor="#6498EE" width="600">
  <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>

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

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

相关文章

【JavaScript】第一章JavaScript入门

【JavaScript】第一章JavaScript入门

第一章 JavaScript入门JavaScript介绍JavaScript的起源JavaScript的应用JavaScript的特点JavaScript是脚本语言支持面向对象编程&#xff0c;面向过程编程/函数式编程支持跨平台执行JavaScript和ECMAScript的关系开发工具编辑器sublime textVisual Studio CodewebstormDreamwea…
阅读更多...
安装VMWare虚拟机之后，发现网络贼卡，打开网页很慢

安装VMWare虚拟机之后，发现网络贼卡，打开网页很慢

事情描述&#xff1a; 最近忙一个项目&#xff0c;需要到虚拟机中部署环境&#xff0c;安装完之后&#xff0c;就开整自己的项目了。 可以过几天&#xff0c;发现本地网络贼卡&#xff0c;打开各网页慢的一批&#xff0c;一开始还以为是路由器的问题&#xff0c;反复折腾之后排…
阅读更多...
HBuilder X启动微信开发工具报错的问题

HBuilder X启动微信开发工具报错的问题

今天通过HBuilder X启动微信开发工具&#xff0c;报了如下的错&#xff1a; [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings…
阅读更多...
Android Studio相关记录

Android Studio相关记录

目录Android Studio 便捷插件Android LogcatJava文件的类头模板Android Studio 使用遇到的问题解决方案org.jetbrains.annotations.NullableBuild 控制台编译输出中文乱码Terminal 使用 git 命令窗口git 命令窗口中文乱码Android Studio 便捷插件 Android Logcat 配置路径 Fi…
阅读更多...
【VUE】六 路由和传值

【VUE】六 路由和传值

目录 一、 路由和传值 二、案例 三、案例存在无法刷新问题 一、 路由和传值 当某个组件可以根据某些参数值的不同&#xff0c;展示不同效果时&#xff0c;需要用到动态路由。 例如&#xff1a;访问网站看到课程列表&#xff0c;点击某个课程&#xff0c;就可以跳转到课程详…
阅读更多...
【c#】学习DATATABLE排序

【c#】学习DATATABLE排序

c#实现Datatable排序Datatable排序结果图代码展示总结Datatable排序 结果图 原数据 倒序 去重 筛选行 代码展示 1、使用datatable视图对table进行排序 //倒序排序 dt.DefaultView.Sort “CreateTime desc”; dt dt.DefaultView.ToTable(); 如果想升序排序&#xff0c…
阅读更多...
kafka入个门

kafka入个门

名词 topic 表 partation 水平扩展 leader 主 follow备 produce生产 offset偏移量 消息队列的流派 什么是 MQ Message Queue&#xff08;MQ&#xff09;&#xff0c;消息队列中间件。很多人都说&#xff1a;MQ 通过将消息的发送和接收分离来实现应用程序的异步和解偶&#xf…
阅读更多...
DASCTF X GFCTF 2022十月挑战赛 Web

DASCTF X GFCTF 2022十月挑战赛 Web

from DASCTF X GFCTF 2022十月挑战赛 Web EasyPOP 就简单的php反序列化 源码 <?php highlight_file(__FILE__); error_reporting(0);class fine {private $cmd;private $content;public function __construct($cmd, $content){$this->cmd $cmd;$this->content …
阅读更多...
Leetcode22. 括号生成

Leetcode22. 括号生成

一、题目描述&#xff1a; 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&…
阅读更多...
Java笔记028-集合章节练习

Java笔记028-集合章节练习

Java笔记028-集合章节练习编程题按要求实现&#xff1a;封装一个新闻类&#xff0c;包含标题和内容属性&#xff0c;提供get、set方法&#xff0c;重写toString方法&#xff0c;打印对象时只打印标题只提供一个带参构造器&#xff0c;实例化对象时&#xff0c;只初始化标题&…
阅读更多...
【Java】Java进阶学习笔记（一）—— 面向对象（封装）

【Java】Java进阶学习笔记（一）—— 面向对象（封装）

【Java】Java进阶学习笔记&#xff08;一&#xff09;—— 面向对象&#xff08;封装&#xff09;一、类中成分1、类中成分2、this关键字this() 访问构造器方法3、static关键字1. 成员变量的区分2. 成员方法的区分3. 成员变量访问语法的区分二、封装1、封装的定义封装的好处2、…
阅读更多...
excel之古诗词打乱排序

excel之古诗词打乱排序

最终效果 制作过程: 一、选择一首古诗&#xff0c;将正文内容连接起来&#xff0c;放在一个单元格中 二&#xff0c;由于这首诗是20字的&#xff0c;加工20个不重复的随机数&#xff0c;具体公式如下图 &#xff08;写好第一行数据&#xff0c;拖动下拉即可&#xff09; 其中…
阅读更多...
虚拟机上安装openKylin详细步骤总结

虚拟机上安装openKylin详细步骤总结

一、创建虚拟机 首先获取操作系统安装镜像文件&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1tSuXmDk2ZILR4ieee6iImw?pwdcy47 提取码&#xff1a;cy47 &#xff08;1-1&#xff09;进入新虚拟机创建向导&#xff0c;选择“自定义”&#xff1a; &#xff08;1-…
阅读更多...
创业做校园外卖平台，该如何把自己的平台宣传出去？

创业做校园外卖平台，该如何把自己的平台宣传出去？

如何宣传校园外卖平台&#xff1f;主要看平台宣传&#xff0c;配套宣传工具不一样&#xff01; 我认为有以下几点&#xff1a; 1.建立以宿舍楼为基础的推广团队&#xff0c;依托平台分佣&#xff0c;并能做到每个宿舍楼的送餐和广告分发&#xff1b; 2.根据学生的消费习惯&a…
阅读更多...
【带组态源码】Java物联网平台源码 Modus RTU协议 文档齐全 带移动手机端

【带组态源码】Java物联网平台源码 Modus RTU协议 文档齐全 带移动手机端

▶ 组态功能强大、组件丰富 ▶ 组态设计功能强大&#xff1a;包括基础组件、消息组件、图表组件三大类 ▶ 基础组件包括&#xff1a;位按钮、窗口按钮、多态、图片按钮、流动、静态文本、动态变量、输入框、滑块、选择框、网格、矩形、椭圆、直线、自定义形状。 ▶ 图表组件包…
阅读更多...
如何用Postman测试整套接口？测试流程是什么？

如何用Postman测试整套接口？测试流程是什么？

目录 基于postman测试接口(整套接口测试) 可以解决的问题 开启控制台 单个测试尝试 使用请求结果当参数 打印结果(JSON) 自定义可视化结果 随机参数 测试用例连接 一键测试接口集合 从swagger导入接口 自定义全局变量 总结感谢每一个认真阅读我文章的人&#xff01…
阅读更多...
异步简单实现一人一单

异步简单实现一人一单

本项目码云地址&#xff1a;https://gitee.com/flowers-bloom-is-the-sea/distributeNodeSolvePessimisticLockByRedis/tree/version3/ 项目前身&#xff1a;https://gitee.com/flowers-bloom-is-the-sea/distributeNodeSolvePessimisticLockByRedis/tree/version2.0/ 异步实…
阅读更多...
java易错题锦集系列五

java易错题锦集系列五

接口中不能有构造方法&#xff0c;抽象类中可以有。抽象类中构造方法作用&#xff1a;初始化抽象类的成员&#xff1b;为继承它的子类使用 定义在同一个包&#xff08;package&#xff09;内的类是可以不经过import而直接相互使用 final修饰的方法可以被重载 但不能被重写 从…
阅读更多...
论文阅读：Self-Supervised Monocular Depth Estimation with Internal Feature Fusion(DIFFNet)

论文阅读：Self-Supervised Monocular Depth Estimation with Internal Feature Fusion(DIFFNet)

中文标题&#xff1a;基于内部特征融合的自监督单目深度估计 创新点 参照HR-Net在网络上下采样的过程中充分利用语义信息。设计了一个注意力模块处理跳接。提出了一个扩展的评估策略&#xff0c;其中方法可以使用基准数据中的困难的情况进行进一步测试&#xff0c;以一种自我…
阅读更多...
计算机科学导论笔记（一）

计算机科学导论笔记（一）

一、绪论 1.1 图灵模型 Alan Turing在1937年首次提出了一种通用计算设备的设想&#xff0c;他设想所有的计算都能在一种特殊的机器上执行&#xff0c;这就是现在所说的图灵机。但图灵机只是一种数学上的描述&#xff0c;并不是一种真正的机器。 1.1.1 数据处理器 在讨论图灵…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023