web学习

最新推荐文章于 2022-09-28 08:46:55 发布
最新推荐文章于 2022-09-28 08:46:55 发布
阅读量104 收藏
点赞数
分类专栏： html 文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41158699/article/details/90781495
版权

CSS

属性选择器

E[attr]:只使用属性名,但没有确定任何属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			a[href]{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<p>
			<a href="">存在属性href才可以</a>
		</p>
		<p>
			<a name="">存在属性href才可以</a>
		</p>
	</body>
</html>

E[attr=‘vaule’]指定属性名,并且指定该属性的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			input[type=text]{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<form action="" method="">
			<input type="text" name="" id="" value="" />
			<input type="textara" name="" id="" value="" />
		</form>
	</body>
</html>

E[attr~=‘value’]:指定属性名,并且具有属性值.此属性是一个词列表,中间以空格隔开.其中词列表中包含一个value词,而且等号前面个的’ ~ '不能省略

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			[class~='first']{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="first">属性值中存在或者含有first,需要空格分隔</li>
			<li class="second">属性值中存在或者含有first,需要空格分隔</li>
			<li class="third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first second">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="second third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first second third">属性值中存在或者含有first,需要空格分隔</li>
		</ul>
	</body>
</html>

E[attr^=‘value’]:指定属性名,并且有属性值,属性值是以value开头的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			p[title^=good]{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<p title="hello">属性开头必须是good</p>
		<p title='goodmor'>属性开头必须是good</p>
		<p title='Tgoodmor'>属性开头必须是good</p>
	</body>
</html>

E[attr^=‘value’]:指定属性名,并且有属性值,属性值是以value结尾的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			p[title$=good]{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<p title="hello">属性开头必须是good</p>
		<p title='goodmor'>属性开头必须是good</p>
		<p title='Tgoodmorgood'>属性开头必须是good</p>
	</body>
</html>

E[attr|=‘value’]:指定属性名,并且属性值是value或’value-‘开头的值’zh-ch’

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			[class|='second']{
				background-color: #CC6600;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="first">属性值中存在或者含有first,需要空格分隔</li>
			<li class="second">属性值中存在或者含有first,需要空格分隔</li>
			<li class="third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first-second">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first-third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="second-third">属性值中存在或者含有first,需要空格分隔</li>
			<li class="first-second-third">属性值中存在或者含有first,需要空格分隔</li>
		</ul>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			div{
				display: none;
			}   /* 有错误 */
			[class|="blue"]{
				display: block;
			}
			[class~='blue']{
				display: block;
			}
			[class^='Red']{
				display: block;
			}
			[class$='Green']{
				display: block;
			}
			[class*='gre']{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="red-blue-green">支持[|=](连字符匹配)属性选择器</div>
		<div class="red blue green">支持[~=](空白符匹配)属性选择器</div>
		<div class="Red-blue-green">支持[^=](前缀匹配)属性选择器</div>
		<div class="red-blue-Green">支持[$=](后缀匹配)属性选择器</div>
		<div class="red-blue-green">支持[*=](子字符串匹配)属性选择器</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			li{
				height: 100px;
				width: 100px;
				/* border: 1px solid #000; */
				float:left;
			}
			a.button{
				display: block;
				float:left;
				position: relative;
				height: 25px;
				width: 80px;
				margin: 0 10px 18px 0;
				text-decoration: none;
				font-size: 12px;
				font-weight: bold;
				line-height: 25px;
				text-align: center;
				
			}
			a.gray:hover,a.gray,a.gray:visited{
				color: #555;
				border-bottom: 4px solid #b2b1b1;
				background-color: #eee;
				background-color: linear-gradient(to top,#eee,#e2e2e2);
				box-shadow: 1px 1px 0 #f5f5f5 inset;
	
			}
			a.gray:hover{
				background-color: #e2e2e2;
				background-color: -webkit-linear-gradient(to top,#e2e2e2,#eee);
			}
			a.button:before,a.button:after{
				content: "";
				position: absolute;
				left: -1px;
				height: 25px;
				width: 80px;
				bottom: -2px;
				border-radius: 3px;
				border: 1px solid #CBCBCB;
			}
			a.button:before{
				height: 23px;
				bottom: -4px;
				border-top:0px ;
				border-radius: 0 0 3px 3px;
			
				box-shadow:0 1px 1px 0px #bfbfbf; 
			} 
			a.button{
				border-radius: 3px;
			}
			a.button:active{
				border: none;
				bottom: -4px;
				margin-bottom: 22px;
				box-shadow: 1px 1px 0 #fff ,inset 0px 1px 1px rgba(0,0,0,0.3);
				
			}
			a.button:active:before,a.button:active:after{
				border: 0;
				box-shadow:none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="" class="button gray">Download</a></li>
			<li><a href="" class="button pink">Download</a></li>
			<li><a href="" class="button green">Download</a></li>
			<li><a href="" class="button turquoise">Download</a></li>
			<li><a href="" class="button black">Download</a></li>
			<li><a href="" class="button darkgray">Download</a></li>
			<li><a href="" class="button yellow">Download</a></li>
			<li><a href="" class="button purple">Download</a></li>
			<li><a href="" class="button drakblue">Download</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
  	<head>
		<meta charset="utf-8">
		<title>立体字体</title>
		<style type="text/css">
			ol{
				list-style: none;
			}
			li:before{color: #f00;}
			li{
				counter-increment:a 1;
			}
			li:before{
				content:counter(a)'. ';
			}
			li li{
				counter-increment:b 1;
			}
			li li:before{
				content:counter(a)"."counter(b)'. ';
			}
			li li li{
				counter-increment:c 1;
			}
			li li li::before{
				content:counter(a)'.'counter(b)'.'counter(c)'.';
			}
		</style>
	</head>
	<body >
		<ol>
			<li>一级列表1
				<ol>
					<li>二级列表1<ol>
							<li>三级列表1</li>
							<li>三级列表2</li>
						</ol></li>
					<li>二级列表2
					<ol>
						<li>三级列表1</li>
						<li>三级列表2</li>
					</ol>
				</li>
				</ol>
			</li>
			<li>一级列表2</li>
		</ol>
	</body>
	
</html>

在这里插入图片描述


			div{
				 width:0px;
				height: 0px; 
				border-top:50px solid red;
				border-left:50px solid blue;
				border-bottom:50px solid black;
				border-right:50px solid yellow;
			}

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>你好
	</title>
	<style>
	
	</style>

</head>

<body>


	<script type="text/javascript">   
	// GO{
	// 	a:300;
	// 	demo:function(){

	// 	}
	// }
		a=300;
		function demo(e){
			// Ao{
			// 	e:function()
			// 	c:function();
			// 	a10;
			//  b:123
			// }
			function e(){}
			arguments[0]=2;
			console.log(e);        //2
			if(a){
				var b=123;
				function c(){
					//猪都ok
				}
			}
			var c;
			a=10;
			var a;
			console.log(b); //undefined
			f=123;
			console.log(c); //undefined
			console.log(a); //10
		}
		var a;
		demo(1);
		console.log(a);//300
		console.log(f);//123
	</script>
</body>

</html>
PBOVE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习书籍推荐
web前端新手学习之家
11-20 2303
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐。正在从事web前端工作的小伙伴们都知道，想要从事前端行业，要学习的内容太多了，当你不知道从哪里开始的时候，你就先从看书开始，边看书边码代码，这个是学习编程必须的过程，因为你看一百遍，还不如自己写一遍，写一遍，第一可以加印象，第二便于更好的理解。今天小编就为大家推荐几本适合web前端工程师学习前端技术的书籍，希望能够对小伙伴们有所...
web前端学习心得
keket1的博客
06-30 2284
web前端学习心得
java web学习心得
qq_42375391的博客
06-30 1万+
时光转瞬即逝，一个学期的java web课程完美结束了。在张老师的辛苦教导下，我学到了很多知识，例如：Web应用的基本概念与系统架构，HTML界面技术，CSS技术，JavaScript脚本技术，Servlet服务器编程技术、JSP编程技术及Web JDBC数据库开发技术等等。在收获这么多知识的同时，我也有了很多感受。 在刚开始接触这门课程时，感觉很困难，不知道从哪里下手，但在老师的教导下，多实践，多摸索，不要怕犯错误。一点点的，我开始走上了这门课程的正轨。在每次上课之前，一定要提前预习下节课程内容，...
web学习路线
仰起嘴角
04-09 1万+
前言 本文主要面向对象是web小白（或者和我一样只有一点基础的） 本文更偏向于web后端学习路线 本文所讲述的后端部分主要是Java web 些许兴趣 在正式开始学习之前，肯定是需要先小聊一波的啦。 俗话说得好，兴趣是最好的老师。我也一直很赞同这话，比如我自己喜欢的东西我一个人做着都忒起劲儿，要是我不喜欢的东西，就是给我很大的诱惑那也没法（或许这样的想法是不对的，也难怪我和大佬之间...
web渗透测试学习路线
热门推荐
m0_52051132的博客
03-26 2万+
web渗透学习路线 文章目录*web渗透学习路线*前言一、web渗透测试是什么？二、web渗透步骤1.前期工作2.中期提高后期打牢总结 前言 本文整理的学习路线，清晰明了，重点分明，能快速上手实践，相信想学的同学们都能轻松学完。都是干货啦，先收藏⭐再看吧。本文偏基础能让萌新们快速摸到渗透测试的门道，少走弯路，也能让正在学习的小伙伴们查漏补缺，也欢迎大佬们在评论区指正错误~ 这里附上我之前学习的路线图 提示：以下是本篇文章正文内容，下面案例可供参考 一、web渗透测试是什么？ Web渗透测试分为白盒测
java web开发（学习路线）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-28 2170
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 java语言天生就是为计算机网络开发而存在的。之前，学习java的时候，总觉得奇怪，为什么java语言用来做服务器很多，做web开发很多，但是做单机软件却不多。究其原因，主要还是java这门语言从一开始就是为网络设计的。单机版本身是工具类应用，而java主要用于平台类应用。当然用java开发单机应用也可以的，比如前端页面用vue来画，后端用java，这也不是不可以，就是部署的时候麻烦
java web 学习之路（学习顺序）建议
Txwtech笛克特科
12-12 3695
第一步：学习HTML和CSS 　　HTML（超文本标记语言）是网页的核心，学好HTML是成为Web开发人员的基本条件。HTML很容易学习的，但也很容易误用，要学精还得费点功夫。 　　随着HTML5的发展和普及，了解HTML5也将成为Web开发人员的必修课。 　　涉及到网页外观时，就需要学习CSS了，它可以帮你把网页做得更美观。 　　利用HTML和CSS模拟一些你所见过的网站的排版和布局（色
CTF Web学习（一）----基础篇及头文件修改、隐藏
网络猿的博客
01-10 3579
CTF Web学习 CTF Web学习（一）：基础篇及头文件修改、隐藏 CTF Web学习（一）：基础篇及头文件修改、隐藏 文章目录CTF Web学习前言一、直接查看源代码（一）F12看代码1、bugku web1题2、bugku web2题二、头文件、属性、隐藏等（一）input限制输入长度1、修改maxlength属性（二）修改头文件1、修改User Agent属性2、修改Accept-Language属性3、修改cookie4、头文件里藏flag5、域名解析（三）各种隐藏1、302隐藏2、js隐藏
Web学习之路
tjw191743的博客
01-07 2620
前言 希望通过博客来记录自己的学习过程，同时与各位同学分享web知识，由于本人也是入门小白，文章中难免出现错误，希望各位大佬能够不吝赐教。 文章目录前言一 什么是Javaweb二 学了Javaweb能做出什么东西三 Javaweb的学习路线 一 什么是Javaweb Javaweb就是实现web网站的开发技术，严格意思上它并非像java ,c++,数据库一样是一种独立的技术，它是结合了我们之前学过的很多知识所构成的一种开发手段，如JavaSE,MySQL,JDBC,网络编程，还有一些前端知识和开发框架。所以
CTF web安全45天入门学习路线
b1ackc4t的博客
01-23 7589
前言 因为最近在准备开发CTF学习平台，先做一个学习路线的整理，顺便也是对想学web的学弟学妹的一些建议。 学习路线 初期 刚刚走进大学，入了web安全的坑，面对诸多漏洞必然是迷茫的，这时的首要任务就是打好网站开发的基础，曾有伟人说过-“自己不会做网站，何谈去找网站的漏洞”，在学习漏洞前，了解基本网站架构、基础网站开发原理，基础的前后端知识，能够让你之后的漏洞学习畅通无阻。 html+css+js（2-3天） 前端三要素 html、css、js是被浏览器解析的代码，是构成静态页面的基础。也是前端漏洞如xss
web学习资料
09-09
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供...
web学习案例
12-28
【Web学习案例】是一个集合了多种Web开发技术的实践项目，涵盖了从基础的HTML到复杂的ASP.NET等多种语言。...总之，【Web学习案例】是一个宝贵的资源，无论你是新手还是经验丰富的开发者，都能从中受益。
web学习总结
03-01
这是比较基础的web学习资源，可以帮助理解web的开发，
web学习心得
12-30
Web 学习心得 本篇文章主要讲述了作者在学习 web 开发过程中的心得体会和收获。作者通过 9 周的学习，逐步了解了 web 开发的基础知识，并逐步掌握了超级链接、JavaScript 和 CSS 样式的应用。 知识点 1: Web 开发...
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
torchaudio-0.12.1+cpu-cp37-cp37m-win_amd64.whl
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
java web学习步骤
09-09
学习Java Web的一般步骤是：1、了解Java Web基础概念；2、学习如何使用Java语言进行Web编程；3、学习如何使用HTML，CSS和JavaScript构建Web页面；4、学习如何使用Servlet和JSP构建Web应用；5、学习如何使用Java EE...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值