Html+css+javascript总结
⽹站开发的主要原则是：
– ⽤标签元素HTML描述⽹页的内容结构；
– ⽤CSS描述⽹页的排版布局；
– ⽤JavaScript描述⽹页的事件处理，即⿏标或键盘在⽹页元素上的动作后的程序
HTML（Hyper Text Mark-up Language 超⽂本标记语⾔）的缩写，是最基础的⽹页语⾔。
Html是通过标签来定义的语⾔，代码都是由标签所组成。Html代码不⽤区分⼤⼩写。
Html代码由<html>开始</html>结束。⾥⾯由头部分<head></head>和体部分<body></body>两部分组成。
标签：是由⼀对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，⼆者的标签名称是相同的，只是结束标签多了⼀个斜杠“/”
在元素的起始标签中，可以包含“属性”来表⽰元素的其他特性
<；标签名属性名='属性值'> 数据内容 </标签名>
<；标签名属性名='属性值' />
多个属性时：<hr size=“3” align=“left” width=”75%”>⽤空格分开
Html 的命名：⽂件的扩展名要以.html或.html结束。
Ø ⽂件名中只可由英⽂字母、数字或下划线组成。
Ø ⽂件名中不要包含特殊符号，⽐如空格、$等
所有标记都要⽤尖括号（<>）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。
任何空格或回车在代码中都⽆效，插⼊空格或回车有专⽤的标记，分别是、<br>。因此，不同的标记间⽤回车键换⾏再编写是个不错的习惯。
@ title元素：⽂件标题声明
@ link元素和style元素常⽤于CSS
@ script元素⽤于脚本
@ meta元素元信息
@ <base> 超链接⽹址基准参考点
<meta> 元素可提供有关页⾯的元信息（meta-information），⽐如针对搜索引擎和更新频度的描述和关键词。
name 属性：⽹页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进⾏搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
@ body元素是html⽂件的主体元素，它包含所有要在⽹页上显⽰的各种元素。
设置页⾯背景:bgcolor
设置背景图⽚:background
设计正⽂颜⾊:text
设置页⾯边距:topmargin、leftmargin、
rightmargin、bottomnargin
设置显⽰内容与浏览器的距离
添加空格——
<b> … </b> 粗.<i> … </i>斜 <s> … </s> 删<u> … </u> 下划<sub> … </sub> 下标 <sup> … </sup> 上标
.<address> … </address> 地址⾃动倾斜
.<big> … </big> ⼤字
<strong> … </strong> 加强语⽓ ( 加粗
<em>...</em> 加强语⽓ ( 倾斜
© ©
段落缩进<blockquote>
设置⽔平线<hr>
向中对齐 <center>
格式： <center> … </center>
插⼊定义列表<dl>
<dl>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
<dt>名称</dt>
<dd>说明</dd>
<dd>说明</dd>
<dd>说明</dd>
…
</dl>
插⼊⽆序列表<ul>
<ul>
<li>项⽬名称</li>…
<li>项⽬名称</li>…
<li>项⽬名称</li>…
…
<ul>
<ul>：符号标签（○●■）
type属性：disc ● ( 默认) circle ○ square ■
<ul type="circle">
插⼊有序列表<ol>
<ol>
<li>项⽬名称</li>…
<li>项⽬名称</li>…
<li>项⽬名称</li>…
…
</ol>
超链接概述
链接在⽹页制作中是⼀个必不可少的部分，在浏览⽹页时，单击⼀张图⽚或者⼀段⽂字就可以弹出⼀
个新的⽹页，这些功能都是通过超链接来实现的，在HTML⽂件中，超链接的建⽴是很简单的，但是掌握超链接的原理对⽹页的制作是⾄关重要的。在学习超链接之前，需要先了解⼀下“URL”，所谓URL（Uniform Resource Locator）指统⼀资源定位符，通常包括三个部分：协议代码、主机地址、具体的⽂件名
超链接标签的使⽤
创建超链接的标签为<a>和</a>，使⽤格式如下：
<a href=“资源地址” target=“是否在新窗⼝显⽰” title=“指向链接时显⽰的⽂字”>
链接名称
</a>
_parent在上⼀级窗⼝中打开，⼀般使⽤分桢的框架页会经常使⽤
_blank在新窗⼝打开
_self在同⼀个框架或窗⼝中打开，该项⼀般不⽤设置
_top在浏览器的整个窗⼝中打开，忽略任何框架
链接路径
– 绝对路径：包含了标识Internet上的⽂件所需要的所有信息，包括完整的协议名称、主机名称、⽂件夹名称和⽂件名称。格式为：
通信协议://服务器地址：端⼝号/⽂件位置…/⽂件名
相对路径：是以当前⽂件所在路径为起点，进⾏相对⽂件的查。
链接到同⼀⽂档的某个部分
• 锚记标签⽤于使⽤户“跳”到⽂档的某个部分
• HTML 的 NAME 属性⽤于创建锚标记
<A NAME = “marker”>主题名称</A>
<A HREF= “#marker”>主题名称</A>
为达到这种跳转效果，请在 HREF 参数中使⽤该标记
B 发送E-mail：在html页⾯中，可以建⽴e-mail链接，当浏览者单击链接后，系统会启动默认的本地邮件服务系统发送邮件，格式为：
<a href=“”>
描述⽂字
</a>
<a href=“mailto:zhangsan@126?subject=⼀个消息”>
联系我
</a>
LINK 颜⾊的设置
• 基本格式：<body link=”颜⾊” alink=”颜⾊” vlink=”颜⾊”>
• link 超链接尚被选中的⽂字
• alink 超链接点选但未被放开的颜⾊
• vlink 超链接已被点选过的颜⾊
插⼊并格式化图像
B <img>标签：⽤于在⽹页中插⼊图像内容。
– src属性：⽤于设置图像⽂件的相对或绝对URL地址。
– 共三种类型：GIF：是图形和图⽚的最佳格式，适⽤于透明或动画图形。
– JPG或JPEG：更适合存放照⽚
– PNG：拥有许多JPEG与GIF的共同优点，所以最近越来越流⾏。
通过设置width属性和height属性可以控制图像的显⽰宽度和⾼度，他们的长度单位可是百分⽐，也可是像素。
<a href="URL"><img src="URL"></a>
注意点：边框的问题.
可通过border=“0”去掉边框
属性名称属性值说明
Align left 图像靠左⽂字靠右
Right 图像靠右⽂字靠左
Top ⽂字往上靠
middle ⽂字靠中
bottom ⽂字靠下
空隙设置
Vspace 垂直上下两端和物件距离
Hspace ⽔平左右两端和物件距离
设置图像映射
图像地图：<map>
map标签要和img标签联合使⽤。
<img src=”URL” usemap=””></img>
<map name＝””>
<area shape=”” cords=” , , , ” href＝”URL”>
</map>
语法说明
<img>标记表⽰插⼊图像⽂件，src表⽰插⼊图像的路径；
Ø <map>标记表⽰插⼊图像映射；
Ø <area>标记表⽰图像映射区域；
Ø rhape属性表⽰映射区域形状：
— “rect”表⽰矩形区域；
—
“circle”表⽰椭圆形区域；
— “poly”表⽰多边形区域；
Ø cords表⽰感应区域的坐标
创建表格
<BODY>
<TABLE BORDER = 2 >
html span 居中<TR>
<TD>姓名</TD>
<TD>性别</TD>
<TD>分数</TD>
</TR>
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>分数</TH> <TH>表⽰⾏或列标题，粗体显⽰
</TR>
.......
</TABLE>
<TH align="center">性别</TH>居中
COLSPAN=“n” 属性表⽰跨多少列
ROWSPAN=“n” 属性表⽰跨多少⾏
表格的颜⾊设置：
表格的背景⾊ <TABLE bgcolor=颜⾊值>
⾏的背景⾊ <TR bgcolor=颜⾊值>
列的背景⾊ <TD bgcolor=颜⾊值>
表格的尺⼨设置：
<TABLE width=n1 height=n2>
• frame常见属性
规定表格周围的哪⼀侧的边框是可见的。
• rules常见属性
规定⽔平或垂直的分界线。
注释：必须与 "border" 属性配合使⽤！
定义表格列的分组。通过此元素，您可以对列进⾏组合以便进⾏格式化。
<colgroup span="3" bgcolor=“red”></colgroup>
Span：表格的直列数，⽽不是第⼏列。
定义某个表格中针对⼀个或多个列的属性值。您只能在表格或 colgroup 中使⽤此属性。
<table>
<col></col> 代表第1列
<col span=“2” bgcolor=“red”></col> 代表第2，3 两列
<tr>….</tr>
单元格间距，边距
<table cellspacing=”” cellpadding=“”>
表格嵌套
在HTML⽂件中，第⼀个<table>标记表⽰插⼊第⼀表格，第⼆个<table>标记插⼊在标记<td></td>之间，表⽰在单元格中插⼊表格，也就是嵌套表格。
框架标签
框架就是把⼀个浏览器窗⼝划分为若⼲个⼩窗⼝，每个窗⼝可以显⽰不同的URL⽹页。
所有的框架标签要放在⼀个HTML⽂档中，HTML页⾯的⽂档体标签<body>被框架集标签<frameset>所取代，然后通过
<frameset>的⼦窗⼝标签<frame>定义每⼀个⼦窗⼝和⼦窗⼝的页⾯属性。
B <frameset>标签
<frameset rows=“框架窗⼝⾼度，框架窗⼝⾼度，…”>
</frameset>
<html>
<head>
<title>框架的基本结构<title>
</head>
<frameset>
<frame>
<frame>
…
</frameset>
</html>
<frameset cols=“框架窗⼝宽度，框架窗⼝宽度，…”>
</frameset>
还可设置的属性包括：
frameborder：是否显⽰框架结构的边框线，取值为0、1或yes、no。取值为1或yes边框将会显⽰，取值为0或no边框将会隐藏。
framespacing：默认边框线的宽度为1，该属性可调整边框线的宽度。（以像素为单位）
bordercolor：可设置边框线颜⾊。
scrolling：设置框架是否显⽰滚动条。取值为yes、no或auto。yes表⽰滚动条⼀直显⽰；no表⽰⽆论什么情况都不显⽰滚动条；auto是系统的默认值，它是根据内容来调整的，当页⾯长度超过浏览器窗⼝的范围时就会⾃动显⽰滚动条。
B <noframes>标签
如果遇到不⽀持框架结构的浏览器，此时就需要⽤到该标签来设置替换的内容，并告诉浏览者其浏览器⽆法打开框架页⾯。
<a href=“right1.html” target=“mainFrame”>新闻中⼼</a>
使⽤iframe进⾏页⾯内的页⾯嵌套
可以定义嵌套页⾯的⼤⼩、位置等
⽤法：
<iframe name=“ifra1” scr=“abc.htm” border=“1”/>
可以通过name属性将链接的显⽰⽬标定位到
iframe框架内。
• <bgsound> 是⽤以插⼊背景⾳乐，但只适⽤於 IE，其参数设定不多。
如下 <bgsound src="your.mid" autostart=true loop=infinite>
• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对
• autostart=true
是否在⾳乐档传完之後，就⾃动播放⾳乐。true 是，false 否 (内定值)。
• loop=infinite
是否⾃动反覆播放。LOOP=2 表⽰重复两次，Infinite 表⽰重复多次。
• <EMBED> 是⽤以插⼊各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都⽀援。其参数设定多。如下
• <EMBED src="your.mid" autostart="true" loop="true" hidden="true">
• src="your.mid"
设定 midi 档案及路径，可以是相对或绝对
• autostart=true
是否在⾳乐档传完之後，就⾃动播放⾳乐。true 是，false 否 (内定值)。
• loop="true"
是否⾃动反覆播放。LOOP=2 表⽰重复两次，true 是， false 否。
• HIDDEN="true"
是否完全隐藏控制画⾯，true 为是，no 为否 (内定)。
• STARTTIME="分：秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表⽰从第30秒处开始播放。
• VOLUME="0-100"
设定量的⼤⼩，数值是0到100之间。内定则为使⽤者系统本⾝之设定。
• WIDTH="整数" 和 HIGH="整数"
设定控制画⾯的宽度和⾼度。(若 HIDDEN="no")
ALIGN="center"
设定控制画⾯和旁边⽂字的对 ⽅式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。
controls="smallconsole"
设定控制画⾯的外貌。预设值是 console。
console ⼀般正常的⾯板
smallconsole 较⼩的⾯板
playbutton 只显⽰播放按钮
pausecutton 只显⽰暂停按钮
stopbutton 只显⽰停⽌按钮
volumelever 只显⽰⾳量调整钮
<Marquee>滚动的⽂字</Marquee>
• Direction=”滚动⽅向”left[左]right[右]up[上]down[下]
• Behavior=”滚动⽅式” scroll[⼀圈⼀圈绕着⾛] slide[只⾛⼀次] alternate[来回的⾛]
• Loop=”滚动的循环次数” 若未指定则循环不⽌(loop=”infinite”)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论