20151008~20151101所学HTML内容回顾整理
HTML (标签、div+Css)+ JS（js语法，dom，jquery）
HTML: Hyper Text Mankup Language 超文本标记语言
学html,实际就是在学标签都有哪些，怎么用。如何通过标签来控制文本样式。
文件后缀：html， htm
三、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; 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>