JavaWeb概述及HTML | JavaWeb系列教程 | 第一期 | 前端

🙋大家好！我是毛毛张!
🌈个人首页： 神马都会亿点点的毛毛张

今天毛毛张分享的是JavaWeb系列笔记第一期：JavaWeb概述及HTML语法
特别说明：本系列教程的整理全部来源于尚硅谷的JavaWeb课程笔记，如有侵权，练习作者立删！

文章目录

  • 1.Web概述
    • 1.1 JavaWeb简介
    • 1.2 JavaWeb技术栈
    • 1.3 JavaWeb交互模式
    • 1.4 JavaWeb的CS和BS模式
    • 1.5 JavaWeb实现前后端分离
  • 2.HTML
    • 2.1 HTML入门
      • 2.1.1 HTML&CSS&JavaScript的作用
      • 2.1.2 什么是HTML
      • 2.1.3 HTML概念词汇解释
      • 2.1.4 HTML基础结构
      • 2.1.5 HTML的入门程序
      • 2.1.6 HTML的语法规则
      • 2.1.7 开发工具VSCode的安装
      • 2.1.8 VSCode编写HTML项目快速
      • 2.1.9 在线帮助文档
    • 2.2 HTML常见标签
      • 2.2.1 标题标签
      • 2.2.2 段落标签
      • 2.2.3 换行标签
      • 2.2.4 列表标签
      • 2.2.5 超链接标签
      • 2.2.6 多媒体标签
      • 2.2.7 表格标签(重点)
      • 2.2.8 表单标签(重点)
      • 2.2.9 常见表单项标签(重点)
      • 2.2.10 布局相关标签
      • 2.2.11 特殊字符
      • 2.2.12 总结

1.Web概述

1.1 JavaWeb简介

用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念

客户端 :与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据

  • 手机APP
1681181342911
  • 微信小程序
1681181399123
  • PC端程序
1681181558166 1681181668235
  • PC浏览器
1681181764764
  • 其他设备
1681181829641 1681181884366 1681181975807

服务端:与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据

  • “服务器”是一个非常宽泛的概念，从硬件而言: 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。从软件而言: 服务器其实就是安装在计算机上的一个软件，根据其作用的不同又可以分为各种不同的服务器，例如应用服务器、数据库服务器、Redis服务器、DNS服务器、ftp服务器等等

综上所述: 用我们自己的话来总结的话，服务器其实就是一台(或者一个集群)安装了服务器软件的高性能计算机

1681182451912

1.2 JavaWeb技术栈

  • 前端技术

    • HTML CSS JavaScript ES6 Nodejs npm vite vue3 router pinia axios element-plus …

  • 后端底层技术

    • HTTP xml Tomcat Servlet Request Response Cookie Sesssion Filter Listener MySQL JDBC Druid Jackson lombok jwt …

  • 图解：

1681177316138

1.3 JavaWeb交互模式

1681182819066

  • 请求：

    • 客户端向服务端传递数据的主要方式之一,客户端主动向服务端发送请求,可以携带数据,交给服务端处理. 请求只能是客户端向服务端

  • 响应：

    • 服务端向客户端传递数据的主要方式之一,在接收请求后开始对数据进行处理,将结果反馈给客户端使用.响应只能是服务端向客户端

1.4 JavaWeb的CS和BS模式

根据客户端的不同,我们可以将JAVA的互联网项目运行模式分为CS模式和BS模式

CS模式 Client-Server模式 客户端-服务端模式, 该模式特点如下

1681192888853
1 程序分两部分,一部分是客户端需要安装的程序,一部分是要部署在服务器上的程序

2 用户需要在硬件设备或者操作系统中,下载安装特定的客户端程序才可以使用

3 程序运行的压力由客户端和服务端共同承担

4 可以借助客户端运算资源,对数据继续处理,一般可以有较好的画质和展现效果

5 程序更新时,往往需要同时更新客户端和服务端两部分

6 跨平台性能一般,不同的平台未必都有对应的客户端程序

7 开发成本较高,要为不同的客户端开发不同客户端程序

BS模式 Browser-Server模式

1681192907280
1 程序就一部分,只要部署在服务器上即可

2 无论用户使用什么设备和操作系统,只要有一个安装任意一款浏览器即可

3 程序运行的压力主要由服务端承担

4 客户端承担的计算压力小,可以对数据进行简单的继续处理,但是不像CS模式那些可以获得较好的画质和展现效果

5 程序更新时,只需要同时服务端部分

6 跨平台性能优秀,只要有一个浏览器,到处都可以使用

7 开发成本略低,不必为不同的客户端开发不同客户端程序

模式选择

  • 对于我们JAVA程序员来说,我们开发的是服务端代码,所有无论前端是何种类型的服务端,我们只要按照接口文档要求开发后端功能即可,尤其是在当前前后端分离模式开发为主的时代背景下,我们可以在几乎不接触前端的状态下完成开发

1.5 JavaWeb实现前后端分离

  • 非前后端分离
    • 1 开发不分离: 程序员既要编写后端代码,又要去修改甚至编写前端代码,程序员的工作压力较大
    • 2 部署不分离: 使用了后端动态页面技术(JSP,Thymeleaf等),前端代码不能脱离后端服务器环境,必须部署在一起
  • 前后端分离
    • 1 开发分离：后端程序员只要按照接口文档去编写后端代码，无需编写或者关系前端代码，前后端程序员压力都降低
    • 2 部署分离：前端使用前端的页面动态技术，通过VUE等框架，工程化项目，前端项目可以部署到独立的服务器上
      1681193247981

2.HTML

2.1 HTML入门

2.1.1 HTML&CSS&JavaScript的作用

  • HTML 主要用于网页主体结构的搭建
    1681115424967
  • CSS 主要用于页面元素美化
    1681115460825
  • JavaScript 主要用于页面元素的动态处理
    js

2.1.2 什么是HTML

  • HTML：是Hyper Text Markup Language的缩写，意思是超文本标记语言
  • 它的作用是搭建网页结构，在网页上展示内容
  • HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。
    • HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。
    • HTML5 在 2012 年已形成了稳定的版本；2014年10月28日，W3C发布了HTML5的最终版
  • 什么是超文本：
    • HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

2.1.3 HTML概念词汇解释

  • 什么是标记语言？
  • 答：说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。
  • 标签：代码中的一个 <> 叫做一个标签
    • 有些标签成对出现，称之为双标签
    • 有些标签单独出现，称之为单标签
  • 双标签：标签是通过一组尖括号+标签名的方式来定义的
    • 代码示例：
      <p>HTML is a very popular fore-end technology.</p>
    • 解释：这个例子中使用了一个p标签来定义一个段落，<p>叫开始标签，</p>叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体，也简称：标签体。
  • 单标签：
    • 代码示例：
      <input type="text" name="username" />
  • 属性：一般在开始标签中,用于定义标签的一些特征
    • 代码示例：
      <a href="http://www.xxx.com">show detail</a>
    • 解释：href=“网址” 就是属性，href是属性名，"网址"是属性值
  • 文本：双标签中间的文字，包含空格换行等结构
  • 元素：经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素

2.1.4 HTML基础结构

  • HTML基础结构：
    • 文档声明
    • 根标签
    • 头部元素
    • 主题元素
    • 注释

1 文档声明

  • HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本
  • HTML4版本的文档类型声明是：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • HTML5版本的文档类型声明是：
    <!DOCTYPE html>
  • 现在主流的技术选型都是使用HTML5，之前的版本基本不用了。

2根标签

  • html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

3头部元素

  • head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

4主体元素

  • body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

5注释

  • HTML注释的写法是
<!-- 注释内容 -->

1681180699132

2.1.5 HTML的入门程序

第一步 准备一个纯文本文件,拓展名为html

new

第二步 使用记事本打开网页,在网页内开发代码

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        hello html!!!
    </body>
</html>

第三步 使用浏览器打开文件,查看显示的内容

1681178113257

2.1.6 HTML的语法规则

  • 根标签有且只能有一个
  • 无论是双标签还是单标签都需要正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释语法为 ,注意不能嵌套
  • 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
  • HTML中不严格区分字符串使用单双引号
  • HTML标签不严格区分大小写,但是不能大小写混用
  • HTML中不允许自定义标签名,强行自定义则无效

2.1.7 开发工具VSCode的安装

  • 前端工程师“Front-End-Developer”源自于美国。大约从2005年开始正式的前端工程师角色被行业所认可，到了2010年，互联网开始全面进入移动时代，前端开发的工作越来越重要。
  • 前端工程师比较推崇的一款开发工具就是visual studio code,下载地址为:https://code.visualstudio.com/
1681175338788
  • 安装过程比较简单,一路next,注意安装路径不要有中文,空格和特殊符号即可，具体的安装教程可以参见毛毛张的这篇博客：
    • VScode中配置 C/C++ 环境 | IT拯救者
  • 使用VSCode进行前端开发推荐插件
    • Auto Rename Tag 自动修改标签对插件
    • Chinese Language Pack 汉化包
    • HTML CSS Support HTML CSS 支持
    • Intellij IDEA Keybindings IDEA快捷键支持
    • Live Server 实时加载功能的小型服务器
    • open in browser 通过浏览器打开当前文件的插件
    • Prettier-Code formatter 代码美化格式化插件
    • Vetur VScode中的Vue工具插件
    • vscode-icons 文件显示图标插件
    • Vue 3 snipptes 生成VUE模板插件
    • Vue language Features Vue3语言特征插件

2.1.8 VSCode编写HTML项目快速

1.准备工作空间

  • 直接用vscode打开某个目录即可直接将某个目录作为项目代码存放的根目录

1684897738491

1687330010547

2.在工作空间下创建目录和文件

  • 点击带有"+"号的按钮即可创建文件或者目录

1687330312538

  • 在html中,输入" ! " 并回车即可快速出现html的基本结构

newhtml

3.通过live Server 小型服务器运行项目

  • 点击右下角Go Live , 或者在html编辑视图上右击 open with live Server ,会自动启动小型服务器,并自动打开浏览器访问当前资源
1681176763818 1681176815540
  • Live Server 实时加载功能
GIF
  • Live Server使用完毕后,要记得关闭
1681177160318 1681177186528

4.其他常见设置

  • 设置字体: 齿轮>search>搜索 “字体大小”
  • 设置字体大小可以用滚轮控制: 齿轮>设置>搜索 “Mouse Wheel Zoom”
  • 设置左侧树缩进: 齿轮>设置>搜索 “树缩进”
  • 设置文件夹折叠: 齿轮>设置>搜索 “compact” 取消第一个勾选
  • 设置编码自动保存: 齿轮> 设置> 搜索 “Auto Save” ,选择为"afterDelay"

2.1.9 在线帮助文档

  • http://www.w3school.com.cn

2.2 HTML常见标签

2.2.1 标题标签

  • 标题标签：一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题

  • 代码示例：

    <body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

  • 效果：

1681179289089

2.2.2 段落标签

  • 段落标签：一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果
  • 代码示例：
<body>
    <p>
        记者从工信部了解到，近年来我国算力产业规模快速增长，年增长率近30%，算力规模排名全球第二。
    </p>
    <p>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。中国信息通信研究院测算，
        算力每投入1元，将带动3至4元的GDP经济增长。
    </p>
    <p> 
        近年来，我国算力基础设施发展成效显著，梯次优化的算力供给体系初步构建，算力基础设施的综合能力显著提升。
        当前，算力正朝智能敏捷、绿色低碳、安全可靠方向发展。
    </p>
</body>
  • 效果：
1681180017304

2.2.3 换行标签

  • <br>：单纯实现换行
  • <hr>：实现换行同时添加分割线，好人标签

  • 代码示例：

    <body>
        工信部统计显示，截至去年底，我国算力总规模达到180百亿亿次浮点运算/秒，存力总规模超过1000EB（1万亿GB）。
    <br>
        国家枢纽节点间的网络单向时延降低到20毫秒以内，算力核心产业规模达到1.8万亿元。
    <hr>
        中国信息通信研究院测算，算力每投入1元，将带动3至4元的GDP经济增长。
</body>

  • 效果：

1681180239241

2.2.4 列表标签

有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征

  • 列表标签 ol(order list)
  • 列表项标签 li(list item)
  • 代码
<ol>
    <li>JAVA</li>
    <li>前端</li>
    <li>大数据</li>
</ol>
  • 效果

1681194349015

无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征

  • 列表标签 ul
  • 列表项标签 li
  • 代码
<ul>
    <li>JAVASE</li>
    <li>JAVAEE</li>
    <li>数据库</li>
</ul>
  • 效果
    1681194434091

嵌套列表 列表和列表之间可以嵌套,实现某一项内容详细展示

  • 代码
<ol>
    <li>
        JAVA
        <ul>
            <li>JAVASE</li>
            <li>JAVAEE</li>
            <li>数据库</li>
        </ul>
    </li>
    <li>前端</li>
    <li>大数据</li>
</ol>
  • 效果
    1681194504371

2.2.5 超链接标签

  • 超链接标签：点击后带有链接跳转的标签 ,也叫作a标签
  • href属性用于定义连接
    • href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
    • href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
    • href中也可以定义完整的URL
  • target属性用于定义打开的方式
    • _blank 在新窗口中打开目标资源
    • _self 在当前窗口中打开目标资源
  • 代码示例：
<body>
    <!-- 
        href属性用于定义连接
            href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点
            href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
            href中也可以定义完整的URL
        target用于定义打开的方式
            _blank 在新窗口中打开目标资源
            _self  在当前窗口中打开目标资源
     -->
   <a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br>
   <a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br>
   <a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br>
   
</body>
  • 效果效果：
    chaolianjiex

2.2.6 多媒体标签

img(重点) 图片标签,用于在页面上引入图片

  • 代码
<!-- 
src
	用于定义图片的连接
title
	用于定义鼠标悬停时显示的文字
alt
	用于定义图片加载失败时显示的提示文字
-->
<img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />
  • 效果
    1681196307844

audio 用于在页面上引入一段声音

  • 代码
<!-- 
    src
    	用于定义目标声音资源
    autoplay
    	用于控制打开页面时是否自动播放
    controls
    	用于控制是否展示控制面板
    loop
    	用于控制是否进行循环播放
--> 
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
  • 效果
    1681196276582

video 用于在页面上引入一段视频

  • 代码
<body>
   <!-- 
    src
        用于定义目标视频资源
    autoplay
        用于控制打开页面时是否自动播放
    controls
        用于控制是否展示控制面板
    loop
        用于控制是否进行循环播放
    --> 
   <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>
  • 效果
    1681196233304

2.2.7 表格标签(重点)

常规表格

  • table标签 代表表格

  • thead标签 代表表头 可以省略不写

  • tbody标签 代表表体 可以省略不写

  • tfoot标签 代表表尾 可以省略不写

  • tr标签 代表一行

  • td标签 代表行内的一格

  • th标签 自带加粗和居中效果的td

  • 代码示例：

<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
		<td>99</td>
	</tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
</table>
  • 展示效果
    1681196961386

单元格跨行

  • 通过td的rowspan属性实现上下跨行
  • 代码示例：
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
        <td rowspan="3">
            前三名升职加薪
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
		<td>99</td>
	</tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
</table>
  • 效果
    1681197062594

单元格跨行

  • 通过td的colspan属性实现左右的跨列
  • 代码
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table  border="1px" style="width: 400px; margin: 0px auto;">
    <tr>
        <th>排名</th>
        <th>姓名</th>
        <th>分数</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张小明</td>
        <td>100</td>
        <td rowspan="6">
            前三名升职加薪
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>李小东</td></td>
		<td>99</td>
		</tr>
    <tr>
        <td>3</td>
        <td>王小虎</td>
        <td>98</td>
    </tr>
    <tr>
        <td>总人数</td>
        <td colspan="2">2000</td>
    </tr>
    <tr>
        <td>平均分</td>
        <td colspan="2">90</td>
    </tr>
    <tr>
        <td>及格率</td>
        <td colspan="2">80%</td>
    </tr>
</table>
  • 效果
    1681197299564

2.2.8 表单标签(重点)

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

  • form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
    • action, form标签的属性之一,用于定义信息提交的服务器的地址
    • method, form标签的属性之一,用于定义信息的提交方式
      • get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
      • post post方式,数据会通过请求体发送,不会在缀到url后
  • input标签,主要的表单项标签,可以用于定义表单项
    • name, input标签的属性之一,用于定义提交的参数名
    • type, input标签的属性之一,用于定义表单项类型
      • text 文本框
      • password 密码框
      • submit 提交按钮
      • reset 重置按钮
  • 代码
<form action="http://www.atguigu.com" method="get">
    用户名 <input type="text" name="username" /> <br>
    密&nbsp;&nbsp;&nbsp;码 <input type="password" name="password" /> <br>
    <input type="submit"  value="登录" />
    <input type="reset"  value="重置" />
</form>
  • 效果
    1681198068548

2.2.9 常见表单项标签(重点)

单行文本框

  • 代码
个性签名：<input type="text" name="signal"/><br/>
  • 效果
    1681198354039

密码框

  • 代码
密码：<input type="password" name="secret"/><br/>
  • 效果
    1681198393831

单选框

  • 代码
你的性别是：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女

  • 效果
    1681198448345

  • 说明

    • name属性相同的radio为一组，组内互斥
    • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
    • 设置checked="checked"属性设置默认被选中的radio
    • 如果属性名和属性值一样的话，可以省略属性值，只写checked即可

复选框

  • 代码
你喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 效果
    1681198540737
  • 说明
    • 设置checked="checked"属性设置默认被选中的checkbox

下拉框

  • 代码
你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>
  • 效果
    1681199376475
  • 说明
    • 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
    • name属性在select标签中设置,value属性在option标签中设置。
    • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
    • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

按钮

  • 代码
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>

  • 效果
    1681199471712

  • 说明

    • 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
    • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
    • 提交按钮: 点击后提交表单

隐藏域

  • 代码
<input type="hidden" name="userId" value="2233"/>
  • 说明
    • 通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框

  • 代码
自我介绍：<textarea name="desc"></textarea>

  • 效果
    1681199589613

  • 说明

    • textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

文件标签

  • 代码
头像:<input type="file" name="file"/>
  • 效果
    1681199672580
  • 说明
    • 不同浏览器显示的样式有微小差异

2.2.10 布局相关标签

div标签 俗称"块",主要用于划分页面结构,做页面布局

span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰

  • 代码
    <div style="width: 500px; height: 400px;background-color: cadetblue;">
        <div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;">
            <span style="color: blueviolet;">页面中间部分</span>
        </div> 
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>
  • 展示效果
    1681200198741

2.2.11 特殊字符

对于有特殊含义的字符,需要通过转移字符来表示
1681200435834
1681200467767
1681200487125
1681200503798

  • 代码示例：
&lt;span&gt;  <br>
&lt;a href="http://www.atguigu.com"&gt;尚&nbsp;硅&nbsp;谷&lt;/a&gt; <br>
&amp;amp;
  • 效果：
    1681200662087

2.2.12 总结

  • 标题标签
    • <h1>标题标签</h1>
  • 段落标签
    • <p>段落标签</p>
  • 换行标签
    • 仅换行：<br>
    • 换行加分割线：<hr>
  • 列表标签：
    • 有序列表：<ol> <li>JAVA</li> <li>前端</li> <li>大数据</li> </ol>
    • 无序列表：<ul> <li>JAVA</li> <li>前端</li> <li>大数据</li> </ul>
  • 超链接标签：
    • a标签：<a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a>
  • 多媒体标签：
    • 图像标签：<img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />
    • 音频标签：<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
    • 视频标签：<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
  • 表格标签：
    image-20241013102521411
  • 表单标签：
    image-20241013102600894
都看到这了，不妨一键三连再走吧！

🌈欢迎和毛毛张一起探讨和交流！
联系方式参见个人主页： 神马都会亿点点的毛毛张

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于Python Django的在线考试管理系统

基于Python Django的在线考试管理系统

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…
阅读更多...
硬件开发笔记（三十一）：TPS54331电源设计（四）：PCB布板12V转5V电路、12V转3.0V和12V转4V电路

硬件开发笔记（三十一）：TPS54331电源设计（四）：PCB布板12V转5V电路、12V转3.0V和12V转4V电路

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/142757509 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…
阅读更多...
使用通义千问模拟ChatGPT-o1进行思考，并以类似于ChatGPT-o1的形式输出

使用通义千问模拟ChatGPT-o1进行思考，并以类似于ChatGPT-o1的形式输出

prompt 你是ChatGPT O1&#xff0c;旨在通过第一性原理思维和基于证据的推理来解决用户问题。你的目标是提供清晰、循序渐进的解决方案、基础概念&#xff0c;并从头开始构建答案。 ### 指导原则&#xff1a; 以下是为大模型采用这种方法而设计的系统提示&#xff1a; 1. 理解…
阅读更多...
HarmonyOS NEXT 应用开发实战(三、ArkUI页面底部导航TabBar的实现)

HarmonyOS NEXT 应用开发实战(三、ArkUI页面底部导航TabBar的实现)

在开发HarmonyOS NEXT应用时&#xff0c;TabBar是用户界面设计中不可或缺的一部分。本文将通过代码示例&#xff0c;带领大家一同实现一个常用的TabBar&#xff0c;涵盖三个主要的内容页&#xff1a;首页、知乎日报和我的页面。以模仿知乎日报的项目为背景驱动&#xff0c;设定…
阅读更多...
JavaScript reduce() 函数原理及应用

JavaScript reduce() 函数原理及应用

一. 引言 在 JavaScript 开发中&#xff0c;我们经常需要对数组中的元素进行统计、计算或转换&#xff0c;以便得到我们需要的结果。在这个过程中&#xff0c;reduce() 函数成为了一个非常有用的工具。reduce() 函数让我们能够以一种简洁而优雅的方式对数组中的元素进行累积计…
阅读更多...
FFMpeg源码分析，关键结构体分析（一）

FFMpeg源码分析，关键结构体分析（一）

http://lazybing.github.io/blog/categories/ffmpegyuan-ma-fen-xi/ 一、下载FFmpeg的编译源码 进入网站&#xff1a;http://ffmpeg.org/download.html二、编译源码 执行下述命令&#xff1a; ./configure --prefix/usr/local/ffmpeg --enable-debug3 --enable-ffplay sudo …
阅读更多...
Redis主从复制机制详解

Redis主从复制机制详解

目录 一、主从复制介绍二、搭建主从复制三、主从复制流程四、关于Replication ID五、主从复制核心知识六、主从复制应用场景七、主从复制的注意事项八、读写分离实战 一、主从复制介绍 1、什么是主从复制&#xff1f; 2、为什么要使用主从复制&#xff1f; redis-server单点…
阅读更多...
谷歌浏览器 文件下载提示网络错误

谷歌浏览器 文件下载提示网络错误

情况描述&#xff1a; 谷歌版本&#xff1a;129.0.6668.90 (正式版本) &#xff08;64 位&#xff09; (cohort: Control)其他浏览器&#xff0c;比如火狐没有问题&#xff0c;但是谷歌会下载失败&#xff0c;故推断为谷歌浏览器导致的问题小文件比如1、2M会成功&#xff0c;大…
阅读更多...
【问题分析】使用gperftools分析排查内存问题

【问题分析】使用gperftools分析排查内存问题

背景 当程序长时间允许时(压测、服务器程序)&#xff0c;就会面临更大的挑战&#xff0c;其中内存泄漏就是一类典型的问题&#xff0c;内存泄漏往往不易发现&#xff0c;导致的现象更是千奇百怪&#xff0c;本文主要介绍如何借助gperftools分析一个模块的内存泄漏 案例代码 …
阅读更多...
yum仓库安装rabbitmq

yum仓库安装rabbitmq

yum仓库安装rabbitmq 1、配置yum仓库 vim /etc/yum.repos.d/rabbitmq.repo # In /etc/yum.repos.d/rabbitmq.repo## ## Zero dependency Erlang ##[rabbitmq_erlang] namerabbitmq_erlang baseurlhttps://packagecloud.io/rabbitmq/erlang/el/7/$basearch repo_gpgcheck1 gpg…
阅读更多...
软件工程：需求规格说明书（图书管理系统）

软件工程：需求规格说明书（图书管理系统）

目录 1 导言 1.1 编写目的 1.2 参考资料 2 项目介绍 2.1 项目背景 2.2 项目目标 3 应用环境 3.1 系统运行网络环境 ​编辑 3.2 系统软硬件环境 4 功能模型 4.1 功能角色分析 4.1.1 图书管理员 4.1.2 普通读者 4.1.3 邮件系统 4.2 功能性需求 4.2.1 预定图…
阅读更多...
【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？

【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？

引言 受小程序camera组件预览和抽帧图像不一致的特性影响&#xff0c;一直未全功能支持全屏模式&#xff0c;详见本系列文件第四节小程序如何抽帧&#xff1b;随着插件在云上赛事、健身锻炼、AI体测、AR互动场景的深入应用&#xff0c;各开发者迫切的希望能在全屏模式下应用&am…
阅读更多...
Excel中Ctrl+e的用法

Excel中Ctrl+e的用法

重点&#xff1a;想要使用ctrle&#xff0c;前提是整合或拆分后的结果放置的单元格必须和被提取信息的单元格相邻&#xff0c;且被提取信息的单元格也必须相连。 下图为错误示例 这样则可以使用ctrle 1、信息整合 2、提取信息 3、添加符号 4、信息顺序调换 5、数字提取 crtle还…
阅读更多...
Vue3 + Element plus 实现切换el-radio前二次确认

Vue3 + Element plus 实现切换el-radio前二次确认

Vue3 Element plus 实现切换el-radio前二次确认 场景&#xff1a;点击切换el-radio之前判断当前内容是否有改变&#xff0c;如有改变弹窗提示切换el-radio将销毁操作&#xff0c;弹窗二次确认是否切换 问题&#xff1a; el-radio 没有提供类似于beforeUpdate这样的钩子去处理这…
阅读更多...
手写mybatis之细化XML语句构建器，完善静态SQL解析

手写mybatis之细化XML语句构建器，完善静态SQL解析

前言 1&#xff1a;在流程上&#xff0c;通过 DefaultSqlSession#selectOne 方法调用执行器&#xff0c;并通过预处理语句处理器 PreparedStatementHandler 执行参数设置和结果查询。 2&#xff1a;那么这个流程中我们所处理的参数信息&#xff0c;也就是每个 SQL 执行时&#…
阅读更多...
基于yolov10的芒果成熟度检测系统，支持图像、视频和摄像实时检测【pytorch框架、python】

基于yolov10的芒果成熟度检测系统，支持图像、视频和摄像实时检测【pytorch框架、python】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; yolov10&#xff0c;芒果成熟度检测系统&#xff0c;支持图像、视频和摄像实时检测【pytorch框架、python】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于yolov10的芒果成熟度检测系统是…
阅读更多...
npm install报错一堆sass gyp ERR!

npm install报错一堆sass gyp ERR!

执行npm install &#xff0c;出现一堆gyp含有sass错误的情况下。 解决办法&#xff1a; 首页可能是node版本问题&#xff0c;太高或者太低&#xff0c;也会导致npm install安装错误&#xff08;不会自动生成node_modules文件&#xff09;&#xff0c;本次试验&#xff0c;刚开…
阅读更多...
【JavaEE】——初始网络原理

【JavaEE】——初始网络原理

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;局域网 1&#xff1a;概念 二&#xff1a;局域网的连接方式 1&#xff1a;网线直连 …
阅读更多...
flask项目框架搭建

flask项目框架搭建

目录结构 blueprints python包&#xff0c;蓝图文件&#xff0c;相当于路由组的概念,方便模块化开发 例如auth.py文件 from flask import Blueprint, render_templatebp Blueprint("auth", __name__, url_prefix"/auth")bp.route("/login") d…
阅读更多...
空间解析几何3-空间点到线段和平面的距离【附MATLAB代码】

空间解析几何3-空间点到线段和平面的距离【附MATLAB代码】

目录 空间中点到线段的距离 空间中点到平面的投影和距离 matlab代码 空间中点到线段的距离 空间中点到平面的投影和距离 matlab代码 function [dis,P2,t] point2Line (A1,B1,C1) %求空间一点到一线段的最短距离 %[dis,P2,Q2]pointSegmentDistance(A,B,C) %A B为线段首末端…
阅读更多...
最新文章

Copyright @ 2022~2023