HTML学习

最新推荐文章于 2024-05-28 17:33:16 发布

蟹小黄

最新推荐文章于 2024-05-28 17:33:16 发布

阅读量696

点赞数

分类专栏： HTML 文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_45879460/article/details/106875238

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML

什么是HTML

HTML

Hyper Text Markup Language(超文本标记语言)

W3Cb标准

World Wide Web Consortium(万维网联盟)

web技术领域最权威和最具有影响力的国际中立性技术标准机构

W3C标准包括

结构化标准语言(HTML,XML)

表现标准语言(CSS)

行为标准(DOM,ECMAScript)

HTML基本结构

网页基本信息

< body>,等成对标签，分别叫开放标签和闭合标签

单独呈现的标签(空元素)，如

；意为用 / 来来关闭空元素

HTML注释格式：

<!-- 文本 -->

<!DOCTYPE html>
<html>

<!-- head标签代表我网页头部 -->
<head>
<meta charset="UTF-8">
<!-- title网页标题 -->
<title>Insert title here</title>
</head>

<!-- body标签代表网页主体 -->
<body>hello，world！
</body>
</html>

网页基本标签

标题标签
段落标签
水平线标签
字体样式标签
- 粗体： </strong
- 斜体： </em
注释和特殊符号

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 标题标签 -->
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>

	<!-- 段落标签 -->
	<p>杨欣馨呀 杨欣馨呀</p>
	<p>许浩呀 许浩呀</p>

	<!-- 换行标签 -->
	杨欣馨呀 杨欣馨呀
	<br /> 许浩呀 许浩呀
	<br />

	<!-- 水平线标签 -->
	<hr />

	<!-- 粗体，斜体 -->
	粗体：
	<strong>i love</strong>
	<br /> 斜体：
	<em>you</em>

	<!-- 特殊符号 -->
	空格：许&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浩
	<br /> 大于：&gt;
	<br /> 小于：&lt;
	<br /> 版权符号：&copy;

	<!-- 特殊符号记忆方式 	&	;-->

</body>
</html>

图像标签

<img alt=“图片名称” src=“图片路径” title=“悬停文字” width=“宽” height=“高”(>)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- img学习
src:图片地址
	相对地址(推荐使用)：../
	绝对路径：--上一级目录
	
alt:图片名字(必填)
-->
	<img alt="欣馨头像" src="../resources/image/yxx.png" title="悬停文字"
		width="300" height="300">

</body>
</html>

链接标签

普通链接：

(<)a href=“path” target=“目标窗口位置”>链接文本或图像

锚链接(可以用来指定跳转)：

1.设计锚标记(<)a name="标记名"显示的文字

2.跳转到标签(<)a fref="#标记名"显示的文字

功能性链接：

邮件链接：(<)a href="mainto:邮箱"显示的文字

qq链接：可以在qq推广的网页中或者代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<a name="top">顶部</a>
	<br />

	<!-- a标签
href:必填，表示要跳转到的页面
target:表示在哪里打开
	_blank	在新标签中打开
	_self(默认)	在自己的网页中打开
 -->
	<a href="我的第一个HTMl.html" target="_blank">点击我跳转到页面</a>
	<br />
	<a href="https://www.baidu.com">点击我跳转到百度</a>

	<br />
	<a href="我的第一个HTMl.html"> <img alt="欣馨头像"
		src="../resources/image/yxx.png" title="悬停文字" width="300" height="300">
	</a>

	<!--锚链接
1.需要一个锚标记
2.跳转到标记
 -->
	<br />
	<a href="#top">回到顶部</a>
	<br />
	<a name="down">down</a>

	<!-- 功能性链接
邮件链接：mailto:
qq链接
 -->
	<br />
	<a href="mailto:1065124066@qq.com">点击联系我</a>
	<br />
	<a target="_blank"
		href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img
		border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点位领取小电影"
		title="点位领取小电影" /></a>
</body>
</html>

块元素和行内元素

块元素
- 无论内容多少，该元素独占一行
- (p, h1-h6…)
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- (a,strong,em…)

列表标签

列表就是信息资源的一张展现形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览器能更快捷地获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 定义列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>；列表学习</title>
</head>
<body>

	<!-- 有序列表 
应用范围：试卷，问答。。。
-->
	<ol>
		<li>java</li>
		<li>C</li>
		<li>C#</li>
	</ol>

	<hr />

	<!-- 无序列表 
应用范围：导航，侧边栏。。。
-->
	<ul>
		<li>java</li>
		<li>C</li>
		<li>C#</li>
	</ul>

	<!-- 自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
	<dl>
		<dt>学科</dt>
		<dd>java</dd>
		<dd>C</dd>
		<dd>C#</dd>
	</dl>



</body>
</html>

表格标签

基本结构：

单元格
行:tr
列:td
跨行:rowspan
跨列:colspan

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
	<!-- 表格table
行 :tr	rows
列 :td
 -->

	<!-- border:显示边框 -->
	<table border="1px">
		<tr>
			<!-- colspan 跨列 -->
			<td colspan="4">1-1</td>
		</tr>

		<tr>
			<!-- rowspan 跨行 -->
			<td rowspan="2">2-1</td>
			<td>2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>

		<tr>
			<td>3-1</td>
			<td>3-2</td>
			<td>3-3</td>
		</tr>
	</table>

</body>
</html>

媒体元素

音频
视频

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- 音频和视频
	src:资源路径
	controls:控制条
	autoplay：自动播放
	 -->
	<video src="../resource/video/鬼刀小姐姐.mp4" controls="controls"
		autoplay="autoplay"></video>

	<audio src="../resource/audio/1549551517.mp3" controls="controls"
		autoplay="autoplay"></audio>

</body>
</html>

页面结构分析

元素名称	描述
header	标题头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容和应用(常用于侧边栏)
nav	导航类辅助内容

iframe内联框架

iframe内联框架：简单来说就是在一个网页中嵌入另外一个网页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    
	<!-- iframe内联框架
src:地址
name:框架标识名
width:宽度
height：高度
 -->

	<!-- 
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
-->

	<iframe src="" name="hello" frameborder="0" width="1000px"
		height="800px"></iframe>
	<a href="1.我的第一个HTML.html" target="hello">点击跳转</a>
</body>
</html>

表单

表单post和get提交

form参数：

action:表单提交的位置，可以是网站，也可以是请求处理地址

method:post，get 提交方式

post:比较安全，传输大文件

get:我们可以在url中看到我们提交的信息，不安全

文本框和单选框

文本框输入框：input type="text"

type="" 输入的类型
name="" 表单名称
value="" 默认初始值
maxlength="" 最长能写几个字符
size="" 文本框长度

单选框标签：input type="radio"

value：单选框的值
name：表示组，当多个选项时，只能选一个的时候，要将这些选项放入一个组中

checked：默认选中

属性	说明
type	指定元素的类型。默认为text
name	指定表单元素的名称
value	元素的初始值
size	指定表单元素的初始宽度
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

按钮和多选框

按钮：input type=“button”|input type=“image” 图片按钮

name：按钮名称

value：按钮显示名称

checked：默认选中

多选框：input type="checkbox"

value：多选框的值

name：名称

checked：默认选中

列表框文本域和文件域

下拉框：select name=""

name：下拉框名称
option value=""
value：选项名称
selected：默认选中

文本域：textarea name="textarea"

rows：文本域行数

cols：文本域列数

name：文本域名称

文件域：input type="file"

name：文件名称

搜索框滑块和简单验证

邮箱验证：input type="email"
name：名称

URL ：input type="URL"
name：名称

数字：input type="number"
name：名称
min：最小值
max：最大值
step：增加间隔

滑块：input type="range"
name：名称
min：最小值
max：最大值
step：增加间隔

搜索框：input type="search"
name：名称

表单提交与重置

**提交：**input type=“submit”

重置：

表单的应用

只读：readonly

不可修改：disabled

隐藏：hidden

增强鼠标可用性：

<label for="mark">你点我试试</label>
<input type="text" id="mark">

表单演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- action:表单提交的位置，可以是网站，也可以是请求处理地址
		method:post，get 提交方式
		post:比较安全，传输大文件
		get:我们可以在url中看到我们提交的信息，不安全 
	-->
	<form action="1.我的第一个HTML.html" method="get">

	<!-- 文本框输入框
		input type="text"
		type="" 输入的类型
		name="" 表单名称
		value="" 默认初始值
		maxlength="" 最长能写几个字符
		size="" 文本框长度
		readonly：只读
		placeholder：提示信息
		required：非空判断
	 -->
		<p>
			名字：<input type="text" name="username" value="许浩" maxlength="8"
				size="30" placeholder="请输入用户名" required>
		</p>

		<!-- 密码框
			input type="password
			disabled：不可修改
		 -->
		<p>
			密码：<input type="password" name="pwd" disabled>
		</p>

		<!-- 单选框标签
			input type="radio"
			value：单选框的值
			name：表示组，当多个选项时，只能选一个的时候，要将这些选项放入一个组中
			checked：默认选中
		 -->
		<p>
			性别： <input type="radio" name="sex" value="boy" checked>男 
				  <input type="radio" value="girl" name="sex">女
		</p>

		<!-- 多选框
			input type="checkbox"
			value：多选框的值
			name：名称
			checked：默认选中
		 -->
		<p>
			爱好：<input type="checkbox" value="sleep" name="hobby1" checked>睡觉
				  <input type="checkbox" value="code" name="hobby">敲代码
				  <input type="checkbox" value="game" name="hobby">打游戏
		</p>

		<!-- 按钮
			input type="button"
			input type="image" 图片按钮
			name：按钮名称
			value：按钮显示名称
		 -->
		<p>
			按钮：<input type="button" name="btn1" value="点击变长"> 
				  <input type="image" src="../resource/image/yxx.png">
		</p>

		<!-- 下拉框
			select name=""
			name：下拉框显示名称
			option value=""
			value：选项名称
			selected：默认选中
		 -->
		<p>
			国家： <select name="列表名称">
				<option value="china" selected>中国</option>
				<option value="us">美国</option>
				<option value="linda">印度</option>
			</select>
		</p>

		<!-- 文本域
			textarea name=""
			rows：文本域行数
			cols：文本域列数
			name：文本域名称
		 -->
		<p>
			反馈：
			<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
		</p>

		<!-- 文件域
			input type="file"
			name：文件名称
		 -->
		<p>
			<input type="file" name="files"> <input type="button"
				value="上传" name="upload">
		</p>

		<!-- 邮箱验证
			input type="email"
			name：名称
		 -->
		<p>
			邮箱：<input type="email" name="email">
		</p>

		<!-- URL 
			input type="URL"
			name：名称
		-->
		<p>
			URL：<input type="URL" name="url">
		</p>

		<!-- 数字
			input type="number"
			name：名称
			min：最小值
			max：最大值
			step：增加间隔
		-->
		<p>
			商品数量：<input type="number" name="num" max="100" min="1" step="1">
		</p>

		<!-- 滑块
			input type="range" name="vioce"
			name：名称
			min：最小值
			max：最大值
			step：增加间隔
		 -->
		<p>
			音量滑块：<input type="range" name="vioce" min="0" max="100" step="2">
		</p>

		<!-- 搜索框
			input type="search"
			name：名称
		 -->
		<p>
			搜索：<input type="search" name="search">

		</p>

		<!-- 增强鼠标可用性 -->
		<p>
			<label for="mark">你点我试试</label> <input type="text" id="mark">
		</p>

		<p>
			<input type="submit"> <input type="reset">
		</p>


	</form>

</body>
</html>

表单初级验证

常用方式

placeholder：用于输入框，输入内容提示
required：非空判断
pattern：正则表达式判断

蟹小黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

HTML什么是HTMLHTMLHyper Text Markup Language(超文本标记语言)W3Cb标准World Wide Web Consortium(万维网联盟)web技术领域最权威和最具有影响力的国际中立性技术标准机构W3C标准包括结构化标准语言(HTML,XML)表现标准语言(CSS)行为标准(DOM,ECMAScript)HTML基本结构网页基本信息< body>,等成对标签，分别叫开放标签和闭合标签单独呈现的标签(空元素)，如；意为用 /
复制链接

扫一扫