VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >

  • 前端学习记录

前端开发

HTML标签

HTML文档结构#

head#


	

		Copy

	<head> <!-- 汉字编码 --> <meta charset="UTF-8"> <!-- 设置一个网站的搜索关键字 --> <meta name="Keywords" content=""/> <!-- 网站描述内容 --> <meta name="Description" content=""/> <!-- 视口设定 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 标题 --> <title>少年的博客</title> <!-- 加载页面图标 --> <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"> <!-- 加载外部css样式 --> <link rel="stylesheet" href="css/base.css"> </head> 
	

		body#

	

	

		Copy

	<!-- 主体内容 --> <body> <h3>Junior</h3> </body> 
	

		style#

	

	

		Copy

	<!-- css样式 --> <style></style> 
	

		script#

	

	

		Copy

	<!-- js --> <script type="text/javascript"> // 脚本代码块 </script> 
	

		格式#

	

		
			

				
					标签
				
					描述
			

		
		
			

				
					acronym
				
					定义只取首字母的缩写。
			

			

				
					ababr
				
					定义缩写。
			

			

				
					address
				
					定义文档作者或拥有者的联系信息。
			

			

				
					b
				
					定义粗体文本。
			

			

				
					bdi
				
					定义文本的文本方向，使其脱离其周围文本的方向设置。
			

			

				
					bdo
				
					定义文字方向。
			

			

				
					big
				
					定义大号文本。
			

			

				
					blockquote
				
					定义长的引用。
			

			

				
					center
				
					不赞成使用。定义居中文本。
			

			

				
					cite
				
					定义引用(citation)。
			

			

				
					code
				
					定义计算机代码文本。
			

			

				
					del
				
					定义被删除文本。
			

			

				
					dfn
				
					定义定义项目。
			

			

				
					em
				
					定义强调文本。
			

			

				
					font
				
					不赞成使用。定义文本的字体、尺寸和颜色
			

			

				
					i
				
					定义斜体文本。
			

			

				
					ins
				
					定义被插入文本。
			

			

				
					kbd
				
					定义键盘文本。
			

			

				
					mark
				
					定义有记号的文本。
			

			

				
					meter
				
					定义预定义范围内的度量。
			

			

				
					pre
				
					定义预格式文本。
			

			

				
					progress
				
					定义任何类型的任务的进度。
			

			

				
					q
				
					定义短的引用。
			

			

				
					rp
				
					定义若浏览器不支持 ruby 元素显示的内容。
			

			

				
					rt
				
					定义 ruby 注释的解释。
			

			

				
					ruby
				
					定义 ruby 注释。
			

			

				
					s
				
					不赞成使用。定义加删除线的文本。
			

			

				
					samp
				
					定义计算机代码样本。
			

			

				
					small
				
					定义小号文本。
			

			

				
					strike
				
					不赞成使用。定义加删除线文本。
			

			

				
					strong
				
					定义语气更为强烈的强调文本。
			

			

				
					sup
				
					定义上标文本。
			

			

				
					sub
				
					定义下标文本。
			

			

				
					time
				
					定义日期/时间。
			

			

				
					tt
				
					定义打字机文本。
			

			

				
					u
				
					不赞成使用。定义下划线文本。
			

			

				
					var
				
					定义文本的变量部分。
			

			

				
					wbr
				
					定义视频。
			

		
	

	

		链接#

	

		
			

				
					标签
				
					描述
			

		
		
			

				
					a
				
					定义锚。
			

			

				
					link
				
					定义文档与外部资源的关系。
			

			

				
					nav
				
					定义导航链接。
			

		
	

	

		音频/视频#

	

		
			

				
					标签
				
					描述
			

		
		
			

				
					audio
				
					定义声音内容。
			

			

				
					source
				
					定义媒介源。
			

			

				
					track
				
					定义用在媒体播放器中的文本轨道。
			

			

				
					video
				
					定义视频。
			

		
	

	

		图像#

	

		
			

				
					标签
				
					描述
			

		
		
			

				
					img
				
					定义图像。
			

			

				
					map
				
					定义图像映射。
			

			

				
					area
				
					定义图像地图内部的区域。
			

			

				
					canvas
				
					定义图形。
			

			

				
					figcaption
				
					定义 figure 元素的标题。
			

			

				
					figure
				
					定义媒介内容的分组，以及它们的标题。
			

		
	

	

		标签属性#

	

		通用属性:#

	

		id: 取唯一名称

	

		class: 给标签取类名

	

		style: 行内样式

	

		title: 标题

	

		转义符#

	

		
			

				
					实体字符
				
					编译后的字符
			

		
		
			

				
					&lt;
				
					小于号 <
			

			

				
					&gt;
				
					大于号 >
			

			

				
					&amp;
				
					于号 &
			

			

				
					&nbsp;
				
					空格
			

			

				
					&copy;
				
					版权
			

			

				
					&times;
				
					乘号
			

			

				
					&divide;
				
					除号
			

		
	

	

		标签元素#

	

		块级元素#

	

		块级元素(相当执行了 display:block)

	

		1.独占一行 宽度和高度是可控的,如没有设置宽度将默认铺满

	

		2.其行内可以包含块级和行级元素

	

		行级元素#

	

		行级元素(相当执行了 display:inline)

	

		1.不会独占一行,与相邻的行级元素占同一行

	

		2.宽高是不可控的

	

		3.其行内只有包含行级元素

	

		Emmet语法#

	

		2-1. 后代：>#

	

	

		Copy

	nav>ul>li 
	

	

		Copy

	<nav> <ul> <li></li> </ul> </nav> 
	

		2-2. 兄弟：+#

	

	

		Copy

	div+p+bq 
	

	

		Copy

	<div></div> <p></p> <blockquote></blockquote> 
	

		2-3. 上级：^#

	

	

		Copy

	div+div>p>span+em^bq 
	

	

		Copy

	<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div> 
	

	

		Copy

	div+div>p>span+em^^bq 
	

	

		Copy

	<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> 
	

		2-4. 分组：()#

	

		(1)缩写↓

	

	

		Copy

	div>(header>ul>li*2>a)+footer>p 
	

	

		Copy

	<div> <header> <ul> <li><a href=""></a><li> <li><a href=""></a><li> </ul> </header> </footer> <p></p> </footer> </div> 
	

		(2)缩写↓

	

	

		Copy

	(div>dl>(dt+dd)*3)+footer>p 
	

	

		Copy

	<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer> 
	

		2-5. 乘法：*#

	

		缩写↓

	

	

		Copy

	ul>li*5 
	

	

		Copy

	<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <ul> 
	

		2-6.自增符号：$#

	

		1)缩写↓

	

	

		Copy

	ul>li.item$*5 
	

	

		Copy

	<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <ul> 
	

		(2)缩写↓

	

	

		Copy

	h$[title=item$]{Header $}*3 
	

	

		Copy

	<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3> 
	

		(3)缩写↓

	

	

		Copy

	ul>li.item$$$*5 
	

	

		Copy

	<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> 
	

		(4)缩写↓

	

	

		Copy

	ul>li.item$@-*5 
	

	

		Copy

	<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> 
	

		(5)缩写↓

	

	

		Copy

	ul>li.item$@3