7-2 Web 前端技术

最新推荐文章于 2021-12-06 18:23:54 发布

Alance9

最新推荐文章于 2021-12-06 18:23:54 发布

阅读量236

点赞数

分类专栏： Alance 软件测试进阶之路文章标签： web基础

本文链接：https://blog.csdn.net/qq_41126139/article/details/112776265

版权

Alance 软件测试进阶之路专栏收录该内容

24 篇文章 0 订阅

订阅专栏

网页 = 页面样式（html） + 样式（css） + 用户交互（js）

1. HTML
2. CSS
3. Javascript

1. HTML

1、HTML：Hyper Text Markup Language，超文本标记语言

2、Form 表单属性
	method 方法：get、post
	action 动作：将表单数据提交给某个文件处理
	onsubmit 提交：提交表单时，处理js事件，返回True/False
					True 则 action 执行，False 则 action 不执行

3、表单控件
	（1）input 控件类型，格式：<input type="" name="" value="" />
		 - text 单行文本框：<input type="text" name="" placeholder="请输入用户名" />
		 - textarea 多行文本框：<input type="textarea" name="" placeholder="请输入用户名" />
		 - password 密码框：<input type="password" name="" />
		 - radio 单选框：
				性别：<input type="radio" name="sex" value="male" checked />男
		 - checkbox 复选框：
		 		爱好：<input type="checkbox" name="hobby" value="music" checked />音乐
		 - file 选择文件：
				<input type="file" name="picture" accept="image/png" multiple/>
				accept 设置默认的文件类型，multiple 多选
		 - 新增控件类型：color、number、range、tel、email、url、search、
		 				 data pickers（date/time/datetime/datatime-local/month/week）
		 				 
	（2）select 下拉列表
	（3）a 超链接
	（4）button 按钮

html：Hyper Text Markup Language，超文本标记语言。
html 标签分为开始标签（开放标签）和结束标签（闭合标签），不区分大小写。
html 结构：html - head - body - html
文本元素：

块	p、div
文本	font、span
加粗	b、strong
下划线	u
斜体	i、em
换行	`<br />`
标题	h1~h6
水平分割线	`<hr width size align color />`

图片标签

图片标签	img
高度、宽度
地址	src
提示	alt
边框	border
对齐方式	align：middle、top、bottom

超链接标签`

超链接	`<a href>`
锚链接	`<a href="#A"></a>`
目标位置	`<a name="A"></a>`
邮箱链接	`<a href="mailto:邮箱"></a>`

滚动标签

滚动标签	marquee
滚动延迟	scrolldelay
滚动方向	direction：right
反复滚动	behavior
滚动范围	width、height
对齐方式	align

表格标签

表格标签	table、td、tr
标题	caption
表头	thead
表内容	tbody
尾部	tfoot

表格属性	table
rowspan（跨行）	colspan（跨列）
cellpadding（内，单元格填充）	cellspacing（外，单元格间距）
border（边框厚度）	bordercolor（边框颜色）
background（背景）	bgcolor（背景色）
width、height（宽高）	align（对齐方式）

列表

无序	`<ul type><li>`
有序	`<ol type start><li>`

表单标签

表单	`<form action=url method=get/post></form>`
输入框、单选框、多选框、上传文件	`<input type>`
多行输入框	`<textarea name cols rows>`
按钮	`<button type=button/submit/reset>`
选择器	`<select name><option value selected>`

input 标签

input	属性
类型	type
名称	name
初始值	value
初始宽度	size
最多字符个数	maxlength
选中	checked

input	type属性
文本	text
密码	password
多选框	checkbox name checked
单选框	radio name checked
上传文件	`<input type="file" />`

input 与 label 的关联

input	`<input id="a" />`
label	`<label for="a" />`

2. 页面样式（css）

css：Cascading Style Sheet，层叠样式表，用于控制网页样式，允许将样式信息与网页内容分离的一种标签语言。
css 结构：<head><style type="text/css"></style></head>
样式选择：html 选择器、class 选择器、id 选择器
样式应用：行内样式表、内嵌样式表、外部样式表（多个样式，就近原则）
外部样式表：<link href rel="stylesheet" type="text/css">
常用文本样式

字体大小	font-size
字体	font-family
字体粗细	font-weight
字体样式	font-style
文本颜色	color
对齐方式	text-align

常用表格样式

外边界	margin
内填充	padding

常用边框样式

边框	border
边框样式	border-style
边框宽度	border-width
边框颜色	border-color

常用背景样式

背景色	background-color
背景图片	background-image : url()
如何重复背景图像	background-repeat
	repeat（默认）、repeat-x（水平）、repeat-y（垂直）、no-repeat（仅显示一次）
背景声音	`<bgcolor src loop /`>