当前位置： 首页 > news >正文

JavaWeb笔记之前端开发HTML

news 文章来源：https://blog.csdn.net/m0_52514893/article/details/135116672 2024/11/19 14:42:40

一、引言

1.1HTML概念
网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。
   

二、HTML简介

2.1 简介
HTML全称：Hyper Text Markup Language(超文本标记语言)。

超文本：页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记：标签，不同的标签实现不同的功能。
语言：人与计算机的交互工具。
         

2.2 作用
HTML使用标记标签来描述网页,展示信息给用户。
  
2.3 书写规范
HTML标签是以尖括号包围的关键字。
HTML标签通常是成对出现的，有开始就有结束。
HTML通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)。
HTML标签不区分大小写,建议全小写。
  

三、HTML基本标签

3.1 结构标签
<html>:根标签<head>：网页头标签<title></title>:页面的标题</head><body></body>：网页正文
</html>
    

   
颜色的表示方式：
第一种方式：用表示颜色的英文单词，例，red green blue
第二种方式：用16进制表示颜色，例，#000000 #ffffff #325687 #377405
   
3.2 排版标签
可用于实现简单的页面布局。
注释标签：
换行标签：< br>
段落标签：< p>文本文字</ p>
        特点：段与段之间有空行
        属性：align对齐方式(left、center、right)  
水平线标签:< hr/>
        width：水平线的长度(两种：第一种：像素表示；第二种：百分比表示)。
        size：水平线的粗细 (像素表示，例如：10px)。
        color：水平线的颜色。
        align：水平线的对齐方式。
     
3.3 块标签
使用CSS+DIV是现下流行的一种布局方式。

      
3.4 文字标签
font标签处理网页中文字的显示方式。        

     
3.5 文本标签
使用标签实现标签的样式处理。

     
3.6 标题标签
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行。

  
3.7 列表标签
无序列表：使用一组无序的符号定义， < ul>< /ul> 
<ul type="circle"><li></li>
</ul>
    

   
有序列表：使用一组有序的符号定义， < ol>< /ol> 
<ol type="a" start="1"><li></li>
</ol>

   
列表嵌套：无序列表与有序列表相互嵌套使用。
   
代码举例： 
<ol><li></li><li></li><li><ul><li></li></ul></li>
</ol>

  
3.8 图形标签
在页面指定位置处中引入一幅图片， < img />

     
3.9 链接标签
在页面中使用链接标签跳转到另一页面
        标签： < a href="">< /a>
        属性：href:跳转页面的地址(跳转到外网需要添加协议)
设置跳转页面时的页面打开方式，target属性
        _blank在新窗口中打开
        _self在原空口中打开
指向同一页面中指定位置
        定义位置： < a name="名称">< /a>
        指向： < a href="#名称">< /a>
  
3.10 表格标签
普通表格(table,tr,td)。 
<table><tr><td></td></tr>
</table>
      
表格的列标签(th)：内容有加粗和居中效果。 
<table><tr><th></th></tr>
</table>
   
表格的列合并属性(colspan)：在同一行内同时合并多个列。 
<table><tr><td colspan=""></td></tr>
</table>
    
表格的行合并属性(rowspan)：在同一列跨多行合并。 
<table><tr rowspan=""><td></td></tr>
</table>
     

四、综合案例

  

五、表单标签

html表单用于收集不同类型的用户输入数据。

    
5.1 form
action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理。
method：请求方式：get 和post。
        get：

                地址栏，请求参数都在地址后拼接 path?name="张三"&password="123456"。
                不安全。
                效率高。
                get请求大小有限制，不同浏览器有不同，但是大约是2KB；一般情况用于查询数据。
        post：
                地址栏：请求参数单独处理。
                安全可靠些。
                效率低。
                post请求大小理论上无限；一般用于插入删除修改等操作。

enctype：表示是表单提交的类型。
        默认值：application/x-www-form-urlencoded 普通表单。
        multipart/form-data 多部分表单(一般用于文件上传)。
      
5.2 input
作为表单中的重要元素，可根据不同type值呈现为不同状态。

        
5.3 select
单选下拉列表：< select>< /select>
默认选中属性：selected="selected" 
<select><option selected="selected">内容</option>...<option></option>
</select>
    
多选下拉列表属性： < select></ select>
多选列表：multiple="multiple" 
<select multiple="multiple"><option></option>
</select>
    
5.4 textarea
多行文本框： < textarea cols="列" rows="行">< /textarea>
      
5.5 综合示例

   

六、HTML框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的缺点：
        开发人员必须同时跟踪更多的HTML文档。
        很难打印整张页面。
   
6.1 frameset
框架结构标签（ < frameset>< /frameset>）用于定义如何将窗口分割为框架。
每个 frameset 定义了一系列行或列。

rows/columns 的值规定了每行或每列占据屏幕的面积。
        <frameset rows="">< /frameset>
        <frameset cols="">< /frameset>
   
6.2 frame
每个frame引入一个html页面。 
<frameset cols="*,*"><frame src="info1.html" /><frame src="info2.html" />
</frameset>
   
6.3 注意事项
不能将 < body>< /body> 标签与 < frameset>< /frameset> 标签同时使用。
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在< frame>标签中加入：noresize="noresize"。
     
6.4 综合案例

   

七、其它标签

7.1 其他标签 
<!--说明：keywords用来告诉搜索引擎你网页的关键字是什么。 -->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。 -->
<meta http-equiv="Refresh"Content="时间;Url=网址参数">
<!--代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。-->
<meta http-equiv="Pragma"CONTENT="no-cache">
<!--content-Language（显示语言的设定） -->
<meta http-equiv="Content-Language"content="zh-cn"/>
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
  
7.2 特殊字符 
占位符：空格 - &nbsp;

相关文章：

JavaWeb笔记之前端开发HTML

一、引言 1.1HTML概念 网页&#xff0c;是网站中的一个页面&#xff0c;通常是网页是构成网站的基本元素&#xff0c;是承载各种网站应用的平台。通俗的说&#xff0c;网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件&#xff0c;俗称 HTML文件。 …...

编程日记 2023/12/21 15:29:50

通过IP地址定位解决被薅羊毛问题

随着互联网的普及&#xff0c;线上交易和优惠活动日益增多&#xff0c;这也为一些不法分子提供了可乘之机。他们利用技术手段&#xff0c;通过大量注册账号或使用虚假IP地址进行异常操作&#xff0c;以获取更多的优惠或利益&#xff0c;这种行为被称为“薅羊毛”。对于企业和平…...

编程日记 2023/12/21 15:28:48

Leetcode 122 买卖股票的最佳时机 II

题意理解&#xff1a; 已知&#xff1a;一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格 如何哪个时间点买入&#xff0c;哪个时间点卖出&#xff0c;多次交易&#xff0c;能够收益最大化 目的&#xff1a;收益最大化 解题思路&#xff1a; 使用贪心…...

编程日记 2023/12/21 15:27:47

音频文件合成

音频文件合成 音频文件合成 http://ffmpeg.org/download.html https://blog.csdn.net/u013314786/article/details/89682800 http://www.360doc.com/content/19/0317/01/10519289_822112563.shtml https://chaijunkun.blog.csdn.net/article/details/116491526?spm1001.210…...

编程日记 2023/12/21 15:26:46

20231220将NanoPC-T4(RK3399)开发板的Android10的SDK按照Rockchip官方挖掘机开发板编译打包刷机之后启动跑飞

20231220将NanoPC-T4(RK3399)开发板的Android10的SDK按照Rockchip官方挖掘机开发板编译打包刷机之后启动跑飞 2023/12/20 17:19 简略步骤&#xff1a;rootrootrootroot-X99-Turbo:~/3TB$ tar --use-compress-programpigz -xvpf rk3399-android-10.git-20210201.tgz rootrootro…...

编程日记 2023/12/21 15:23:44

vivo 容器平台资源运营实践

作者&#xff1a;vivo 互联网服务器团队 - Chen Han 容器平台针对业务资源申请值偏大的运营问题&#xff0c;通过静态超卖和动态超卖两种技术方案&#xff0c;使业务资源申请值趋于合理化&#xff0c;提高平台资源装箱率和资源利用率。 一、背景 在Kubernetes中&#xff0c;容…...

编程日记 2023/12/21 15:21:42

ASP.NET Core面试题之Redis高频问题

&#x1f388;&#x1f388;在.NET后端开发岗位中&#xff0c;如今也少不了、微服务、分布式、高并发高可用相关的面试题&#x1f388;&#x1f388; &#x1f44d;&#x1f44d;本文分享一些整理的Redis高频面试题&#x1f389; &#x1f44d;&#x1f44d;机会都是给有准备…...

编程日记 2023/12/21 15:20:41

【教程】Ubuntu基本软件安装

文章目录 一、搜狗输入法安装二、百度网盘安装三、划词翻译 一、搜狗输入法安装 全网最准确的Ubuntu 20.04 安装搜狗输入法的步骤 二、百度网盘安装 百度云盘for Linux安装教程和体验 三、划词翻译 ubuntu最好用的划词翻译词典&#xff1a;有道词典和GoldenDict...

编程日记 2023/12/21 15:19:40

Jenkins 构建环境指南

目录 Delete workspace before build starts&#xff08;常用&#xff09; Use secret text(s) or file(s) &#xff08;常用&#xff09; Add timestamps to the Console Output &#xff08;常用&#xff09; Inspect build log for published build scans Terminate a …...

编程日记 2023/12/21 15:18:39

基于Go语言的HTTP路由设计与实现

在Go语言的世界里&#xff0c;HTTP路由是一种将HTTP请求映射到相应处理函数的技术。通过路由&#xff0c;我们可以确定当用户发送一个HTTP请求时&#xff0c;应该调用哪个函数来处理该请求。在这个过程中&#xff0c;我们可以使用多种方法来实现路由设计&#xff0c;下面我将以…...

编程日记 2023/12/21 15:16:38

SpringMVC01

SpringMVC 1. 学习⽬标2. 什么叫MVC&#xff1f;3. SpringMVC 框架概念与特点4. SpringMVC 请求流程5. Spring MVC 环境搭建6. URL 地址映射配置7. 参数绑定8. JSON 数据开发JSON普通数组步骤1:pom.xml添加依赖步骤2&#xff1a; 修改配置⽂件步骤3. 注解使⽤ 1. 学习⽬标 2. 什…...

编程日记 2023/12/21 15:15:37

基于Redis限流（aop切面+redis实现“令牌桶算法”）

令牌桶算法属于流量控制算法&#xff0c;在一定时间内保证一个键&#xff08;key&#xff09;的访问量不超过某个阈值。这里的关键是设置一个令牌桶&#xff0c;在某个时间段内生成一定数量的令牌&#xff0c;然后每次访问时从桶中获取令牌&#xff0c;如果桶中没有令牌&#x…...

编程日记 2023/12/21 15:10:32

【小白专用】php pdo方式连接sqlserver 设置方法 更新23.12.21

windows系统的拓展相对来说比较好安装&#xff0c;直接下载对应的dll文件&#xff0c;修改php.ini配置文件即可。 添加PHP对SQL SERVER的支持 1.新建PHP 文件&#xff0c;输入内容&#xff1a; <?php echo phpinfo(); ?> 2.运行后&#xff0c;可以查看到如下数据&…...

编程日记 2023/12/21 15:06:27

打开C#项目时出现“error : 找不到指定的 SDK”的错误解决方法汇总

从github上克隆项目回来&#xff0c;发现编译通过&#xff0c;我是通过一下步骤解决的&#xff1a; 1.到适用于 Visual Studio 的 .NET SDK 下载网址下载对应版本的.NET SDK&#xff0c;关闭当前VS后安装&#xff1b; 2.参考VS2022报错&#xff1a;error : 找不到指定的 SDK“…...

编程日记 2023/12/21 15:05:26

MIT 6.824 练习1

Hi, there! 这是一份根据 MIT 6.824(2021) 课程的第 2 课的课堂示例代码改编的 2 个 go 语言编程练习。像其他的编程作业一样&#xff0c;我去除了核心部分&#xff0c;保留了代码框架&#xff0c;并编写了每一步的提示 练习代码在本文的最后面 爬虫 在第一部分&#xff0c;…...

编程日记 2023/12/21 15:01:23

Git报错x509: certificate signed by unknown authority

下载报错&#xff1a; Error downloading object: model-00001-of-00008.safetensors (ed3ac49): Smudge error: Error downloading model-00001-of-00008.safetensors (ed3ac4983f682a999b0e4b6f072aad294c4fd9a7e968e90835ba5c4b466d3c7c): LFS: Get https://cdn-lfs.huggin…...

编程日记 2023/12/21 14:59:21

OpenCV技术应用（8）— 如何将视频分解

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。本节课就手把手教大家如何将一幅图像转化成热力图&#xff0c;希望大家学习之后能够有所收获~&#xff01;&#x1f308; 目录 &#x1f680;1.技术介绍 &#x1f680;2.实现代码 &#x1f680;1.技术介绍 视频是…...

编程日记 2023/12/21 14:58:20

Swagger2接口测试文档

目录 一、Swagger简介 1.1 Swagger是什么&#xff1f; 1.2 为什么要用Swagger 1.3 Swagger注解 二、Spring集成Swagger 三、测试环境配置 一、Swagger简介 1.1 Swagger是什么&#xff1f; Swagger 是一个开源的 API 设计和文档工具&#xff0c;它可以帮助开发人员更快、…...

编程日记 2023/12/21 14:55:17

【Java】BigDecimal 比较自动化页面获取数据的大小

jwensh2023.12.20 使用背景 对 web3 相关的数据进行计算的时候&#xff0c;需要进行大小加减计算&#xff0c;UI 自动化过程需要将数据转为自然数&#xff1b;页面获取的数据会有千分位 、高精度(18位) /*** Compares this {code BigDecimal} with the specified* {code BigDe…...

编程日记 2023/12/21 14:51:13

开源键盘工程QMK

一、Qmk简介 目录 一、Qmk简介 二、Qmk入门指导文档 三、QMK配置器 四、QMK层的概念 TMK原先是由Jun Wako设计实现...

编程日记 2023/12/21 14:48:11

Elasticsearch的批量bulk 提交 写入的方式会有顺序问题吗？

Elasticsearch的分布式特性可能会导致写入操作的执行顺序与提交顺序稍有不同。在分布式环境中，Elasticsearch将数据分散到不同的节点上进行存储和处理，因此写入操作的执行顺序可能会受到网络延迟、负载均衡等因素的影响。 根源在于ES的分布式架构。如上图所示，客户端的命令首…...

编程日记 2023/12/21 14:46:09

云原生之深入解析如何使用Vcluster Kubernetes加速开发效率

一、背景 为什么一个已经在使用 Kubernetes 本身方面已经很挣扎的开发人员还要处理虚拟集群呢&#xff1f;答案可能会让您感到惊讶&#xff0c;但虚拟集群实际上比单独的物理集群更容易处理&#xff0c;并且与本地 k3d、KinD 或 minikube 部署的集群相比具有相当多的优势。如果…...

编程日记 2023/12/21 14:45:08

PCL 已知同名点对计算旋转矩阵并对点云进行旋转

目录 一、 算法概述二、代码实现三、测试示例一、 算法概述 适用：已知三组及三组以上的同名点对，计算旋转矩阵；然后根据旋转矩阵对点云进行旋转，最后保存旋转后的点云文件。 二、代码实现 #include <Eigen/Core> #include <Eigen/Dense>...

编程日记 2023/12/21 14:43:06

MyBatis ORM映射

MyBatis只能自动维护库表”列名“与”属性名“相同时的对应关系&#xff0c;二者不同时无法自动ORM 因此需要使用到ORM映射。 共有两种解决办法&#xff1a;1.列的别名 2.结果映射 1.列的别名 在SQL中使用 as 为查询字段添加列别名&#xff0c;以匹配属性名 public List<…...

编程日记 2023/12/21 14:41:04

在线客服系统推荐：为何选择Zoho Desk？

客户和企业的关系并不止于一次买卖关系&#xff0c;企业后续持续的服务不仅是对客户的保障&#xff0c;更能收获良好的品牌口碑和持续的良性收益。所以&#xff0c;企业需要在客户旅程的每一个阶段为客户提供优质服务。而在这段服务旅程中&#xff0c;在线客服系统承担了重要的…...

编程日记 2023/12/21 14:40:03

手绘心情树叶，探索情绪世界

人生如同滚雪球&#xff0c;关键在于找到湿润的雪和陡峭的坡。正如巴菲特所言。昨天参与JSTO的经历&#xff0c;让我深有同感。徐老师分享的主题是《手绘心情树叶&#xff0c;探索情绪世界》&#xff0c;发现在JSTO这个平台上&#xff0c;伙伴们的成长速度惊人。从系统的角度看…...

编程日记 2023/12/21 14:39:02

智能优化算法应用：基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于水基湍流算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.水基湍流算法4.实验参数设定5.算法结果6.…...

编程日记 2023/12/21 14:38:01

打开和关闭GBASE南大通用数据库连接

下面的样例代码使用连接字符串通过GBASE南大通用Connection 类创建连接对象、 打开连接、关闭连接GBASE南大通用。 C# 示例&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Diagnostics; using Sys…...

编程日记 2023/12/21 14:29:55

Zookeeper 集群搭建过程中常见错误

文章目录 Mode: standalone启动失败 Mode: standalone 这通常表示 Zookeeper 配置为单节点模式&#xff0c;而不是集群模式。需要检查 zoo.cfg 文件中的配置&#xff0c;确保包含了所有集群节点的信息。 启动失败 /usr/bin/java ZooKeeper JMX enabled by default Using con…...

编程日记 2023/12/21 14:28:54

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…...

编程日记 2023/12/21 14:27:53

wordpress完整安装包/网址安全检测中心

目录 JQuery初级 概念快速入门JQuery对象和JS原生对象的区别选择器DOM操作 内容操作属性操作CRUD操作 案例 JQuery高级 动画遍历事件绑定插件 Ajax 概念实现方式 原生JS实现(了解&#xff09;JQuery实现方式 $.ajax()$.get()$.post() json 概念语法 基本规则获取数据遍历 …...

编程日记 2024/11/19 12:38:27

网站弄论坛形式怎么做/百度官网登录

为什么80%的码农都做不了架构师&#xff1f;>>> 衡量程序的标准 衡量一个程序是否优质&#xff0c;可以从多个角度进行分析。其中&#xff0c;最常见的衡量标准是程序的时间复杂度、空间复杂度&#xff0c;以及代码的可读性、可扩展性。针对程序的时间复杂度和空间…...

编程日记 2024/11/19 8:10:13

建设一个网站需要做哪些工作内容/网站seo是干什么的

1.1 几种常见存储设备的接口 1.IDE接口 IDE的英文全称为"Integrated Drive Electronics"&#xff0c;即"电子集成驱动器"&#xff0c;是曾经主流的硬盘接口。IDE接口也称之为ATA接口。ATA的英文拼写为"Advanced Technology Attachment"。2003年推…...

编程日记 2024/11/19 6:59:47

怎么搭建网站后台/网络营销logo

一、查询yum版本&#xff1a; yum info yum 二、查询打算下载软件的信息&#xff0c;如&#xff1a; yum search redis 或者 yum list |grep redis...

编程日记 2024/11/19 5:36:37

百度做网站免费/竞价推广遇到恶意点击怎么办

基于vue框架的ui组件声望 (Vuecidity) Vuecidity is a free, open source and licensed under MIT component library for the Vue.js framework, inspired by Google Material Design and Bootstrap. Vuecidity是免费的开放源代码&#xff0c;在MIT组件库下为Vue.js框架提供了…...

编程日记 2024/11/19 2:44:51

郑州 服装网站建设/做做网站

这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/computer-scienceclass4-2018/homework/2826 我在这个课程的目标是 熟练指针&#xff0c;能够精通关于数组内部运作原理 这个作业在那个具体方面帮助我实现目标 如何输出…...

编程日记 2024/11/19 0:46:08