web 前端

最新推荐文章于 2022-10-03 13:38:05 发布

_Ifrit

最新推荐文章于 2022-10-03 13:38:05 发布

阅读量1.9k

点赞数 7

分类专栏： web前端文章标签： web 前端

本文链接：https://blog.csdn.net/sinat_39783636/article/details/77539895

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML：超文本标记语言

超级文本标记语言，通过标记符号来标记要显示的网页中的各个部分

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器内容的显示方式

浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容

HTML的基本结构

<html>
        <head></head>
        <body></body>
    </html>

head标签

在head标签中内容有：页面的标题、字符编码、JS或JS的链接、css或css链接、搜索关键字等相关信息

<head>
        <title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
    </head>

body标签

页面要显示的内容放在body标签中，通过标签来封装内容，告诉浏览器如何显示内容，包括文本，图片，视频，音频

常用标签：

展示数据的标签分为：行级标签和块级标签

块级标签：默认占浏览器宽度100%，会自动换行

1. p

2. div

3. hr

4. ul->li

5. ol->li

6. dl->dt->dd

[1] dl为定义列表

[2] 一般dt用来放图片，且一个dl里只有一个

[3] dd与dt同级，用来放文字

7. form

8. table->tr->td

9. h1-6

行级标签：只占自身宽度，不会自动换行

1. span

2. a

3. img

4. br

5. strong 加粗

6. em 倾斜

7. input

CSS：层叠样式表

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

行内样式：只对所在的标签有效

内嵌样式：只对本页面有效

外部样式：可以针对整个网站有效

样式优先级

有冲突的样式以优先级高的起效，不冲突的样式全部起效

id选择器 > class选择器 > 属性选择器

行内样式 > 内嵌样式 > 外部样式

伪类样式，声明顺序 link》visited》hover》active

页面标准布局

宽为1024-20,20为滚动条的宽度，因此减去这个数

拐角型：上层logo导航，中层左边导航，右边主内容，下层版权内容

国字型：上层logo导航，中层左边导航，中间主内容，右边广告，下层版权内容

JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

例子：省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var pro = new Array();
			pro["广东"] = ["广州", "深圳", "珠海", "韶关", "汕头", "茂名"];
			pro["湖南"] = ["长沙", "衡阳", "吉首", "岳阳", "邵阳", "株洲", "湘潭"];
			pro["湖北"] = ["武汉", "荆州", "宜昌", "黄岗", "仙桃"];
			pro["安徽"] = ["合肥", "黄山"];
			pro["河南"] = ["郑州", "信阳", "洛阳"];
			
			function getProvince() {
				var province = document.getElementById("province");
				for(var p in pro) {
					province.add(new Option(p, p), null);
				}
			}
			
			function getCity() {
				var province = document.getElementById("province");
				var city = document.getElementById("city");
				var res = province.value;
				
				city.options.length = 1;
				
				for(var i in pro[res]) {
					city.add(new Option(pro[res][i], pro[res][i]), null);
				}
			}
		</script>
	</head>
	<body οnlοad="getProvince();">
		省：<select id="province" οnchange="getCity();">
			<option value="0">-请选择-</option>
		</select>
		市：<select id="city">
			<option value="0">-请选择-</option></select>
	</body>
</html>

JQuery

jQuery是一个快速、简洁的JavaScript框架

jQuery具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展

jQuery的部分选择器