html+css学习总结

最新推荐文章于 2024-06-26 18:06:02 发布
最新推荐文章于 2024-06-26 18:06:02 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 内功修炼 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangzenglei/article/details/44754065
版权

HTML+CSS+JQuery实现Web设计、验证和跳转功能

    实习第一周，初步完成HTML、CSS和JQuery的功能性学习，并且在项目经理的指导下完成了信息登记网页的设计以及JQuery事务响应的功能。

   星期一任务:运用HTML绘制简历表格

学习情况：基本完成了对HTML基础部分的学习，但是对HTML+Css的使用仍然不是很熟练的。

         1.开发工具

              1】apache-tomcat-6.0.37-windows-x64
              2】eclipse 3.5
              3】eclipse-jee-indigo-SR2-win32-x86_64
              4】jd-gui
              5】jdk-6u45-windows-i586
              6】PLSQL Developer10.0.3.1701_keygen
              7】plsqldev1004
              8】TortoiseSVN-1.8.10.26129-win32-svn-1.8.11.1420009704
              9】win32_11gR2_database_1of2
            10】win32_11gR2_database_2of2
            11】wrar521sc_setup.1426841415

            【红色部分软件需要重点了解】

        2.HTML知识点总结

      1】对于基本标签的使用：html、head、body、p、br、table、tr（行）、td列、img（相对路径与绝对路径）

              2】标签一般成对出现，除了img和br之外。

        3、遇到的问题

             当对HTML标签大小进行修改时总是不能对标签进行独立修改

             解决方案：将其放入不同的table中，从而互不影响。

            周二到周五任务：熟悉Javascript和JQuery，并且完成网页的基本功能<!DOCTYPE>

<!DOCTYPE>
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="C:\Users\Administrator\Desktop\2105-4-2\jquery.js" >
  </script>
  <script>
/*	$(document).ready(function(){
		$("#username").blur(function(){
			var user=$("#username").val();
				if(user=="1"){
					alert("请输入用户名");}		
		});
		 $("#username").focus(function(){
			$("#username").css("background-color","#FFFFCC");
		 });
				
	});*/
	var password=$("#password").val();
	var assure_password=$("#assure_password");
	<!--用户名表单验证函数-->
	$(document).ready(function(){								//当无反应时考虑你的jQuery是否引用正确，这是一般方法：采用alert()函数进行测试
		
		//$("#username").focus(function(){						//引用Jquery一般是先用<script>进行引用，再在另一个<script>编写函数
			//alert("OK");
		//});
		//$("#username").blur(function(){
			//alert("hi");
			$("#username").blur(function(){
				if($("#username").val()==""){
					alert("请输入用户名");
				}
			});
		//});
			$("#password").blur(function(){
				if($("#password").val()==""){
					alert("请输入密码");
				}
			});
			
			$("#assure_password").blur(function(){
				if($("#assure_password").val()==""){
					alert("请输入密码");
				}
			});
			
			if (password!=assure_password)
			{
					alert("两次密码不一致");
			}

			
	});

	</script>
	<script>

$(document).ready(function(){
	
	$("#btn1").click(function(){
		
	});
	});
</script>


 </head>
<body>
	 <table  align="center" width="100" height="150">
	 </table>
	<table  align="center" width="100">
	<b>员工注册</b>
	</table>
	<br/>
	<br/>
	 <div  style="position:relative padding-top:1300px;" >
		<table align="center">
				<tr>
					<td>
						<b> 用户名</b>
					</td>
					<td>
					<form >
						<input id="username" type="text"/>
					</form>
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b>  密   码  </b>
					</td>
					<td>
					<form>
						<input id="password" type="text"/>
						</form>
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b> 确认密码</b>
					</td>
					<td>
					<form>
						<input id="assure_password" type="text"/>
						</form>
					</td>

				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b> 性 别 </b>
					</td>
					<td>
					<form>
						<input id="sex" name="sex" type="radio" value="male"/>男
						<input id="sex" name="sex" type="radio" value="female"/>女
						</form>															<!--input 的参数还不清楚-->
					</td>
				</tr>
		</table>
		<br/>
		<table align="center">
				<tr>
					<td>
						<b>生日 </b>
					</td>
					<td>
					<form>
				<select name="year">
				<option value="2014">1992</option>
				<option value="2015">1993</option>
				<option value="2014">1994</option>
				<option value="2015">1995</option>
				<option value="2014">1996</option>
				<option value="2015">1997</option>
				<option value="2014">1998</option>
				<option value="2015">1999</option>
			</select>年
			<select name="month">
				<option value="12">12</option>
				<option value="11">11</option>
				<option value="10">10</option>
				<option value="9">9</option>
				<option value="8">8</option>
				<option value="7">7</option>
				<option value="6">6</option>
				<option value="5">5</option>
				<option value="4">4</option>
				<option value="3">3</option>
				<option value="2">2</option>
				<option value="1">1</option>

		</select>月 
		<select name="day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
		</select>日
	</form>
		</td>
				</tr>
		</table>
		<br/>
		<!--实现三级联动菜单的跳转-->
	<div class="info" align="center">
	<div>
	<select id="s_province" name="s_province"></select>  
    <select id="s_city" name="s_city" ></select>  
    <select id="s_county" name="s_county"></select>
    <script class="resources library" src="http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/area.js" type="text/javascript"></script>
    <script type="text/javascript">_init_area();</script>
    </div>
    <div id="show"></div>
</div>
<script type="text/javascript">
var Gid  = document.getElementById ;
var showArea = function(){
	Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	
	Gid('s_city').value + " - 县/区" + 
	Gid('s_county').value + "</h3>"
							}
Gid('s_county').setAttribute('onchange','showArea()');
</script>
<br/>
		<br/>
		<br/>

		<!--实现页面的跳转-->
		<table align="center">
		<form>
		<input type="button" name="registration" value="注册成功" id="btn1" οnclick="location.href='http://www.baidu.com'"/>
		</form><!--实现页面的跳转-->
		</table>
  </div>
 </body>
</html>


MrLeion
关注
专栏目录
HTML/CSS学习总结
豪阁的个人博客
01-01 3729
哈喽，各位新年快乐呀！今天是2019年的第一天，在这里祝愿大家新的一年能够身体健康、事事顺利，同时希望自己能够在新的一年里完成自己当初所定下的目标。 言归正传，很高兴我并没有经过多久继续更新博客，上一次发博还是在一周前的平安夜。在这一周的闲余时间里我抓紧时间学习，在W3School中文站把HTML/HTML5和CSS/CSS3的基础耐心地过了一遍，期间也完成了一些实例和测验，由于存在以往自身在其...
CSS学习总结
insertyou
09-30 398
原本我们通过对HTML元素加一些附加属性进行改变页面的外观，比如width、height、bg-color、padding、spacing等属性。 现在有了CSS能够把页面布局和页面外观完全分离开来。只需要把css链接到文本里就可以实现改变外观。 css相对于传统的方法最明显的优势：如果你想要把所有的h1元素全部设置成统一的样式，传统的方法需要一个一个设置，而css则只需要一个设置即可。 C...
实训内容总结 day01（学习使用vscode，初识HTML和CSS）
最新发布
weixin_68872774的博客
06-26 871
记录学校实训，第一节课学习的基本内容，有关HTML的一些基础知识以及vscode的使用。
HTML&CSS学习总结
weixin_56033245的博客
07-10 66
****HTML html简介：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置
html和css总结
saygoodto的博客
11-04 384
html和css总结 学习已经有一个月了，html和css也已经学完，在学习过程中不免会遇到大大小小的问题 就html而言，虽然很多都是基础，但各自又有很多规则需要记忆，如块元素和内联元素，他们有着各自的特点，块级元素就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子，而内联元素则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对内联元素设置高度、
大屏可视化，html+CSS+JS+echarts
10-31
总结来说，“大屏可视化，html+CSS+JS+echarts”是一个结合了前端基础技术与专业可视化库的实践领域，它能够帮助我们构建出强大且美观的大型数据展示平台，有效地传达复杂的信息。通过不断学习和实践，你将能够掌握...
学生信息管理系统(html + js + css)
07-01
总结来说，"学生信息管理系统(html + js + css)"是一个集成了HTML结构、CSS样式和JavaScript交互的实例，它充分展示了前端技术在实际项目中的应用，是学习和提升Web开发技能的理想平台。通过这样的项目实践，开发者...
div+css学习总结.doc
10-07
DIV+CSS 学习总结 DIV+CSS 是一对强大的前端开发组合， DIV responsible for structuring content on the web page, while CSS is responsible for styling and layout. In this summary, we will cover the ...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
总结来说，这个电商网站项目结合了HTML、CSS和JavaScript，涵盖了前端开发的基础要素。通过实际操作，学习者不仅可以掌握网页结构的构建，还能理解样式设计和交互逻辑，对提升前端开发技能有显著帮助。对于学生和...
html-css的学习总结
zqkzc的博客
03-27 136
html-css clear==>清楚浮动元素对当前元素的影响 clear: both; ​ clear ​ 作用： ​ *清楚浮动元素对当前元素所产生的影响* ​ *可选值：* ​ *left 清楚左侧浮动元素对当前元素的影响* ​ *right 清楚右侧元素对当前元素的影响* ​ *both 清楚两侧
html css学习总结
qq_59738304的博客
07-09 100
对其html,css的基本认识：HTMLHTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 通常我们需要掌握的标记/标签不多，如常见的 body、head、title、p、img、a、div、span、ol、table等。HTML5最新的 HTML5 规范摒弃了一些不合适的标签，同时引入了一些有效率、表达明确的标签如： header、footer、section、article、aside、nav等。CS
HTML,CSS总计学习心得
qq_54746841的博客
04-04 610
HTML语言是解释型语言，不是类似java那样的编译型语言，所以在运行时不会报错也可以运行，但是在运行中有语法错误的句子直接跳过，但java不同的是java是编译型语言，所以编译不通过的话，就不可以运行，HTML在浏览器运行时，在每个浏览器运行时会有误差的，因为每个浏览器是容错的，比如在谷歌浏览器和火狐浏览器运行结果可能不太一样。 HTML界面是由一对标签组成的：<html></html>开始标签和结束标签。 <title></title>是网页标题标签，
HTML，CSS学习总结
qq_53175673的博客
07-10 200
HTML,CSS小总结
HTML+CSS 学习总结
qq_45073203的博客
04-16 442
HTML 1、HTML 超文本标记语言 2、作用 写网页结构内容 3、文件后缀 .html 或者 .htm 4、HTML不区分大小写，建议小写 5、html由浏览器解析执行，由上往下，由左往右 6、标签 标记 元素 HTML由标签组成 标签是一对尖括号包含的关键词 双标记 封闭类型标记 h1-h6,div,span,p,b,i,u,s,del,sup,sub,em,strong,a,ul,ol,li,dl,dt,dd,form,button,textarea,table,tr,td,th,ca
HTML+CSS基础总结与特性解析
"HTML+CSS是构建网页的基本技术，HTML负责结构，CSS负责样式。HTML超文本标记语言由头部和主体两部分组成，用于组织网页内容，支持文字、图像、动画等多种元素，并通过超级链接实现页面间的互动。CSS则用于布局和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值