HTML简单学习

最新推荐文章于 2023-12-04 20:15:26 发布

逆天游云

最新推荐文章于 2023-12-04 20:15:26 发布

阅读量367

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45830683/article/details/106172871

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML的基础知识，包括head和body标签的使用，文本、列表、图片和超链接的插入，锚点、表格和内嵌内容的创建。重点讲解了form表单的构成和数据提交方式，以及不同类型的输入元素如文本框、单选框、多选框、下拉框和文本域的用法，最后提到了隐藏标签的应用。

摘要由CSDN通过智能技术生成

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

head 标签

掌握标签： 
<title></title>网页标题标签 告诉浏览器使用什么标题
<meta charset="utf-8">h5中 指定网页解析编码格式  告诉浏览器使用指定的编码格式
<meta http-equiv="content-type" content="text/html; charset=UTF-8">Html4 指定网页解析编码格式  告诉浏览器使用指定的编码格式

了解标签：提升网页在浏览器中的搜索概率，搜索引擎优化
<meta name="Keywords" content="HTML,XML,淘宝"/>    关键字
<meta name="Description" content="本网页是html的head标签学习"/>  网页描述
<meta name="author" content="游云"/>    作者
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>  5s后自动刷新到指定网页

Body标签

文本标签

标题标签 	
	<h1></h1>
	<h2></h2>
	<h3></h3>
	<h4></h4>
	<h5></h5>
	<h6></h6>
标签属性 不建议使用 建议使用css
	例<h1 align=“center”></h1>

水平线标签
<hr /> 
属性 width=“宽度” 水平线的宽度 
	size=“高度” 高 度 
	color=“颜色” 水平线的颜色 
	align=“left” 设置水平线居左

段落标签
<p></p> 主要进行css js 操作室比较方遍
段间距比较大

换行标签：
<br />

空格符
&nbsp; 一个字节

权重标签
<b></b>  或<strong></strong>j将内容加黑
<i></i> 或 <em></em> 会将内容斜体
<u></u>  下划线
<del></del> 增加删除线

列表标签

有序列表
<ul>
	<li></li>
	<li></li>
</ul>

无序列表
<ol>
	<li type=“A”></li>
	<li></li>
</ol>
属性：type  可以改变顺序编码,默认是阿拉伯数字 也可以使用字母等

常见格式
标题+列表
<h3></h3>标题
<ul>
	<li></li>列表内容
	<li></li>列表内容
</ul>

自定义列表
<dl>
	<dt></dt> 标题
	<dd></dd>列表内容
	<dd></dd>列表内容
	<dt></dt> 标题
	<dd></dd>列表内容
	<dd></dd>列表内容
</dl>

图片标签

图片默认不换行 是行内元素
<img src="" alt="这是一个图片"  width=“100px”  title=“这是一个美女”>
src：图片路径
		相对路径 从当前位置去找
		绝对路径：从盘符文件中查找
		也可以是网络图片 网络图片资源的url就可以
width ：宽、height：高 当两者只设定一个 另一个默认 则图片在保证不失真的情况下自动缩小或者放大 单位可以是px也可以是百分比
title：图片标题
alt：当图片加载失败显示的内容

超链接

<a href="" target=“_blank” ></a>
a标签：
	href ：要跳转的网页资源路径
			本地资源 ：相对路径、绝对路径
			网络资源：网页的url要http开头
	注意  超链接标签中一定要声明访问方式	 访问方式可以是文字 也可以是图片<a href="" > 你好帅</a>
	target:指定显示位置
			 _blank表示新标签页
			_self 在当前页面显示
			_top 在顶层页面中显示
			_parent 在父级页面中显示

锚点学习

		<a href="#first" >123</a>
		<P>DHSJKHDSKLJDLKG; KOSJGLKJDLKVJL;M;LAKDP;KSDDLJLOJ LKJLFKL</P>
		<a name="first">ALKL</a>
		nkfdkfgjl
		<a href="#" >回到顶部</a>//刷新当前页面回到顶部的作用

表格标签

<table border="1px" cellspacing="" cellpadding="">
	<caption>这是一个表哥</caption>
	<tr>
		<th colspan=“2” >Header</th>
		
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>
属性：
	tr：一行
	th：声明一个单元格 标题 默认居中加黑
	td:声明一个单元格  默认居左
	border：表格边框
	width：宽度 一般设置列宽
	height: 高度 一般设置行高
    cellspacing=""  边框的宽度大小
    cellpadding=""  内容距边框的距离
 
 例子：   
<table border="1px" cellspacing="2px" cellpadding="10px">
	<caption>这是一个大表哥</caption>
	<tr height="20px">
		<th width="100px">Header</th>
		<th width="100px">Header</th>
		<th width="100px">Header</th>
		<th colspan="2" width="200px">Header</th>
	</tr>
	<tr height="20px">
		<td rowspan="2"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr height="20px">
		
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

内嵌标签
一张网页里面显示另外一张网页的内容
一般用于视频播放

<iframe src="" width="" height="" ></iframe>
src: 路径
width：显示区域的宽度
height：显示区域的高度
name :设置内嵌区域的名字 结果超链接标签的target使用

<body>
	<a href="http://www.baidu.com" target="_first">百度</a>
	<a href="http://www.taobao.com" target="_second">淘宝</a><br />
	<iframe src="" width="48%" height="600px" name="_first"></iframe>
	<iframe src="" width="48%" height="600px" name="_second"></iframe>
</body>

frameset框架标签

<form action="# " method="post">
			<div class="mui-input-row">
				<label>账号<input type="text" placeholder="请输入用户名" name="uname"></label>
				<label>密码<input type="password" placeholder="请输入密码" name="upwd"></label><br />
				性别：男<input type="radio" name="sex" value="1"/>
					 女：<input type="radio" name="sex" value="2"/> <br />
				爱好：吃饭 <input type="checkbox" name="hobbie" value="1" />
				睡觉 <input type="checkbox" name="hobbie" value="2" />
				打豆豆 <input type="checkbox" name="hobbie" value="3" /><br />
				籍贯<select name="sel">
					<option value="1" selected="selected">广州</option>
					<option value="2">深圳</option>
					<option value="3">宜春</option>
				</select>
				文本域：<textarea rows="10" cols="30">
					
				</textarea>
			</div>
			<input type="submit" value="点击"/>
		</form>

form表单
作用：收集并提交用户数据给指定的服务器
form标签会收集其标签内部的数据
属性：action数据提交地址url
method 数据提交方式
get：适合少量数据
post：适合大量数据
表单域标签form：给用户提供可以进行数据书写和选择的标签。
在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址
http://127.0.0.1:8848/day200401/form%E8%A1%A8%E5%8D%95.html?uname=%E5%BC%A0%E4%B8%89&upwd=123#

文本框标签
input
type：text 收集少量的文本数据，用户可见
password 手机用户的密码数据
name 数据提交的键也会被js使用
value默认值
单选框：
input
type：radio
name 那么属性值相同的单选框只能选择一项数据
value 要提交的数据
checked：checked使用此属性的单选默认是选中状态
多选框：
input
type：checkbox
name 一组多选按钮需要有相同的name属性值
value 要提交的数据
checked：checked使用此属性的单选默认是选中状态
下拉框 select标签
name：数据提交的键名，必须声明
option
value 要提交的数据
文本域：textarea：
声明一个书写大量文字的文本区域
name属性：数据提交的键名
rows：行数
cols：列数
普通按钮：
input：type属性是button 不具备数据提交功能
影藏标签
input type属性是hidden
name：数据提交的键名，必须声明
value 要提交的数据