【JavaWeb】前端基础

news2025/4/25 13:09:43

JavaWeb

前端三大件：HTML（主要用于网页主体结构的搭建），CSS（页面美化），JavaScript（主要用于页面元素的动态代理）

1. HTML

1.1 html概述

HTML：Hyper Text Markup Language超文本标记语言。

html是解释型语言，不是编译型语言。浏览器是容错的。

标签是通过一组尖括号+标签名的方式来定义的。标签有单标签和多标签。

标签体：开始标签…结束标签

html文件是浏览器负责解析和展示的。

浏览器通过网络访问服务器上的html文件（向服务器发送请求），服务器将html文件以响应的形式发送给浏览器。浏览器解析文件。

1.2 html代码结构

代码的基础结构：

  1. html根标签：<html> </html>

  2. html跟标签下有两个一级标签：

    <head> </head>头标签定义不直接展示在页面主题上，但是有很重要的内容，如：字符集，css引入，js引入，其他。

    <body> </body>定义要展示到页面主题的标签。

html文档的声明：<!DOCTYPE html>

1.3 专业词汇

  • 标签 tag：一对<>

  • 属性 attribute：一般写在开始标签中

  • 文本 text：开始标签和结束标签中的内容

  • 元素 element：开始标签+属性+文本+结束标签 称之为一个元素

1.4 通用语法

  • 根标签有且只能有一个

  • 无论是双标签还是单标签都需要正确关闭

  • 标签可以嵌套但不能交叉嵌套

  • 注释语法为 ,注意不能嵌套

  • 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值

  • HTML中不严格区分字符串使用单双引号

  • HTML标签不严格区分大小写,但是不能大小写混用

  • HTML中不允许自定义标签名,强行自定义则无效

1.5 HTML基础标签

<html>

	<head>
		<title> 这是我的第一个网页 </title>
		<!-- <meta charset="GBK" /> -->
	</head>
	<body>
		hello world!! <br/>
		这是我的第一个网页
		<p> 这是一个段落 </p>
		<p> 这是第二个段落 </p>
		<img src = "imgs/test.jpg" width="510" height="660" alt = "这里是一张图片" /> 
	
		<h1> 标题1 </h1>

		武林高手排行榜：
		<ol type = "I" start = "3">
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>阿紫</li>
		</ol>

		人员名单
		<ul type = "circle">
			<li>乔峰</li>
			<li>石头</li>
			<li>沙子</li>
		</ul>

		你<b>好</b><i>呀</i><u>你好</u> <br/ >

		H<sub>2</sub>O <br/>

		3<sup>2</sup> = 9

		5&lt;10

		10&gt;5

		<span></span>

		<a href="http://www.baidu.com" target="_blank">百度一下</a>

	</body>

</html>

<!--
	html页面中由一对标签组成：<html> </html>
	<html> 开始标签
	</html> 结束标签
	title表示网页的标题
	可以在meta标签中设置编码方式
	<br/> 表示换行 br标签是一个单标签，开始标签和结束标签是同一个。斜杠放在单词后面。
	p表示段落标签
	img表示图片标签 
	列表标签 ol有序列表 type显示的类型: A a I i 1   start 表示从*开始
			ul type 显示的样式
	u表示下划线 b表示粗体 i表示斜体
	sub下标
	sup上标
	html中的实体：
		&lt; (less than)小于
		&gt; (greater than)大于
		&le; (less equal)小于等于
		&ge; (greater equal)大于等于
	span 不换行的块标记
	a表示超链接 
		href地址
		target 
			_self 在本窗口打开
			_blank 在一个新窗口打开
			_parent 在父窗口打开
			_top 在顶层窗口打开
	div层
-->

  1. html页面由一对标签组成<html></html> <html>开始标签 </html>结束标签

  2. <title> </title> 网站的标题

  3. <meta>中可设置编码方式

  4. <br/> 表示换行，br标签是一个单标签，开始标签和结束标签是同一个，斜杠放在单词后面。

  5. <p> </p>段落标签

  6. <img src = " " />图片标签，其中src可以填入图片的相对路径或绝对路径

  7. <ol> </ol>有序列表标签。type显示的类型: A a I i 1 start 表示从*开始。<li>填入内容</li>

  8. <ul> </ul>无序列表。type显示的样式

  9. <b> </b>粗体，<u> </u>下划线，<i> </i>斜体

  10. <sub> </sub>下标

  11. <sup> </sup>上标

  12. html中的实体：

    &lt; (less than)小于
&gt; (greater than)大于
&le; (less equal)小于等于
&ge; (greater equal)大于等于

  13. <span> </span>不换行的块标记

  14. <a> </a>超链接

    href地址
target 
    _self 在本窗口打开
    _blank 在一个新窗口打开
    _parent 在父窗口打开
    _top 在顶层窗口打开

  15. <div> </div>层

  16. 表格

    <html>
	<title>
		表格
	</title>

	<body>
		<table border = "1" width="600" cellspacing="0" cellpadding="4">
			<tr>
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td>100</td>
			</tr>
		</table>
		<hr/>
		<table border = "1" width="600" cellspacing= "0" cellpadding="4">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>苹果</td>
				<td rowspan="2">5</td>
				<td>20</td>
				<td>100</td>
				<td>删除</td>
			</tr>
			<tr align="center">
				<td>香蕉</td>
				<td>20</td>
				<td>100</td>
				<td>删除</td>
			</tr>
			<tr align="center">
				<td>西瓜</td>
				<td>5</td>
				<td>20</td>
				<td>100</td>
				<td>删除</td>
			</tr>
			<tr align="center">
				<td>总计</td>
				<td colspan="4">300</td>
			</tr>
		</table>
	</body>
</html>

<!-- 
		table中有如下属性
		border 表格边框的粗细
		width 表格的宽度
		cellspacing 单元格间距
		cellpadding 单元格填充
 -->

  17. 表单

image-20250401165409081

name属性值保持一致,这样才会有互斥的效果;可以通过checked属性设置默认选中的项
input type="checkbox"表示复选框。name属性值建议保持一致,这样将来我们服务器端获取值的时候获取的是一个数组
select 表示下拉列表。每一个选项是option,其中value属性是发送给服务器的值,selected表示默认选中的项
textarea 表示多行文本框(或者称之为文本域),它的value值就是开始结束标签之间的内容
input type="submit"表示提交按钮
input type="reset"表示重置按钮
input type="button"表示普通按钮

1.6 表单标签

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

  • form标签，其内部用于定义可以让用户输入信息的表单项标签
    • action，form的属性之一，用于定义信息提交的服务器的地址
    • method，属性之一，用于定义信息的提交方式
      • get方式：参数会以键值对形式放在url后 以name为key，以value为值进行提交。所以若想提交至服务器，注意设置name和value！！！value基于文本的(type = “text” 或 type = “password”)可以不输入，但是别的必须输入(如单选框，复选框等)。
      • post方式
  • input标签，主要的表单项标签，可以用于定义表单项
    • name，input的属性之一，用于定义提交的参数名
    • type，input标签的属性之一，用于定义表单项类型（输入信息的表单项类型）

单选框：<input type = "radio">name一样才会有互斥效果，并且注意写value属性。

复选框：

爱好：<input type = "checkbox" name = "hobby" value = "1"> 篮球
		<input type = "checkbox" name = "hobby" value = "2"> 足球 <br/>

隐藏域：希望提交一些特定的信息，但是安全考虑，或者是用户操作问题，不希望该数据发生改变。

<input type = "hidden" name = "id" value = "123">

<input type = "text" name = "pid" value = "456" readonly>

<input type = "text" name = "pid" value = "456" disable>

readonly只读，提交时携带

disable不可用，提交时不携带

文本域textarea个人简介：<textarea name = "self"> </textarea> <br/>

下拉框select：

籍贯：<select name = "pro">
    <option value = "1">京</option>
    <option>津</option>
    <option>冀</option>
    <option selected> --请选择-- </option>
</select>

提交文件：

上传头像：<input type = "file">

1.7 布局标签

<div> </div>

2. css

2.1 css语法

  1. 为什么需要css
  2. css的分类：标签样式表，类样式表，ID样式表
  3. css从位置上的分类：嵌入式样式表，内部样式表，外部样式表
    • 嵌入式样式表：即将style写在标签<>里面。
    • 内部样式表：将style写在<head> </head>中。
    • 外部样式表：将css内容写在新文件中。

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

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

相关文章

SpringMVC组件解析

SpringMVC组件解析

SpringMVC的执行流程 ① 用户发送请求至前端控制器DispatcherServlet。 ② DispatcherServlet收到请求调用HandlerMapping处理器映射器 ③ 处理器映射器找到具体的处理器(可以根据xm|配置、注解进行査找)&#xff0c;生成处理器对象及处理器 拦截器(如果有则生成)一…
阅读更多...
数据结构C语言练习(两个栈实现队列)

数据结构C语言练习(两个栈实现队列)

一、引言 在数据结构的学习中&#xff0c;我们经常会遇到一些有趣的问题&#xff0c;比如如何用一种数据结构去实现另一种数据结构的功能。本文将深入探讨 “用栈实现队列” 这一经典问题&#xff0c;详细解析解题思路、代码实现以及每个函数的作用&#xff0c;帮助读者更好地…
阅读更多...
nextjs使用02

nextjs使用02

并行路由 同一个页面&#xff0c;放多个路由&#xff0c;&#xff0c; 目录前面加,layout中可以当作插槽引入 import React from "react";function layout({children,notifications,user}:{children:React.ReactNode,notifications:React.ReactNode,user:React.Re…
阅读更多...
第2.6节 iOS生成全量和增量报告

第2.6节 iOS生成全量和增量报告

2.6.1 简介 在采集了覆盖率数据后&#xff0c;就需要生成对应需求的全量和增量覆盖率报告&#xff0c;以便对测试进行查漏补缺。IOS系统有两种开发语言&#xff0c;所以生成报告的方式也不相同&#xff0c;下面就分别介绍一下Object C和Swift语言如何生成覆盖率报告。 2.6.2 O…
阅读更多...
应用分享 | AWG技术突破：操控钻石氮空位色心，开启量子计算新篇章！

应用分享 | AWG技术突破：操控钻石氮空位色心，开启量子计算新篇章！

利用AWG操作钻石中的氮空位色彩中心 金刚石中的颜色中心是晶格中的缺陷&#xff0c;其中碳原子被不同种类的原子取代&#xff0c;而相邻的晶格位点则是空的。由于色心具有明亮的单光子发射和光学可触及的自旋&#xff0c;因此有望成为未来量子信息处理和量子网络的固态量子发射…
阅读更多...
【视觉与语言模型参数解耦】为什么？方案？

【视觉与语言模型参数解耦】为什么？方案？

一些无编码器的MLLMs统一架构如Fuyu&#xff0c;直接在LLM内处理原始像素&#xff0c;消除了对外部视觉模型的依赖。但是面临视觉与语言模态冲突的挑战&#xff0c;导致训练不稳定和灾难性遗忘等问题。解决方案则是通过参数解耦方法解决模态冲突。 在多模态大语言模型&#xf…
阅读更多...
重建二叉树（C++）

重建二叉树（C++）

目录 1 问题描述 1.1 示例1 1.2 示例2 1.3 示例3 2 解题思路 3 代码实现 4 代码解析 4.1 初始化 4.2 递归部分 4.3 主逻辑 5 总结 1 问题描述 给定节点数为 n 的二叉树的前序遍历和中序遍历结果&#xff0c;请重建出该二叉树并返回它的头结点。 例如输入前序遍历序…
阅读更多...
10乱码问题的解释(1)

10乱码问题的解释(1)

在计算机中,一个汉字,占几个字节? 针对这个问题,只要你回答出一个具体的数字,就一定是错的!! 前提条件: 当前中文编码使用的是哪种方式(字符集) 计算机存的其实是二进制数字~~ 英文字母,怎么表示的?? ASCII 码表~~ 规定了每个字符,都有一个对应的数字来表示~~ 只是表示英文,…
阅读更多...
短视频文案--钓鱼女和滑板女

短视频文案--钓鱼女和滑板女

短视频文案 第一个文案&#xff1a; 1标题&#xff1a;风萧萧兮易水寒&#xff0c;美女钓鱼兮不复还 2内容&#xff1a; 我站在池边的微风中&#xff0c;再也看不到曾经快乐的少女了。 风很凉&#xff0c;凉得心不知前往何处。 水很清&#xff0c;清得深知这里没鱼群。 芦苇…
阅读更多...
nginx的自动跳转https

nginx的自动跳转https

mkdir /usr/local/nginx/certs/ 创建一个目录 然后用openssl生成证书 编辑nginx的配置文件 自动跳转成功 做一个优化&#xff0c;如果访问的时候后面加了其他的uri也一起自动跳转了
阅读更多...
python-leetcode 62.搜索插入位置

python-leetcode 62.搜索插入位置

题目&#xff1a; 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置 方法一&#xff1a;二分查找 假设题意是在排序数组中寻找是否存在一个目标值&#xff0c;则可以…
阅读更多...
2. ollama下载及安装deepseek模型

2. ollama下载及安装deepseek模型

ollamam 1. ollama2. ollama常用命令3. Windows配置Ollama与DeepSeek自定义目录环境3.1 自定义安装3.3 添加到系统变量 1. ollama 官网地址 下载地址 测试安装 deepseek模型下载地址 根据电脑性能下载对应版本 2. ollama常用命令 # 运行模型 ollama run 模型 # 查看模型…
阅读更多...
Qt基本框架（1）

Qt基本框架（1）

本篇主要介绍Qt的基本框架&#xff0c;并实现简单的按钮事件 本文部分ppt、视频截图原链接&#xff1a;[萌马工作室的个人空间-萌马工作室个人主页-哔哩哔哩视频] 1. Qt基本框架介绍 Qt基本框架主要分为两部分&#xff1a;Qt实例对象和Qt窗口。Qt实例对象负责初始化Qt运行时…
阅读更多...
动手学深度学习：AlexNet

动手学深度学习：AlexNet

前言 从这个模型开始&#xff0c;我的数据集主阵地就将从装甲板转移到手语视频数据集&#xff0c;模型开始变得更加复杂&#xff0c;数据集当然也要更复杂啦&#xff0c;我将记录在这个过程中遇到的问题和解决后续。 数据读取 由于是视频数据集&#xff0c;我采取的方法是将…
阅读更多...
MySql之binlog与数据恢复（Binlog and Data Recovery in MySQL）

MySql之binlog与数据恢复（Binlog and Data Recovery in MySQL）

MySql之binlog与数据恢复 什么是binlog binlog我们一般叫做归档日志&#xff0c;他是mysql服务器层的日志&#xff0c;跟存储引擎无关&#xff0c;他记录的是所有DDL和DML的语句&#xff0c;不包含查询语句&#xff0c;binlog是一种逻辑日志&#xff0c;他记录的是sql语句的原…
阅读更多...
JDK1.8和Maven、Git安装教程自用成功

JDK1.8和Maven、Git安装教程自用成功

一.JDK安装 JRK&#xff1a;java运行环境 JDK&#xff1a;java语言的软件开发工具包&#xff1b;JDK里包含了java开发工具&#xff0c;也包含了JRE 1.下载JDK1.8并安装 Java Downloads | Oracle 进入官网后往下翻&#xff0c;找到JAVA8&#xff1b; 然后选择对应的版本&am…
阅读更多...
数据采集助力AI大模型训练

数据采集助力AI大模型训练

引言使用抓取浏览器采集ebay商品页面选购亮数据AI训练数据总结 引言 AI技术在今天已经是我们工作生活中不可或缺的工具&#xff0c;很多小伙伴也在致力于训练AI模型。高质量的数据是训练强大AI模型的核心驱动力&#xff0c;无论是自然语言处理、计算机视觉还是推荐系统&#xf…
阅读更多...
Rust 为什么不适合开发 GUI

Rust 为什么不适合开发 GUI

前言 在当今科技蓬勃发展的时代&#xff0c;Rust 编程语言正崭露头角&#xff0c;逐步为世界上诸多重要基础设施提供动力支持。从存储海量信息到应用于 Linux 内核&#xff0c;Rust 展现出强大的实力。然而&#xff0c;当涉及构建 GUI&#xff08;图形用户界面&#xff09;时&…
阅读更多...
消息队列篇--通信协议篇--理解HTTP、TLS和TCP如何协同工作

消息队列篇--通信协议篇--理解HTTP、TLS和TCP如何协同工作

前面介绍了HTTP/HTTPS&#xff0c;SSL/TLS以及TCP和UDP&#xff0c;这些在网络传输上分别有着自己的作用。为了深入理解下这些概念&#xff0c;本篇重点介绍下HTTP、TLS 和 TCP是如何协同工作的&#xff1f;我们从底层到上层逐步分析每个协议的作用及其相互关系。这些协议共同协…
阅读更多...
代码随想录算法训练营第三十四天 | 62.不同路径 63.不同路径II 343.整数拆分

代码随想录算法训练营第三十四天 | 62.不同路径 63.不同路径II 343.整数拆分

62.不同路径 题目链接&#xff1a;62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;动态规划中如何初始化很重要&#xff01;| LeetCode&#xff1a;62.不同路径_哔哩哔哩_bilibili 思路&#xff1a;机器人位于一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023