web前端——HTML

news2024/9/20 18:54:26

目录

一、HTML概述

1.HTML是什么？

2.HTML具体化解释

二、HTML基本语法

1.声明

2. Head头标签

3.body身体标签

4.一个html的基本结构

5.标签

6.标签属性

①属性的格式 

②属性的位置

③添加多个属性

三、基本常用标签

1.超链接

2.图像标签

①图像标签的基本用法

3.特殊符号转义

四、表格

1.表格的基本构成标签

2.表格的基本结构

3.表格属性

五、表单

1.form标签：表单

2.表单——文本

3.表单——其它表单 

4.表单——下拉框

5.表单——多行文本域

6.表单——按钮 

一、HTML概述

1.HTML是什么？

HTML是超文本标记语言 (HyperText Markup Language)。
超文本:是指页面内可以包含图片、链接、声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

2.HTML具体化解释

浏览器根据不同的HTML标签，解析成我们看到的网页 

二、HTML基本语法

1.声明

html5的文档声明     <!DOCTYPE html>
！！！如果不声明解析网页时会产生一些不可预期的行为，所以我们应该避免出现

2. Head头标签

！！！Head标签包含了所有的头部标签
● 头部区域的标签标签为:
<title>, <style>, <meta>, <link>, <script>
<title>    标签可定义网页的标题
<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度               的描述和关键词。
<meta> /<meta charset="utf-8" />标签位于文档的头部
<link rel="icon" href="ico地址">标题处添加图标

● 具体代码实现: 

<!-- 头标签 -->
	<head>
		<meta charset="utf-8" /> <!-- 网页字符集 -->
		<meta name="Keywords"  content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎查找的 -->
		<title>我的第一张网页</title> <!-- 网页标题 -->
		<link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 -->
	</head>

3.body身体标签

身体标签，用来写网页内容的

<!-- 身体标签，用来写网页内容的 -->
	<body text="yellow" bgcolor="blue">
		网页内容
	</body>

4.一个html的基本结构

<!-- 
 <!DOCTYPE html>html5的文档声明 
 -->
<!DOCTYPE html>
<html>
	<!-- 头标签 -->
	<head>
		<meta charset="utf-8" /> <!-- 网页字符集 -->
		<meta name="Keywords"  content="家电，手机"/> <!-- 设置网页关键字，让搜索引擎查找的 -->
		<title>我的第一张网页</title> <!-- 网页标题 -->
		<link href="img/baidu.ico" rel="icon"/><!-- 标题上的图标 -->
	</head>
	<!-- 身体标签，用来写网页内容的 -->
	<body text="yellow" bgcolor="blue">
		网页内容
	</body>
</html>

5.标签

● HTML中的标记指的就是标签
● HTML使用标记标签来描述网页
结构：
 <开始标签> 标签体 </结束标签> 闭合标签（双标签）
          
 <标签名>  属性=""  />完成一个特定的设置功能，没有标签体 自闭和标签（单标签）
          <meta charset="utf-8" />
          <br/> 换行标签

6.标签属性

标签可以拥有属性,属性进一步说明了该标签的显示或使用特性。属性写在标签的开始标签中
， 一个标签可以有多个属性
如：<body text="red" bgcolor="green"> 
 属性名="值"
如：<body text=”red”>

①属性的格式 

属性名 = “属性值“

②属性的位置

<标签名 属性名 = “属性值“ >xxx</标签名>

③添加多个属性

<标签名 属性名 = “属性值“ 属性名 = “属性值“ >xxx </标签名>

三、基本常用标签

● 标题标签 <h1></h1>…..<h6></h6>

● 段落标签 <p></p>

● 换行标签 <br/>
● 列表
无序列表<ul><li></li></ul>
有序列表<ol><li></li></ol>
● 超链接<a></a>
● 图像标签<img/>

1.<a>超链接

HTML使用超级链接与网络上的另一个文档相连，通俗的说就是 通过连接来访问其他网页资源。
target:默认值为_self
href (Hypertext Reference超文本引用) 规定链接指向的页面的URL(页面地址)
URL(Uniform Resource Locator)统一资源定位符 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		    超链接标签
			href="链接地址"   URL-- 文件的地址
			target="打开的位置"  _self(默认) 在自己本窗口打开一个新的网页
		 -->
		 <a href="http://www.baidu.com" target="_self">百度</a>
		 <a href="http://www.baidu.com" target="_blank">百度</a>
		 
		 <a href="index.html">首页</a>
	</body>
</html>

 

2.图像标签

①图像标签的基本用法

注！！！ 图片的宽高一般不建议使用 

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="top"></a>
		<a  href="#p1">图片1</a>
		<a  href="#p2">图片2</a>
		<a  href="#p3">图片3</a>
		<a  href="#p4">图片4</a>
		<a  href="#p5">图片5</a>
		
		<h2><a id="p1"></a>图片1</h2>
		<img src="img/1.png"/>
		
		<!-- <a id="p1"></a> 在网页中定义一个锚点-->
		<h2><a id="p2"></a>图片2</h2>
		<img src="img/2.png"/>
		
		<h2><a id="p3"></a>图片3</h2>
		<img src="img/3.png"/>
		
		<h2><a id="p4"></a>图片4</h2>
		<img src="img/4.png"/>
		
		<h2><a id="p5"></a>图片5</h2>
		<img src="img/5.png"/>
		
		<p align="right">
			<a href="#top">返回顶部</a>
		</p>
	</body>
</html>

3.特殊符号转义

①< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html签；

②<b> 会被解析为b标签；

③空格,再多的空格都会当一个空格处理；

为了可以使用这些预留字符，我们必须在html中使用字符转义
小于号<                      &lt;
版权(C)                       &copy;
大于号>                     &gt;
商标(TM)                    &trade;
空格                          &nbsp;
注册商标(R)              &reg;   
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		&lt;b&gt;标签的功能是加粗文件
		
		百&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度
		
		&reg;
		
		&copy;
		
		&trade;
		
	</body>
</html>

 

四、表格

1.表格的基本构成标签

table标签：表格标签
tr标签：     表格中的行
th标签:       表格的表头
td标签：    表格单元格

2.表格的基本结构

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>
tr    表示一个行
th    表示一个单元格，还是表头，内容会加粗，并且居中 设置宽度
td    表示一个普通单元格

3.表格属性

width  表格的宽
height  表格的高
cellspacing 设置内容到 边框和内边距
cellpadding 设置单元格与单元格之间的外边距
align 设置内容水平对齐方式  left center right
valign
cospan 合并列  从哪列开始合并,在哪列添加colspan="合并的数量" 记得删除多余的单元格
rowspan 合并行  跨行合并单元格 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" width="400" cellspacing="0">
			<tr height="40">
				<th>姓名</th>
				<th>java</th>
				<th width="100">C</th>
				<th>python</th>
			</tr>
			<tr>
				<td>zz</td>
				<td>78</td>
				<td>80</td>
				<td>95</td>
			</tr>
			<tr>
			    <td>yy</td>
			    <td>78</td>
			    <td>80</td>
			    <td>95</td>
			</tr>
			<tr>
			    <td>ll</td>
			    <td>78</td>
			    <td>80</td>
			    <td>95</td>
			</tr>
		<table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <table border="1" width="400" height="300">
		 	<tr>
		 		<td colspan="4" >
					
				</td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td rowspan="3"></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 </table>
		
	</body>
</html>

五、表单

1.form标签：表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器

2.表单——文本

3.表单——其它表单 

• 密码框基本语法
<input type=“password ” value=“ 123456 ” />
• 单选按钮基本语法
<input type="radio" value="男" checked="checked“/>
• 复选框基本语法
<input type=“checkbox” name="cb2“ value="talk“/>
!!!注意：单选框通过name属性来分组，name相同是一组才可实现单选。单选和复选不能输入内                  容，所以必须指定value的值
• 文件选择框语法
<input type=“file” name=“img”/>
accept=“.文件后缀名,.文件后缀名… “ 限制文件类型

4.表单——下拉框

● 基本语法

！！！下拉框的name,id,事件等需要在select中定义，而value需要在option中定义

5.表单——多行文本域

● 多行文本域基本语法
<textarea name= "textarea" cols= "40" rows= "6"> 文本域中的内容 </ textarea >

6.表单——按钮 

● 按钮基本语法

<input type="reset" name="Reset" value=" 重填 ">
 type="submit" 提交按钮 触发表单的提交
 type="reset"  重置按钮  让表单回到默认状态
 type="button" 普通按钮  是用来触发事件 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <form action="server.html" method="get">
		      账号:<input type="text" name="account" 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="radio" name="a" value="同意" checked/>同意
			          <input type="radio" name="a" value="不同意"/>不同意<br/>
					  
			  课程: <input  type="checkbox" name="course" value="java" checked/>java	
					<input  type="checkbox" name="course" value="c"/>c		
					<input  type="checkbox" name="course" value="sql"/>sql		
					<input  type="checkbox" name="course" value="html"/>html	<br/>
					
			  附件: <input  type="file" name="file"/>		<br/>
			  
			  省份: <select name="province">
				      <option>请选择</option>
					  <option value="101">北京</option>
					  <option value="102" selected>上海</option>
					  <option value="103">陕西</option>
			        </select> <br/>1111
			  地址:<textarea rows="5" cols="30" name="address">1111</textarea>		
					<br/>
              <input  type="submit" value="保存"/><br/>
			  <input type="reset"/>
			  <input  type="button" value="登录" onclick="alert('你好');"/>
		 </form>
	</body>
</html>

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

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

相关文章

从赛题切入谈如何学习数学建模

从赛题切入谈如何学习数学建模

1.引言 &#xff08;1&#xff09;今天学习了这个汪教授的这个视频&#xff0c;主要是对于一个赛题的介绍讲解&#xff0c;带领我们通过这个赛题知道数学建模应该学习哪些技能&#xff0c;以及这个相关的经验&#xff0c;我感觉这个还是让我自己受益匪浅的 &#xff08;2&…
阅读更多...
docker 配置与使用

docker 配置与使用

目录 安装docker 作者遇到的问题1&#xff1a;安装docker 错误说明 解决方法&#xff1a; 作者遇到问题2&#xff1a;GPG密钥问题 问题说明 解决方法&#xff1a; 方法一&#xff1a;使用备用的GPG密钥服务器 方法二&#xff1a;使用国内镜像源 方法3&#xff1a;手动下…
阅读更多...
项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包，从而减少首屏加载时间

项目性能优化之给dist文件夹中chunk-vendors.js做splitChunks分包，从而减少首屏加载时间

问题描述 我们项目做完，验收通过以后，就需要打包发布上线啦。于是我们执行命令：npm run build打dist包，打包完以后截图如下： 直接打包的chunk-vendors.js太大了 chunk-vendors.js文件太大了，所以我们需要将其优化一下，拆分一下 chunk-vendors.js是啥 chunk-vendors.j…
阅读更多...
springboot+vue+mybatis穷游管理系统+PPT+论文+讲解+售后

springboot+vue+mybatis穷游管理系统+PPT+论文+讲解+售后

随着现在网络的快速发展&#xff0c;网上管理系统也逐渐快速发展起来&#xff0c;网上管理模式很快融入到了许多企业的之中&#xff0c;随之就产生了“基于vue的穷游管理系统”&#xff0c;这样就让基于vue的穷游管理系统更加方便简单。 对于本基于vue的穷游管理系统的设计来说…
阅读更多...
数据挖掘概览

数据挖掘概览

数据挖掘(Data Mining)就是从大量的,不完全的,有噪声的,模糊的,随机的实际应用数据中,提取隐含在其中的,人们事先不知道的,但又是潜在有用的信息和知识的过程. 预测性数据挖掘 分类 定义&#xff1a;分类就是把一些新的数据项映射到给定类别中的某一个类别 分类流程&#x…
阅读更多...
云层之间穿梭特效视频转场PR模板素材

云层之间穿梭特效视频转场PR模板素材

12 个超赞的 Premiere Pro 云层穿梭特效视频转场模板 https://prmuban.com/39056.html &#x1f4fd; 你是否正在寻找一种方法&#xff0c;让你的视频更酷、更时尚、更吸引人&#xff1f;今天推荐的12个逼真的云层穿梭特效视频转场模板&#xff0c;绝对能为你的作品锦上添花 ✨…
阅读更多...
微服务SpringCloud,SpringAliBaBa（2）

微服务SpringCloud,SpringAliBaBa（2）

微服务02 1.网关路由 网络的关口&#xff0c;负责请求的路由、转发、身份校验。 有了网关之后&#xff0c;微服务的地址不用在暴露了&#xff0c;就暴露个网关地址。 快速入门 routes代表一套路由&#xff0c;pridicates是规则&#xff0c;对请求做出判断&#xff0c;看是哪…
阅读更多...
《第一行代码 第3版》学习笔记——第十一章 网络技术

《第一行代码 第3版》学习笔记——第十一章 网络技术

1 webview用法 class MainActivity : ComponentActivity() {SuppressLint("SetJavaScriptEnabled")override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {NetWorkDemoTheme {// A surface container using the bac…
阅读更多...
史上最全整合nacos单机模式整合哈哈哈哈哈

史上最全整合nacos单机模式整合哈哈哈哈哈

Nacos 是阿里巴巴推出的一个新开源项目&#xff0c;它主要是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos提供了一组简单易用的特性集&#xff0c;帮助用户快速实现动态服务发现、服务配置、服务元数据及流量管理。 Nacos 的关键特性包括&#x…
阅读更多...
线程池概念、线程池的不同创建方式、线程池的拒绝策略

线程池概念、线程池的不同创建方式、线程池的拒绝策略

文章目录 &#x1f490;线程池概念以及什么是工厂模式&#x1f490;标准库中的线程池&#x1f490;什么是工厂模式&#xff1f;&#x1f490;ThreadPoolExecutor&#x1f490;模拟实现线程池 &#x1f490;线程池概念以及什么是工厂模式 线程的诞生是因为&#xff0c;频繁的创…
阅读更多...
【Linux】Socket阻塞和非阻塞、同步与异步

【Linux】Socket阻塞和非阻塞、同步与异步

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;Linux系列专栏&#xff1a;Linux基础 &#x1f525; 给大家…
阅读更多...
20240623日志：大模型压缩-sliceGPT

20240623日志：大模型压缩-sliceGPT

context 1. 剪枝方案图释2. 正交矩阵Q 1. 剪枝方案图释 Fig. 1.1 剪枝方案 图中的阴影是表示丢弃掉这部分数据。通过引入正交矩阵 Q Q Q使 Q ⊤ Q Q Q ⊤ I \mathrm{Q}^\top\mathrm{Q}\mathrm{Q}\mathrm{Q}^\top\mathrm{I} Q⊤QQQ⊤I&#xff0c;来大量缩减 X X X的列数和 W …
阅读更多...
[职场] 保险理赔工作简历自我评价范文 #媒体#经验分享#笔记

[职场] 保险理赔工作简历自我评价范文 #媒体#经验分享#笔记

保险理赔工作简历自我评价范文 保险行业是指将通过契约形式集中起来的资金&#xff0c;用以补偿被保险人的经济利益业务的行业。下面是保险理赔工作简历自我评价范文&#xff0c;供大家参考。 保险公司工作自我评价1 我已在__保险公司工作_个年头。在同事和领导的热情帮忙下&…
阅读更多...
query2doc：用大模型做query检索拓展

query2doc：用大模型做query检索拓展

原文&#xff1a; 前沿重器[38] | 微软新文query2doc&#xff1a;用大模型做query检索拓展 比较主流的检索方案&#xff1a; 字面检索&#xff08;sparse&#xff0c;稀疏&#xff09;向量检索&#xff08;dense&#xff0c;稠密&#xff09; query对文档文段的召回&#xff…
阅读更多...
【消息队列】六万字长文详细带你RabbitMQ从入门到精通

【消息队列】六万字长文详细带你RabbitMQ从入门到精通

目录 1、基础篇1.1 为什么要用消息队列MQ1.2 什么是消息队列&#xff1f;1.3 RabbitMQ体系结构介绍1.4 RabbitMQ安装1.5 Hello World1.5.1 目标1.5.2 具体操作 1.6 RabbitMQ用法1.6.1 Work Queues1.6.2 Publish/Subscribe1.6.3 Routing1.6.4 Topics1.6.5 工作模式小结 2. 进阶篇…
阅读更多...
维度建模中的事实表

维度建模中的事实表

在维度建模中&#xff0c;根据粒度划分&#xff0c;数据表主要分为维度表和事实表。而事实表又可以分为三种类型&#xff1a;事务型事实表、周期快照型事实表和累计快照型事实表。本文将详细介绍这三种事实表&#xff0c;并提供相应的代码示例。 目录 1. 事务型事实表示例 2. 周…
阅读更多...
推荐系统三十六式学习笔记：原理篇.模型融合13|经典模型融合办法：线性模型和树模型的组合拳

推荐系统三十六式学习笔记：原理篇.模型融合13|经典模型融合办法：线性模型和树模型的组合拳

目录 为什么要融合&#xff1f;“辑度组合”原理逻辑回归梯度提升决策树GBDT二者结合 总结 推荐系统在技术实现上一般划分为三个阶段&#xff1a;挖掘、召回、排序 。 为什么要融合&#xff1f; 挖掘的工作是对用户和物品做非常深入的结构化分析&#xff0c;各个角度各个层面…
阅读更多...
硬盘监控和分析工具：Smartctl

硬盘监控和分析工具：Smartctl

文章目录 1. 概述2. 安装3. 使用4. smartctl属性信息介绍 1. 概述 Smartctl&#xff08;S.M.A.R.T 自监控&#xff0c;分析和报告技术&#xff09;是类Unix系统下实施SMART任务命令行套件或工具&#xff0c;它用于打印SMART自检和错误日志&#xff0c;启用并禁用SMRAT自动检测…
阅读更多...
PR模板 | RGB特效视频标题模板Titles | MOGRT

PR模板 | RGB特效视频标题模板Titles | MOGRT

RGB特效视频标题模板mogrt免费下载 4K分辨率&#xff08;38402160&#xff09; 支持任何语言 友好的界面 输入和输出动画 快速渲染 视频教程 免费下载&#xff1a;https://prmuban.com/39055.html 更多pr模板视频素材下载地址&#xff1a;https://prmuban.com
阅读更多...
初见：AntDB智能运维“三剑客“之ADC

初见：AntDB智能运维“三剑客“之ADC

引言 6月15日&#xff0c;PostgreSQL数据库技术峰会广州站圆满落幕。峰会上&#xff0c;亚信安慧数据库智能运维产品负责人李志龙介绍了AntDB的6大数据库引擎和3大工具产品能力。 这里的3大工具分别指&#xff1a; AntDB数据库迁移工具包 MTK 数据库智能运维平台 ACC AntDB数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023