web前端(1)：了解html和常见标签(表单+表格+文本+列表)

一、html的基本结构

1.前端的主要构成

名字介绍html搭建网站的结果css规定网站的样式JavaScript规定网站的行为jQuery另一种JavaScript，代码少，做的多Bootstrap，easyUI等等前端框架，别人搭建好的样式，我们直接调用

2.基本结构

	
	
	我是标题


	

二、列表标签

1.无序列表

标签/属性含义ul声明一个无序列表（ul标签里的子元素必须是li）li列表项type默认li标签样式是【disc圆形】，可以修改为【square 方块】，【circle 空心圆】

	
		无序列表项1
		无序列表项2
		无序列表项3
	

2.有序列表

标签/属性含义ol声明一个有序列表（ul标签里的子元素必须是li）li列表项type默认1为数字开头，a为小写字母排序，A为大写字母排序，i为小写罗马数字， I为大写罗马数字start以列表开头符号的第几个开始,只能写数字

	
		有序列表项1
		有序列表项2
		有序列表项3
	

3.自定义列表

标签/属性含义dl声明一个自定义列表dt列表的标题，无缩进dd是对当前dd的描述，有缩进

	 
	 	我是第一个标题
	 	我是第一的说明
	 	我也是第一的说明
	 	我是第二个标题
	 	我是第二的说明
	 	我也是第二的说明
	 

三、图片标签img

1. img标签 ：（单标签）在网页当中插入一张图片

属性介绍src图片地址title鼠标移入时候显示的提示信息alt替代信息，当资源加载失败显示的信息

2. 关于图片src属性路径使用的3种方式

• 网络图片路径
• 本地图片 绝对路径：在本地存盘上完整位置
• 本地相对路径：目标文件相对于当前文件的位置

./代表当前目录 …/返回上一级目录 /代表根目录

四、常用文本标签

1.标题标签:h1到h6

标签意义h1一级标题h2二级标题

		
		一级标题
		二级标题
		三级标题
		四级标题
		五级标题
		六级标题	

2.转义标签

标签意义 换行<小于号

3.其他标签

标签意义i标签字体倾斜em标签倾斜，表示强调 给搜索引擎使用u标签下划线hr标签水平线，单标签b标签字体加粗strong标签加粗 表示强调 关键字

	 	 
	
	蔡徐坤（KUN），NBA篮球大使。
	2012年4月，蔡徐坤因参加综艺节目《向上吧！少年》进入全国200强 ；同年8月，参演个人首部偶像剧《童话二分之一》。2014年3月，参演个人首部电影《完美假妻168》。2018年1月，参加偶像男团竞演养成类真人秀《偶像练习生》，并于同年4月6日获得最高票数，以NINE PERCENT九人男团C位出道并担任队长 ；同年8月，发行个人首张EP《1》;随后获得出道后首个个人音乐类奖项亚洲新歌榜2018年度盛典“最受欢迎潜力男歌手”;同年12月，获第十二届音乐盛典咪咕汇年度“最佳彩铃销量歌手”、年度十大金曲《Wait Wait Wait》、搜狐时尚盛典“年度人气男明星”以及今日头条年度盛典“年度偶像人物”。2019年2月，首登北京台春晚便包揽词曲，为其创作歌曲《那年春天》。2月18日，发布单曲《没有意外》。3月22日，发布海外公演主题曲《Bigger》。4月19日，发布单曲《Hard To Get》。

五、超链接标签:a标签

1.普通页面跳转

标签意义href跳转的地址（不写值默认还是跳转本页面）target_blank 新打开一个窗口加载跳转的网页title鼠标移入的提示信息

	百度一下

2.锚点跳转

跳转到当前页面的指定位置 给指定标签添加id属性，a标签的href属性的值为#指定元素id属性值

	跳转到1楼
	跳转到2楼
	跳转到3楼
	跳转到4楼
	跳转到5楼

	1楼
	2楼
	3楼
	4楼
	5楼回到顶部

六、表格标签

1.基本标签

标签意义table声明一个表格th声明一个表头（通常表格第一行）tr声明一个行td声明一个列

2.table标签属性

属性意义border边框cellspacing设置表格和表格之间的默认间距cellpadding设置表格中内容距离当前表格边框之间的间距width宽height高

3.对其方式

属性意义align对齐方式 默认【靠左对齐left】 ,【靠右right】，【center：居中】valign垂直方式 默认垂直居中，【top：默认靠上居中】，【bottom：靠下居中】

4.单元格合并

属性意义跨行合并rowspan设置当前列 占几个行的高度，需要把挤出去的注释掉跨列合并colspan设置当前列 占几个列的宽度

5.举例：个人简历

	
	个人简历


	个人简历
	
		
			姓名
			
			性别
			
			民族
			
		
		
			政治面貌
			
			户籍
			
		
		
			出生年月
			
			婚姻状况
			
			工作时间
			
		
		
			技术职称
			
			文化程度
			
			主修专业
			
		
		
			毕业学校
			
			毕业时间
			
		
		
			英语水平
			
			计算机水平
			
			薪资要求
			
		
		
			本人要求
			现从事工作
			
		
		
			
			欲从事工作
			
		
		
			联系方式
			联系电话
			
			邮政编码
			
		
		
			通信地址
			
		
		
			工作简历
			
		
		
			自我评价
			
		
	

七、表单标签

1.表单标签

标签属性及其意义form声明一个表单域，属性【action:提交的地址，不写提交到当前页面】，【method:指定提交数据的方式，默认get，可以修改为post】input通常为文本输入框checkbox多选框,name值也必须相同。必须设置默认值【checked：默认选择属性,可以设置多个】select下拉选框（必须添加name）。【option：选项（必须添加value）】【selected:默认选择一个地址，只可以选择一个】textarea文本域/多行文本输入框 ，双标签提交按钮

2.表单标签的部分属性 表单的数据是要提交给后台的，提交数据的格式一般是键值对

属性意义name必须存在，作为提交数据的keyvalue代表值（写了就是默认值）hidden藏域,不会对用户显示，有些时候有些数据不想让用户看到和修改，但是后台需要使用disabled可以使各个控件不能用

3.input标签的type属性类型

type标签值意义text明文输入password密文输入file文件传输button普通按钮submit会将表单内容交给action或者后端reset重置按钮image图片按钮

4.举例：注册个人信息的表格

	
		
		注册
	
	
		
		
			注册
			
				姓名：
				
			
			
				密码：
				
			
			
				年龄：
				
			
			
				性别：
				
					男
					女
					保密
				
			
			
				爱好：
				
					唱歌
					跳舞
					运动
					写代码
				
			
			
				地址：
				
					
						--北京市-五方桥--
						--河北--
						--山西--
					
				
			
			
				头像：
				
					
				
			
			
				个人简介：
				
					
				
			

			
				
					
				
			
		
		
	

`