一、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	必须存在，作为提交数据的key
value	代表值（写了就是默认值）
hidden	藏域,不会对用户显示，有些时候有些数据不想让用户看到和修改，但是后台需要使用
disabled	可以使各个控件不能用

3.input标签的type属性类型

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

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

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

			
				
					
				
			
		
		
	

`