day31_HTML

今日内容

0 复习昨日

1 表格标签

2 表单标签【重要】

3 框架标签

0 复习昨日

  • Javaweb开发,前端,服务器,数据库

  • 前端,要学习HTML,CSS,JavaScript,JQuery

  • HTML是用来编写网页的一种编程语言

  • 语法

    • 由各种标签组成,标签是尖括号<>,
    • 一般都是成对儿出现,前面叫做开标签,后面称为闭标签
    • 特别的,有部分单标签,hr,br,img
    • 大小写都行,但是建议是小写
    • 开标签中写属性,属性名=“属性值”
    • 标签可以嵌套
  • 标签

    • 结构标签
    • 排版标签 h1,hr,br,p,font
      • 其中有些值特别注意,长度/宽度/尺寸单位 是px,或者%
      • 颜色写法,1) 颜色单词 2)rgb(0,0,0) 3) 十六进制取色 #000000
    • 块标签 div,span
    • 列表标签 ol,ul,li
    • 图片标签 img ,src属性,重点是路径的写法
    • 超链接 a,
      • href指定跳转路径
      • target属性,值1) _self 以自身跳转,2) _blank 以打开一个空白页跳转

1 表格标签

表格标签可以展现一个表格,用来填充数据,以及布局页面

<body><!-- 4行3列的表格 --><!-- 表格标签是table行标签是tr行内设置单元格,即列 td单元格td可以改成th,这样就有加粗效果,一般是表格标题-------------------------------给table设置属性,让表格看起来更好看border 边框width 尺寸--><table border="2px" width="300px"><tr><th>1-1</th>  <!-- 加粗 --><th>1-2</th><th>1-3</th></tr><tr><!-- 行合并,跨度2,即合并两行 --><td rowspan="2">2-1</td><!-- 列合并,跨度2,即合并两列 --><td colspan="2">2-2</td><!-- 被合并,需要删除 --><!-- <td>2-3</td> --></tr><tr><!-- 被合并,需要删除 --><!-- <td>3-1</td> --><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr></table>
</body>

练习: 模仿下图形式(2行,4列,每个单元格是图片,点击图片能跳转)

在这里插入图片描述

2 框架标签

<body><ul><!-- 在a标签中使用属性,将页面跳转至ifram内 --><!-- 设置target属性,属性值指定iframe标签的naem属性值 --><li><a href="demo1.html" target="myframe">用户管理</a></li><li><a href="test1.html" target="myframe">角色管理</a></li><li><a href="test2.html" target="myframe">菜单管理</a></li></ul><!-- 框架标签iframename  是框架的名称width 内容区域的宽度,height 内容区域的高度src  ,当页面加载,会直接通过src,加载指定页面到当前框架区域--><iframe name="myframe" src="test1.html" width="1200px" height="600px"></iframe>
</body>

3 表单标签【重要】

表单用来和服务器交互,可以将数据发送到后台服务器.


表单用来收集数据,比如登录框,注册框,搜索框等等


常用的功能,输入框,下拉框,单选框,多选框,文件上传框,文本域,一些按钮

<body><!-- 表单 form属性 action,用来指定submit提交后的服务器路径,即数据发送到这个路径背后的服务器-------------------------------------各种表单框,要想将数据发送到后台,必须指定一个属性 name-------------------------------------输入框 input,单标签属性value ,是输入框的值,默认展示value中的值属性placeholder ,背景提示属性type,有很多值,不同属性值,可以实现不同的输入效果type=text 普通文本type=password 密码type=radio 单选框,需要给多个单选标签设置同一个name属性值这样他们就是一组设置一个value属性,以便于提交后展示数据type=checkbox,复选框,需要给多个复选框设置同一个name属性值设置一个value属性,以便于提交后展示数据type=file ,选择文件上传type=date , 选择日期type=email , 邮箱type=hidden , 会将输入框隐藏type=button , 按钮type=reset , 重置type=submit , 提交-------------------------------------下拉框 select下来选项  option-------------------------------------文本域 textarea-------------------------------------按钮  button属性type,有很多值,点击按钮的效果不一样type=button 纯按钮type=reset 重置,点击会将表达信息恢复到默认type=submit 提交,将表达中输入的数据提交都后台服务器这个后台服务器是form标签中指定的服务器路径--><form action="/java2217">隐藏框<input type="hidden" name="money"><br>用户名<input type="text" name="username" placeholder="请输入用户名"/><br>密码<input type="password" name="pwd"/><br>性别<input type="radio" name="sex" value="man"/><input type="radio" name="sex" value="women"/><br>技能 <input type="checkbox" name="skills" value="javase"/> JavaSE<input type="checkbox" name="skills" value="javaweb"/> JavaWeb<input type="checkbox" name="skills" value="ssm"/> SSM<br>头像 <input type="file" name="touxiang"/> <br>生日 <input type="date" name="birthday"/> <br>邮箱 <input type="email" name="email" value="11111@qq.com"/> <br>籍贯 <select name="jiguan"><option value="henan">河南</option><option value="yunnan">云南</option><option value="hainan">海南</option></select><select name="city"><option>郑州</option><option>周口</option><option>驻马店</option></select> <br>个人简历<textarea></textarea><br><button type="button">按钮</button><button type="reset">重置</button><button type="submit">提交</button><hr><input type="button" value="按钮"/><input type="reset" value="重置"/><input type="submit" value="提交"/></form>
</body>

4 补充

在html敲空格,没有效果!

需要使用

&nbsp; 

这是一个空格

ue=“按钮”/>


```

4 补充

在html敲空格,没有效果!

需要使用

&nbsp; 

这是一个空格

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

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

相关文章

秋招实习,刷题网站推荐

codefun2000.com 优点1: 题目全部改编自公司笔试真题&#xff0c;可以做做往年真题练手。 优点2: 该平台和公司笔试模式一样&#xff0c;都是Acm输入输出&#xff0c;更有利于准备秋招。 优点3: 平台主页有博客&#xff0c;以及各大公司真题知识点思维导图&#xff0c;讲…

Python网络爬虫实战——实验7:Python使用apscheduler定时采集任务实战

【实验内容】 本实验主要介绍在Django框架中使用APScheduler第三方库实现对数据的定时采集。 【实验目的】 1、掌握APScheduler库的使用&#xff1b; 2、学习在Django中实现多个定时任务调度&#xff1b; 【实验步骤】 步骤1 Apscheduler简介与特点 步骤2 Apscheduler基本…

HTML新手教程

HTML入门 教程&#xff1a;【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili 一.初识HTML HyperTextMarkupLanguage&#xff08;超文本标记语言&#xff09; 超文本包括&#xff1a;文字、图片、音频、视频、动画。 HTML5的优势 世界知名浏览器厂商对HTML5的支持市场的…

SpringBoot系列之JPA实现按年月日查询

SpringBoot系列之JPA实现按年月日查询 通过例子的方式介绍Springboot集成Spring Data JPA的方法&#xff0c;进行实验&#xff0c;要先创建一个Initializer工程&#xff0c;如图&#xff1a; 选择&#xff0c;需要的jdk版本&#xff0c;maven项目 选择需要的maven配置&#x…

研发日记,Matlab/Simulink避坑指南(六)——字节分割Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结归纳 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南&#xff08;一&#xff09;——Data Store Memory模块执行时序Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》…

2024年预制菜行业市场发展趋势分析(2021-2023年预制菜行业数据分析)

近期&#xff0c;老干妈被称为预制菜、预制菜国标报送稿出炉等事件再次引起大众对于预制菜市场的讨论。随着国家对预制菜审核标准的严格化&#xff0c;预制菜市场未来走向将会如何&#xff1f;鲸参谋带大家从数据角度来了解。 首先来看下预制菜市场的行业发展情况。 根据鲸参…

将word公式转成mathtype公式

将word公式转成mathtype公式 1. 转换方法2. 可能出现的错误解决方法 1. 转换方法 1&#xff09;选中一个word公式/直接全文word公式转换 2&#xff09;点击Mathtype转换公式 2. 可能出现的错误 The style sheet (omml2mml.xsl) required for this operation was notfound …

Kubernetes Ingress暴露应用的工作流程

文章目录 一、Igress是什么二、安装Igress Controller三、Service NodePort模式暴露Ingress Controller四、创建ingress 进行访问查看ingress controller生成的规则(两种类型通用) 五、HostNetwork模式暴露Ingress Controller总结&#xff1a; 一、Igress是什么 一般负载均衡器…

文件上传之大文件分块上传进度控制处理

在分块上传内容结束以后的事件监听&#xff0c;我们会实现 unlinkSync 删除临时文件操作&#xff0c;那么试想一下&#xff0c;在这个事件监听中&#xff0c;我们是否可以通过totalChunks以及currentChunk获取当前上传的进度情况呢&#xff1f; 后端 upload上传接口&#xff…

YOLOv8优化策略:注意力系列篇 | non-local自注意力,助力小目标检测

🚀🚀🚀本文改进:non-local自注意力,助力小目标检测 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1.原理介绍 论文:https://arxiv.org/pdf/1711.07971.pdf 摘要:卷积和循环运算都是一次处理一个…

2024最新幻兽帕鲁服务器多少钱一个?

幻兽帕鲁服务器多少钱&#xff1f;价格便宜&#xff0c;阿里云4核16G幻兽帕鲁专属服务器32元1个月、66元3个月&#xff0c;4核32G配置113元1个月、339元3个月&#xff1b;腾讯云4核16G14M服务器66元1个月、277元3个月、1584元一年。阿腾云atengyun.com分享阿里云和腾讯云palwor…

【机组】基于FPGA的32位算术逻辑运算单元的设计(EP2C5扩充选配类)

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 目录 一、实验目的 二、实验要求 …