html学习总结docWord文档格式.docx
《html学习总结docWord文档格式.docx》由会员分享,可在线阅读,更多相关《html学习总结docWord文档格式.docx(7页珍藏版)》请在冰豆网上搜索。
text-align:
center;
代替align:
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
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:
value=返回上一页href=javascript:
history.back返回上一页/a或:
ahref=javascript:
;
onClick=javascript:
返回上一页/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%;
30px;
background-color:
#930;
min-width:
/div
divid=mainstyle=width:
”
/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游戏引擎等。
最后,项目实训。
项目实训能够提高综合开发能力。