html 无序列表_有序列表_框架

HTML不区分大小写，但最好统一。

练习题：课程表

<th>定义表头

<th>和<td>从本质上是没有区别的，但是用了<th>会自动的加粗体

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body>  
         <center>成绩表</center>  
         <br/>  
         <!--表格-->  
         <table border="3px" align="center" width="600px" bordercolor="579AFE">  
             <tr align="center">  
                 <th>项目</th>  
                 <th colspan="5">上课</th>  
                 <th colspan="2">休息</th>  
             </tr>  
             <tr align="center">  
                 <th>星期</th>  
                 <th>星期一</th>  
                 <th>星期二</th>  
                 <th>星期三</th>  
                 <th>星期四</th>  
                 <th>星期五</th>  
                 <th>星期六</th>  
                 <th>星期日</th>  
             </tr>  
             <tr align="center">  
                 <td rowspan="4">上午</td>  
                 <td>语文</td>  
                 <td>数学</td>  
                 <td>英语</td>  
                 <td>英语</td>  
                 <td>物理</td>  
                 <td>计算机</td>  
                 <td rowspan="4">休息</td>  
             </tr>  
             <tr align="center">  
                 <td>数学</td>  
                 <td>数学</td>  
                 <td>地理</td>  
                 <td>历史</td>  
                 <td>化学</td>  
                 <td>计算机</td>  
             </tr>  
             <tr align="center">  
                 <td>化学</td>  
                 <td>语文</td>  
                 <td>体育</td>  
                 <td>计算机</td>  
                 <td>英语</td>  
                 <td>计算机</td>  
             </tr>  
             <tr align="center">  
                 <td>政治</td>  
                 <td>英语</td>  
                 <td>体育</td>  
                 <td>历史</td>  
                 <td>地理</td>  
                 <td>计算机</td>  
             </tr>  
             <tr align="center">  
                 <td rowspan="2">下午</td>  
                 <td>语文</td>  
                 <td>数学</td>  
                 <td>英语</td>  
                 <td>英语</td>  
                 <td>物理</td>  
                 <td>计算机</td>  
                 <td rowspan="2">休息</td>  
             </tr>  
             <tr align="center">  
                 <td>数学</td>  
                 <td>数学</td>  
                 <td>地理</td>  
                 <td>历史</td>  
                 <td>化学</td>  
                 <td>计算机</td>  
             </tr>  
         </table>  
     </body>  
 </html>  

经验：为了提高开发效率，把帮助手册，还有index.html的帮助文档首页都弄到快速启动栏里，这样就不用临时去翻动文件夹了，节省时间。

html列表--无序列表
<ul type="属性值">
<li>列表内容</li>

</ul>

<ul>的属性设定（常用）：例如<ul type="square">
type="square"

设定符号款式，其值有三种，如下，默认为type="disc"；
html的元素参考 html语言教程（html版）
type="disc"时的列项符号为实心圆点
type="circle"时的列项符号为空心圆
type="square"时的列项符号为空心正方形

ul用的很多，新浪搜狐首页面大量使用ul来显示数据，搜索引擎很喜欢ul

[html]view plaincopy 
    
 <html>  
     <head>  
         <title></title>  
     </head>  
     <body>  
         <ul>  
             <li>英雄</li>  
             <li>精武门</li>  
             <li>西游记</li>  
         </ul>  
         <br/>  
         <ul type="square">  
             <li>英雄</li>  
             <li>精武门</li>  
             <li>西游记</li>  
         </ul>  
         <br/>  
         <ul type="circle">  
             <li>英雄</li>  
             <li>精武门</li>  
             <li>西游记</li>  
         </ul>  
     </body>  
 </html>  

html有序列表
<ol type="属性值" start="起始值">
<li>内容</li>
</ol>

<ol>称为顺序列表标记。<li>则用以标记列表项目。所谓顺序列表就是每一项有顺序，又称编号列表。
<ol>的属性设定（常用）：
例如：<ol type="i" start="4"></ol>
设定开始数目，不论设定了哪一数目款式，其值只能是1,2,3……等整数，默认为start="1"。
i可以取以下值中的任意一个：
1阿拉伯数字1,2,3……
a小写字母a,b,c……
A大写字母A,B,C……
i小写罗马字母i,ii,iii……
I大写罗马数字I,II,III……

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body>  
         <ol>  
             <li>宋江</li>  
             <li>卢俊义</li>  
             <li>吴用</li>  
         </ol>  
         <br/>  
         <ol type="i">  
             <li>宋江</li>  
             <li>卢俊义</li>  
             <li>吴用</li>  
             <li>林冲</li>  
         </ol>  
         <br/>  
         <ol type="A" start="3">  
             <li>宋江</li>  
             <li>卢俊义</li>  
             <li>吴用</li>  
             <li>林冲</li>  
         </ol>  
     </body>  
 </html>  

html框架
用途主要是用于分割显示多个页面
<frameset frameborder="边框大小" cols="横向各窗口百分比，隔开" rows="纵向各窗口百分比"
<frame name="给frame取名" src="html路径" noresize>
</frameset>

注意：如果a.html包括了其它的页面（framsset）则要求a.html本身不能有body体和body的内容（如hello）

a.html

扫描二维码关注公众号，回复： 1212155 查看本文章

[html]view plaincopy 
    
 <frameset cols="50%,*">  
     <!--noresize 不允许改变窗口大小 frameborder="0"没有边框，b和c都要添加-->  
     <!--框架起名，b.html页面超链接点击后，会在c页面所在位置出现-->  
     <frame name="frame1" src="b.html" noresize frameborder="0"/>  
     <frame name="frame2" src="c.html" frameborder="0"/>  
 </frameset>  

b.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="pink">  
         <!--target表示我们点击后，目标指向谁，替换哪个框架-->  
         <a href="zjl.html" target="frame2">周杰伦</a><br/>  
         <a href="qq.html" target="frame2">齐秦</a>  
     </body>  
 </html>  

c.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="silver">  
         <p>c.html</p>  
     </body>  
 </html>  

zjl.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="blue">   
         <p>周杰伦的歌</p>  
     </body>  
 </html>  

qq.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="gray">   
         <p>齐秦的歌</p>  
     </body>  
 </html>  

target属性值有四个

1._blank:表示打开一个全新的页面
2._self:替换本页面
3._top:整个浏览器窗口
4._parent:父窗口
5.target值中直接写对应的那个frame的名字

小练习

纵向分割，横向分割

这种结构往往都是在后台，前台很少用，框架多用于后台管理的页面，前台用浮动窗口

实现：点击青花瓷，在歌词大全处切换成，青花瓷的歌词

all.html

[html]view plaincopy 
    
 <frameset rows="20%,*">  
     <!--scrolling="no"不出现滚动轴-->  
     <frame src="top.html" scrolling="no"/>  
     <!--对下面的80%再左右分割-->  
     <frameset cols="20%,*">  
         <frame src="left.html" />  
         <frame src="right.html" name="myframe" />  
     </frameset>  
 </frameset>  

top.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="green">  
         <p>Top</p>  
     </body>  
 </html>  

left.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="yellow">  
         <ul>  
             <li><a href="qhc.html" target="myframe">青花瓷</a></li>  
             <li><a href="dbr.html" target="myframe">当兵的人</a></li>  
         </ul>  
     </body>  
 </html>  

right.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="red">  
         <p>歌词大全</p>  
     </body>  
 </html>  

qhc.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="blue">   
         <p>青花瓷的歌词</p>  
     </body>  
 </html>  

dbr.html

[html]view plaincopy 
    
 <html>  
     <head></head>  
     <body bgcolor="gray">   
         <p>当兵的人的歌词</p>  
     </body>  
 </html>  

html 无序列表_有序列表_框架

猜你喜欢