码迷,mamicode.com
首页 > Web开发 > 详细

html的常用标签

时间:2020-01-01 09:36:04      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:form   charset   分区   完成   aci   键值对   显示效果   改变   作者   

head标签元素

  

<!--head标签中主要配置浏览器的配置信息-->
		<title>HTML学习</title><!--网页标题标签:告诉浏览器使用什么标题显示网页-->
		<!--<meta  charset="utf-8"/>--><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档编码格式设置-->


		<!--
			了解:
				关键字
				网页描述
				作者
			作用:提升网页在浏览器中的搜索概率.
		-->
		<meta name="keywords" content="HTML,"/><!--网页关键字-->
		<meta name="description" content="本网页上是关于HTML的head标签学习的,特别棒,6666."/><!--网页描述-->
		<meta name="author" content="runwithyou"/><!--网页作者-->
		<meta  http-equiv="refresh" content="5;url=http://www.baidu.com"/><!--网页自动跳转-->

  body标签中的文本标签

<!--
	标题标签:
		h1到h6:会将其中的数据加粗加黑显示.并且显示依次减弱.标题标签自带换行功能.(块级标签)
			  属性:
				align: center left right
	水平线标签:
			hr:会在页面中显示一条水平线,默认居中显示
			属性:
				width="宽度" 设置水平线的宽度
				size="高度"  设置水平线的高度
				color="颜色" 设置水平线的颜色
	段落标签:
			p:会将一段数据作为整体进行显示,主要是进行css和js操作时比较方便.会自动换行(块`级元素)
			特点:
				段间距比较大
	换行符:  
			br:告诉浏览器需要在此位置换行
	空格符:
			&nbsp:告诉浏览器在此位置增加空格
	权重标签:
			b:会将内容加黑显示
			i:会将内容斜体显示
			u:会将内容增加下划线
			del:增加中划线
			以上标签不会自动换行,并且可以嵌套使用.
	注意:
		1 标签的属性是对标签的功能进一步的补充,可以由开发人员自由指定标签的属性值,来达到想要的显示效果.
		2 像素单位占据的是电脑屏幕的大小,百分比占据的是浏览器窗口的大小.
	
-->

  body中的列表标签

<!--
	列表标签学习:
		无序列表
			ul
				li:该标签中书写列表内容,一个li标签代表列表中的一行数据
				特点:	默认数据前有一个黑圆圈符号.
		有序列表
			ol
				li:该标签中书写列表内容,一个li标签代表列表中的一行数据
				特点:
					会自动的给列表进行顺序编码,格式从小到大并且是连续的.
			属性:
				type:可以改变顺序编码的值,可以是1 a A I,,默认使用阿拉伯数字进行顺序编码	
		自定义列表:
			dl
				dt:数据的标题
				dd:数据的具体内容,一个dd表示一条数据.
-->

  图片标签

<!--
	图片标签:
		img
			src:图片路径
				本地资源路径:一般本地图片资源使用相对路径即可
				网络资源路径:图片资源的URL地址
			width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
				  单位可以是px也可以是百分比
			height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大
				  单位可以是px也可以是百分比
			title:图片标题,鼠标放在图片上的时候会显示
			alt:图片加载失败后的提示语
			注意:图片是不会自动换行的(行内元素)
	注意
		相对路径:从当前文件出发查找另一个文件所经过的路径
		绝对路径:从根盘符出发所查找文件的路径
-->

  超链接标签

超链接标签学习:
				a标签:
					href:要跳转的网页资源路径
					 	本地资源:相对路径
					 	网络资源:网络资源(网页)的URL
					 target:指明要跳转的网页资源的显示位置
					 		_self   在当前页中刷新显示
					 		_blank  在新的标签页中显示
					 		_top	在顶层页面中显示
					 		_parent	在父级页面中显示
				注意:
					超链接标签中一定要声明访问方式,访问方式可以是文字也可以是图片.
			锚点学习:
				作用:在一张网页中进行资源跳转
				使用:
					先使用超链接标签在指定的网页位置增加锚点.格式为:
						<a name="锚点名"></a>
					使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的,格式:
						<a href="#锚点名">访问方式</a>;

  表格标签

表格标签学习:
				table :声明一个表格
					tr:声明一行,设置行高及改行所有单元格的高度.
						th:声明一个单元格,表头格.默认居中加黑显示
						td:声明一个单元格,默认居左显示原始数据
					注意:
						行高即改行所有单元格的宽度
						单元格的宽度即列宽
				属性:
					border:给表格添加边框
					width:设置表格的宽度
					height:设置表格的高度
					cellpadding:设置内容居边框的距离
					cellspacing:设置边框的大小	
				特点:
					默认根据数据的多少进行表格的大小显示
		单元格的合并:
			第一步:
				首先确保表格是一个规整的表格
			第二步:
				根据要合并的单元格,找到其所在的源码位置
			第三步:
				行合并:在要合并的单元格中的第一个单元格上使用属性rowspan="要合并的单元格的个数",并删除其他要合并的单元格完成合并
				列合并:在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数",并删除要合并的其他单元格

  内嵌标签

<!--
			内嵌标签:
				iframe
					src:要显示的网页资源路径
						可以是本地(相对路径)也可以是网络资源(URL)
						注意:
							默认当前页面打开及加载src指向的资源
					width:设置显示区域的宽度
					height:设置显示区域的高度
					name:设置内嵌区域的名字,结合超链接标签的target属性使用.
			作用:
				在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
		-->

  框架标签学习

<!--
		注意:
			第一步一定要删除body标签
		框架标签学习:
			frameset
				rows:按照行进行切分页面
				cols:按照列进行切分页面
				子标签:
					frame:进行切分区域的占位,一个frame可以单独加载网页资源.
						src:资源路径(本地或者网络)
						name:区域名,结合超链接使用
	-->

  form标签

<!--
			form表单标签学习:
				作用:收集并提交用户数据给指定服务器
				属性:
					action:收集的数据提交地址也就是URL
					method:收集的数据的提交方式
						get	:适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.
						post:适合大量数据,安全,隐式提交
					注意1:
						表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.
						提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据
					注意2:form标签会收集其标签内部的数据
					注意3:form表单的数据提交需要依赖于submit提交按钮.
			form表单域标签学习:
				作用:给用户提供可以进行数据书写或者选择的标签.
				使用:
					文本框:
						input
							type:
								text  收集少量的文本数据,用户可见
								password  收集用户密码数据
							name:数据提交的键,也会被js使用
							value: 默认值
					单选框:
						input
							type:
								radio
							name:name属性值相同的单选框只能选择一项数据
							value:要提交的数据
							checked:checked 使用此属性的单选默认是选择状态
					多选框:
						input:
							type:
								checkbox
							name:一个多选组需要使用相同的name属性值
							value:要提交的数据
							checked:checked 使用此属性的多选框默认是选择状态
					单选下拉框:
						select:
							name:数据提交的键名,必须声明
							子标签option:一个option标签表示一个下拉选项
										value:要提交的数据
					文本域:
						textarea:声明一个可以书写大量文字的文本区域
							name:数据提交的键名,js和css也会使用
							rows:声明文本域的行数
							cols:声明文本域的列数
					普通按钮:
						input:
							type:
								button
							value:
					隐藏标签:
						input
							type:
								hidden
							name
							value
					注意:表单数据提交提交的是表单域标签的value值	
			form表单标签的使用:
				在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式
				提交给action属性所指明的提交地址.
		-->

  

html的常用标签

标签:form   charset   分区   完成   aci   键值对   显示效果   改变   作者   

原文地址:https://www.cnblogs.com/kilig/p/12128090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!