HTML语言笔记

news2025/11/1 3:19:11

结构

C/S结构

Client+Sever 客户端+服务器端

需要在电脑上安装的重终端，或一个特定的客户端才能运行。

B/S结构

Browser+Server 浏览器+服务器

JAVA主要后端语言，用于开发服务器端程序。

网页开发

学习内容：
语言：

html

css

javaScript

两个框架：

VUE.js

ElementUI UI user interface 用户界面

HTML语言

1.概述：

HTML（）指超文本标记语言

文本：文字字符

超文本：页面内可以包含图片，链接的一系列网页内容。

标记：标签，标识

html中的标记指的就是标签。

2.骨架标签
<!--
	html注释
	<!DOCTYPE html>  声明html语言的版本信息，为html5版本，告诉浏览器以html5标准解释运行
-->
<!DOCTYPE html>
<!-- HTML骨架标签 -->
<!--
	html标签是网页中的根标签，所有内容都应该写在此标签中
-->
<html>
	<!-- 头标签 -->
	<head>
		<meta charset="utf-8" /><!-- 网页字符集 -->
		
		<meta name="keywords" content="手机，家电"/><!-- 设置网页关键字，让搜索引擎查找 -->
		<title>我的第一张网页</title><!--网页标题-->
		<link href="img/baidu.ico" rel="icon" />
	</head>
	<!-- 身体标签，用来写网页内容的 -->
	<body>
		<!--
			标签结构和写法
			<标签名>
			<开始标签>  </结束标签>  闭合标签（双标签）
			
			<标签名  属性=" " />完成一个特定的设置功能，没有标签体，  自闭和标签（单标签）
			<meta charset="utf-8" />
			
			<br/>  换行标签
			<b></b> 字体加粗
			
			标签中可以有属性，可以改变标签原有显示风格
				属性写在标签的开始标签中
				一个标签可以有多个属性
				属性名="值"
			例如：
			<body text="red" bgcolor="black">
			
		-->
		<b><font size="10">百度</b> <br/><b><font size="6">腾讯</b>
		 <br/>
		<font color="blue" size="4"> 
		<b>
			<a href="https://www.qq.com/">
				腾讯网
			</a>
		</b>
		</font>
	</body>
</html>
 3.标签
<body>
		<!-- 题目标签
			一个标签独占一行
			align="left"控制内容在本行内的水平对齐方式
		 
		 -->
		 <b>题目标签</b>
				<h1 align="left">一级标签</h1>
				<h2 align="center">二级标签</h2>
				<h3 align="right">三级标签</h3>
				
		<!--
			p段落标签
			一个p标签，表示一个独立的段落
			段落与段落之间有间隔
		-->
		<b>p段落标签</b>
			<p>
				啥黄金三撒娇拿手机你手机阿大吉萨达合计
			</p>
			<p>
				换手机阿昆达就打算你等会
			</p>
		<!--
			换行标签
			<br/> 标签名
		-->
		<b>无序列表</b>
		<!--
			无序列表标签
			<ul>  
			<li>列表行1</li>
			<li>列表行2</li>
			 </ul>
		-->
			<ul>
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ul>
		<!-- 有序列表 -->
			<b>有序列表</b>
			<ol>
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ol>
			<!-- 
			type="*" 表示自动排序时第一位的是*，然后按照*依次排序
			 -->
			<ol type="A">
				<li>列表行1</li>
				<li>列表行2</li>
				<li>列表行3</li>
				<li>列表行4</li>
			</ol>
	</body>
4.超链接标签


            href (Hypertext Reference 超文本引用)规定链接指向UIL页面
            target   打开位置，
            "_self"默认打开位置，在当前窗口打开新的网页
            "_blank" 创建新窗口打开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 table 表示一个表格
		 tr 表示一行
		 th  表示一个单元格，还是表头，内容会加粗，并且居中
		 td  表示一个普通单元格
		 表中数据只能写在单元格中。
		 cellpadding 内边距，内容到表格边界的距离
		 cellspacing  外边距，单元格到单元格之间的距离
		 -->
		<table border="1" width="400" cellpadding="10" cellspacing="0">
			<!-- 行 -->
			<tr >
				<th>姓名</th>
				<th wide="100">班级</th>
				<th>年龄</th>
				<th>性别</th>
				
				
			</tr>
			<tr height="40">
				<!-- 列 -->
				<td>王乐</td>
				<td>计算机2202</td>
				<td>18</td>
				<td>女</td>
				
			</tr>
			<tr>
			<td>朱磊</td>
			<td>计算机2201</td>
			<td>22</td>
			<td>男</td>
			</tr>
			
		</table>
	</body>
</html>
 5.组件
就一个区域，拥有许多输入和选择的组件
			让用户可以输入选择信息，最终将数据提交到服务器端
			<form action="财务报表.html" method="get">
			action=“服务器地址” method="请求方式"
			input
			type="text" 单行输入文本框
			name="accound" 定义组件名 向后端提交用
			value=""组件的值
			readonly  设置组件只读，不能修改，提交表单时，可以被提交到服务器端
			placeholder="请输入用户名"输入框提示信息
			disabled 禁用组件，不会提交内容到服务器
			
			<input type="submit"/> 提交按钮
			
			type="password" 密码框
			type="radio" 单选框
				单选框通过name分组，name相同的为一组
				checked 属性可以为默认选中一项
			type="checkbox"多选框
			type="file" 文件选择框
			下拉选择组件
			checked 属性可以为默认选中一项
			<select>
			<option>请选择</option>
			<option>选择1</option>
			<option>选择2</option>
			</select>  最终提交选中的选择值
			<textarea></textarea>多行文本框
			<input type="reset"/> 重置按钮，将表单重置到默认值
			
			<input type="button" value="登录" onclick=""/>
			设置按钮，给出名字， onclick并触发事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<form action="财务报表.html" method="get">
			账号:<input type="text" name="accound" value="" placeholder="输入账户信息"/><br />
			密码:<input type="password" name="password"/><br />
			性别:<input type="radio" name="gender" value="男"/ checked> 男
				 <input type="radio" name="gender" value="女"/> 女
				 <br />
			课程:<input type="checkbox" name="course" value="java"/>java
				<input type="checkbox" name="course" value="python"/>python
				<input type="checkbox" name="course" value="c"/>c
				<input type="checkbox" name="course" value="c++"/>c++
				 <br />
			附件:<input type="file" name="file"/>
			<br />
			省份:<select>
				<option value="100">请选择</option>
				<option value="101">北京</option>
				<option value="102">上海</option>
				<option value="103" selected>陕西</option>
			</select>
			<br />
			地址:<textarea rows="5" cols="30"></textarea>
				 <br />
				 
			<input type="submit" value="保存"/><br />
			<input type="reset"/>
			<input type="button" value="登录" onclick=""/>
			
		</form>
		
	</body>
</html>

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

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

相关文章

⌈ 传知代码 ⌋【算法】实体关系抽取

⌈ 传知代码 ⌋【算法】实体关系抽取

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…
阅读更多...
【内存管理之堆内存】

【内存管理之堆内存】

1.栈上的基元 2.栈上的聚合对象 3.手动分配和释放 4.分配堆内存 5.数组内存分配和释放 6.数组内存分配 7.不要使用野指针 8.黑暗时代
阅读更多...
Windows如何找回永久删除的文件？完整教程看完即会！

Windows如何找回永久删除的文件？完整教程看完即会！

可以找回永久删除的文件&#xff1f; 你是否也在Windows 10中永久删除过文件&#xff1f;什么是永久删除&#xff1f;通常有5种方法可以永久删除文件&#xff1a; 正常删除文件&#xff0c;然后在回收站中再次删除。使用命令提示符&#xff1a;“del”删除文件。使用“ShiftD…
阅读更多...
【设计文档】软件项目详细设计说明书案例（套用模板Word）

【设计文档】软件项目详细设计说明书案例（套用模板Word）

1引言 1.1编写目的 1.2项目背景 1.3参考材料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4设计目标 2.5.1总体原则 2.5.2实用性和先进性 2.5.3标准化、开放性、兼容性 2.5.4高可靠性、稳定性 2.5.5易用性 2.5.6灵活性和可扩展性 2.5.7经济性和投资保护 3系统…
阅读更多...
【PL理论】(26) 内存管理：C语言实现内存管理的方式 | 栈帧的分配和释放 | C/C++ 手动内存管理

【PL理论】(26) 内存管理：C语言实现内存管理的方式 | 栈帧的分配和释放 | C/C++ 手动内存管理

&#x1f4ad; 写在前面&#xff1a;在前面的章节中&#xff0c;语言的语义只分配了新的内存位置&#xff0c;我们没有讨论内存位置的释放。在实际的语言中&#xff0c;内存位置在执行过程中会被不断地分配和释放。下面的章节&#xff0c;我们将讨论编程语言的这种内存管理&…
阅读更多...
[大模型]XVERSE-7B-chat WebDemo 部署

[大模型]XVERSE-7B-chat WebDemo 部署

XVERSE-7B-Chat为XVERSE-7B模型对齐后的版本。 XVERSE-7B 是由深圳元象科技自主研发的支持多语言的大语言模型&#xff08;Large Language Model&#xff09;&#xff0c;参数规模为 70 亿&#xff0c;主要特点如下&#xff1a; 模型结构&#xff1a;XVERSE-7B 使用主流 Deco…
阅读更多...
【虚幻5】自学纯蓝图笔记（一）

【虚幻5】自学纯蓝图笔记（一）

本笔记使用v15.17.1版本的IDE &#xff0c;v5.4.2的引擎 有许多小的功能记录在快捷键一节中&#xff0c;节省时间就不单独记录 学习本章内容时的机器太差了&#xff0c;i58代的CPU&#xff0c;16g运存&#xff0c;所以GIF截图会非常卡顿 指导老师&#xff1a; B站UP主-张亮002 …
阅读更多...
C学习自学笔记

C学习自学笔记

C学习笔记 0>C语言概述 为什么学习C语言 1&#xff09;C的起源和发展------了解即可 B语言、C语言、C语言的产生地&#xff1a;都出自 美国贝尔实验室 2&#xff09;C的特点 优点&#xff1a;代码量小、速度快、功能强大 缺点&#xff1a;危险性高、开发周期长、可移植性…
阅读更多...
Linux--MQTT（二）通信基本原理

Linux--MQTT（二）通信基本原理

一、MQTT 通信基本原理 MQTT 是一种基于 客户端 - 服务端 架构的消息传输协议&#xff0c;所以在 MQTT 协议通信中&#xff0c;有两个最为重要的角色&#xff0c;它们便是服务端 和 客户端 。 举例&#xff1a;若开发板向“芯片温度”这一主题发布消息&#xff0c;那么服务…
阅读更多...
【Better Lighting V2】Blender商城10周年免费送插件灯光预设和图案轮库场景打光和模拟光透过图案水滴波纹效果

【Better Lighting V2】Blender商城10周年免费送插件灯光预设和图案轮库场景打光和模拟光透过图案水滴波纹效果

Blender商城10周年免费送插件&#xff1a;https://blendermarket.com/birthday Better Lighting V2 灯光预设和图案轮库 模拟各种环境下光线透过物体效果 各种预设快速调整 非常简单和快速打光调色 更多详细介绍&#xff1a;https://blendermarket.com/products/bette…
阅读更多...
前端老古董execCommand——操作 选中文本 样式

前端老古董execCommand——操作 选中文本 样式

文章目录 ⭐前言⭐exe command api用法&#x1f496; example示例&#x1f496; 测试效果 ⭐execommand和getSelection 的联系⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于 前端老古董execCommand——操作选中文本。 execommand 当一个 HTML 文…
阅读更多...
Spring的事务步骤

Spring的事务步骤

一、事务处理方案&#xff1a; Spring框架中提供的事务处理方案&#xff1a;一共有两种&#xff1a; 适合中小项目使用的&#xff0c; 注解方案&#xff1a; 注解的方式做事务用起来简单&#xff0c;灵活&#xff0c;方便&#xff0c;中小型项目中用它比较方便&#xff0c;因…
阅读更多...
关于二分法的理解（以JS为例）

关于二分法的理解（以JS为例）

算法介绍 基本概念 二分查找算法&#xff0c;又称折半查找算法&#xff0c;是一种在有序数组中查找特定元素的高效方法。它的核心思想是将数组分成两半&#xff0c;然后根据目标值与中间元素的比较结果来决定是继续在左半部分还是右半部分进行搜索。 工作原理 初始化&#…
阅读更多...
编译安装qemu-devel @FreeBSD

编译安装qemu-devel @FreeBSD

缘起 使用cbsd创建riscv jail的时候提示&#xff1a; you have no qemu-user, please install qemu-devle with BSD_USER and STATIC ops (emulators/qemu-devel) 使用pkg安装之后&#xff0c;创建的riscv jail启动报错&#xff1a; Starting jail: fbriscv, parallel timeo…
阅读更多...
【猫狗分类】Pytorch VGG16 实现猫狗分类2-模型构建

【猫狗分类】Pytorch VGG16 实现猫狗分类2-模型构建

背景 数据处理做好了&#xff0c;现在搭建网络 声明&#xff1a;整个数据和代码来自于b站&#xff0c;链接&#xff1a;使用pytorch框架手把手教你利用VGG16网络编写猫狗分类程序_哔哩哔哩_bilibili 我做了复现&#xff0c;并且记录了自己在做这个项目分类时候&#xff0c;一…
阅读更多...
【回文 马拉车】214. 最短回文串

【回文 马拉车】214. 最短回文串

本文涉及知识点 回文 马拉车 LeetCode214. 最短回文串 给定一个字符串 s&#xff0c;你可以通过在字符串前面添加字符将其转换为回文串。找到并返回可以用这种方式转换的最短回文串。 示例 1&#xff1a; 输入&#xff1a;s “aacecaaa” 输出&#xff1a;“aaacecaaa” 示…
阅读更多...
string类的使用手册

string类的使用手册

1.构造函数 补充&#xff1a;npos&#xff1a;size_t类型数据的最大值 default (1) string(); 构造空的string类对象 copy (2) string (const string& str); 拷贝构造函数&#xff08;深拷贝&#xff09; substring (3) string (const string& str, size_t pos, size_…
阅读更多...
python 实现各种数据分析方法

python 实现各种数据分析方法

1、相关性分析 1.1、https://zhuanlan.zhihu.com/p/669355778https://zhuanlan.zhihu.com/p/669355778
阅读更多...
【AI学习】Together AI的新研究：Together MoA（Mixture of Agents）

【AI学习】Together AI的新研究：Together MoA（Mixture of Agents）

第一次听说Mixture of Agents&#xff0c;原来Agent也能混合&#xff0c;有意思&#xff01; 介绍 Together AI的最新研究“Together MoA”&#xff08;Mixture of Agents&#xff0c;代理混合&#xff09;是一种创新的方法&#xff0c;旨在通过结合多个开源大型语言模型&…
阅读更多...
Postman使用教程（Postman详细图文教程）

Postman使用教程（Postman详细图文教程）

本文讲解的是postman工具安装、postman安装教程、postman工具下载、postman使用教程。Postman使得得开发人员和测试人员能够更高效地与Web服务进行交互和调试。 Postman不仅支持常见的HTTP方法&#xff0c;如GET、POST、PUT、DELETE等&#xff0c;还提供了丰富的请求编辑功能&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023