篇一：关于学习HTML的报告
关于学习HTML的报告
较以往之寒假，此次寒假实属充实。在老师的提议下我们学习了超文本标记语言——HTML,初步接触了简单网页的制作过程，了解到色彩斑斓的网页之内质，并亲自动手做了几个小网页。内心翻滚所谓收获不小啊！ 初期的网站都是由静态网页组成，网页中只有文字、图形、图像等，用户只能被动的接受这些信息。那时的web页面的核心是HTML，它编写很方便，不要求有特定的语言环境，可以有任何一种编辑器写好（如word、写字板、记事本），然后可以放到浏览器观看结果。现在HTML已经有很多专门的编辑软件，如Frontpage、Hotdog、Dreamweaver等。
HTML的历史最早可以追溯到20世纪40年代。在1945年，Vannevar Bush在一篇文章中阐述了文本和文本之间通过超级链接相互关联的思想，并在文中给出了一种能实现信息关联的计算机Memex的设计方案。随后经过一系列的发展研究，1989年Tim Berners_Lee对SGML做了大刀阔斧的简化和完善，穿凿了最初的HTML，并用它在自己编写的图形化Web浏览器上看得到最早的web页面。
第一次自学这种网页制作方面的知识，刚开始有点无力，随后边看书边在电脑上试着操作，基本掌握了相关知识。
通过学习，静态网页的制作可以概括为5个部分：
1、网页素材搜集与制作
即网页中一些图像的处理与动画的制作。
2、网页版式设计
规划各元素在网页中的位置按大方关系和表现方法，合理安排图像、文
本等元素，是网页布局合理，美观大方。
3、文本编写
自己的网页中需要大量的文字材料，这就要在网页编辑器中用HTML语言中的标签编写，也可以利用网页编辑工具的相关功能，直接写入文字。
4、处理网页之间的关联
这主要是建立合理、高效的网页导航系统。
5、网页发布
主要是将建设好的网页上传到服务器中供用户浏览。
虽然知道网页制作的基本过程，但对其细节还点朦胧，特别是网页中图像及动画的制作处理。有时候一个网页得处理好几次最终才能成功显示。想来我们对于此项处理还是不够熟练、敏感，以后还要多加练习，并对其细节做以仔细研究，日后必可下这一巨石！
在21世纪，信息技术的发展保持着强劲的势头，信息千变万化。而网站则提供了展示这些信息的平台。有了网页，能更好更方便快捷的将世界各个角落的面孔展现在人们面前，可以使万千企业的业务展现给客户。对我们眼下最近的对于个人电脑的购买更是有利。我们可以在相关网页上找到各种信息进而避免受骗。网页使得信息快速交流，更为新时代之一大成功。
是的，信息技术是当代人类社会发展最快，渗透性最强，应用面最广的先导技术。这些日新月异的新技术不仅仅改变了世界，也改变了人们的生活。
而信息时代离不开信息化人才,掌握计算机的各项基础知识并提高应用能力，是信息话人才培养的一个重要环节。这是从事许多行业必备的基本技能。 当然，有关HTML的学习只是学习中的一小部分，我们还要学习更多的有关计算机各个方面的知识。只有心志坚定，行动仔细严谨才能掌握好知识。今后我们还会接触更多的东西，在计算机这片大海中，我们得一步一个脚印，为自己打好基础。万事开头难，我们要开好头！但同时在以后的学习中也要保持初有的热情与信息。未来世界，必是我们的天下。不敢放出大话说将来会成多大气候，实事求是，现在多学一点知识多掌握点技能，我们将来的路也可以宽一点。最实在的是可以找一份好一点的工作。
在将后的学习中，我们应该为自己制定一项计划，照计划行事，争取早日成才，做一个真正有能力、有底气的大学生。
篇二：html学习总结
1. HTML 标签由开始标签和结束标签组成，空的 HTML元素没有结束标签，比如 <br />没有内容的 HTML
内容被称为空元素。空元素是在开始标签中关闭的。<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
2. HTML 标签及属性值 对大小写不敏感：<P> 等同于 <p>。W3School 使用的是小写标签，因为万维网联
盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'
3. <hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
4. <address> 可定义一个地址（比如电子邮件地址）。您应当使用它来定义地址、签名或者文档的作者
身份。
<address>
<a href="mailto:service@w3school.com.cn">用户服务信箱</a><br />
上海赢科投资有限公司<br />
金桥开发区 789 号<br />
</address>
5. 文本对齐：text-align:center;代替align:center;
6. Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创
建直接跳至定位至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。 使用<a>创建锚
<a name="tips">Useful Tips Section</a>
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：
<a href=".cn/html/html_links.asp#tips">
Jump to the Useful Tips Section
</a>
7.
格， <caption>定义表格的标题 colspan=”3”横跨三列的单元格；rowspan=”2”横跨两行的单元
Cell padding 来创建单元格内容与其边框之间的空白，Cell spacing 增加单元格之间的距离。
<table border="6">
<caption>我的标题</caption>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr></table>
8. 无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd; 自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
9.
10. 文字环绕图片，只需设置图片align=left即可实现图片在左的文字环绕，align=right可实现图片在右的文字环绕 通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩写图像
<img src="eg_mouse.jpg" width="128" height="128" alt=”鼠标图片”/>
alt:图像无法载入时，替换文本属性告诉读者们失去的信息。
11.使用框架导航跳转至指定的节
<a href ="link.html" tppabs=".cn/example/html/link.html" target ="showframe">没有锚的链接</a><br>
<a href ="link.html#C10" tppabs=".cn/example/html/link.html#C10" target ="showframe">带有锚的链接</a>
<frame src="../example/html/link.html"
tppabs=".cn/example/html/link.html" name="showframe">
导航框架：
<a href ="frame_a.html" tppabs=".cn/example/html/frame_a.html" target ="showframe">Frame a</a><br>
<a href ="frame_b.html" tppabs=".cn/example/html/frame_b.html" target ="showframe">Frame b</a><br>
<a href ="frame_c.html" tppabs=".cn/example/html/frame_c.html" target ="showframe">Frame c</a>
<frame src="../example/html/frame_a.html"
tppabs=".cn/example/html/frame_a.html"
name="showframe">
12.
XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。 13.html实现文件的下载
<a href=文件路径/文件名>下载链接的文本</a>
必须是 exe rar doc txt 等文件类型
14.去除<a>标签点击时的虚线框：
在css中加入：
a {outline: none;}
a:active {star:expression_r(this.onFocus=this.blur());}
:focus { outline:0; }
15.html网页头部添加
<meta
http-equiv="refresh"content="0.1;url=http://mall.lakala.com/ActivityController/toPage">
当访问该页面时会自动跳转至url所指的页面。
16.img居中的方法：
1.img设置属性：display：block; margin:0 auto; 推荐 (对于width height 不确定的图片也适用)
2.给img设一包括img的div,div设置属性align=center;
17.p设置行间距用line-height 设置段间距用 margin-bottom或margin-top
18.返回上一页方法：
<a
如
">
用
几
<meta 秒钟后自动返回上一页代码: http-equiv="refresh" content="3; url=javascript：window.history.go(-1);"> 图片做的话就是： <img src="图片路径" border="0" onclick="javascript：history.back(-1);" title="返回上一页&quo(本文来自：WWW.xiaocaoFanwEn.cOM 小草范文网:html学习报告)t;> 果是用按钮做的话就是： <input type="button" name="Submit" onclick="javascript：history.back(-1);" value="返回上一页href="javascript :history.back(-1)">返回上一页</a>或： <a href="javascript :;" onClick="javascript :history.back(-1);">返回上一页</a> content=这后面是时间。
19.手机端页面宽度设置为：width=960px;<meta name="viewport" content="width=960, initial-scale=0.33"> 电脑端页面宽度设置为 width=1200px
(1)标准手机端页面：<META name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">用百分比
(2)使用width:320px;
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" />
<title>天猫触屏版</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper" style="width:100%;height:auto;overflow:hidden;">
<div id="header" style="width:90%;height:30px;background-color:#930; min-width:320px; margin:0 auto;"></div>
<div id="main" style="width:100%;”>
</div>
</div></body>
</html>
20.html快速定位到页面的某个具体位置：
<a href="#bottom">链接到底部</a>
<div style="height:1000px;">center</div>
<div style="border:1px solid #F00; height:100px;"id="bottom">底部</div>
21.输入框提示，鼠标离开提示隐藏
<input type="text" id="phone" name="phone" maxlength="13" value="为你保密哒" onfocus="if(value == defaultValue){value='';this.style.color='#000'}"onblur="if(!value){value = defaultValue;this.style.color='#999'}" />
22.当div模块被position:fixed;后她包含的子模块定义position：absolute,将不起作用
23.当上一个模块元素有浮动时，模块的margin：将不起作用，解决方法：添加属性clear：both;
24.如何解决浏览器兼容性问题快捷方法之一：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
浏览器将会大致以IE9的模式进行呈现，无论当前浏览器是何版本
25.自定义鼠标样式
body{ cursor:url(/images_icon/damotouicon.ico), pointer;}
(1)鼠标图片最好是.ico格式的（可使用在线工具转换），不支持jpg,png，gif格式，其他格式容易有兼容性问题
(2)当自定义鼠标图片无法使用时，会用pointer样式。经测试ursor:url(/images_icon/damotouicon.ico)；只这样写时鼠标自定义是不
起效的。必须后面加上其他默认样式；最小要求：16px*16px;32px*32px最好
(3)图片路径要采用绝对路径，否则IE不识别
26.当给子元素模块添加margin-top:会出现父元素也偏移，子元素与父元素并没分离问题
解决办法：给包含它的父元素（祖父元素不必设）添加属性,overflow:hiddden;即可完美解决，这跟 bfc 的东西（块级元素格式化上下文）有关
27.
以上样式的实现可用
<fieldset style="border:2px solid red"><legend style="margin-left:20px">个人信息</legend><div><label>用户名：</label><input type="text"/></div><div><label>密码：</label><input type="password"/></div></fieldset> fieldset 样式可自定义
28.利用jsonp解决跨域
$.getJSON("url?表单数据&jsoncallback=?",function(data){
var mobile_callback=data;
if(mobile_callback.phone=='alreadyExist')
{
message="对不起，同一手机号只能办一张卡！"; $("#tx").html(message);}}) else{alert("恭喜您，存储成功") }
例如：
$(function(){
$("#sub").click(function(){
var mobile_phone=$("#phone").val();
var reg1=/^(^[\s]{0,}$)|(((1[0-9]{2})|159)+\d{8})$/;
if(mobile_phone.length==0){
message="*手机号码不为空！";
篇三：HTML 学习心得整理
IT Juck HTML 知识整理
开山篇:
? 何为传输协议?
? 简单的说 计算机的通信(网络)规则就是一种协议.
? FTP 文件传输协议
? SMTP 邮件传送协议
? HTTP 用于网页与网页间的访问协议
? 语言编码
接下来我们还会发现这样一句话：
它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。
? HTML开发工具
1. 记事本
2. Editplus
3. Frontpage
4. Dreamweaver [初学者推荐使用,该软件有提示功能]
? 下载地址:
? /cfusion/tdrc/index.cfm?product=dreamweaver&loc=cn
5. Zend Studio
6. MyEclipse
等其他IDE ，这里就不在介绍了,有兴趣可到网上搜索
? 网页三剑客
? 网页制作三剑客是Macromedia 公司开发的三款开发工具
? Flash：用于做动画
? Fireworks ：用于图片处理
? Dreamweaver ：用于拼接网页,代码编程
? HTML是什么?
? HTML表示: 超文本标记语言（Hyper Text Markup Language） ? HTML文件必须有htm 或 html扩展名
? HTML文件可以用一个简单的文本编辑器创建
? HTML文档类型
当我们新建HTML格式文档时，查看源代码，会发现代码最上部有如下代码：
译：表示本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
? 文档类型标记分五个部分
? DOCTYPE 文档类型定义标签(还可以指定别的类型文件)
? HTML 指定文档类型的名称
? PUBLIC 说明当前文件所依据的文件是任何人都可以访问的还是局部访问的 ? version name 指定该HTML版本的标识名称。例如HTML 4.0的标识名称为：
"-//W3C//DTD HTML 4.01 Transitional//EN"版本名称version name.被改进的iso用+号开头,没有被改动过的用–号开头，最后的两个斜号是DTD文档的语言种类
? url 指定该HTML 语言的定义规范文件在Internet上的位置,
? 例如: 。
? loose.dtd说明:当前文档可能含HTML4.01严格标准定义的元素及不含的元素 ? strict.dtd 说明:当前文档所以的HTML 元素都是严格符合标准的
? frameset.dta 说明:除了以上的俩个共同点还有可能包含一些框架的元素 ? HTML 4.01中如果没有下面这个文档类型定义语句是一个无效的HTML文件
? XHTML 1.0文档类型
? 创建一个HelloWord的XHTML 1.0文档
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/retype/zoom/1997f96b48d7c1c709a14505?pn=2&x=0&y=7&raww=893&rawh=73&o=png_6_0_0_0_0_0_0_892.979_1262.879&type=pic&aimh=39.23852183650616&md5sum=786f97b94e9f65337d12e7fae28b670e&sign=01042e3134&zoom=&png=163-11347&jpg=7664-7664" target="_blank">点此查看
<body>
Hello Word 我的第一个网页!
</body>
</HTML>
首先复制上面的代码
在电脑桌面鼠标右键创建一个文本文件.txt,双击打开把代码粘贴到里面保存关闭 鼠标右键txt文件重命名为 HelloWord.html [点击回车]
? HTML标记解释
? HTML的标记大多都是成对出现的,分开始和关闭如:<html></html>
? 每个关闭标记都是以:</标记> 斜杠加标记关闭的
? <!DOCTYPE html> 表示:这是一个HTML类型的文件
? <html> 表示:告诉浏览器这是HTML文档的开始
? <head> [表示:该标记是HTML头信息在浏览器标题区域显示] ? <title>标题</title>[表示:该标记是文档标题显示在浏览器窗口的标题栏]
? </head> 表示:关闭HTML 头信息区域
? <body> 网页正文内容 </body> 表示:该标记之间的内容会显示在浏览器中 ? </html> 表示:记告诉浏览器这是HTML文档的终止
? head 区属性
? <link rel="SHORTCUT ICON" href="favicon.ico"> [地址栏网站标志图标]
注：图片的名字最好是: favicon.ico
? Meta 标记必须要写在Head 头标记区域里
? <meta http-equiv="refresh" content="秒数; url=页面路径"> [自动跳转] ? 浏览器兼容问题解决[告诉浏览器使用IE7]
? <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ? 页面编码类型
? <mate http-equiv="Content-Type"content="text/html;charset=UTF-8 "> ? GB2312 中国
? UTF-8 国际
? Ansi 美国国家标准协会,它可以根据操作系统变换
? body 标签属性
? bgcolor="red"[页面背景颜色]
? background="图片.jpg" [页面背景图片]
? text="#000FFF" [页面中所有非连接字体颜色]
? link=”颜色” [页面中所有连接字体颜色
]
? alink=” 颜色” [页面中正要被点击的连接字体颜色]
? vlink=” 颜色” [页面中所有点击过的连接字体颜色]
? leftmargin=”0” [设定网页与浏览器窗口左边沿的间隙,单位为像素] ? topmargin=”0” [设定网页与浏览器窗口上边沿的间隙,单位为像素] ? table 表格标签属性
? table表示定义一个HTML表格
? <table></table> [创建一个无边框的表格]
? cellpadding="10" [该属性是设置表格的单元格的内边距]
? cellspacing="10" [该属性是设置表格的单元格间距]
? width="10" [控制表格宽度]
? height="10" [控制表格高度]
? rowspan="2" [合并行(写在<td>标签)]
? colspan="2" [合并列(格 写在<td>标签里)]
? border="1" [该属性可指定边框大小,数值越大边框线越粗] ? bordercolor=”” [边框线的颜色]
? bordercolorright=”颜色值”[亮边框属性]
? bordercolordark=”颜色值” [暗边框属性]
? <tr></tr> [表格内的行]
? <th></th> [表格开头格内内容自动到中间位置字体加粗] ? <td></td> [表示行内的单元格]
? <caption>表格的标题</caption> [没有任何边框的表格顶部]
横向控制表格方向
align="left" left [左]right [右] center [中间]
竖向控制表格方向
valign="top" top [上] bottom [下] middle [中间]
frame属性来控制表格周围的边框
frame="border" frame=" box"frame=" void"frame=" above"
frame=" below"
frame=" rhs"frame=" hsides" frame=" vsides" frame=" lhs"
表格嵌套例子如下:
<table>
<tr>
<td>
<table>
<tr><td>我是被嵌套在里面的 另一个表格</td></tr>
</table>
</td>
</tr>
</table>
? HTML 字符实体编码
< | < <
> | > >
{ {
& | & &
" | " "
' ‘
|   空格
  |   方形空格
× | × x [乘号]
÷| ÷ ÷ [除号]
© | © 版权符号
? HTML 超链接
<a> [锚标签（<a>）来创建一个连接到其他文件的链接] target=" "
_blank [在新窗口打开链接地址]
_self [本窗口打开新链接]
_top [假如你的页面在框架中,如何跳出框架]
_parent [父窗口]
还有一个是在框架中使用,值为: 框架的name属性值(名字)
<a href="页面地址" target="_blank">点我到另一个页面</a>
<a href="页面地址"><img border="0" src=".\images\next.gif">点击图片</a> <a href="mailto:someone@microsoft.com?subject=Hello%20again">发邮件</a> <ahref="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">邮件链接2</a> [完整版邮件链接] 下面是命名锚的语法：
<a name="label"> 我的名字叫label </a>
在一个页面链接到另一个页面的指定位置链接地址后面加 #锚名字 即可.
<a name="/links.asp#label">点我到label位置</a> 一个链接到本页面中某章节的命名锚是这样写的：
<a href="#label">点我到 label的位置.</a> [点击位置]
<a name="label">我是 label</a> [链接的位置]
Hidefocus=”true” [使链接点击时是去血线 IE] ? HTML img图片
图片的大小只需要指定 宽度,图片就会自动按比例缩放
<img src="url.jpg" width="图宽" height="图高" border="0" alt=" " vspace=”垂直边距”hspace=”水平边距” align=”top;middle;bottom”/>
alt 属性值是由用户定义的, 浏览器装载图像失败的时候告诉用户所丢失的信息