前端考试总结

news2024/10/20 15:00:07

1HTML标签

h标题标签块级标签独占一行

p段落标签同上

br换行标签单标签

img图片标签内联标签:不独占一行(src图片地址 alt图片的替代文字 title鼠标悬停提示文字)

a超链接标签同上 (href跳转路径 target属性{_blank新窗口打开 _self在当前窗口打开})

列表标签(ul无序列表 ol有序列表 dl定义列表)

form表单

input(单选框type=radio 复选框type=checkbox)

select下拉列表option selected默认选择项

提交按钮 input type=submit

span标签

2绝对路径相对路径

绝对路径:①本机资源:D:/....②非本机资源:网址

相对路径:./×××(./当前目录 ../上一级目录)

3css选择器

①基本选择器
html选择器
类选择器
id选择器

②层次选择器
后代选择器用或>表示
群组选择器用,

③伪类选择器
lvha按顺序设置

4css引入方式

(行内>内部>外部
id>类>标签选择器)
①行内样式写在标签中
②内部样式写在style中
③外部样式在外部css文件中设置样式同时link引入

5css颜色表示

1英文单词表示

2十六进制

3rgb三原色

6css样式

7盒子模型

内容溢出处理

overflow属性：设置当对象的内容超过其指定的高度或宽度时如何处理内容。

8元素定位(position)

1静态定位

2相对定位 relative

3绝对定位 absolute

4固定定位 fixde

9z-index样式

数字大的在上面

10弹性布局

display:flex

flex-direction:coloumn竖向均匀排列

flex-wrap:wrap 自动换行

justify-content:*flex-start（默认）：左对齐。
                        * flex-end：右对齐。
                        * center：居中。
                        * space-between：两端对齐，子元素之间间距都相等。
                        * space-around：每个子元素两侧的间距相等。

11js

js中的数据类型

1undefined-未定义类型：未被赋值的变量，值为undefined
2boolean-布尔类型：值为true/false
3number-数字类型：任何数字（NaN也是number类型，表示“非数”）
4string-字符串类型：值用引号（单引号或者双引号）括起来
5object-对象类型：null、数组、Date等
6function-函数类型：function函数

js中的运算符

==是两边数据大小一样即可 ===两边数据类型包括大小一样才可

12函数

声明方式

1.function 函数名( ){ //函数体; }

2.let 函数名 = function(){ //函数体; }

13DOM

1.获取DOM对象常用方法

* getElementById() 通过元素的**ID属性**获取DOM对象，获取的是**一个DOM对象**。
* getElementsByTagName() 通过元素的**标签名**获取DOM对象，获取的是**一组DOM对象**。
* getElementsByClassName() 通过元素的**class属性**获取DOM对象，获取的是**一组DOM对象**。
* getElementsByName() 通过元素的**name属性**获取DOM对象，获取的是**一组DOM对象**。

今晚吃啥

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		/* 2写css */
	</style>
	<body>
		<!-- 1写html -->
		<div class="dish">今晚吃什么</div>
		<button onclick="start()">开始</button>
		<button onclick="stop()">结束</button>
	</body>
	<script>
		/* 3写css */
		var dishArr = ["超意兴", "驴肉火烧", "火锅", "烧烤", "麻辣烫"]
		console.log(dishArr[0]); //超意兴
		var dish = document.getElementsByClassName("dish")
		console.log(dish[0].innerText); //今晚吃什么
		dish[0].innerText = dishArr[0];
		var i = 0;

		function start() {
			time = setInterval(function aa() {
				dish[0].innerText = dishArr[i]
				i++;
				if (i == dishArr.length) {
					i = 0
				}
			}, 300)
		}

		function stop() {
			clearInterval(time)
		}
	</script>
</html>

轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.gege {
			width: 300px;
			height: 400px;
		}

		.gege img {
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<div class="gege">
			<img class="img1" src="imgs/banner1.jpg" />
		</div>
		<script>
			var bannerArr = ["imgs/banner1.jpg", "imgs/banner2.jpg", "imgs/banner3.jpg"]
			var img1 = document.getElementsByClassName("img1")
			console.log(img1[0].src);
			var i = 0
			setInterval(function aa() {
				img1[0].src = bannerArr[i]
				i++
				if (i == bannerArr.length) {
					i = 0
				}
			}, 300)
		</script>
	</body>
</html>