页面技术基础-html

页面技术基础-html

环境准备：在JDBC中项目上完成代码定义
1. 新建一个 Module:filr->右键 -》Module -》Java-》next->名字(html_day1)->finish
2. 在 Moudle上右键-》第二个选项：add framework .. -> 选择JavaEE下第一个选项 Web Apllication
3. 在 web文件夹上右键 -》新建 file，后缀以.html

在这里插入图片描述

一、前言

  1. 替换JDBC中三层中的 View(视图)

    (1) 作用：收集用户信息、并给用户展示信息
(2) 技术：HTML、CSS、Bootstrap、JavaScript、jQuery、EasyUI(前端做界面的相关技术)

  2. html

    (1) html：Hypertext  Markup  Language，超文本标记语言
(2) html用于制作静态网页，数据不发生改变制作动态的技术：Servlet、jsp等，数据会因时间不同发生改变
(3) html为解释型的语言，网页运行在浏览器上，浏览器自带解释器，无需安装新的软件浏览器建议使用谷歌、火狐等兼容器较好的浏览器

    在这里插入图片描述

二、基本语法

  1. html的源码文件以 .html / .htm 结尾

  2. 基础结构

    <html><head>网页的头信息，对网页进行设置</head><body 属性="值"  属性='值'>网页内容</body>
</html>
注意：html的语法不严谨，大小写不区分

    在这里插入图片描述

  3. head部分：

    (1) head中定义的内容在网页中不显示，用于定义网页的附属信息；如标题、字符编码等
(2) head中常见的标签：a. <title>网页标签标题</title>b. 设置网页中的字符编码：<meta charset="UTF-8"> 【h5写法：重点-设置编码格式】

  4. body部分：主体部分

    (1) body中常见的属性：<body bgcolor="网页的背景颜色" text="字体颜色"></body>颜色的方式两种：a. 颜色对应的英语单词：red、green、blue、pink、yellow等<body text="red">b. 使用 RGB(三基色 红绿蓝)取色方式：#RRGGBB：7EE4C3 (采用十六进制)注意：借助取色软件获取颜色对应数据(例如 Faststone Captrue)
(2) 文本相关：a. 标题：<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>...<h6>三级标题</h6>注意：标题为1~6级，1最大，6最小标题属性：align="center|right|left(默认)" 标题水平位置：居中、靠右、靠左b. 段落：<p>段落的内容.....</p>注意：段落与段落之间有明显的间隔c. 换行：<br/>空格： &nbsp;  注意：分号不能省版权号：&copy;d. 水平分割线：<hr width="宽度">属性：width两种设置方式I. 像素：300px/ 500px，固定宽度II. 比例：30% / 50% ，相对浏览器宽度发生改变size:宽度  size = "7"color：颜色align:水平对齐方式align="center(默认)|left|right"e. 字体设置：<font color="颜色" size="字体大小" face="字体类型"></font>size="1~7"  1最小，7最大face="楷体" 字体类型
(3) 图片相关：【重点】<img src="图片的路径及图片名"  width="宽度" height="高度" align="水平位置">src指定图片路径【开发重点】align="" 设置图片相对文字位置，left|right|top(顶部)|middle(中间)|bottom(底部)title:当鼠标移动到当前图片上时，对图片的描述文字
(4) 超链接：【开发重点！！！！！】<a href="目标资源路径"  target="目标资源打开的位置">热点文字</a>例如：<a href="first.html">热点文字</a><a href="http://baidu.com">热点文字</a>target="_blank" 在新的网页中打开目标资源target="_self" 在当前网页中打开目标资源  【默认】
(5) 表格：【重点】<table border="1" cellspacing="0"><tr>      --代表行<td>一行一列</td>     -- 代表列<td>一行二列</td><td>一行三列</td></tr><tr><td>二行一列</td><td>二行二列</td><td>二行三列</td></tr></table>a. table中常见属性：border：边框，默认为0cellspacing：边框间隙，设置为0，取消中间间隙bgcolor="green" ：表格背景色background="image/001.jpg"  背景图片width="700px"     宽度height="400px"    高度align="left(默认)|center(居中)|right"  表格水平位置b. tr中常见的属性：align：设置当前行中文字相对表格位置，center表格中间;left：表格左边,right(右边)

三、表单相关(属于 body内容)

  1. 表单作用：

    (1) 实现人机交互
(2) 收集用户数据，并将收集到数据发送给服务端

  2. 表单基本结构：

    语法1：
<form><fieldset><legend>表单样式标题</legend><!--这里写表单元素--></fiedlset>
</form>语法2：
<form><!--这里写表单元素-->
</form>详解：1. form标签：必须要有，用来包含表单元素的。2. fieldset标签：用来显示表单包含效果，非必须。3. legend标签：用来给fieldset标签的包含框指定标题。

    在这里插入图片描述

  3. 表单相关元素

    (1) 单行文本框：<input type="text" name="username" value="输入用户名...">常见的属性：name：为当前文本框命名，通过 name获取对应 value数据value：用户输入的信息，也可以设置默认值placeholder：提示文字，输入文字后消失readonly：只读，存在即为truedisabled ：不可用，存在即为truehidden：隐藏，存在即为true
(2) 密码框：<input type="password" name="password" value="....."   maxlength="最大字符个数">密码：<input type="password" name="" maxlength="10"/>属性：maxlength：最大字符个数(3) 单选按钮：<input type="radio" name="名字" value="值">注意：一组单选按钮的名字必须一致，才能互斥属性： checked 为默认选项，存在即为true男<input type="radio" name="sex" value="男" checked>女<input type="radio" name="sex" value="女"><br/><br/>
(4) 复选框：<input type="checkbox" name="名字" value="值">注意：建议一组复选框中name一致，便于后期开发获取对应value默认选中：checked(5) 下拉框：<select name="edu"><option>选项内容</option><option value="1">学前班</option><option value="2">小学</option><option selected>初中</option><option>高中</option><option>中专</option><option>大专</option><option>本科</option><option>研究僧</option></select>属性：selected 默认选项name：当前元素的数据的名字。以后发送数据以及服务器获取的标记option标签，表示一个选项标签体：显示在选项中的文字，不代表真实数据，仅仅是显示信息value：当前选项的默认值，真正收集并发送给服务器的数据selected：默认选中当前选项
(6) 文本域：<textarea name="" cols="" rows="" placeholder="" style="resize: none;"> 提示文字 </textarea>属性详情：readonly只读cols :单行中文字符数，可用来设置宽度rows :显示多少行，可用来设置高度style="resize: none;" :禁止拖拽
(7) 日期：<input type="date" name="名字">
(8) 邮箱：<input type="email" name="名字">注意：自动检测邮箱输入的格式，必须包含 @
(9) 数字格式：<input type="number" value="默认值" name="" max="最大值" min="最小值" step="步长"/>草莓数量：<input type="number" value="1" name="" max="12" min="3" step="2"/>
(9) 提交按钮：【现在不使用了】<input type="submit" name="名字" value="值"><input type="submit" name="bn1" value="提交">注意：value中内容对用户显示(10) 重置按钮：<input type="reset" name="bn2" value="重置">将表单中内容清空(11) 普通按钮：<input type="button" name="bn3" value="按钮">注意：目前普通按钮没有任何效果，为后期内容准备例如：也可以利用超链接进行按钮操作<a href="first.html"><input type="button" name="bn3" value="按钮"></a>

  4. form表单 【前后端分离-不使用了】

    <form action="目标资源"  method="提交方式:get|post">中间将<input>包含此处(用户输入信息)
</form>action：代表将当前表单中的数据提交到哪(提交目标)
method：代表此表单提交数据的方式，有 get(默认)和post两种：method="get"方式：直接将提交的数据追加到地址中a. form提交地址url?name1=值&name2=值&name3=值注意：此处name代表 input中的name，通过 name获取对应value值内容不加引号：url?username=zs&password=123456b. 特点：数据不安全、不能传输大量的数据、处理中文时容易乱码(相对不容易解决)method="post"方式：表单以数据包的形式打包发送、不会显示在地址栏中a. 特点：数据安全、允许传输大量数据、处理中文相对容易

四、iframe的应用

应用场景：可以在当前网页中，嵌套显示另一个网页。通常用来做局部跳转

在这里插入图片描述

  1. iframe语法：

    <iframe src="/pages/Main.html" name="mainPage" frameborder="0" scrolling="no"></iframe>

  2. 属性说明：

    `src`：被引用页面的路径。`name` ：iframe的名字，通常可以作为a超链接跳转的target指定在本iframe中跳转。（通过frame的名字指定展示跳转的网页(局部跳转)`frameborder` ：iframe的边框宽度`scrolling` ：是否显示滚动条，no就是不显示。`width`：设置宽度 `height`：设置高度

  3. iframe的应用

    (1) 超链接：<a href="/web/person.html" target="iframe的name">
(2) iframe框架：<iframe name="iframe的name"></iframe>
注意：保证a超链接的target的内容 和 iframe的name一致，即可完成超链接指定iframe处切换新页面。

  4. 案例：
    在这里插入图片描述

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

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

相关文章

mysql高级（尚硅谷-夏磊）

mysql高级（尚硅谷-夏磊）

目录 内容介绍 Linux下MySQL的安装与使用 Mysql逻辑架构 Mysql存储引擎 Sql预热 索引简介 内容介绍 1、Linux下MySQL的安装与使用 2、逻辑架构 3、sql预热 Linux下MySQL的安装与使用 1、docker安装docker run -d \-p 3309:3306 \-v /atguigu/mysql/mysql8/conf:/etc/my…
阅读更多...
Xilinx A7开发板LVDS IO无输出问题解决方法

Xilinx A7开发板LVDS IO无输出问题解决方法

使用A7-35T FGG484的FPGA开发板bank16上的IO作为差分LVDS的输入输出&#xff0c;搭建输入输出测试工程发现LVDS可以输入、无法输出。查阅UG471&#xff0c;找到如下信息&#xff1a; 手册中已经针对A7的LVDS做了明确的应用说明&#xff1a; &#xff08;1&#xff09;HP bank上…
阅读更多...
观察者模式——对象间的联动

观察者模式——对象间的联动

1、简介 1.1、概述 在软件系统中&#xff0c;有些对象之间也存在类似交通信号灯和汽车之间的关系。一个对象的状态或行为的变化将导致其他对象的状态或行为也发生改变&#xff0c;它们之间将产生联动&#xff0c;正所谓“触一而牵百发”。为了更好地描述对象之间存在的这种一…
阅读更多...
第一个maven项目（IDEA生成）

第一个maven项目（IDEA生成）

第一个maven项目&#xff08;IDEA生成&#xff09; 步骤1 配置Project SDK 步骤2 配置maven File->Settings搜索maven
阅读更多...
CHI（六）独占访问

CHI（六）独占访问

AMBA5 CHI Architecture Specification IssueF 1. overview 独占访问的原则是&#xff0c;执行独占序列的逻辑处理器&#xff08;LP&#xff09;执行以下操作&#xff1a; 对一个地址执行exclusive load。计算要存储到该位置的新值。对该地址进行exclusive store。 支持对可…
阅读更多...
Java并发系列之二：悲观锁机制

Java并发系列之二：悲观锁机制

什么是锁 在并发环境下&#xff0c;会出现多个线程对同一个资源进行争抢的情况&#xff0c;假设A线程对资源正在进行修改&#xff0c;此时B线程此时又对资源进行了修改&#xff0c;这就可能会导致数据不一致的问题。为了解决这个问题&#xff0c;很多编程语言引入了锁机制&…
阅读更多...
RocketMQ发送消息超时异常

RocketMQ发送消息超时异常

说明&#xff1a;在使用RocketMQ发送消息时&#xff0c;出现下面这个异常&#xff08;org.springframework.messging.MessgingException&#xff1a;sendDefaultImpl call timeout……&#xff09;&#xff1b; 解决&#xff1a;修改RocketMQ中broke.conf配置&#xff0c;添加下…
阅读更多...
【JAVASE】多态

【JAVASE】多态

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 多态 1. 概念2. 实现条件3. 重写4. 向上…
阅读更多...
wordpress 学习贴

wordpress 学习贴

安装问题 我的使用环境为docker环境&#xff0c;php、nginx、mysql分别处于3个容器中&#xff0c; 提示异常&#xff0c;打开debug模式&#xff0c;会发现 No such file or directory Warning: mysqli_real_connect(): (HY000/2002): No such file or directory 这个其实问题其…
阅读更多...
【C++】开源：sqlite3数据库配置使用

【C++】开源：sqlite3数据库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍sqlite3数据库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…
阅读更多...
【FAQ】如何隐藏网页H.265播放器EasyPlayer.js的实时录像按钮？

【FAQ】如何隐藏网页H.265播放器EasyPlayer.js的实时录像按钮？

目前我们TSINGSEE青犀视频所有的视频监控平台&#xff0c;集成的都是EasyPlayer.js版播放器&#xff0c;它属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;包括WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#x…
阅读更多...
MySQL建表和增添改查

MySQL建表和增添改查

1.创建一个名为mydb的数据库 mysql> show database mydb; 查询 mysql> show database mydb; 2.创建一个学生信息表 mysql> create table mydb.student_informtion( -> student_id int UNSIGNED NOT NULL PRIMARY KEY, //非空&#xff08;不允许为空&#xff0…
阅读更多...
unity如何手动更改脚本执行顺序

unity如何手动更改脚本执行顺序

在Unity中&#xff0c;脚本的执行顺序是由脚本的执行顺序属性决定的。默认情况下&#xff0c;Unity根据脚本在项目中的加载顺序来确定它们的执行顺序。然而&#xff0c;你可以手动更改脚本的执行顺序&#xff0c;以下是一种方法&#xff1a; 在Unity编辑器中&#xff0c;选择你…
阅读更多...
PCIE上位机用什么工具?

PCIE上位机用什么工具?

可以了解一下神电测控出器的My FPGA开发套件&#xff0c;它可以用来开发FPGA板卡与上位机之间PCIE通信&#xff0c;而且就是用LabVIEW FPGA开发。它使用的是Xillybus PCIe IP核&#xff0c;神电将其封装成了在 LabVIEW FPGA 下的 PCIe CLIP 组件&#xff0c;可以方便的使用。而…
阅读更多...
深度学习之tensorboard可视化工具

深度学习之tensorboard可视化工具

(1)什么是tensorboard tensorboard是TensorFlow 的一个可视化工具包&#xff0c;提供机器学习实验所需的可视化和工具&#xff0c;该工具的功能如下&#xff1a; 跟踪和可视化指标&#xff0c;例如损失和精度可视化模型图&#xff08;操作和层&#xff09;查看权重、偏差或其…
阅读更多...
kafka部署

kafka部署

1.kafka安装部署 1.1 kafaka下载 https://archive.apache.org/dist/kafka/2.4.0/kafka_2.12-2.4.0.tgz Binary downloads是指预编译的软件包，可供直接下载和安装，无需手动编译。在计算机领域中，二进制下载通常指预构建的软件分发包，可以直接安装在系统上并使用 "2.…
阅读更多...
MFC第二十七天 通过动态链表实现游戏角色动态增加、WM_ERASEBKGND背景刷新的原理、RegisterClass注册窗口与框架程序开发

MFC第二十七天 通过动态链表实现游戏角色动态增加、WM_ERASEBKGND背景刷新的原理、RegisterClass注册窗口与框架程序开发

文章目录 通过动态链表实现游戏角色动态增加CMemoryDC.hCFlashDlg.hCFlashDlg.cpp WM_ERASEBKGND背景刷新的原理RegisterClass注册窗口与框架程序开发CFrameRegister 通过动态链表实现游戏角色动态增加 CMemoryDC.h #pragma once#include "resource.h"/*内存DC类简介…
阅读更多...
JavaWeb三大组件 —— Servlet

JavaWeb三大组件 —— Servlet

目录 servlet 注册servlet 父pom pom文件 1、通过注解注册 2、使用ServletRegistrationBean注册 API三生三世 第一生Servlet 第二生SpringMVC 今生SpringBoot servlet Servlet的作用&#xff1a; 接受请求参数、处理请求&#xff0c;响应结果&#xff0c;&#xff08;就…
阅读更多...
了解 spring MVC + 使用spring MVC - springboot

了解 spring MVC + 使用spring MVC - springboot

前言 本篇介绍什么是spring MVC &#xff0c;如何使用spring MVC&#xff0c;了解如何连接客户端与后端&#xff0c;如何从前端获取各种参数&#xff1b;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录 前言1. 什么…
阅读更多...
Vue 全局事件总线 Event-Bus

Vue 全局事件总线 Event-Bus

全局事件总线 作用&#xff1a;可以在全局层面上&#xff0c;在任意组件之间相互传递数据。不再局限于父子组件传值&#xff0c;或多层嵌套传值等方式。 使用方式&#xff1a;完全与父子组件传值一致&#xff0c;使用 $on 监听事件&#xff0c;使用 $emit 触发事件&#xff0c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023