html学习总结doc.docx
《html学习总结doc.docx》由会员分享，可在线阅读，更多相关《html学习总结doc.docx（7页珍藏版）》请在冰豆网上搜索。
html学习总结doc
html学习总结
篇一：
html学习总结
1.HTML标签由开始标签和结束标签组成，空的HTML元素没有结束标签，比如br/没有内容的HTML
内容被称为空元素。
空元素是在开始标签中关闭的。
br/就是没有关闭标签的空元素（br/标签定义换行）。
在XHTML、XML以及未来版本的HTML中，所有元素必须被关闭。
在开始标签中添加斜杠，比如br/，是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。
即使br在所有浏览器中都是有效的，但使用br/其实是更长远的保障。
2.HTML标签及属性值对大小写不敏感：
P等同于p。
W3School使用的是小写标签，因为万维网联
盟（W3C）在HTML4中推荐使用小写，而在未来HTML版本中强制使用小写。
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name=BillHelloWorldGates
3.hr/标签在HTML页面中创建水平线。
hr元素可用于分隔内容。
4.address可定义一个地址（比如电子邮件地址）。
您应当使用它来定义地址、签名或者文档的作者
身份。
address
ahref=mailto:
service@用户服务信箱/abr/
上海赢科投资有限公司br/
金桥开发区789号br/
/address
5.文本对齐：
text-align:
center;代替align:
center;
6.Name属性用于创建被命名的锚（namedanchors）。
当使用命名锚（namedanchors）时，我们可以创
建直接跳至定位至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
使用a创建锚
aname=tipsUsefulTipsSection/a
将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个节，就像这样：
ahref=.cn/html/html_links.asp#tips
JumptotheUsefulTipsSection
/a
7.
格，caption定义表格的标题colspan=”3”横跨三列的单元格；rowspan=”2”横跨两行的单元
Cellpadding来创建单元格内容与其边框之间的空白，Cellspacing增加单元格之间的距离。
tableborder=6
caption我的标题/caption
tr
th姓名/th
thcolspan=2电话/th
/tr
tr
tdBillGates/td
td55577854/td
td55577855/td
/tr/table
8.无序列表ulli有序列表olli自定义列表dldtdd;自定义列表以dl标签开始。
每个自定义列表项以dt开始。
每个自定义列表项的定义以dd开始。
dl
dtCoffee/dt
ddBlackhotdrink/dd
dtMilk/dt
ddWhitecolddrink/dd
/dl
9.
10.文字环绕图片，只需设置图片align=left即可实现图片在左的文字环绕，align=right可实现图片在右的文字环绕通过改变img标签的height和width属性的值，您可以放大或缩写图像
imgsrc=eg_mouse.jpgwidth=128height=128alt=”鼠标图片”/
alt:
图像无法载入时，替换文本属性告诉读者们失去的信息。
11.使用框架导航跳转至指定的节
ahref=link.htmltppabs=.cn/example/html/link.htmltarget=showframe没有锚的链接/abr
ahref=link.html#C10tppabs=.cn/example/html/link.html#C10target=showframe带有锚的链接/a
framesrc=../example/html/link.html
tppabs=.cn/example/html/link.htmlname=showframe
导航框架：
ahref=frame_a.htmltppabs=.cn/example/html/frame_a.htmltarget=showframeFramea/abr
ahref=frame_b.htmltppabs=.cn/example/html/frame_b.htmltarget=showframeFrameb/abr
ahref=frame_c.htmltppabs=.cn/example/html/frame_c.htmltarget=showframeFramec/a
framesrc=../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实现文件的下载
ahref=文件路径/文件名下载链接的文本/a
必须是exerardoctxt等文件类型
14.去除a标签点击时的虚线框：
在css中加入：
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:
0auto;推荐
2.给img设一包括img的div,div设置属性align=center;
17.p设置行间距用line-height设置段间距用margin-bottom或margin-top
18.返回上一页方法：
a
如
用
几
meta秒钟后自动返回上一页代码:
http-equiv=refreshcontent=3;url=javascript:
window.history.go;图片做的话就是：
imgsrc=图片路径border=0onclick=javascript：
history.back;title=返回上一页果是用按钮做的话就是：
inputtype=buttonname=Submitonclick=javascript：
history.back;value=返回上一页href=javascript:
history.back返回上一页/a或：
ahref=javascript:
;onClick=javascript:
history.back;返回上一页/acontent=这后面是时间。
19.手机端页面宽度设置为：
width=960px;metaname=viewportcontent=width=960,initial-scale=0.33电脑端页面宽度设置为width=1200px
标准手机端页面：
METAname=viewportcontent=width=device-width,initial-scale=1.0minimum-scale=1.0,maximum-scale=1.0,user-scalable=no用百分比
使用width:
320px;
!
DOCTYPEhtml
html
head
metacontent=text/html;charset=utf-8http-equiv=Content-Type/
metacharset=utf-8/
title天猫触屏版/title
metacontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0name=viewport/metacontent=yesname=apple-mobile-web-app-capable/
metacontent=blackname=apple-mobile-web-app-status-bar-style/
metacontent=telephone=noname=format-detection/
linkhref=page.cssrel=stylesheettype=text/css/
/head
body
divid=wrapperstyle=width:
100%;height:
auto;overflow:
hidden;
divid=headerstyle=width:
90%;height:
30px;background-color:
#930;min-width:
320px;margin:
0auto;/div
divid=mainstyle=width:
100%;”
/div
/div/body
/html
20.html快速定位到页面的某个具体位置：
ahref=#bottom链接到底部/a
divstyle=height:
1000px;center/div
divstyle=border:
1pxsolid#F00;height:
100px;id=bottom底部/div
21.输入框提示，鼠标离开提示隐藏
inputtype=textid=phonename=phonemaxlength=13value=为你保密哒onfocus=if{value=;this.style.color=#000}onblur=if{value=defaultValue;this.style.color=#999}/
22.当div模块被position:
fixed;后她包含的子模块定义position：
absolute,将不起作用
23.当上一个模块元素有浮动时，模块的margin：
将不起作用，解决方法：
添加属性clear：
both;
24.如何解决浏览器兼容性问题快捷方法之一：
metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE9/
浏览器将会大致以IE9的模式进行呈现，无论当前浏览器是何版本
25.自定义鼠标样式
body{cursor:
url,pointer;}
鼠标图片最好是.ico格式的（可使用在线工具转换），不支持jpg,png，gif格式，其他格式容易有兼容性问题
当自定义鼠标图片无法使用时，会用pointer样式。
经测试ursor:
url；只这样写时鼠标自定义是不
起效的。
必须后面加上其他默认样式；最小要求：
16px*16px;32px*32px最好
图片路径要采用绝对路径，否则IE不识别
26.当给子元素模块添加margin-top:
会出现父元素也偏移，子元素与父元素并没分离问题
解决办法：
给包含它的父元素（祖父元素不必设）添加属性,overflow:
hiddden;即可完美解决，这跟bfc的东西（块级元素格式化上下文）有关
27.
以上样式的实现可用
fieldsetstyle=border:
1pxsolidredlegendstyle=margin-left:
20px个人信息/legenddivlabel用户名：
/labelinputtype=text//divdivlabel密码：
/labelinputtype=password//div/fiel{
message=*手机号码不为空！
;
篇二：
HTML网页设计学习存在的问题与小结
一：
大家在学习HTML网页设计过程中存在的问题：
1：
很多人在一个HTML页面中写了多对body/body，在一个HTML页面中，有且只能有一对body/body，同理，有且只能有一对head/head，一对html/html2：
HTML所有的标签、元素等全部使用小写3：
在HTML中，br和hr，没有闭合标签，br和hr是单个出现的！
br的作用是换行，hr的效果是水平线4：
h1--h1-----h6--h6，h标签是文章的标题标签，如果不是标题，别用该标签5:
background=Vista.jpg—设置名称为Vista.jpg的图片为背景图片，这样写，是因为图片和页面在同一级目录下。
如果你要做的背景图片和你的页面不在同一级目录下，这是，图片名称前面就要加上该图片所在的文件夹的路径：
background=E:
/pic/Vista.jpgE盘下的pic文件夹里面的Vista.jpg作为背景图片6：
colspan属性用在td标签中，用来指定单元格横向跨越的列数；实例：
tableborder=1trtdcolspan=2单元格1/tdtd单元格2/td/trtrtd单元格3/tdtd单元格4/tdtd单元格5/td/tr/table效果：
单元格1单元格2单元格3单元格4单元格57：
rowspan同上，作用是指定单元格纵向跨越的行数实例：
tableborder=1trtdrowspan=3单元格1/tdtd单元格2/td
/trtrtd单元格3/td/trtrtd单元格4/td/tr/table效果：
单元格2单元格1单元格3单元格4二：
对上周三、周四课程的总结。
1、HTML页面的基本组成：
htmlhead?
?
/headbody?
?
/body/html2、head?
?
/head部分介绍head标签--代表HTML文档的头信息，head标签是成对出现的,以head开始,/head结束头包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.head元素包含的标签:
title标签base标签link标签style标签script标签meta标签2.1title标签--是HTML文档的标题，成对出现的,以title开始,/title结束例：
htmlheadtitle网页标题/title
/headbody/body/html2.2meta标签--在head标签中的meta标签,可以为HTML文档提供额外信息例如我们之前说过的页面刷新功能，就可以用该标签解决metahttp-equiv=refreshcontent=8;url=1.html8秒之后页面自动刷新跳转到“1.html”页面备注：
该标签放在head?
?
/head之间！
3、body?
?
/body部分介绍--body定义HTMl文档的主体。
body?
?
/body里包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。
）3.1文字链接：
ahref=target=_blankstyle=text-decoration:
none汽车/a效果：
点击“汽车”，页面跳转到备注1：
target=_blank，作用：
在新窗口打开链接页面2：
style=text-decoration:
none，作用：
去掉链接文字下的下划线3.2图片链接：
ahref=1.htmlimgsrc=1.gifalt=流氓兔/a效果：
点击“图片”，页面跳转到1.html备注1：
alt=流氓兔，作用：
alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于下列原因用户无法查看图像，alt属性可以为图像提供替代的信息：
网速太慢src属性中的错误浏览器禁用图像用户使用的是屏幕阅读器实例ahref=”1.html”imgsrc=/i/eg_tulip.jpgalt=上海鲜花港-郁金香/a如果无法显示图像，浏览器将显示替代文本，就像这样：
4、表格表格的以table开始,以/table结束。
一个tr?
?
/tr就是一行一个td?
?
/td就是一列colspan是指定单元格横向跨越的列数；rowspan是指定单元格纵向跨越的行数
篇三：
关于html5培训心得总结
关于html5培训心得总结
一：
了解HTML5前端开发技术
HTML指的是超文本标记语言，标记语言是一套标记标签，HTML使用标记标签来描述网页。
HTML5区别于HTML的标准，基于全新的规则手册，提供了一些新的元素和属性，在web技术发展的过程中成为新的里程碑。
HTML5被推广用于Web平台游戏开发，及手机移动领域，从市场来看，无论是桌面应用还是移动应用，HTML5都是当下Web技术中最炙手可热的新宠，是创新的主旋律，在不久的时间里一定会大有作为。
二：
课程能让你学到什么
从前端开发的基础出发，学习使用HTML，CSS，JavaScript等一系列前端技术，实现动画特效。
以开发实例展示为主导，循序渐进让学员掌握HTML5技术的应用。
强化学员基础，尤其是要针对JavaScpript基础的强化从而掌握HTML5新功能API。
HTML5培训内容首先是学习HTML5文档结构和基础语法，了解HTML5新特性，CSS3基础语法和布局样式，图形图像软件使用等。
移动前端的交互JavaScript编程基础、JavaScript交互编程实战、JavaScript异步操作基础、Ajax、JQuery、AngularJS使用方法。
移动前段综合开发;主要集中在H5+C3+jQMobile，基于HTML5的移动网页布局、移动网页界面样式、HTML5本地存储API、Geolocation地理定位、智能表单、Video、Audio应用、canvas和SVG的应用、桌面通知、离线应用、webGL基础及应用、WEB前端框架、Cocos2d-HTML游戏引擎等。
最后，项目实训。
项目实训能够提高综合开发能力。
升级会员 