HTML 基础

元素/属性

描述

div布局

		div class="header" 
		div class="nav"
		
				div class="left"
				div class="right"
		
		div class="footer"


语义布局

		header class="header" 
		div class="nav"
		
				aside class="left"
				article class="right"
		
		footer class="footer"




		.header,
		.footer {
				background-color: antiquewhite;
				height: 40px;
				text-align: center;
				line-height: 40px;
				float: none;
		}

		.nav {
				background-color: aquamarine;
				height: 40px;
				line-height: 40px;
				text-align: center;
		}

		.left {
				background-color: rgb(201, 223, 215);
				float: left;
				width: 150px;
				height: 100%;
				text-align: center;
		}

		.right {
				background-color: rgb(238, 252, 206);
				float: left;
				height: 100%;
				width: calc(100% - 150px);
				text-align: center;
		}

表格

是一个嵌套组合的标签集合，一个表格 table，有多个行，每行有多个单元格组成，常用于展示集合数据。

包含多种特有的子元素，构成表格的各个部分。

表格元素结构/顺序： ► ► ► ► / ►

	
		
		
		
	
	
		
			name
			age
			birthday
		
	
	
		
		zhangsan
		22
		2000-12-12
	
	
		
		23
		2000-12-12
		多了一格
	


	.col {
		border: 2px solid red;
		width: 200px;
	}

过时的嵌入元素

和 元素用来嵌入多种外部内容的通用嵌入工具，如 Java 小程序、Flash、PDF、浏览器插件，甚至视频，SVG 和图像等类型。

现代的WEB技术已比较成熟了，就像IE一样，插件也将逐步称为历史。

		You don't have a PDF plugin, but you can download the PDF file.

表单元素

		#form fieldset {
				border: 1px solid skyblue;
				padding: 20px 10px;
				border-radius: 5px;
				text-align: center;
				margin: 10px 0px;
		}
		#form fieldset legend {
				font-size: 1em;
				border: 1px solid rgb(236, 175, 43);
				border-radius: 1em;
				padding: 3px 15px;
		}


		
				登录
				
				
				
		

注意 提交数据时参数名为表单控件的 name，因此表单控件须设置 name 属性。

get、post 区别

因此：

数据有安全性要求的时候，建议用POST并且加密（HTTPS）。

获取数据（如查询）的的时候，一般用GET；提交数据（添加、修改、删除）时一般用POST。

表单元素

表单元素 ，主要用于输入各种类型数据。 包含多个控件类型 type：文本框、复选框、单选框、按钮等。

注意：

一般浏览器对不支持的 type，都默认降级为 text。

文件选择框如通过表单提交，表单需设置属性 enctype="multipart/form-data" 设置表单数据编码为多种数据组合，同时设置提交方式为 post，才可以上传文件（二进制）。

支持的常规属性

	.iform {
		text-align: right;
		display: grid;
		grid-template-columns: 80px 200px 80px 200px;
		gap: 10px 5px;
	}

	/* 重写radio的样式 */
	.iform input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		border: 3px solid #999;
		transition: 0.2s all linear;
		outline: none;
		position: relative;
	}

	.iform input[type="radio"]:checked {
		border: 6px solid #4A80FF;
	}

	.iform input:invalid {
		border-color: red;
	}

	.iform input,
	.iform label {
		height: 26px;
		padding: 0 3px;
		display: inline-block;
		vertical-align: middle;
	}


	text：
	password：
	number：
	radio：
		男
		女
	
	checkbox：
		做饭
		打球
	
	
	file：

	email：
	range：
	search：
	tel：
	url：

	color：
	datetime-local
	month：
	time：
	week：

	
	
	
	

多行文本 - 行内元素

可以输入多行文本，支持换行、空格。

还可以使用 中的一些常见属性，如 autocomplete、autofocus、disabled、placeholder、readonly，和 required、maxlength等。

可使用 css 样式属性 resize 设置输入框的大小调整方式。

辅助聚焦元素

是一个说明标签，最主要的作用是辅助聚焦，点击 会让其关联的元素得到焦点，for 属性所指的元素 id 就是她的服务客户。

因此 是表单控件的最佳搭档，点击 label= 等于点击对应元素。

是一个双标签，里可以嵌套其他行内元素，如文字、图片。

	
		Name:
		
		*
	


	Name: *
	


	阅读并同意条款 

还有一种简写的方式：用 label 元素把 input 元素包裹起来，以减少 for- id 的使用。

数据集合

数据集合，包含了一组 元素，提供给文本类 （list属性）使用，作为可选值的数据集。

文本、数字输入的候选值，包括text、number、email、url、tel、search 等。

range 的刻度。

	香蕉
	火龙果
	冬瓜
	
	

按钮 - 行内元素

是HTML5的新元素，作用和 input-button 的功能基本相同。

不同的是他是双标签，内部可以自由定义内容，也可以使用伪元素，实现更丰富的按钮效果。

普通按钮
提交submit

	重置

button 和 input-button 的区别 ？

input 是单标签，无关闭标签。 button 的显示内容在标签之间，应用更丰富；input 在 value 属性，只支持纯文本。 button 的鼠标事件里可以直接写代码。

选项 - 行内元素

select 选择列表元素，有弹出下拉框、展示选项列表两种模式，option 是他的子标签选项。启用 multiple 或 size>1 时，显示为列表，否则显示为下拉框。

	多选multiple：
	
		
			香蕉
			火龙果
		
		
			绿色蔬菜
			冬瓜
			男瓜
		
		其他
	
	单选：
	
		选择性别
		男
		女
		其他
	
	

进度计量

两者都可以实现进度的效果， 为进度条控件， 更为丰富，为计量条控件，表示某种计量，适用于温度、重量、金额等量化的表现。

注意：开始标签和结束标签都不能省略，虽然标签中的内容不会显示。

	Progress
	progress：
	progress(无value)： 
	value溢出： 


	Meter
	普通进度：
	value小于low：
	value大于high：
	value居中