20151008~20151101所学HTML内容回顾整理
HTML (标签、div+Css)+ JS（js语法，dom，jquery）
HTML: Hyper Text Mankup Language 超文本标记语言
学html,实际就是在学标签都有哪些，怎么用。如何通过标签来控制文本样式。
文件后缀：html， htm
一、标签：基本标签、文字标签、内容标签、布局标签
二、用ps把一张图做成HTML页面
三、div+Css
四、杂
基本标签：
<html>
<head>
<title>标题内容</title>
head 中标题栏文字，起控制作用，设置编码方式，背景音乐或关键词设置、描述等信息
</head>
<body>
<font color="#990000" size="大小">内容</font> 三原色：红 绿 蓝
标签 属性 # 00 00 00 --黑
FF FF FF --白
--00~FF 从没有到满了
网页的内容
</body>
</html>
任何标签都是包含关系，不会交叉
标签分为：基本标签<html><head><title></title></head><body></body></html>
body属性：text文本的颜色
bgcolor背景颜色
bggroud=图片路径 背景图片 ../ 往上翻一个文件夹
topmargin="100"上边距 网页内容开始的地方距离网页上边线100像素
bottommargin="100"下边距
leftmargin="100"左边距 rightmargin="100"右边距
head中有一个标签bgsound 背景音乐
<bgsound src="Images/456.mp3" loop="-1" />
文字标签<font></font>
属性：color颜色 size大小 face字体 标签里的属性用空格隔开
例子：<font color="颜色" size="大小" face="字体名称">汉企</font> <b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<center>居中</center>
<br> 换行
<!--注释-->
以&符开头，可以输入好多特殊字符
< 小于号<
> 大于号>
  空格
© 版权符，就是一个圈里一个c
内容标签
标题标签：
<h1>标题一</h1>
<h2>标题二</h2>
随着数字变大，字体字号变小
<h6>标题六</h6>
段落标签：
asfyehdjkkdjriw
<p>这是一段特殊的文字</p> 上面空一行空白行，下面空一行
被P标签包含起来的会是单独一段
dwfjiowfirueib
djiorjieisfdkhi
<div></div> 层标签 默认占一行，换行
<span></span> 层标签 有多大，占多大
列表：
<ol>有序列表
<li>1</li> ===>1. 1
<li>2</li> 2. 2
<li>3</li> 3. 3
<li>9</li> 4. 9
</ol>
<ul>无序列表
<li>1</li> ===>● 1
<li>2</li> ● 2
<li>3</li> ● 3
<li>9</li> ● 9
</ul>
ol、ul 属性：type 控制前面的序列方式
超链接：<a href="网址">内容</a>
图片：<img src="路径" width="宽" height="高"/>
背景音乐：<bgsound src="Images/456.mp3" loop="-1" /> 最好不要用中文音乐名，改成数字等
布局标签 表格 <table> 定义表格 <caption> 定义表格标题。 <th> 定义表格的表头。 <tr> 定义表格的行。 <td> 定义表格单元。 <thead> 定义表格的页眉。 <tbody> 定义表格的主体。 <tfoot> 定义表格的页脚。 <col> 定义用于表格列的属性。 <colgroup> 定义表格列的组。 <table> （ width 宽度 border 边框 cellpadding 内容与单元格的边距 cellspacing 单元格之间的边距 align 对齐方式 bgcolor 背景色 background 背景图片 ） <tr> --第一行-- （ align 一行的内容水平对齐 valign 一行的内容垂直对齐 height 行高 ） <td>第一列</td> <td>第二列</td> </tr> <tr> --第二行-- <td>第一列</td> <td>第二列</td> </tr> </table> 合并单元格 colspan="n" 合并同一行单元格 rowspan="n" 合并同一列单元格
用ps把一张图做成HTML页面
用ps把一张图做成HTML页面
table 表格
div+css
切图、切片工具、切图、文件、存储为web所用格式、修改图片大小、GIF、存储、格式：
HTML和图像、选择存储位置
1.在ps中打开一个网页模板，利用切片工具进行剪裁
2存储方式是：存储为web所用格式
3设置存储像素1366.GIF格式
4保存到文件夹中以html+图像 的格式
5打开html，打开方式为DW方式打开
6根据网页在进行对其修改
设置超链接：加上超链接网址，然后设置boder="0"
<td rowspan="2">
<a href="http://baidu.com">
<img src="images/16sucai_201510091610-(1)_03.gif" width="114" height="33" alt="" boder="0">
</a>
</td>
css+div
超链接：
<a hert = " " target(超链接的打开方式) = "self（自身）"或"new（新开窗体）">
</a>
锚点：超链接的特殊应用
<a href="#1"...> </a>
<a name ="1"> </a>
表格：容器,可以把这一个页面划分区域表格不能随便移动
div： 层标签 （默认占一行）
通过坐标设定位置，可以随意挪动 table 的单元格可以任意拖拽更利于网站优化
<div> </div>
css:style：样式表 控制标签的样式
body以及body里面所有的标签都可以加style
style：样式表
内联样式表：style 样式表写在body属性位置的时候
内嵌样式表：写在head范围之内的,来控制当前页面着写标签的样式
<head>
<style>
body{ /* 设置body标签的 颜色 */
background-color:#309
}
</style>
</head>
外部样式表：通过 link 标签链接 css 文件起一个宏观调控的作用，后期维护方便
<head>
选择器：如何用外部样式表控制HTML的标签
<link type="text/css"
href="css/style.css" rel="stylesheet" />
</head>
id选择器：标签的身份编号，一个网页里面 body范围之内所有的标签都可以写id 而且 id不能重复唯一识别
先在css文件里设置：
#p1
{
color:#0F9;}
然后：作用在原文件
</head>
<body>
<p id="p1">rer</p>
<p id="p2">sdf</p>
<p id="p3">sdf</p>
</body>
</html>
标签选择器：
body{ /* 设置body标签的 颜色 */
background-color:#309
}
优先遵循id选择器
在css注释：/* */
在HTML注释<!-- -->
class选择器：
先在css文件里面建立
.yangshi1
{
color:#C0F;
}
然后在文件里面link css文件 然后通过
class=样式的名字
<body>
<p id="p1">rer</p>
<p id="p2" class="yangshi1">sdf</p>
<p id="p3">sdf</p>
</body>
画一个div，让这个div占满整个屏幕：
#apDiv1 {
position: absolute;
width: 100%;▲
height: 100%;▲
background-color:#FF0;
z-index: 1;
}
position是位置：默认是absolut，相对于body而言固定
fixed 锁定位置，如网页上方的导航栏
当两个div叠加到一起时，z-index: 从1开始，后面数字越大，层数越靠上，覆盖
当两个div中z-index:都为1 时，body中<div id="apDiv1"></div><div id="apDiv2"></div> 后写的那个在上面
做一个导航菜单，div的居中
position: absolute;
margin:auto;
div中，margin设置为auto是，是自适应，上下左右间距自由，取决于position：
absolute时，是在起点位置，
relative时，是居中
overflow:scroll;--如果超出的话给div加滚轴
hidden --隐藏
<div class="yincang" onmouseover="this.className=‘xianshi‘" onmouseout="this.className=‘yincang‘">
杂： 鼠标放到图片上弹出层文字效果
鼠标放到图片上弹出层文字效果
<style>
img{border:0}/* css 注释说明：设置图片边框为0 */
.xiaotu{ position:relative;width:365px; height:250px;margin:0 auto}
.xiaotu a,.xiaotu span{display:none; text-decoration:none}
.xiaotu:hover{cursor:pointer}
.xiaotu:hover a.now{cursor:pointer; position:absolute; top:0; width:100%; height:100%;
z-index:100; left:0; display:block;}
.xiaotu:hover span{ display:block;position:absolute; bottom:0; left:0;color:#FFF;width:554px;
z-index:10;height:36px; line-height:36px; background:#000;filter:alpha(opacity=60);-moz-opacity:0.5;opacity: 0.5;}
/* 设置显示文字定位位置，背景半透明 */
</style>
<div class="divcss5" style="background:url(http://www.bcty365.com/uploadfile/2014/0621/20140621103346573/img/1a.jpg)">
<span>文字内容</span>
<a href="#" class="now">?</a>
</div>
显示、隐藏 <div id="xuanxiang" class="yincang" onMouseOver="this.className=‘xianshi‘" onMouseOut="this.className=‘yincang‘"> <h1>主页</h1> <div id="neirong">内容1<br>内容2<br></div> </div>
时间： 2024-11-14 21:31:19