HTML入门使用

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量199 收藏 1
点赞数
分类专栏： 前端相关技术 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583303/article/details/118338436
版权

文章目录

HTML基本标签

01.字体标签：font

<!DOCTYPE html>
<!-- HTML文件：包括头（head）和体（body）-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体标签</title>
	</head>
	<body>
		<!-- 字体标签 :基本属性包括size和color和face -->
		<font size="6" color="coral">今天天气好晴朗</font>
	</body>
</html>

02.格式化标签：p，h，br

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>格式化标签</title>
	</head>
    
	<body>
		<!-- <p></p>:段落标签 paragraph，基本属性：align-->
		<!-- 段落标签会自动换行 -->
		<p align="center">情非得已</p>
		<p align="center">难以忘记初次见你，一双迷人的眼睛</p>
		
		<!-- <h3></h3>：标题标签 headline-->
		<h1>AISMALL</h1>
		<h2>AISMALL</h2>
		<h3>AISMALL</h3>
		<h4>AISMALL</h4>
		<h5>AISMALL</h5>
		<h6>AISMALL</h6>
		
		<!-- 标签嵌套 -->
		<h1>
			<p align="center">
				<font color="crimson">AISMALL</font>
			</p>
		</h1>
        
        <!-- <br/>换行标签 -->
		<font size="6" color="darkturquoise">三言诗</font><br/>
		<font>浮世三千</font><br/>
		<font size="3" color="antiquewhite">吾爱有三</font><br/>
		<font size="3" color="aquamarine">日月与卿</font><br/>
		<font size="3" color="bisque">日为朝</font><br/>
		<font size="3" color="burlywood">夜为暮</font><br/>
		<font size="3" color="coral">卿为朝朝暮暮</font><br/>
		
		<!-- &nbsp：设置空格 -->
		AI&nbsp&nbsp&nbsp&nbsp&nbspSMALL
	</body>
</html>

03.图片标签：img

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
    
	<body>
		<!-- 图片标签:<img/> image
			基本属性：
			src：图片路径（必须有）
			width：图片宽度
			height：图片高度
			默认单位为像素：px（固定）
			也可以使用百分比设置：（动态改变）推荐使用
			-->
			<!--固定不变-->
			<img src="../img/1.jpg" width="600px" height="400px"/>
			<!--动态改变-->
			<img src="../img/1.jpg" width="30%" height="30%"/>
			<img src="../img/2.jpg" width="30%" height="30%"/>
			<img src="../img/3.jpg" width="30%" height="30%"/>
	</body>
</html>

04.列表标签：li，ul，ol

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表标签</title>
	</head>
	<body>
		<!--
			<li></li>:列表条目标签，用于定义一个列表条目,list
        	<ul></ul>:无序类表标签（常用）,unordered list
        	<ol></ol>:有序列表标签,ordered list
        -->
        <!-- 无序类表标签 -->
        <ul>
        	<li>无序列表01</li>
        	<li>无序列表02</li>
        	<li>无序列表03</li>
        </ul>
        <!-- 有序类表标签 -->
        <ol>
        	<li>有序列表01</li>
        	<li>有序列表02</li>
        	<li>有序列表03</li>	
        </ol>

	</body>
</html>

05.超链接标签：a

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接标签</title>
	</head>
	<body>
		<!--
			超链接标签：<a></a>:超链接标签，用于定义一个可以点击跳转的链接,
			属性：
				href：超链接跳转的路径（必须有）
			本机：相对绝对路径  
			外网：http://地址  
			本页：#
			注意：超链接正常工作必须满足两个条件：标签中有内容（可以是图片，文字），有链接
        -->
        <!--外网：http://地址  -->
        <a href="http://www.baidu.com">百度一下（外网超链接）</a><br/>
        	
        <!-- 内网路径 -->
        <a href="../img/3.jpg">桌面壁纸（内网超链接）</a><br/>
        
        <a href="../img/3.jpg">
        	<img src="../img/2.jpg" width="10%" height="10%" />
        </a>
	</body>
</html>

06.表格标签：table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--
        	第一步：定义一个表格：<table></table>
				给表格设置边框：
					border：设置表格边框粗细（默认零像素）
					width：设置表格宽度
			第二步：定义表格中的一行:<tr></tr>,table row 
			第三步：在表格一行中定义单元格：<td></td>,table,
			表头设置：<th></th>:将单元格内容居中加粗
			
			就是先定义一个表格，在定义一个行，在行中划分列
			
			表格属性：
			给表格设置边框：
			border：设置表格边框粗细（默认零像素）
			width：设置表格宽度
			
			标签th和td的唯一区别：就是th居中加粗       
			 -->
        
	</body>
	<!-- 定义一个表格 -->
	<table>
		<!-- 定义一个行标签 -->
		<tr>
			<!-- 定义列标签 -->
			<td>姓名</td>
			<td>数学</td>
			<td>语文</td>
			<td>英语</td>
			<td>总分</td>
		</tr>
		<!--在来一行-->
		<tr>
			<td>AISMALL</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
	
	<!--
    	表格属性：
			给表格设置边框：
			border：设置表格边框粗细（默认零像素）
			width：设置表格宽度
		
		表头设置：<th></th>:将单元格内容居中加粗
    -->
	<table border="1px" width="100%">
		<!-- 定义一个行标签 -->
		<tr>
			<!-- 定义列标签 -->
			<th>姓名</th>
			<th>数学</th>
			<th>语文</th>
			<th>英语</th>
			<th>总分</th>
		</tr>
		<tr>
			<td>AISMALL</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>
</html>

07.表格标签：tr，td

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1px" width="100%">
		<!-- 
			单元格合并
				同行不同列的合并（跨列合并）：合并之后要把被合并的单元格删掉(跨行操作相同)
				在<td>或者<th>标签中：<td colspan="2">
				colspan：跨列合并单元格
				rowspan：跨行合并单元格
				处理复杂复杂问题方法：先列后行
		-->
		<!-- 定义一个行标签 -->
		<tr>
			<!-- 合并第一行的三个列  -->
			<td colspan="3">1</td>
			<td>4</td>
			<td>5</td>
		</tr>
		<tr>
			<!-- 合并第一列的第二三行 -->
			<td rowspan="2">6</td>
			<td>7</td>
			<td>8</td>
			<td>9</td>
			<td>10</td>
		</tr>
		<tr>
			<td>12</td>
			<td>13</td>
			<td>14</td>
			<td>15</td>
		</tr>
	</table>
	</body>
</html>

08.块标签：div，span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>块标签</title>
	</head>
	<body>
		<!--
			块标签（给页面分块）
			块标签（大量信息展示）：<div>内容体</div>
				块级的块标签，用于在效果中定义一个块，默认占满一行（自动换行），进行内容显示
			块标签（小量信息展示）：<span>内容体</span>
				行级的块标签，用于在效果中一行上定义一个块（有多少在一行中占多少空间不换行），
				进行内容显示
		-->
		<div>我是DIV默认占满一行自动换行</div>
		<div>我是DIV默认占满一行自动换行</div>
		<span>我是SPAN默认不换行</span>
		<span>我是SPAN默认不换行</span>
	</body>
</html>

表单标签（重点）

01.表单标签：form

  • 表单标签（表单：用来提交用户输入的数据，给服务器程序，相当于一个WEB程序入口）
  • 表单标签的定义
定义一个表单（看不到）：
<form>
	<input type="password" name="password"/><br />
</form>
  • 表单标签中的输入项标签包括
input：输入框
select：定义一个选择框
textarea：文本域标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单标签</title>
	</head>
	<body>
		<form>
			用户名：<input name="user"/><br />
			密码：<input type="password" name="password"/><br />
			性别：<input type="radio" checked="sex" value="man"/>男
				<input type="radio" name="sex" value="woman"/>女<br />
				<input type="submit" />
		</form>
	</body>
</html>

02.form标签属性

  • 表单标签<form></form>标签，用于定义一个表单，用于提交用户填写的数据
表单属性form标签上的属性：
	action:将数据提交到何处，默认提交到本页(不填写action值)
	method:将数据以何种方式提交，默认为get
  • action
属性值：
	本机内网路径：
	互联网路径：
  • method
提交方式可以定义为get和post
	get提交方式：把数据拼接到地址栏上（不安全）（提交数据量有限）
	post提交方式：没有把数据拼接到地址栏上（相对安全）（提数据量无限）
  • 案例演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--定义action值，表单提交后跳转 -->
        <form action="../index.html" method="get">
        	<input type="text" name="uname" /><br />
        	<input type="submit" />
        </form>
        <br />
        <form action="../index.html" method="post">
        	<input type="text" name="uname" /><br />
        	<input type="submit" />
        </form>
	</body>
</html>

03.表单输入项标签：input

  • <input/>:表单输入项标签之一
<input type="password" name="password"/><br />
  • 表单输入项标签input的属性
属性包括:type，name，value，checked
  • type
type属性:
	text:文本框(默认)
	password：密码框，内容非明文
	radio：单选框（在同一组内有单选效果）（需要指定value属性）
	checkbox：复选框
	submit：提交按钮，用于控制表单提交数据（写在同一个form中）
	reset：重置按钮，用于将表单输入项恢复到默认状态
	file：附件框，用于上传附件
	hidden：隐藏框，一般用作提交服务器需要拿到，但用户不需要看到的结果	
	button：普通按钮，需要和JS中的时间一起连用才有效果

	当添加提交按钮时，链接会发生改变，还在后面多一个？，后面是参数列表

	参数列表格式：参数1=参数值1&参数2=参数值2&.....
	例如：file:///D:/File/WEB/HTML/demo_4.html？username=AISMALL&password=123456&sex=woman

	on表示选中，例如：sex=on
	单选框要在连接中显示提交内容时我们要设置value属性，因为单选框，用户只能选择，不能输入
	其他的框当需要在链接中显示提交内容时要加上name属性，value值为输入的值，不需要指定
  • name
name属性：
	单选框，复选框进行数据分组（name值相同为同一组）的时候使用
  • value
value属性：
	使用单选框，复选框时，设置该标签对应的参数值
  • checked
checked属性：
	设置单选框复选框的默认选中状态
  • readonly
readonly属性：
	设置该标签的参数值只读，用户无法手动修改（我们设置value属性）
  • disable
disable属性：
	设置该标签不可用，参数值无法修改，且参数值无法提交
  • 案例演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			复选框
				复选框，type属性值为：checkbox
				为了同步分组，要设置name值，
				为了区分，设置value值
				设置一个默认选中项，要设置checked的值
		-->
		
		<!--一个form表单，需要一个submit提交按钮-->
		<form>
			<input type="hidden" name="UID" value="12345678" />
			用户：<input type="text" name="User" /><br />
			爱好：<input type="checkbox" name="hobby" value="code" checked="hobby"/>coding
				<input type="checkbox" name="hobby" value="read"/>reading
				<input type="checkbox" name="hobby" value="run"/>running<br />
			
				
			<!-- 为复选框添加附件，附件为照片 -->
			照片：<input type="file" name="photo"/><br />
			
				
			<!--重置按钮，在提交前重置表单写的数据-->
			<input type="reset" />
            
			<!--用于在数据库中区别不同用户，不需要被注册人看到,但可以提交-->
			<input type="submit" /><br />
			
			<!--普通按钮，使用value属性给按钮赋名字-->
			<input type="button" value="button" />
		</form>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" name="User" /><br />
		<!--指定value值，设置为只读模式 -->
		姓名：<input type="text" name="Name" readonly="readonly" value="AISMALL"  /><br/>
		密码：<input type="password" name="password" /><br />
		<input type="submit" />
		
	</body>
</html>

04.表单输入项标签：select

  • select：选择框（带下拉箭头的选择框)
<select></select>标签，定义一个选择框（也在form框中）
  • select标签的属性
属性值：
	name：设置该标签对应的属性值
	multiple：设置该标签选项全部显示，并可以进行多选提交，默认为多选
  • select标签的内部标签：option
<option></option>标签，选项标签，用于为一个选择框添加一个选项
  • option标签的属性
属性值：
    value：设置需要提交的参数值（一般设置为简单值，用于链接提交）
	selected：设置选项的默认选中状态
  • 案例演示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<!--设置下拉框:单个选择-->
			<select name="hobby">
				<!--设置默认选择selected-->
				<option value="BJ" >北京</option>
				<option value="SH" selected="selected">上海</option>
			</select>
			
			<br /><br /><br />
				
			<!--设置下拉框:多选，鼠标点中拖拽进行多选-->
			<select name="hobby" multiple="multiple">
				<option value="read">read</option>
				<option value="run">run</option>
				<option value="write">write</option>
			</select>
			<br />
			
			<input type="submit" />
		</form>
	</body>
</html>

05.表单输入项标签：textarea

  • textarea：文本域标签
<textarea></textarea>也是form标签中的内容
表单输入项标签之一，用户可以在该标签上，通过输入进行数据输入
  • textarea属性：
属性值
	name：设置该标签对应的参数名
  • 注意
文本域和文本框的区别：
	文本框不能换行，文本域可以
	文本框的参数值是value属性
	文本域的参数值是标签的内容体<textarea>参数值</textarea>
  • 案例演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <form>
        	个人简介：<textarea name="short"></textarea><br />
        	<input type="submit" />
        </form>
	</body>
</html>
彤彤的小跟班
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML从入门到精通
cgblpx的博客
06-01 4万+
目录 1 前端技术： 1 1.1 学习方法 1 1.1.1 前端要怎么学？ 1 1.1.2 前端技术栈 5 1.2 HBuilderX 7 1.2.1 介绍 7 1.2.2 安装 7 1.2.3 主题 9 1.2.4 字体 9 1.2.5 去掉px转rem提示 9 1.2.6 备注字体颜色 10 1.2.7 项目结构 11 1.2.8 jQuery语法支持 11 1.3 Web概述 12 1.4 静态页面HTML 13 1.4.1 概念 13 1.4.2 结构 13 1.4.3 入门案例 14 1.4.4
H5(html5)入门教程
DAIYA_JIE的博客
09-11 1万+
html零基础01
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 9376
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
HTML零基础入门教程完整版
哈哈
09-11 2万+
HTML零基础入门教程完整版
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 2777
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
Html入门练习
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
HTML入门
小刘的博客
02-05 8946
目录一、HTML的概念1.1 HTML的常见概念1.2 HTML的常用标签1.3 HTML标签的组织形式二、网页的基本结构三、浏览器和网页的关系3.1 什么是浏览器内核3.2 浏览器内核的发展3.3 浏览器内核的重要性3.4 网络标准的制定4. 开发工具的选择4.1 文本编辑工具4.2 集成开发环境 一、HTML的概念 1.1 HTML的常见概念 1.2 HTML的常用标签 1.3 HTML标签的组织形式 二、网页的基本结构 三、浏览器和网页的关系 3.1 什么是浏览器内核 3.2 浏览器
【HTML】零基础入门教程
qq_52719660的博客
10-20 4851
一、HTML简介 HTML是英文Hyper Text Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。超文本：超文本文件就是指具有超链接功能的文件。 二、建立HTML文件 1.页面基本结构 打开vscode，新建后缀名为.html的文件，搭建页面基本结构的快捷键：①英文感叹号＋回车，②html:5+回车 。
HTML入门标签
10-11
比较详细的HTML标签，常用到的标签都包括在内了。新手可以看看
HTML 入门资料Demo
01-23
HTML 入门手册(一)：https://shuaici.blog.csdn.net/article/details/135680716 HTML 入门手册(二)：https://shuaici.blog.csdn.net/article/details/135698613 HTML 英文全称 " HyperText Mark-up Language " , ...
html入门学习.zip
01-01
html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习html入门学习html入门学习 html入门学习html入门学习html入门学习 html入门学习html...
入门html标签
11-20
html的标签全知道,全是自己上课所学知识,初学者必须知道的简单html标签
前端基础入门html技术
11-18
前端入门提供给刚入刚的小伙伴们免费学习
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3338
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML】iframe
小秀的博客
07-24 371
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1047
iframe 预览邮件 + 打印邮件 + 模拟滚动条
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 955
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
HTML表格标签符入门教程
"HTML入门学习，包括表格标签符的使用和基本HTML知识" 在HTML（超文本标记语言）中，学习基础知识至关重要，这包括了如何创建和测试网页，以及使用不同的标记符来影响网页内容的显示。HTML文件是独立于操作系统平台...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彤彤的小跟班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值