前端学习

文章目录

前端学习
- 1. html
- - 1. html标签：图像标签
  - 2. 表格标签
  - - - table标签中常用属性
      - 表格标签的用法
  - 3. 表单标签
  - 框架标签
- 2. CSS
- - 1.CSS的引入方式（3种）
  - 2.CSS选择器（使用前三种居多）
  - - 0. 选择器优先级（⭐）
    - 1.id选择器（推荐⭐）
    - 2.class（类）选择器
    - 3.element（元素/标签）选择器
    - 4. 并集选择器
    - 5.交集选择器（前端框架：Jquery：子元素选择器）
    - 6.通配符选择器
  - 3.伪类选择器（锚伪类）
  - - 1. 伪类选择器典例
    - 2. CSS文本属性
    - 3. CSS列表属性
    - 4. CSS表格属性

1. html

复习前端的重点：

Js（DOM）/BOM（window对象两个定时器/location的href属性，reload）

原生的js的表单验证（掌握）

HTML：超文本标记语言：Hyper Text Markup Language，可以对字体、视频、音频进行改变

结构：在html标签的书写过程中，有些标签必须成对出现

HTML标签注意：

HTML语言不区分大小写，但一般都小写；
当显示⻚页⾯面时，浏览器器会移除源代码中多余的空格和空⾏行行。所有连续的空格或空⾏行行都会被算作⼀一个空格。需要注意的是，HTML 代码中的所有连续的空⾏行行（换⾏行行）也被显示唯一一个空格

<html>
	<head></head> ---------->规定编码格式以及当前网页的窗口标签
		<title>窗口标题的内容</title>
		<meta charset="utf-8"> ------->指定编码格式
</html>

超链接标签：
a标签 ：
属性： href 链接 资源地址：url/（后台地址）
	  target:打开资源文件的方式  1. _self:在当前窗口直接打开  2. _blank:在新窗口打开
例子：	  
<a href="http://www.baidu.com">跳转到百度首页</a>
http://不能省略，这是一个协议

常见协议：
file://  :本地文件协议，链接到一个本地文件
https://  : 简单的执行流程：找hosts文件
			ip  域名的映射

超链接标签中的作用：
（1）：链接资源文件
操作：（这是在同一页面下进行的）
（a）：创建一个锚点：<a name="锚点名称"></a>
（b）：创建一个跳转链接：跳转标记那个位置
		<a href="#+锚点名称">[跳转底部]</a>
在不同页面下进行：
（a）：创建一个锚点：<a name="锚点名称"></a>
（b）：创建一个跳转链接：跳转标记那个位置
		<a href="资源地址+#+锚点名称">[跳转底部]</a>   //不同处在这

hosts文件：构成映射，可以加快访问

Windows下的目录：c:/windows/system32/drivers/etc/hosts

如果在host文件中能找到文件，则直接在本地中直接打开；

如果找不到，则调用网卡进行联网操作在中间网络运营商

DNS服务器

1. html标签：图像标签

图像标签是一个空标签（没有标签体的标签）

img

常用属性：

src属性：连接图片资源文件地址，会单独加载资源文件
art属性：替代文本，当图片失效的时候，替代文本起作用（解释说明图片的内容）
title：鼠标悬停在图片上，说明当前图片的文字
width/height：图片的宽度和高度

应用场景：轮播图效果（本质就是更改src属性）

2. 表格标签

表格标签：table来标识

特点：只有行的概念，没有列的概念（使用单元格体现）

table中的行标签：tr

table中的单元格：td ，当为表头时，用 th （自动居中，适当加粗）

table标签中常用属性

表格要有效果属性，必须指定border属性：边框
表格的宽度高度：width/height
背景色：bgcolor （html标签的属性）； background-color：css背景样式
cellspacing：设置表格的边框线和单元格边缘之间的空间； cellpading：单元格和单元格之间的空间

表格的标题标签：

table

caption标签

表格标签的用法

单元格的合并：

合并行：rowspan

和并列：colspan

了解：表格的拆分分为三个部分：thead、tbody、tfoot （头、体、脚）目的是让用户体验好！

加上默认的拆分标签，在浏览器解析的时候，用户是可以直接访问的，不需要等待table加载完毕

一般情况：浏览器默认的会将表格中的全部内容用tbody包含起来；

3. 表单标签

表单的应用场景：登陆 / 注册 ⭐

表单标签：form

属性：

action：提交的后台地址url

URL与URI

http://localhost:8080/hell0 这是一个URL（统一资源定位符）

/hello:指定路径这是URI（URL是URI的子集）
method：提交方式： get、post、(常用这两个)…

区别：

（1）get：
- 不适合填写敏感属性，举例：密码输入框的内容
- 不管前端校验还是后端校验：密码最终的内容都会被加密
- 提交的数据最终会在地址栏上显示（例如：username=1111&password=111111#这种格式）
（2）post方式
- 适合敏感数据
- 不会将数据提交到地址栏，提交数据大小显示；
表单标签（这里指input标签）中必填的属性：

name属性：作为系统后台的一个标记，知道当前填写的内容是哪一个类型的内容；

比如作为密码用户名输入的input标签，如果不指定name属性，提交到后台后，后台怎么获取用户名和密码呢？

表单标签中的其他表单项：

input：

type = ”text“ ，文本输入框
type = ”password“ 密码输入框
type = ”radio“ 单选按钮
type = ”hidden“ 隐藏域
type = ”button“ 普通按钮，必须指定value
type = “date” ，日期组件

下面是一个表单标签的示例代码：

<body>
<form action="#" method="get">
用户名:<input type="text" name="username"  placeholder="请输入用户名"/><br />
密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"  placeholder="请输入密码" /><br />

男<input type="radio"  value="男" name="sex" />
女<input type="radio" value="女" name="sex" />
<br /><br />
爱好：
<input type="checkbox" name="hobit" />羽毛球
<input type="checkbox" name="hobit" />篮球
<input type="checkbox" name="hobit" />乒乓球
<br /><br />
籍贯：
<select>
	<option value="请选择">请选择</option>
	<option value="重庆市">重庆市</option>
	<option value="北京市">北京市</option>
</select>
<br /><br />
<textarea rows="6" cols="25">
	自我介绍......
</textarea>
<br />
<input type="submit" value="注册"  /><br  />
</form>
	</body>

效果：

前端三板斧之了解学习前端学习

框架标签

注意：frame标签不能与body标签共存，必须放在body标签上面或者删掉body标签

框架标签：frame

一个frame中包含一个html页面

frame的src属性：链接当前所包含的页面

当有两个或两个以上的html页面组成的时候，需要用frame标签：框架集

属性：

rows：表示当前横向划分后，每一个部分所占当前整个的比例的权重！
cols：竖向划分（由左到右），每一个部分所占的权重的百分比

这里我们创建一个文件夹，里面存放框架中的每个模块；

先创建框架标签的主模块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="20%,*">
		
		<frame src="logo.html" />
		<frameset cols="25%,*">
			<frame src="left.html" />
			<!--frame中的name属性，是为了左边的菜单栏点击超链接后能在main框中显示-->
			<frame src="main.html" name="main" />
		</frameset>
		
	</frameset>
	<body>
	</body>
</html>

然后分别创建left.html 、logo.html、main.html（）这三个都是非常简单的，这里就只展示left.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单栏</title>
	</head>
	<body>
		<ul>
			<li><a href="http://www.baidu.com" target="main">学生成绩查询</a></li>
			<li><a href="http://www.baidu.com" target="main">学生考试查询</a></li>
			<li><a href="http://www.baidu.com" target="main">学生学费查询</a></li>
			<li><a href="http://www.baidu.com" target="main">学生课表查询</a></li>
			
		</ul>
	</body>
</html>

最终在网页上的效果如下：

前端三板斧之了解学习前端学习

点击左边的任意一个超链接后页面如下：

前端三板斧之了解学习前端学习

注意：如果在left中不指定target属性的话，超链接点击过去后百度页面会显示在左边那个小框架里，显然不合适，所以需要在框架标签中指定name属性和在超链接中指定target属性；

2. CSS

1.CSS的引入方式（3种）

行内样式：在当前所在标签中指定style属性**（不推荐）**

弊端：1. CSS代码和html标签混在一起，不利于后期管理

2.一次只能控制一个标签
内部样式：需要在head标签体中定义一个style标签（常用）

弊端：1.css代码和html标签都在一个页面上，所以不利于后期管理
企业：前端人员：外部样式

1.创建一个独立的以后缀名.css结尾的文件

2.引入外部css文件

2.CSS选择器（使用前三种居多）

0. 选择器优先级（⭐）

选择器使用时的优先级：id选择器 > class选择器 > 标签选择器

相当于：当同时使用上面几种选择器时，会按照上面的优先级来进行执行，优先级低的会被优先级高的覆盖

1.id选择器（推荐⭐）

在标签中指定id属性值，而且id必须是唯一的

为什么要唯一呢？

因为在JS中用到：getElementById(“id”).value ，这是获取表单中的用户信息的操作；
而前端要考虑到浏览器的兼容问题：即给标签指定id属性，他能保证不同浏览器中对页面的兼容问题，因为id是唯一的；

/*style标签是包含在head标签中的哟*/
<style>
	#a_id1{
		font-size: 36px;
		color: #000;
	}
</style>

<body>
<a id="a_id1" href="#">超链接1</a><br />
<a id="a_id1" href="#">超链接2</a><br />
<a href="#">超链接3</a>
</body>

运行后的效果：

前端三板斧之了解学习前端学习

2.class（类）选择器

需要在标签中指定class属性，在同一个html页面中

/*style标签是包含在head标签中的哟*/
<style>
	.a1{
		font-size: 30px;
		color: #0F0;
	}
</style>

<body>
<a class="a1"  href="#">超链接1</a><br />
<a class="a1" href="#">超链接2</a><br />
<a href="#">超链接3</a>
</body>

运行后效果如下：

前端三板斧之了解学习前端学习

3.element（元素/标签）选择器

标签名称（元素） {

css样式代码

}

在上面的html页面中，直接运行会出现三个超链接，颜色默认是蓝色的

当我们使用element选择器后，能指定它的一些属性，比如改变它的颜色，下面代码是改变成红色：

/*style标签是包含在head标签中的哟*/
<style>
	a{
		color:#F00;
		font-size:24px;
	}
</style>

4. 并集选择器

/*style标签是包含在head标签中的哟*/
<style>
#a_id1,.a1{
	font-size: 26px;
	color: #CCC;
}
</style>

<body>
<a class="a1" id="a_id1" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >超链接1</a><br />
<a class="a1" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >超链接2</a><br />
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >超链接3</a>
</body>

效果如下：

前端三板斧之了解学习前端学习

5.交集选择器（前端框架：Jquery：子元素选择器）

/*style标签是包含在head标签中的哟*/
<style>
	#a_id1 span{
	font-size:30px;
	color: greenyellow;
}
</style>

<body>
<a class="a1" id="a_id1" href="#">超链接1<span>子元素</span></a><br />
<a class="a1" href="#">超链接2</a><br />
<a href="#">超链接3</a>
</body>

显示效果：

前端三板斧之了解学习前端学习

6.通配符选择器

将页面中所有元素全部选中进行设置，这种一般用不到

*{
		font-size: 36px;
		color: pink;
	}

3.伪类选择器（锚伪类）

描述的是一个标签的状态

link状态：鼠标没有访问过的状态
hover状态：鼠标经过的状态
active状态：鼠标激活状态，点击了，但是鼠标没有松开的状态
visited状态：鼠标已经点击了并且松开了的状态

下面来写一个案例：

这个案例用来描述一个超链接初始、被鼠标扫过、被鼠标点击但未松开、已被点击后的状态

<style>
	/*link状态*/
	a:link{
		font-size: 20px;
		color: #00FF00;
		/*文本修饰:去掉下划线*/
		text-decoration: none;
	}
	
	/*visited状态*/
	a:visited{
		font-size: 20px;
		/*灰色*/
		color: #CCC; 
		text-decoration: underline;
	}
	
	/*hover状态*/
	a:hover{
		font-size: 26px;
		/*红色*/
		color: #FF0000;
		/*显示下划线*/
		text-decoration: underline;
	}
	/*active状态*/
	a:active{
		font-size: 36px;
		/*粉色*/
		color: #FFC0CB;
		/*文本修饰:去掉下划线*/
		text-decoration: none;
		
	}
	
</style>

<body>
<a href="#">超链接</a>
</body>

1. 伪类选择器典例

我们来做一个表格，当鼠标经过表格的每行时（除表头），每行变成粉红色，当鼠标经过表头时，表头变成灰色，

而且鼠标经过每个单元格时（除表头），会将鼠标的箭头变成小手形状；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类练习</title>
		<style>
			/*文本左右居中*/
		    tr{
		    	text-align: center;
		    }
		    
		    /*伪类选择器*/
		   tbody tr:hover{
		   	background-color: #00F;
		   }
		   tHead :hover{
		   	background-color: #CCCCCC;
		   }
		  td:hover{
		  	/*cursor:经过每个单元格:鼠标变成小手*/
		  	cursor: pointer;
		  }
		</style>
	</head>
<body>
<table token string">"1px"  cellpadding="5" align="center" width="400px" height="400px"> 
	<tHead>
	<tr>
		<th>序号</th>
		<th>姓名</th>
		<th>成绩</th>
		<th>班级</th>
	</tr>
	</tHead>
	<!--在表格中，可以用一个标签来包住-->
	<tbody>
	<tr>
		<td>1</td>
		<td>张三</td>
		<td>75</td>
		<td>软工1班</td>
	</tr>
	<tr>
		<td>2</td>
		<td>李四</td>
		<td>89</td>
		<td>计算机1班</td>
	</tr>
	<tr>
		<td>3</td>
		<td>王五</td>
		<td>79</td>
		<td>软工1班</td>
	</tr>
	</tbody>
</table>
</body>
</html>

效果如下：（截图过程鼠标无法扫过，所有只有这样的效果）

前端三板斧之了解学习前端学习

2. CSS文本属性

这里我只简单运用几个属性，要了解更多属性及其用法，请参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS文本属性</title>
<style>
	/*用body块来实现对body中文本的修饰*/
	body{
		/*文本的颜色*/
		color:#F00 ;
		
		/*letter-spacing:字符间距*/
		letter-spacing: 10px;

		/*text-align:文本排列*/
		text-align: center;
		
		/*text-decoration:文本修饰
		   none:没有修饰
		   underline:下划线
		   overline:上划线
		   line-through:中划线: 应用场景:电商网站中原价商品
		 * */
		text-decoration: line-through;
	}
</style>
	</head>
	<body>
欢迎学习前端语言
	</body>
</html>

效果如下：

前端三板斧之了解学习前端学习

3. CSS列表属性

下面写一个例子，来实现对列表的简单CSS修饰，列表前面默认是一个小黑圆点，这里我们将它设置为一个小正方形黑点，我们也可以自定义设置成一个图片（注释里有实现方法）；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS列表属性</title>
		<!--
			
			如果在列表标签中要自定义列表项前的标记图形：必须指定
			list-style属性
		-->
		<style>
			ul{
				
				/*list-style-type:自定义列表项的标记*/
				/*list-style-type: none;*/
				/*list-style-image:自定义列表项标记的图形：url*/
				/*list-style-image: url(img/start.jpg);*/
				
			/*list-style的简写属性*/
			list-style: amharic-abegede;
			}
		</style>
	</head>
	<body>
	<h2 align="center">西安科技大学教务系统</h2>
		<ul type="square">
			<li>选课管理</li>
			<li>成绩管理</li>
			<li>教务管理</li>
		</ul>
	</body>
</html>

显示效果：

前端三板斧之了解学习前端学习

4. CSS表格属性

CSS也有表格属性，用table块来实现（下面代码没有显示对应的table代码）

<style>
			/*设置表格的边框线的合并*/
			table{
				/*这个CSS属性的效果相当于table 标签的属性：cellspacing*/
                /*下面这个属性设置了表格中每条条线重复无间距*/
				border-collapse: collapse;
			}
		</style>

前端三板斧之了解学习前端学习

前端学习

文章目录

1. html

1. html标签：图像标签

2. 表格标签

table标签中常用属性

表格标签的用法

3. 表单标签

框架标签

2. CSS

1.CSS的引入方式（3种）

2.CSS选择器（使用前三种居多）

0. 选择器优先级（⭐）

1.id选择器（推荐⭐）

2.class（类）选择器

3.element（元素/标签）选择器

4. 并集选择器

5.交集选择器（前端框架：Jquery：子元素选择器）

6.通配符选择器

3.伪类选择器（锚伪类）

1. 伪类选择器典例

2. CSS文本属性

3. CSS列表属性

4. CSS表格属性

继续阅读