html学习总结doc.docx

1、html学习总结dochtml学习总结篇一：html学习总结 1. HTML 标签由开始标签和结束标签组成，空的 HTML元素没有结束标签，比如 br /没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。br / 就是没有关闭标签的空元素（br / 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。在开始标签中添加斜杠，比如 br /，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 br 在所有浏览器中都是有效的，但使用 br / 其实是更长远的保障。 2. HTML 标签及属性值 对大小写不敏感：P 等

2、同于 p。W3School 使用的是小写标签，因为万维网联 盟（W3C）在 HTML 4 中推荐使用小写，而在未来 HTML 版本中强制使用小写。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=Bill HelloWorld Gates 3. hr / 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。 4. address 可定义一个地址（比如电子邮件地址）。您应当使用它来定义地址、签名或者文档的作者 身份。 address a href=mailto:service用

3、户服务信箱/abr / 上海赢科投资有限公司br / 金桥开发区 789 号br / /address 5. 文本对齐：text-align:center;代替align:center; 6. Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创 建直接跳至定位至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。 使用a创建锚 a name=tipsUseful Tips Section/a 将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样： a href=.cn/

4、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 tdBill Gates/td td555 77 854/tdtd555 77 855/td /tr/tab

5、le 8. 无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd; 自定义列表以 dl 标签开始。 每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。 dl dtCoffee/dt ddBlack hot drink/dd dtMilk/dt ddWhite cold drink/dd /dl 9. 10. 文字环绕图片，只需设置图片align=left即可实现图片在左的文字环绕，align=right可实现图片在右的文字环绕 通过改变 img 标签的 height 和 width 属性的值，您可以放大或缩写图像 img src=eg_mouse.jpg

6、 width=128 height=128 alt=”鼠标图片”/ alt:图像无法载入时，替换文本属性告诉读者们失去的信息。 11.使用框架导航跳转至指定的节 a href =link.html tppabs=.cn/example/html/link.html target =showframe没有锚的链接/abr a href =link.html#C10 tppabs=.cn/example/html/link.html#C10 target =showframe带有锚的链接/a frame src=./example/html/link.html tppabs=.cn/example

7、/html/link.html name=showframe 导航框架： a href =frame_a.html tppabs=.cn/example/html/frame_a.html target =showframeFrame a/abr a href =frame_b.html tppabs=.cn/example/html/frame_b.html target =showframeFrame b/abr a href =frame_c.html tppabs=.cn/example/html/frame_c.html target =showframeFrame c/a fram

8、e 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中

9、加入： a outline: none; a:active star:expression_r); :focus outline:0; 15.html网页头部添加 meta http-equiv=refreshcontent=0.1;url= 当访问该页面时会自动跳转至url所指的页面。 16.img居中的方法： 1.img设置属性：display：block; margin:0 auto; 推荐 2.给img设一包括img的div,div设置属性align=center; 17.p设置行间距用line-height 设置段间距用 margin-bottom或margin-top 18.返回上

10、一页方法： a 如 用 几 meta 秒钟后自动返回上一页代码: http-equiv=refresh content=3; url=javascript:window.history.go; 图片做的话就是： img src=图片路径 border=0 onclick=javascript：history.back; title=返回上一页 果是用按钮做的话就是： input type=button name=Submit onclick=javascript：history.back; value=返回上一页href=javascript :history.back返回上一页/a或： a

11、href=javascript :; onClick=javascript :history.back;返回上一页/a content=这后面是时间。 19.手机端页面宽度设置为：width=960px;meta name=viewport content=width=960, initial-scale=0.33 电脑端页面宽度设置为 width=1200px 标准手机端页面：META name=viewport content=width=device-width, initial-scale=1.0 minimum-scale=1.0, maximum-scale=1.0, user-s

12、calable=no用百分比 使用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-ap

13、p-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-

14、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 maxle

15、ngth=13 value=为你保密哒 onfocus=ifvalue=;this.style.color=#000onblur=ifvalue = 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

16、 / 浏览器将会大致以IE9的模式进行呈现，无论当前浏览器是何版本 25.自定义鼠标样式 body cursor:url, pointer; 鼠标图片最好是.ico格式的（可使用在线工具转换），不支持jpg,png，gif格式，其他格式容易有兼容性问题 当自定义鼠标图片无法使用时，会用pointer样式。经测试ursor:url；只这样写时鼠标自定义是不起效的。必须后面加上其他默认样式；最小要求：16px*16px;32px*32px最好 图片路径要采用绝对路径，否则IE不识别 26.当给子元素模块添加margin-top:会出现父元素也偏移，子元素与父元素并没分离问题解决办法：给包含它的父元

17、素（祖父元素不必设）添加属性,overflow:hiddden;即可完美解决，这跟 bfc 的东西（块级元素格式化上下文）有关 27. 以上样式的实现可用 fieldset style=border:1px solid redlegend style=margin-left:20px个人信息/legenddivlabel用户名：/labelinput type=text/divdivlabel密码：/labelinput type=password/div/fiel message=*手机号码不为空！; 篇二：HTML网页设计学习存在的问题与小结 一：大家在学习 HTML 网页设计过程中存在

18、的问题：1：很多人在一个 HTML 页面中写了多对body/body，在一个 HTML 页面中，有且只能有 一对body/body，同理，有且只能有一对head/head，一对html/html 2：HTML 所有的标签、元素等全部使用小写 3：在 HTML 中，br和hr，没有闭合标签，br和hr是单个出现的！ br的作用是换行，hr的效果是水平线 4：h1-h1-h6-h6，h标签是文章的标题标签，如果不是标题，别用该标签 5: background=Vista.jpg设置名称为Vista.jpg的图片为背景图片，这样写，是因为图片和 页面在同一级目录下。 如果你要做的背景图片和你的页面不

19、在同一级目录下， 这是， 图片名称前面就要加上该图片 所在的文件夹的路径： background=E:/pic/Vista.jpg E 盘下的 pic 文件夹里面的 Vista.jpg 作为背景图片 6：colspan 属性用在td标签中，用来指定单元格横向跨越的列数； 实例： table border=1 tr td colspan=2单元格 1/td td单元格 2/td /tr tr td单元格 3/td td单元格 4/td td单元格 5/td /tr /table 效果： 单元格 1 单元格 2单元格 3 单元格 4 单元格 5 7： rowspan 同上，作用是指定单元格纵向跨越

20、的行数 实例：table border=1tr td rowspan=3单元格 1/td td单元格 2/td/tr tr td单元格 3/td /tr tr td单元格 4/td /tr /table 效果： 单元格 2 单元格 1 单元格 3 单元格 4二：对上周三、周四课程的总结。1、 HTML 页面的基本组成： html head ? /head body ? /body /html 2、head?/head部分介绍 head 标签 - 代表 HTML 文档的头信息， head 标签是成对出现的,以head开始,/head 结束 头包含了当前文档的一些信息,例如标题信息,meta 信息

21、等,正常情况下头信息是 不会显示在 HTML 文档中的. head 元素包含的标签: title 标签 base 标签 link 标签 style 标签 script 标签 meta 标签 2.1 title 标签-是 HTML 文档的标题，成对出现的,以title开始,/title结束 例： html head title网页标题/title/head body /body /html 2.2 meta 标签-在 head 标签中的 meta 标签,可以为 HTML 文档提供额外信息 例如我们之前说过的页面刷新功能，就可以用该标签解决 meta http-equiv=refreshconte

22、nt=8;url=1.html 8 秒之后页面自动刷新跳转到“1.html”页面 备注：该标签放在head?/head之间！ 3、body?/body部分介绍-body 定义 HTMl 文档的主体。 body?/body里包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。 ） 3.1 文字链接： a href= target=_blank style=text-decoration:none 汽车/a 效果：点击“汽车” ，页面跳转到 备注 1：target=_blank，作用：在新窗口打开链接页面 2：style=text-decoration:none，作用：去掉链接文字下的下划

23、线 3.2 图片链接： a href=1.htmlimg src=1.gif alt=流氓兔 /a 效果：点击“图片” ，页面跳转到 1.html 备注 1：alt=流氓兔， 作用：alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原 因用户无法查看图像，alt 属性可以为图像提供替代的信息： 网速太慢 src 属性中的错误 浏览器禁用图像 用户使用的是屏幕阅读器 实例a href=”1.html”img src=/i/eg_tulip.jpgalt=上海鲜花港 - 郁金香/a如果无法显示图像，浏览器将显示替代文本，就像这样：4、表格表格的以table开始,以/tab

24、le结束。 一个tr?/tr就是一行 一个td?/td就是一列 colspan 是指定单元格横向跨越的列数； rowspan 是指定单元格纵向跨越的行数 篇三：关于html5培训心得总结 关于html5培训心得总结 一：了解HTML5前端开发技术 HTML 指的是超文本标记语言 ，标记语言是一套标记标签 ，HTML 使用标记标签来描述网页。HTML5区别于HTML的标准，基于全新的规则手册，提供了一些新的元素和属性，在web技术发展的过程中成为新的里程碑。HTML5被推广用于Web平台游戏开发，及手机移动领域，从市场来看，无论是桌面应用还是移动应用，HTML5都是当下Web技术中最炙手可热的新

25、宠，是创新的主旋律，在不久的时间里一定会大有作为。 二：课程能让你学到什么 从前端开发的基础出发，学习使用HTML，CSS，JavaScript等一系列前端技术，实现动画特效。以开发实例展示为主导，循序渐进让学员掌握HTML5技术的应用。强化学员基础，尤其是要针对JavaScpript基础的强化从而掌握HTML5新功能API。 HTML5培训内容首先是学习HTML5文档结构和基础语法，了解HTML5新特性，CSS3基础语法和布局样式，图形图像软件使用等。移动前端的交互JavaScript编程基础、JavaScript交互编程实战、JavaScript异步操作基础、Ajax、JQuery、AngularJS使用方法。移动前段综合开发;主要集中在H5+C3+jQ Mobile，基于HTML5的移动网页布局、移动网页界面样式、HTML5本地存储API、Geolocation地理定位、智能表单、Video、Audio应用、canvas和SVG的应用、桌面通知、离线应用、webGL基础及应用、WEB前端框架、Cocos2d-HTML游戏引擎等。最后，项目实训。项目实训能够提高综合开发能力。