web前端——HTML

目录

一、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>

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

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

相关文章

C++编程（四）this指针 常函数 常对象 静态成员

C++编程（四）this指针 常函数 常对象 静态成员

文章目录 一、this指针&#xff08;一&#xff09;概念&#xff08;二&#xff09;显式使用this指针的场景1. 当形参和成员变量名一致时2. 返回对象自身的时候必须要使用this指针3. 在类中销毁一个对象 二、常函数和常对象&#xff08;一&#xff09;常函数1. 概念2. 语法格式 …
阅读更多...
【2024.6.23】今日科技时事：科技前沿大事件

【2024.6.23】今日科技时事：科技前沿大事件

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
最新！AI大模型的研究热点！

最新！AI大模型的研究热点！

引言 在人工智能的浪潮中&#xff0c;大模型研究如日中天&#xff0c;涵盖诸多研究方向&#xff0c;每个方向均承载着独特的研究焦点与挑战。 以下&#xff0c;我们将逐一探讨数个备受瞩目的研究方向&#xff0c;包括检索增强生成RAG、大模型Agent、Mamba、MoE、LoRA等&#…
阅读更多...
【LeetCode】八、堆的使用：第K个最大元素 + 前K和高频单词

【LeetCode】八、堆的使用：第K个最大元素 + 前K和高频单词

文章目录 1、Java中的堆结构2、leetcode215&#xff1a;数组中的第K个最大元素3、leetcode692&#xff1a;前K个高频单词 1、Java中的堆结构 PriorityQueue类取堆顶元素删除堆顶元素堆的元素个数遍历堆 2、leetcode215&#xff1a;数组中的第K个最大元素 这题应该快排来解&…
阅读更多...
MyBatis~配置解析, 属性（properties）、设置（settings）

MyBatis~配置解析, 属性（properties）、设置（settings）

注意, 对应的名称一定要相同, 比如username就要对应username, 而且如果同时使用外部配置文件和property, 优先级是外部配置文件优先级更高 设置&#xff08;settings&#xff09; 这是 MyBatis 中极为重要的调整设置&#xff0c;它们会改变 MyBatis 的运行时行为。 下表描述了…
阅读更多...
利用Python控制终端打印字体的颜色和格式

利用Python控制终端打印字体的颜色和格式

利用Python控制终端打印字体的颜色和格式—操作详解&#xff08;ANSI转义序列&#xff09; 一、问题描述二、ANSI转义序列三、具体代码和显示效果&#xff08;看懂这段代码&#xff0c;以后可随心控制字体的打印格式&#xff09; 欢迎学习交流&#xff01; 邮箱&#xff1a; z……
阅读更多...
Linux系统相关函数总结

Linux系统相关函数总结

在应用程序当中&#xff0c;有时往往需要去获取到一些系统相关的信息&#xff0c;譬如时间、日期、以及其它一些系统相关信息&#xff0c;本章将向大家介绍如何通过 Linux 系统调用或 C 库函数获取这些系统信息。除此之外&#xff0c;还会向大家介绍 Linux 系统下的/proc 虚拟文…
阅读更多...
Android 13 为应用创建快捷方式

Android 13 为应用创建快捷方式

参考 developer.android.google.cn 创建快捷方式 来自官网的说明&#xff1a; 静态快捷方式 &#xff1a;最适合在用户与应用互动的整个生命周期内使用一致结构链接到内容的应用。由于大多数启动器一次仅显示四个快捷方式&#xff0c;因此静态快捷方式有助于以一致的方式执行…
阅读更多...
TikTok API接口——获取视频评论信息

TikTok API接口——获取视频评论信息

一、引言 TikTok&#xff0c;作为全球最受欢迎的短视频社交平台之一&#xff0c;不仅为用户提供了展示才华和分享生活的舞台&#xff0c;也为品牌和企业提供了与年轻用户互动的新渠道。在这个信息爆炸的时代&#xff0c;了解用户的声音、掌握舆论动向显得尤为重要。通过TikTok…
阅读更多...
uview中的utabs组件item字数不一致导致滑块偏移

uview中的utabs组件item字数不一致导致滑块偏移

给item单独设置宽度&#xff0c;使滑块计算准确 ::v-deep .u-scroll-box .u-tab-item {width: 80px !important;&:nth-child(3),&:nth-child(4),&:nth-child(5) {width: 60px !important;}flex: 1 1 0% !important; }效果如下&#xff1a;
阅读更多...
【TOOL】ceres学习笔记(一) —— 教程练习

【TOOL】ceres学习笔记(一) —— 教程练习

文章目录 一、Ceres Solver 介绍二、Ceres 使用基本步骤1. 构建最小二乘问题2. 求解最小二乘问题 三、使用案例1. Ceres Helloworld2. Powell’s Function3. Curve Fitting4. Robust Curve Fitting 一、Ceres Solver 介绍 Ceres-solver 是由Google开发的开源C库&#xff0c;用…
阅读更多...
吐血推荐！3款视频生成工具，全部国产，都免费

吐血推荐！3款视频生成工具，全部国产，都免费

AI视频大模型的爆发&#xff0c;让创作爆款视频不再是专业人士的能力。 今天二师兄给大家推荐3款免费的视频生成工具。 01 可灵 推荐指数 &#xff1a; 五颗星 先看效果 可灵大模型测试 可灵大模型是快手AI团队自主研发的视频生成大模型&#xff0c;具备强大的视频创作能力&a…
阅读更多...
大数据开发需要哪些职场知识

大数据开发需要哪些职场知识

职场是个人情世故的江湖&#xff0c;除了专业技能&#xff0c;成功的大数据开发人员还需要掌握多种职场知识。以下是一些重要的职场知识和技能&#xff0c;结合实际例子详细说明。 目录 理论知识与工程实践理论知识工程实践例子 项目经验总结项目管理总结和反思例子 做事方式方…
阅读更多...
【python】OpenCV—Color Map

【python】OpenCV—Color Map

文章目录 cv2.applyColorMapcv2.putText小试牛刀自定义颜色 参考学习来自 OpenCV基础&#xff08;21&#xff09;使用 OpenCV 中的applyColorMap实现伪着色 cv2.applyColorMap cv2.applyColorMap() 是 OpenCV 中的一个函数&#xff0c;用于将灰度图像或单通道图像应用一个颜色…
阅读更多...
《PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers》

《PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers》

期刊&#xff1a;CVPR 年份&#xff1a;2023 代码&#xff1a;https://github.com/XuJiacong/PIDNet 摘要 双分支网络架构已经证明了它在实时语义分割任务中的有效性和有效性。然而&#xff0c;高分辨率细节和低频上下文的直接融合的缺点是细节特征很容易被周围的上下文信息…
阅读更多...
Qt开发 | Qmake与CMake | Qt窗口基类 | VS Qt项目与QtCreator项目相互转化 | Qt架构 | Qt学习方法

Qt开发 | Qmake与CMake | Qt窗口基类 | VS Qt项目与QtCreator项目相互转化 | Qt架构 | Qt学习方法

文章目录 一、Qmake与CMake介绍1.Qmake2.CMake3.使用qmake还是cmake&#xff1f; 二、Qt3个窗口基类的区别三、vs qt与QtCreator项目相互转化方法1.QtCreator项目转VS Qt2.VS Qt项目转QtCreator项目 四、Qt架构介绍与学习方法详解 一、Qmake与CMake介绍 Qmake和CMake都是构建系…
阅读更多...
vue启动时的错误

vue启动时的错误

解决办法一&#xff1a;在vue.config.js中直接添加一行代码 lintOnSave:false 关闭该项目重新运行就可启动 解决办法二&#xff1a; 修改组件名称
阅读更多...
机械装备制造行业MES，实时监控生产流程

机械装备制造行业MES，实时监控生产流程

装备制造行业MES&#xff0c;是专门为装备制造行业设计的生产信息化管理系统。旨在实时监控装备制造生产流程&#xff0c;实现全流程的精细化管理和监控&#xff0c;提高生产效率、降低生产成本、提升产品质量。 本文将详细介绍装备制造行业MES的概念、技术及应用&#xff0c;…
阅读更多...
放大招了｜十亿参数大模型LLMs运行功耗仅需13W，内存使用量减少90%！

放大招了｜十亿参数大模型LLMs运行功耗仅需13W，内存使用量减少90%！

矩阵乘法&#xff08;MatMul&#xff09;历来是大型语言模型&#xff08;LLMs&#xff09;总体计算成本的主导因素&#xff0c;尤其在模型向更大维度嵌入和上下文长度发展时&#xff0c;这一成本呈指数级增长。 近期有一篇刚刚发表的论文中提出的方法完全去除了矩阵乘法操作&am…
阅读更多...
系统架构师考点--系统配置与性能评价

系统架构师考点--系统配置与性能评价

大家好。今天我们来总结一下系统配置与性能评价的考点内容&#xff0c;这一部分一般是出在上午场的选择题中&#xff0c;占1-2分左右。 一、性能指标 计算机 对计算机评价的主要性能指标有&#xff1a;时钟频率(主频)&#xff1b;运算速度&#xff1b;运算精度内存的存储容量…
阅读更多...
最新文章

Copyright @ 2022~2023