JavaWeb，HTML的学习

关于HTML、CSS、JavaScript

HTML主要用于网页主体结构的搭建

CSS主要用于页面元素美化

JavaScript主要用于页面元素的动态处理

关于HTML

关于超文本 

 关于标记语言

HTML基础结构

  1. html文件是浏览器负责解析和展示。
  2. html文件是纯文本文件，普通编辑工具都可以编辑。

文档声明

<!DOCTYPE html> ：声明此文档是一个html文档，也可以不写。

html文件的根标签

<html> </html>所有的根标签都要在这个标签中间

html根标签下有两个一级子标签：头标签、体标签。

头标签

<head></head> 头标签：定义那些不直接展示在页面主体上但是又很重要的内容（比如：字符集、title、css引入、js引入，等）

体标签

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

页面标题标签

<title></title> 页面标题的标签，将页面标题写入其中。定义在头标签内。

例：<title>李二狗的JavaWeb学习</title> ，效果如图。

定义字符集标签

<meta charset = '字符集'/> 告诉浏览器用什么字符集对文件解码。通常用UTF-8字符集，定义在头标签内部。

注释

HTML中注释的写法是

<!--注释内容-->

html文件的大概格式如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="字符集">
<title>页面的标题</title>
</head>
<body>
页面的主体
</body>
</html>

HTML概念词汇

标签

代码中的一个<>叫做一个标签。有些标签成对出现，称为双标签。有些标签单独出现，称为单标签。

属性

一般在开始标签中，用于定义标签的一些特征。

文本

双标签中间的文字，包含空格换行等结构。

元素

经过浏览器解析后，每一个完整的标签（标签+属性+文本）可以称为一个元素。

HTML的语法规则

  1. 根标签只能有一个。
  2. 无论是双标签还是单标签都要正确关闭。
  3. 标签可以嵌套但不能交叉嵌套。
  4. 注释不能嵌套。
  5. 属性必须要有值，且值必须加引号，H5中属性名和值相同时可以省略属性值。
  6. HTML中不严格区分字符串使用单双引号。引号的嵌套可以使用单引号和双引号的不同来完成。

常见标签

标题标签

格式：（以一级标签为例）

<h1> (标题内容) </h1>

标题总共有六级，即h1到h6。

h1到h6的显示效果如图：

<!--关于标题标签--><h1>我爱敲代码</h1><h2>我爱敲代码</h2><h3>我爱敲代码</h3><h4>我爱敲代码</h4><h5>我爱敲代码</h5><h6>我爱敲代码</h6>

自然段标签

格式：

<p>
(自然段内容)
</p>

在html中，不会识别换行操作，要将两个自然段分开，要将两个自然段分别用<p></p>括起来。

换行标签

格式：

<br/>  <!--也可以写成<br>-->
<hr/>  <!--也可以写成<hr>-->

<br>是单纯的换行操作

<hr>是带分割线的换行

列表标签

有序列表

列表标签：<ol></ol>

列表项标签：<li></li>

一对列表标签内包含一组有序列表，一对列表项内包含有序列表的一列。

有序列表内，列表中的每一列的开头都有其在列表中的序号。

效果如图：

<ol><li>C语言</li><li>Java</li><li>MySQL数据库</li><li>JavaWeb</li>
</ol>

 

无序列表

列表标签：<ul></ul>

列表项标签：<li></li>

一对列表标签内包含一组无序列表，一对列表项内包含无序列表的一列。

无序列表内，列表中的每一项的开头没有序号，而是有一个黑色的圆点。

效果如图：

<ul><li>C语言</li><li>Java</li><li>MySQL数据库</li><li>JavaWeb</li>
</ul>

 

列表的嵌套

可以在列表内嵌套列表，即在<li></li>内再写列表。

例如：

    <ul><li>C语言<ol><li>数据类型</li><li>变量</li><li>流程控制</li><li>数组</li><li>函数</li><li>指针</li></ol></li><li>Java</li><li>MySQL数据库</li><li>JavaWeb</li></ul>

效果如图：

 

超链接标签

格式：

<a></a>

属性：

href 用于定义要跳转的目标资源地址，属性值为指定的网页地址（可以是完整的url，也可以是相对路径或绝对路径）

target 用于定义目标资源的打开方式，属性值为打开方式

打开方式：

_self：在当前窗口打开目标资源

_blank：开启新窗口打开目标资源

代码效果如图：

<a href = "<http://www.atguigu.com>" target="_self">尚硅谷</a>

 

点击尚硅谷文字后就会在此页面跳转到尚硅谷的官网

在同一个树分支中的俩个文件的超链接可以使用相对路径实现，例如：

<a href="有序和无序列表.html" target="_blank">有序和无序列表的代码效果</a>

点击有序列表和无序列表的文字就会再打开一个新的页面跳转到 有序和无序列表.html 的页面

关于相对路径

相对路径的开头可以是 ./或../。./表示当前资源的所在路径，可以省略不写。../表示当前资源的上一层路径，使用时要显式写出。

多媒体标签

图片标签

格式：

<img/>

属性：

src：定义图片的路径

title：定义鼠标悬停时提示的文字

alt：定义加载失败时提示的文字

width：指定图片的宽度，单位为px（像素）

表格标签

<table></table>：一对table标签内包含一个表格

<thead></thead>：代表表头，可以省略不写

<tbody></tbody>：代表表体，可以省略不写

<tfoot></tfoot>：代表表尾，可以省略不写

<tr></tr>：代表一行

<td></td>：代表行内的一格

<th></th>：代表自带加粗和居中效果的td

例如：

<h1 style="text-align: center;">员工信息表</h1>
<table border="2px" style="margin: auto; width: 500px;"><thead><tr><th>员工姓名</th><th>员工部门</th><th>员工薪资</th></tr></thead><tbody><tr><td>李四</td><td>10号部门</td><td>10000</td></tr><tr><td>张三</td><td>20号部门</td><td>11000</td></tr></tbody>
</table>

效果如图：

如果省略表头表体表尾标签，则默认都是表体。

如果想让一个格向下多占几行，则在td标签或th标签中加上属性rowspan = “所占的行数”

例如：

<table border="2px" style="margin: auto; width: 500px;"><thead><tr><th>员工姓名</th><th>员工部门</th><th>员工薪资</th><th>备注</th></tr></thead><tbody><tr><td>李四</td><td>10号部门</td><td>10000</td><td rowspan="3">每人工资涨薪10000块</td></tr><tr><td>张三</td><td>20号部门</td><td>11000</td></tr><tr><td>二狗</td><td>30号部门</td><td>30000</td></tr></tbody>
</table>

效果如图：

让一格向右多占几列也是同理，使用属性colspan = “所占的列数”

例：

<table border="2px" style="margin: auto; width: 500px;"><thead><tr><th>员工姓名</th><th>员工部门</th><th>员工薪资</th><th>备注</th></tr></thead><tbody><tr><td>李四</td><td>10号部门</td><td>10000</td><td rowspan="5">每人工资涨薪10000块</td></tr><tr><td>张三</td><td>20号部门</td><td>11000</td></tr><tr><td>二狗</td><td>30号部门</td><td>30000</td></tr><tr><td>总人数</td><td colspan="2">3</td></tr><tr><td>职位</td><td colspan="2">后端开发工程师</td></tr></tbody>
</table>

效果如图：

 

表单标签

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

<form></from>：form标签，即表单标签，其内部用于定义可以让用户输入信息的表单项标签

属性：

action：用于定义信息提交的服务器的地址

method：用于定义信息提交的方式。get方式：数据会缀到url后，以?作为参数开始的标识。post方式，数据会通过请求体发送，不会缀到url后。

<input/>：主要的表单项标签，可以用于定义表单项

属性：

name：用于定义提交的参数名

type：用于定义表单项类型。类型：text 文本框，password 密码框，submit 提交按钮，reset 重置按钮,radio 单选框

表单项一定要定义name属性，该属性用于明确提交时的参数名

表单项还有value属性，该属性用于明确提交时的实参。不对输入内容进行修改时，提交的实参即为value属性的值。若输入内容，提交的实参即为输入的内容。

表单的提交方式

提交方式定义在method标签中，有post与get

get：

  1. 参数会以键值对的形式放在url后提交 ：url?key=value&key=value……
  2. 数据直接暴露在地址栏上，相对不安全
  3. 地址栏的长度有限制，所以提交的数据量有限
  4. 地址栏上，只能是字符
  5. 相比于post，效率更高。

post：

  1. 参数不默认放到url后
  2. 数据不会放在地址栏上，相对安全
  3. 数据是单独打包通过请求体发送，提交的数据量比较大
  4. 请求体中，可以是字符，也可以是字节数据，可以提交文件
  5. 相比于get，效率更低。

表单项类型

input标签中的表单项的属性：
radio：单选框

多个单选框使用相同的name则就会有互斥效果，即只能选其中的一个。

需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去

在表单项的属性后加上 checked=”true”或checked=”checked”或直接写checked（属性名与属性值不同时，可以省略属性值的定义）之后，在未作选择时，该表单项就会被默认选择

例：

 		<form action="图片标签.html" method="get">用户名:<input type="text" name="username"/><br>密码:<input type="password" name="userpassword"/><br><input type="radio" name="gender" value="man" checked="true"/>男<input type="radio" name="gender"/ value="woman">女<br><input type="submit" value="登录"/><input type="reset" value="清空"/></form>

效果如图：

checkbox：复选框

复选框使用相同的name不会有互斥效果，可以选择多个。

也需要给表单项定义value值，如此被选中的单选框就会将其默认的value值提交出去，选多个表单项时，相应提交多个键值对信息（比如：hobby=basketball&hobby=football&hobby=baseball）。

复选框也可以使用check属性来默认选中。

hidden：隐藏域

不显示在页面上，提交时会携带隐藏域中的信息一起提交。提交一些特定的信息，但是考虑到安全问题或者是用户操作不当时，不希望这些特定的信息发生改变，就可以使用隐藏域。

一些其他的表单项的属性：

readonly：数据设置为只是可读

disable：数据设置为显示但是不提交

input标签的表单项之外的表单项：
textarea 文本域（多行文本框）

格式：

<textarea></textarea>

textarea表单项也要定义name，但是没有属性value，textarea提交的就是textarea双标签中间的数据

select：下拉框

格式：

<select><option>下拉框中的选项</option><option>下拉框中的选项</option><option>下拉框中的选项</option>
……
</select>

下拉框表单项也要定义name，如果option标签中没有定义value属性，则提交option双标签中间的数据，如果定义了value属性，则提交定义的value属性。

如果在某个选项的option标签中加上selected，此选项就被默认选中

复选框、文本域、下拉框的代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录系统</title>
</head>
<body><form action="图片标签.html" method="get">用户名:<input type="text" name="username"/><br>密码:<input type="password" name="userpassword"/><br><input type="radio" name="gender" value="man" checked="true"/>男<input type="radio" name="gender"/ value="woman">女<br><input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<input type="checkbox" name="hobby" value="baseball"/>棒球<br>所在地: <select name="located"><option value="gan_zhou">赣州</option><option value="ji_an">吉安</option><option value="nan_chang">南昌</option><option value="jiu_jiang">九江</option><option value="0" selected>请选择</option></select><br>个人简介:<br><textarea name="introduction" style="width: 300px;height: 100px;"></textarea><br><input type="submit" value="登录"/><input type="reset" value="清空"/></form>
</body>
</html>

演示效果如图：

布局相关标签

div：属于块元素，自己独占一行

span：属于行内元素，不会自己独占一行

块元素的css样式的宽、高等往往都生效，行内元素的css样式的宽、高等，很多都是不生效的。

div可以将页面的内容分成多块来布局，span用来对行内的内容进行分开编辑，二者配合使用

例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录系统</title>
</head>
<body><div style="border: 1px solid red;width: 700px;height: 300px;margin: auto;background-color: antiquewhite;">用户登录界面 <span style="font: 25px;color: red;"> 欢迎!</span><form action="图片标签.html" method="get">用户名:<input type="text" name="username"/><br>密码:<input type="password" name="userpassword"/><br><input type="radio" name="gender" value="man" checked="true"/>男<input type="radio" name="gender"/ value="woman">女<br><input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<input type="checkbox" name="hobby" value="baseball"/>棒球<br>所在地: <select name="located"><option value="gan_zhou">赣州</option><option value="ji_an">吉安</option><option value="nan_chang">南昌</option><option value="jiu_jiang">九江</option><option value="0" selected>请选择</option></select><br>个人简介:<br><textarea name="introduction" style="width: 300px;height: 100px;"></textarea><br><input type="submit" value="登录"/><input type="reset" value="清空"/></form></div><div style="border: 1px solid red;width: 700px;height: 300px;margin: 10px auto;background-color: antiquewhite;">用户协议：<a href="./协议.html" target="_self">用户协议</a><br><input type="radio" name="gender" value="yes" checked="true"/>同意<input type="radio" name="gender"/ value="no">不同意</div>
</body>
</html>

效果如图：

特殊字符

对于HTML代码来说，某些符号是有特殊含义的，如果想显示这些符号，则需要转义。

当想要使用这些字符，使用相应的实体名称或者实体编号进行写入即可。

例：

&lt;h1&gt;一级标题&lt;/h1&gt;

效果如图：

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

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

相关文章

经典文献阅读之--VoxFormer(基于Transformer的3D语义场景补全)

经典文献阅读之--VoxFormer(基于Transformer的3D语义场景补全)

0. 简介 之前了解了很多BEV的相关操作&#xff0c;但是基本上要么是激光和视觉结合&#xff0c;要么是纯视觉完成的2D激光投影这两种&#xff0c;而那种3D Occupancy方法可以利用栅格的方法完成纯视觉占据栅格的生成。《VoxFormer: Sparse Voxel Transformer for Camera-based…
阅读更多...
书生·浦语大模型实战营-学习笔记1

书生·浦语大模型实战营-学习笔记1

目录 书生浦语大模型全链路开源体系数据集预训练微调评测部署多智能体 视频地址&#xff1a; (1)书生浦语大模型全链路开源体系 开源工具github&#xff1a; https://github.com/InternLM/InternLM 书生浦语大模型全链路开源体系 这次视频中介绍了由上海人工智能实验室OpenMMLa…
阅读更多...
LangChain 71 字符串评估器String Evaluation衡量在多样化数据上的性能和完整性

LangChain 71 字符串评估器String Evaluation衡量在多样化数据上的性能和完整性

LangChain系列文章 LangChain 60 深入理解LangChain 表达式语言23 multiple chains链透传参数 LangChain Expression Language (LCEL)LangChain 61 深入理解LangChain 表达式语言24 multiple chains链透传参数 LangChain Expression Language (LCEL)LangChain 62 深入理解Lang…
阅读更多...
010集：with as 代码块读写关闭文件—python基础入门实例

010集：with as 代码块读写关闭文件—python基础入门实例

接009集&#xff1a; 读写文本文件的相关方法如下。 read &#xff08; size-1 &#xff09;&#xff1a;从文件中读取字符串&#xff0c; size 限制读取的字符数&#xff0c; si ze-1 指对读取的字符数没有限制。 readline &#xff08; size-1 &#xff09;&#xff1a;在…
阅读更多...
react hooks 高德地图的应用

react hooks 高德地图的应用

一、准备 1.登录控制台 登录 高德开放平台控制台&#xff0c;如果没有开发者账号&#xff0c;请 注册开发者。 2.创建 key 进入应用管理&#xff0c;创建新应用&#xff0c;新应用中添加 key&#xff0c;服务平台选择 Web端(JS API)。 3.获取 key 和密钥 创建成功后&#x…
阅读更多...
四、C++内存管理

四、C++内存管理

1 C/C内存分布 在学习C的内存管理方式之前&#xff0c;我们先来看一道有关C/C内存分布的题目&#xff1a; 阅读下面的代码&#xff0c;回答相关问题&#xff1a; #include <iostream> using namespace std; int globalVar 1; static int staticGlobalVar 1; int main…
阅读更多...
【C++进阶06】红黑树图文详解及C++模拟实现红黑树

【C++进阶06】红黑树图文详解及C++模拟实现红黑树

一、红黑树的概念及性质 1.1 红黑树的概念 AVL树用平衡因子让树达到高度平衡 红黑树可以认为是AVL树的改良 通过给每个节点标记颜色让树接近平衡 以减少树在插入节点的旋转 在每个结点新增一个存储位表示结点颜色 可以是Red或Black 通过对任何一条从根到叶子的路径上 各个结点…
阅读更多...
PaddleSeg学习4——paddle模型使用TensorRT推理（c++）

PaddleSeg学习4——paddle模型使用TensorRT推理（c++）

paddle模型使用TensorRT推理 1 模型末端添加softmax和argmax算子2 paddle模型转onnx模型3 onnx模型转TensorRT模型3.1 安装TensorRT-8.5.3.13.2 使用 trtexec 将onnx模型编译优化导出为engine模型 4 TensorRT模型推理测试5 完整代码6 测试结果 1 模型末端添加softmax和argmax算…
阅读更多...
2022 年全国职业院校技能大赛高职组云计算赛项试卷

2022 年全国职业院校技能大赛高职组云计算赛项试卷

【赛程名称】云计算赛项第一场-私有云 某企业拟使用OpenStack 搭建一个企业云平台&#xff0c;以实现资源池化弹性管理、企业应用集中管理、统一安全认证和授权等管理。 系统架构如图 1 所示&#xff0c;IP 地址规划如表 1 所示。 图 1 系统架构图 表 1 IP 地址规划 设备…
阅读更多...
docker 利用特权模式逃逸并拿下主机

docker 利用特权模式逃逸并拿下主机

docker 利用特权模式逃逸并拿下主机 在溯源反制过程中&#xff0c;会经常遇到一些有趣的玩法&#xff0c;这里给大家分享一种docker在特权模式下逃逸&#xff0c;并拿下主机权限的玩法。 前言 在一次溯源反制过程中&#xff0c;发现了一个主机&#xff0c;经过资产收集之后&…
阅读更多...
网站开发第一弹---HTML01

网站开发第一弹---HTML01

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;网站开发flask框架 &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现…
阅读更多...
基于pytorch的循环神经网络情感分析系统

基于pytorch的循环神经网络情感分析系统

任务目标 基于给定数据集&#xff0c;进行数据预处理&#xff0c;搭建以LSTM为基本单元的模型&#xff0c;以Adam优化器对模型进行训练&#xff0c;使用训练后的模型进行预测并计算预测分类的准确率。 数据简介 IMDB数据集是一个对电影评论标注为正向评论与负向评论的数据集…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第七十二期】Mon, 8 Jan 2024

【AI视野·今日NLP 自然语言处理论文速览 第七十二期】Mon, 8 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 8 Jan 2024 Totally 17 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers DeepSeek LLM: Scaling Open-Source Language Models with Longtermism Authors DeepSeek AI Xiao Bi, Deli Ch…
阅读更多...
深度卷积神经网络

深度卷积神经网络

目录 1.AlexNet 2. 代码实现 1.AlexNet (1)特征提取 (2)选择核函数来计算相关性&#xff1a;怎么判断在高维空间里面两个点是如何相关的&#xff0c;如果是线性模型就是做内积。 (3)凸优化问题 (4)漂亮的定理 丢弃法的作用就是因为模型太大了&#xff0c;使用它来对模型做…
阅读更多...
无监督学习Principal Component Analysis(PCA)精简高维数据

无监督学习Principal Component Analysis(PCA)精简高维数据

目录 介绍 一、PCA之前 二、PCA之后 介绍 Principal Component Analysis (PCA) 是一种常用的数据降维和特征提取技术。PCA通过线性变换将高维数据映射到低维空间&#xff0c;从而得到数据的主要特征。PCA的目标是找到一个正交基的集合&#xff0c;使得将数据投影到这些基…
阅读更多...
初探UAF漏洞（3）

初探UAF漏洞（3）

构造exp #include <iostream> #include <Windows.h>typedef void(*FunctionPointer) ();typedef struct _FAKE_USE_AFTER_FREE {FunctionPointer countinter;char bufffer[0x54]; }FAKE_USE_AFTER_FREE, * PUSE_AFTER_FREE;void ShellCode() {_asm{noppushadmov e…
阅读更多...
github上的python图片转excel，pytesseract安装相关问题

github上的python图片转excel，pytesseract安装相关问题

问题1&#xff1a;明明都pip install pytesseract&#xff0c;但是就是安装不上 pytesseract 未安装链接: https://pan.baidu.com/s/1I4HzCgO4mITWTcZFkdil6g?pwdafes 提取码: afes 安装后一路next&#xff0c;然后配置环境变量 C:\Program Files\Tesseract-OCR新建一个系统…
阅读更多...
c++学习：容器stack栈+queue+map（简易输入法）+deque

c++学习：容器stack栈+queue+map（简易输入法）+deque

目录 stack 模板原型 头文件 模板的成员类型和成员对象和成员函数 栈类模板的容器对象 实例 queue 模板原型 头文件 模板的成员类型和成员对象和成员函数 队列类模板的容器对象 实例 map 模板原型 头文件 模板的成员类型和成员对象和成员函数 关联类模板的容器…
阅读更多...
VScode远程连接开发嵌入式开发板

VScode远程连接开发嵌入式开发板

在做嵌入式开发时&#xff0c;很多时候需要远程连接或者远程调试设备&#xff0c;这时可以通过VScode上的插件来很方便的进行远程连接和调试。 ssh远程连接嵌入式开发板&#xff1a; 1、安装vscode ssh远程插件&#xff1a;Remote-SSH。 2、点击""&#xff0c;输入…
阅读更多...
构建基于RHEL8系列(CentOS8,AlmaLinux8,RockyLinux8等)的MySQL8.0.32的RPM包

构建基于RHEL8系列(CentOS8,AlmaLinux8,RockyLinux8等)的MySQL8.0.32的RPM包

本文适用&#xff1a;rhel8系列&#xff0c;或同类系统(CentOS8,AlmaLinux8,RockyLinux8等) 文档形成时期&#xff1a;2023年 因系统版本不同&#xff0c;构建部署应略有差异&#xff0c;但本文未做细分&#xff0c;对稍有经验者应不存在明显障碍。 因软件世界之复杂和个人能力…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023