web 前端

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的部分选择器








  • 7
    点赞
  • 4
    评论
  • 29
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 4 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

_Ifrit

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值