表格、表单+面试题：link与import方法区别是什么

2021-05-26 18:01:25 阅读：133 来源： 互联网

表单

<form action="" method="" name=""></form>
	action=""提交的地址
	method=""提交方式
		method="get" 默认值,明文提交
		method="post" 密文提交
	name=""起个名字
1.文本框
	<input type="text" name="username" value="请输入您的用户名"/>
	name="username"起个名字
	value=""控件上的文本
2.密码框
	<input type="password" name="pwd"/>
	name="pwd"起个名字
3.提交按钮
	<input type="submit" value="发送"/>
	value="发送"改变按钮上的文本
4.重置按钮
	<input type="reset" value="清除"/>
	value="清除"改变按钮上的文本
5.普通按钮
	<input type="button" value="更换背景色"/>
	value=""改变按钮上的文本

表格

1.table-tr-td
<table border="1" width="600" height="400" cellspacing="0" cellpadding="20"></table>
2.table的属性：
	border="1" 边框1px
	width="600" 宽度
	height="400" 高度
	cellspacing="0" 外边距,单元格之间无间距
	cellpadding="20" 内边距,单元格上下左右都添加20px内边距
3.tr的属性
	height="60" 给这一行高度
	align="left左/right右/center居中" 该行内容水平对齐方式
4.td属性
	width="100" 宽度
	height="40" 高度
	align="left左/right右/center水平居中" 单元格内容水平对齐方式
	valign="top上/bottom下/middle垂直居中" 单元格内容的垂直对齐方式
***向右合并单元格,跨列合并单元格colspan="2"
***向下合并单元格,跨行合并单元格rowspan="2"

css引入方法

内部样式表

1.在head标签中引入
<style>
	选择器{
		属性1:值1;
		属性2:值2;
		...
	}
</style>
	宽度width:200px;
	高度height:200px;
	背景颜色background-color:red;
	字体颜色color:yellow;
2.例如
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		h2 {
			color: yellow;
		}
	</style>

外部样式表

1.在css文件夹中创建一个.css的文件
2.在head中使用<link rel="stylesheet" type="text/css" href="css/style.css"/>将外部css文件引入
	rel="stylesheet"关联样式表
3.在外部样式表中给元素添加样式
	@charset "utf-8";防止中文乱码
扩展：import方法引入外部样式表
	<style type="text/css">
		@import url("css/style.css");
	</style>
面试题：link与import方法区别是什么
差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

内联样式、行内样式

<div style="width: 200px;height: 200px;background-color: red;"></div>

样式表特征

1.层叠性:浏览器处理样式冲突的能力,不重复的样式层叠在一起，重复的样式以后定义的为准(权值)
2.就近原则(和权值有关)

选择器、选择符

1.元素选择器
	a{超链接统一去掉下划线}
2.类选择器
	<div class="nav"></div>
	- 类名的命名规则：可以包含字母、数字、_、-,小写字母开头,见名知意
		类名的前面要加一个.nav{}
	- 元素多个类名<div class="box wrap"></div>,写在一个class中,空格隔开
	- 类名的特点：一个元素可以有多个类名，一个类名可以呗多次使用

标签：面试题,样式,单元格,link,样式表,import,类名
来源： https://blog.csdn.net/wxy1345886334/article/details/117299396

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9