Html页面结构
//元素
<html></html>
//头部元素
<head></head>
//主题元素
<body></body>
//标题元素
<title></title>
元信息标签
//元信息标签
<meta/>
元信息标签是一个辅助性标签,可以对整个页面进行综合性的设置.
meta标签的用处很多,通常用来为搜索引擎定义页面主题;还可以用于设置页面,使其使用根据定义的时间间隔刷新页面等.这些作用主要通过meta的两种属性来表示:name和http-equiv.
//name
name属性是用来描述网页,便于搜索引擎查找、分类。这其中最重要的是description(搜索引擎网站的简介)和keywords(分类关键字)，所以应该给每页加一个meta值。这样可以方便每个页面被准确、快速搜索出来。name属性是写在meta标签里面的，meta和name中间隔了一个英文的空格。如下:
<meta name="#" contect="内容"/>
//Generator
<meta name="keywords" contect="网页生成工具"/> 说明网页生成工具
//keywords
<meta name="keywords" contect="网页关键词"/> 向搜索引擎说明网页的关键词
//Description
<meta name="Description" contect="网页主要内容"/> 告诉搜索引擎网页的主要内容
//Author
<meta name="Author" contect="作者名字"/> 告诉搜索网页引擎网页制作的作者
//Robots
<meta name="Robots" contect="#"/> 定义网页的检索情况和网页上的连接查询情况
----------
contect="#"里面可以替换多个属性值来设定不同的检索和查询情况.下面为contect="#"里面的多个属性值的说明：
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;
nofollow:文件将不被检索,但页面上的链接可以被查询。
注意：contect="#"中,#里面只能为一个属性值,不能填写多个属性值。
----------
//http-equiv
http-equiv:它反馈给浏览器一些有用的信息,来帮助页面正确和精确的显示页面内容,是网页里必不可少的标签属性.
----------
//http-equiv="Refresh"
<meta http-equiv="Refresh" contect="n;url=http://www.baidu.com"/>
主要作用:让网页在规定时间内,跳转到指定的页面
n:表示跳转时间,以秒来计算
url:跳转的地址
----------
//http-equiv="Expires"
<meta http-equiv="Expires" contect="GMT时间格式"/>
主要作用:设定网页在缓存中的过期时间
详细:是用来指定网页在缓存中的过期时间,一旦过期则必须到服务器上重新调用。
----------
//http-equiv="Pragma"
<meta http-equiv="Pragma" contect="no-cache"/>
主要作用:设定禁止浏览器从本地机的缓存中调阅页面内容
----------
//http-equiv="set-cookie"
<meta http-equiv="set-cookie" contect="GMT时间格式"/>
主要作用:如果网页过期,存盘缓存(也成cookie)将被删除
----------
//http-equiv="Window-target"
<meta http-equiv="Window-target" contect="#"/>
主要作用:设置显示窗口的,强制页面在当前窗口以独立页面显示
#:设置出现位置;
标签
//段落标签
<p></p>
//换行标签
<br/>
//插入水平分割线
<hr/>
设置粗细:<hr/ size="10px">
设置长度:<hr/ width="20px;">
设置显示位置:<hr/ align="#">
#:left(左)conter(中)right(右)
设置颜色:<hr/ color="#">
#颜色值十六进制
设置无阴影:<hr/ noshade>
//设置背景颜色
<body bgcolor="颜色值">
//标题标签
<h1></h1>--<h6></h6>
//设置字体
大小:<font size="20px;"></font>
字体类型:<font face="宋体"></font>
----------
文本布局标签
//缩进标签
<blockquote></blockquote>
里面内容自动居中缩聚
//保留格式标签
<pre></pre>
里面内容空格之类都有效
//内联标签
<span title=""></span>
通过css发挥更大效果
基于物理样式的文本标签
//加粗标签
<b></b>
//斜体标签
<i></i>
//下划线标签
<u></u>
<ins cite="www.baidu.com" datetime="2012-12-12"></ins>
cite:原文档或信息的链接
datetime:改动时间
//删除标签
<del></del>
<s></s>
//等宽字体效果
<tt></tt>
//标
设置上标:<sup></sup>
设置下标:<sub></sub>
//引用标签
<samp></samp>
<code></code>
//变量名定义标签
<var></var>
超链接
----href
A：<a href="name"></a>
B：<a name="name"></a>
单击A可跳转到本页B
----target
<a href="http://www.baidu.com" target="_blank"></a>
_blank:另打开一个选项卡
_parent:在当前选项卡打开
_self:在当前选项卡打开
_top:在当前选项卡打开
不适用框架下后三个效果一样
图像
图像一般包括gif、jpg、png、bmp,常用的市gif和jpg;
gif是一种压缩位图格式,支持透明背景图片,适用于多种操作系统,体型小,可以制作简单动画;
jpg格式的图片好处在于,清晰高,而且可以很好的压缩图片大小,改善加载速度;
png格式的图片是透明的、容量小的
bmp清晰度不高,容量较大,比较少使用
----------
//设置背景图像
<body background="#"> 每个图片要少于10K
//图像标签
<img src=""/>
<img src="" alt="无法加载">
当图片未读取或者路径不对,alt属性在生效
//宽高
<img src="" width="" height=""/>
//align
<img src="" align="#"/>
#:
bottom:底部
left:左边
right:右边
middle:中间
top:上面
//边框
<img src="" border="npx"/>
//间距
<img src="" hspace="npx"/> 水平间距
<img src="" vspace="npx"/> 垂直间距
图像超链接
//本地图像链接地址
<a href="bd_logo1.png"><img src="bd_logo1.png"/></a>
//站外图像链接
<a href="http://www.baidu.com"><img src="bd_logo1.png"/></a>
创建图像矩形热点区域
//矩形热点区域
<img src="百度.png" usemap="#你好"/>
<map name="你好">
<area shape="rect" coords="21,35,100,95 href="http://www.baidu.com">
</map>
在百度图片上,制定一个矩形热点区域,根据img上的你好连接到map的name
shape配置为矩形
coords="左,上,右,下"
单击该矩形连接到baidu.com
创建图像圆形热点区域
<img src="bd_logo1.png" usemap="#你好"/>
<map name="你好">
<area shape="circle" coords="50,50,50" href="http://www.baidu.com">
</map>
shape配置为圆形
coords="前两个值是圆心的x,y轴,最后是圆的半径"
创建图像多边热点区域
<img src="bd_logo1.png" usemap="#ip"/>
<map name="ip">
<area shape="poly" coords="50,30,80,100,50,60" href="http://www.baidu.com">
</map>
shape配置为多边形
coords多边形坐标
图像占位符
<img name="html" src="" width="200px;" height="200px"/>
表格
<table>
<caption>标题</caption>
<tr>//行
<th></th>//表头单元格
<td>//列</td>
</tr>
</table>
//边框
border:npx;
border="none"
不显示边框
//间距/边距
cellpadding:边距
cellspacing:间距
//亮边框颜色
bordercolorlight="#CC0000"
左边框和上边框的颜色
//暗边框颜色
bordercolordark="#CC0000"
右边框和下边框的颜色
//不显示外边框
frame="void"
//显示上下外边框
frame="hsides"
//显示左右外边框
frame="vsides"
//显示上下左右
上:frame="above"
下:frame="below"
左:frame="lhs"
右:frame="rhs"
//行的合并
rowspan
//列的合并
colspan
table的注释方法
//表头标签
<thead></thead>
//主题标签
<tbody></tbody>
//行尾标签
<tfoot></tfoot>
设置对齐方式
//align
align属性可以设置行的水平方式,就是使行里面的内容都水平对齐,其中默认为水平居左对齐。align属性共有三个值,分别是:居中对齐,居右对齐,居左对齐。
center:中
right:右
left:左
//垂直对齐方式valign
valign属性可以设置行的垂直对齐方式,就是使行里面的内容都是垂直对齐,默认值是居中对齐
中:valign="middle"
上:valign="top"
下:valign="bottom"
多媒体元素
//活动字幕
marquee缺点就是无论内容有多长前一次滚动完才进行第二次
<marquee>你好</marquee>
//滚动方式
<marquee behavior="scroll">你好</marquee>
一次完了再重新滚动
<marquee behavior="slide">你好</marquee>
滚动一次完后停止在页面处
<marquee behavior="alternate">你好</marquee>
左右来回滚动
//滚动颜色
<marquee bgcolor="#FF0000">你好</marquee>
//滚动方向
<marquee direction="left">你好</marquee>
右想左
<marquee direction="right">你好</marquee>
左向右
<marquee direction="up">你好</marquee>
下向上
<marquee direction="down">你好</marquee>
上向下
//滚动速度
<marquee scrollamount="5">你好</marquee>
//滚动时停顿时间
<marquee scrolldelay="1">你好</marquee>
//字幕水平空白区域
<marquee hspace="5">你好</marquee>
//字幕垂直空白区域
<marquee vspace="5">你好</marquee>
//滚动次数
<marquee loop="-1">你好</marquee>
//设置鼠标滑过
<marquee loop="1" onmouseout="this.start()" onmouseover="this.stop()">你好</marquee>
this.start():鼠标移除该区域时继续滚动
this.stop():鼠标移入该区域时停止滚动
插入多媒体元素
//插入音乐
<embed src="非主流 - Hao Du You Du.mp3"></embed>
//隐藏播放面板
<embed src="非主流 - Hao Du You Du.mp3" hidden="true"></embed>
隐藏
<embed src="非主流 - Hao Du You Du.mp3" hidden="true"></embed>
显示
插入背景音乐
//背景音乐
<bgsound src="非主流 - Hao Du You Du.mp3"/>
//播放次数
<bgsound src="非主流 - Hao Du You Du.mp3" loop="1"/>
infinite:无限循环
框架集
<frameset cols="25%,50%,25%" border="15">
<frame src="1.html">
<frame src="1.html">
<frame src="1.html">
</frameset>
被分割成竖列形式
<frameset rows="25%,50%,25%" border="15">
<frame src="1.html">
<frame src="1.html">
<frame src="1.html">
</frameset>
被分割成横行形式
<frameset rows="25%,50%,25%" frameborder="0" border="15" framespacing="10px">
<frame src="1.html">
<frame src="1.html">
<frame src="1.html">
</frameset>
frameborder:0不显示边框,1显示边框,不显示边框时会引用src里面的三个框架进行显示
framespacing:设置框架间隔
不支持该框架时候可以:
<noframes><body>此浏览器不支持框架</body></noframes>
框架
//框架调节
<frameset rows="40%,36%,25%" cols="*" frameborder="0" border="15">
<frame src="1.html" noresize="noresize">
<frame src="1.html" noresize="noresize">
<frame src="1.html" noresize="noresize">
</frameset><noframes></noframes>
noresize:设置框架不能调节
//框架嵌套
和嵌套<div></div>一样
//框架链接
<frameset rows="40%,36%,25%">
<frame src="1.html" noresize="noresize" name="page1">
<frame src="2.html" noresize="noresize" name="page2">
<frame src="3.html" noresize="noresize">
</frameset>
1.html内容:<a href="http://www.baidu.com" name="page1">左边</a>
只有通过frame里面的name和1.html的name一样才能实现框架衔接
嵌入式框架
//滚动条
<frameset rows="*,*,*%">
<iframe src="1.html" name="page1" scrolling="yes"></iframe>
<iframe src="2.html" name="page1" scrolling="no"></iframe>
<iframe src="3.html" name="page3" scrolling="yes"></iframe>
</iframe>
scrolling:yes根据需要显示滚动条
no不显示滚动条
//框架窗口透明设置
<frameset rows="*,*,*">
<iframe src="1.html" name="page1" scrolling="yes" allowtransparency="true"></iframe>
<iframe src="2.html" name="page2" scrolling="no"></iframe>
<iframe src="3.html" name="page3" scrolling="yes"></iframe>
</frameset>
allowtransparency="true":设置透明框架
列表元素
//无序列表
<ul>
<li>你好</li>
</ul>
//空心圆
<ul type="circle">
<li>你好</li>
</ul>
//小方块
<ul type="square">
<li>你好</li>
</ul>
//有序列表
<ol>
<li>你好</li>
<li>你好</li>
</ol>
//大写字母标号样式
<ol type="A">
<li>你好</li>
<li>你好</li>
</ol>
//小写字母标号样式
<ol type="a">
<li>你好</li>
<li>你好</li>
</ol>
//大写罗马字母标号样式
<ol type="I">
<li>你好</li>
<li>你好</li>
</ol>
//小写罗马字母标号样式
<ol type="i">
<li>你好</li>
<li>你好</li>
</ol>
定义列表元素
//定义整体列表结构
<dl>
<dt>2</dt><dd>3 </dd>
</dl>
表单元素
//form表单
<form action="路径" method="提交方式">
内容不过多解释
</form>
<input type="image" src="bd_logo1.png"/>
sec里面图片将显示在页面上
css样式基础知识
//引入外部表样式
<link href="文件名.css" rel="stylesheet" type="text/css"/>
//内部表样式
<style type="text/css">
#ni{ width:500px;height:500px; background-color:#0F0};
</style>
//内嵌样式表
<标签 style=""/>
优先级别:内嵌样式表>内部表样式>外部表样式
选择器
//派生选择器
h1 p{};
意思就是h1下面的p标签
//id选择器
<style type="text/css">
#id{};
</style>
<标签 id="id"/>
//class选择器
<style type="text/css">
.id{};
</style>
<标签 class="id"/>
优先级别:id选择器>class选择器>派生选择器
css属性
//背景颜色
background-color:
//背景图片
background-image:url
显示图片
background-repeat:no-repeat
不重复图片
background-repeat:repeat
水平垂直重复显示
background-repeat:repeat-x
水平重复显示
background-repeat:repeat-y
垂直重复显示
//固定页面背景
background-attachment:fixed;
固定背景图片,背景图片不随页面滚动
//不固定页面背景
background-attachment:scroll;
不固定背景图片,背景图片随页面滚动
//设置图片位置
background-position:x y;
x:left、conter、right
y:top、conter、bottom
也可以用数字
background-position:50px 60px;
css文本属性
//字符间距
letter-spacing:10px"
//行间距
line-height:10px
//文本对齐方式
text-align:right
left:文本向左对齐
right:文本向右对齐
conter:文本居中对齐
justify:文本向两端对齐
//修饰文本
text-decoration:underline
underline:下划线
overline:上划线
line-through:删除线
//文本缩进
text-indent:20px;
//转换大小写
text-transform:capitalize
capitalize:每个英文首字母大写
uppercase:所有英文字母大写
lowercase:所有英文字母小写
//控制文本换行
white-space:normal
normal:按照浏览器默认的方式
pre:强制控制不换行
nowrap:强制控制不换行,直到遇到换行符号
//字体大小
font-size:npx;
//选择字体
font-family:
css边框属性
//边框样式
border-style:solid
solid:实线
double:双线
groove:根据border-color:#F00;画出3D凹槽的线条
ridge:根据border-color:#F00;画出菱形边框
inset:根据border-color:#F00;画出3D凹边的线条
outset:根据border-color:#F00;画出3D凸边的线条
//边框颜色
border-color:#F00;
//边框宽度
border-width:npx;
//设置上、下、左、右边框
border-top:样式,粗细,颜色;
top:上
right:右
left:左
bottom:下
//综合声明边框
border:样式,粗细,颜色;宽度,高度;
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
