本人学习HTML编程笔记资源-CSDN文库

共64个文件

html：61个

css：2个

xml：1个

需积分: 6 166 浏览量 2008-09-26 17:57:56 上传评论收藏 30KB RAR 举报

HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础，也是互联网上应用最为广泛的语言之一。HTML编程笔记主要记录了在学习HTML过程中的一些关键概念、语法结构和实践经验，对于初学者来说是一份很好的参考资料。下面将详细阐述HTML的核心知识点。 1. HTML文档结构：HTML文档通常由三部分组成：文档声明（<!DOCTYPE html>）、HTML元素（<html>）以及头部和主体元素。头部（<head>）包含元数据，如标题（<title>），而主体（<body>）则包含实际可见的内容。 2. HTML标签：HTML标签是定义网页内容和结构的关键元素，如标题标签（<h1>到<h6>）、段落标签（<p>）、无序列表（<ul>）和有序列表（<ol>）、链接标签（<a>）、图像标签（<img>）等。正确使用这些标签可以使页面结构清晰，有助于搜索引擎优化。 3. 内联元素与块级元素：内联元素（如<a>、<span>）不占据整行，可以并排显示，而块级元素（如<p>、<div>）会独占一行。理解它们的区别，有助于布局设计。 4. CSS样式：虽然不是HTML本身的一部分，但CSS（层叠样式表）与HTML紧密相关，用于控制网页的外观。通过类（class）和ID选择器，可以为HTML元素添加样式，实现颜色、字体、布局等视觉效果的定制。 5. HTML5新特性：HTML5引入了许多新元素和功能，比如音频和视频标签（<audio>、<video>）、canvas画布用于动态图形、section元素（<section>、<article>）增强语义化、离线存储（Application Cache）等，使得网页开发更加丰富和强大。 6. 表单控件：HTML中的<form>元素用于创建交互式表单，常见的表单控件有文本输入框（<input type="text">）、密码输入框（<input type="password">）、复选框（<input type="checkbox">）、单选按钮（<input type="radio">）等，配合<button>和<label>标签可构建用户友好的交互界面。 7. 响应式设计：随着移动设备的普及，HTML5支持媒体查询（@media rule）来实现响应式设计，使网页能根据不同的设备屏幕尺寸自动调整布局，提供良好的用户体验。 8. 实例练习：通过实际的HTML练习，可以巩固理论知识，加深对标签使用、文档结构和页面布局的理解。例如，创建一个简单的个人简历页面，包含头像、个人信息、技能列表、项目经验等部分，可以锻炼实际操作能力。以上是对HTML编程笔记中可能涵盖的主要知识点的总结。在学习过程中，不断实践和查阅相关资料，是提高HTML技能的有效方法。通过这样的笔记，初学者不仅可以了解基本概念，还能积累实用技巧，为后续的Web开发打下坚实基础。

资源推荐

资源详情

资源评论

收起资源包目录

html联习.rar （64个子文件）

html联习

4-13指定背景图片.html 196B

4-9使用图片连接.html 222B

8-18混合属性.html 1KB

8-13属性.html 625B

4-5垂直对齐方式.html 340B

8-16容器属性.html 998B

7-3密码域.html 444B

9-4弹出小窗体.html 357B

9-10标记的比较.html 775B

8-17列表属性.html 482B

8-10text-indent和text-transform属性.html 778B

样式表文件.css 292B

9-7区域设置.html 374B

练习九.html 5KB

8-12color属性.html 527B

9-1添加视频文件.html 666B

7-1使用文本域.html 364B

6-8嵌套框架.html 262B

3-21无序列表.html 360B

8-2内联式样式表.html 234B

6-2在一个页面中放置两个框架.html 175B

9-3添加javaScript.html 143B

9-15文字阴影.html 408B

8-1样式表范例.html 567B

8-8样式表的继承性.html 328B

8-3嵌入式样式表.html 450B

5-10单元格对齐方式.html 470B

8-9情景选择.html 306B

9-6滚动广发.html 2KB

8-4输入外部样式表.html 369B

3-23定义列表.html 544B

9-11区域定位.html 455B

tree.xml 407B

3-22列表嵌套.html 488B

5-15行编组例示.html 568B

6-16浮动框架.html 486B

9-2添加flash.html 590B

example.css 71B

8-14属性.html 693B

8-15字体属性.html 495B

9-5文字特效.html 964B

9-14区域层叠.html 610B

浮动框架.html 538B

8-5链接外部样式表.html 285B

练习题

练习8.html 1KB

第六章联习

disanzhang.html 195B

kuangjia.html 310B

lianjie.html 364B

L.html 180B

fudong.html 202B

dierzhang.html 2KB

qianyan.html 451B

diyizhang.html 1KB

练习7.html 2KB

练习5.html 870B

练习三.html 542B

9-16示例.html 341B

9-9标记的区域设计.html 756B

4-15客户端地图实例.html 543B

7-12全部标记显示.html 1KB

8-11text-align属性.html 723B

8-7首字和首行.html 232B

9-8多标记区域.html 560B

8-6ID规则使用.html 515B

<html> <head> <title>练习九</title> <script LANGUAGE="JavaScript"> var brOK=false; var mie=false; var aver=parseInt(navigator.appVersion.substring(0,1)); var aname=navigator.appName; function checkbrOK() {if(aname.indexOf("Internet Explorer")!=-1) {if(aver>=4) brOK=navigator.javaEnabled(); mie=true; } if(aname.indexOf("Netscape")!=-1) {if(aver>=4) brOK=navigator.javaEnabled();} } var vmin=2; var vmax=5; var vr=0.02; var timer1; function Chip(chipname,width,height) {this.named=chipname; this.vx=vmin+vmax*Math.random(); this.vy=vmin+vmax*Math.random(); this.w=width; this.h=height; this.xx=0; this.yy=0; this.timer1=null; } function movechip(chipname) { if(brOK) {eval("chip="+chipname); if(!mie) {pageX=window.pageXOffset; pageW=window.innerWidth; pageY=window.pageYOffset; pageH=window.innerHeight; } else {pageX=window.document.body.scrollLeft; pageW=window.document.body.offsetWidth-22; pageY=window.document.body.scrollTop; pageH=window.document.body.offsetHeight-34; } chip.xx=chip.xx+chip.vx; chip.yy=chip.yy+chip.vy; chip.vx+=vr*(Math.random()-0.5); chip.vy+=vr*(Math.random()-0.5); if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx; if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx; if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy; if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy; if(chip.xx<=pageX) {chip.xx=pageX; chip.vx=vmin+vmax*Math.random(); } if(chip.xx>=pageX+pageW-chip.w) {chip.xx=pageX+pageW-chip.w; chip.vx=-vmin-vmax*Math.random(); } if(chip.yy<=pageY) {chip.yy=pageY; chip.vy=vmin+vmax*Math.random(); } if(chip.yy>=pageY+pageH-chip.h) {chip.yy=pageY+pageH-chip.h; chip.vy=-vmin-vmax*Math.random(); } if(!mie) {eval('document.'+chip.named+'.top ='+chip.yy); eval('document.'+chip.named+'.left='+chip.xx); } else {eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx); eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy); } chip.timer1=setTimeout("movechip('"+chip.named+"')",100); } } function hide(chipname){ if(brOK){ eval("chip="+chipname); if(!mie) eval('document.'+chip.named+'.visibility ='+"'hide'"); else eval('document.all.'+chip.named+'.style.visibility ='+"'hidden'"); } } function stopme(chipname) {if(brOK) {//alert(chipname) eval("chip="+chipname); if(chip.timer1!=null) {clearTimeout(chip.timer1)} } } var chip1; function pagestart() {checkbrOK(); chip1=new Chip("chip1",117,75); if(brOK) { movechip("chip1"); } } //if(brOK) {stopme('chip1');} </script> <DIV id=chip1 style="height: 105; position: absolute; visibility: visible; width: 140; left: 180; top: 157"> <TABLE border=0 cellPadding=4 cellSpacing=0 class=bd width=60> <TBODY> <TR> <TD align=middle class=bg2><A class=prs1 href="http://blueant1006.myetang.com" target=_blank> <IMG border=0 class=bd src="D:\资料\娱乐\0006.jpg" width="150" height="150"></A></TD></TR></TBODY></TABLE></DIV> <SCRIPT event=onload for=window language=JavaScript> pagestart(); </SCRIPT> <style type="text/css">  </style> </head> <body> <table border="0"> <tr><td width="1055" >     <span><img src="D:\资料\娱乐\0003.jpg" width="75" height="75">    </span> <span><img src="D:\资料\娱乐\012l.jpg" width="75" height="75">    </span> <span> <div class="ex1" align="center">SAP的王朝</div> <div class="ex2" align="center">SAP的王朝</div> </span>                               <span><img src="D:\资料\娱乐\002ab.jpg" width="75" height="75">    </span> <span><img src="D:\资料\娱乐\a.jpg" width="75" height="75">    </span> </td></tr> <tr><td>      最新咨询      全球趋势                                    &nbsp教你理财      我的家园</td></tr> <tr><td height="10" bgcolor="#33CC99"></td></tr> <tr><td> <ul > <li>记住该记住的，忘记该忘记的，改变能改变的，接受不能改变的. <li>后悔是一种耗费精神的情绪 <li>真正的爱情是不讲究热闹不讲究排场不讲究繁华更不讲究嚎头的。 </ul> </td></tr> <br><br> <tr align="right"> <td align="right"><embed src="D:\资料\娱乐\a.swf" quality="high"puginspage="http://www.macromedia.com/go/getflashplayer" width="300" height="300"/></td></tr> </table> </body> </html>

评论收藏

内容反馈