你的位置:首页 > 网页设计

[网页设计]HTML 文件框架结构

 

1.head


1.1.meta标签

<!-- 设定字符集、自动刷新、自动跳转、关键字 --><meta charset="utf-8"><meta http-equiv="Content-Type" Content="text/html;charset=gb2312"><meta http-equiv="Refresh" Content="5"><meta http-equiv="Refresh" Content="5;Url=http://Server.com"><meta name="keywords" Content="开发型运维,51cto,blog">

 

1.2.link标签

<link rel="shortcut icon" href="image/ico.jpg">

 

2.body


   背景图片设置

<body background="">

  设置背景色,文字颜色

    bgcolor:背景色

    text:非链接文字

    link:可链接文字

    alink:正被点击的可链接文字

    vlink:已经点过的可链接文字

<body bgcolor=# text=# link=# alink=# vlink=#>

  颜色值,采用十六进制表示,或者英文字母。设置时十六进制借助拾色器采集。

 

2.1.段落p

  <p>定义段落。段落前后带有空白行。

 

2.2.超链接a

  文字“链接”,目标地址为“URL”。基本语法:

<a href="URL">链接</a>

  有跳转,就有返回,返回首页:

<a href="http://www.cnblogs.com//">返回首页</a>

  打开链接时,新建标签页:

<a href="http://sunnybay.blog.51cto.com/" target="_blank">我的博客</a>

  锚点,跳转到链接的某个位置。需要设定两个位置,起跳点、目标点:

 

2.2.1.id

<a href="URL#dist_name">链接1.1</a><div id="dist_name"></div>

 

2.2.2.name

<a href="introduction.html#what-is-mysql">1.3.1 What is MySQL?</a><h3 class="title"><a name="what-is-mysql"></a>1.3.1&nbsp;What is MySQL?</h3>

 

2.3.标尺线hr

  标尺,线默认标尺线占满一行

<hr>

  设置标尺线高度(默认两个像素高度)

<hr size=10>

  填充颜色

<hr color=red>

  设定长度

<hr width=77%>

  设定左右位置,默认居中

<hr width=77% align=left>

 

 2.4.标题h

  标题文字,独占一行

<h1>title<h1><h3>title<h3><h5>title<h5>

 

2.5.font

  字体大小,使用size属性

<font size=5>今天天气真好!</font>

  字体颜色,使用十六进制,或者预定义色彩:Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow、Aqua。一个十六进制设置颜色的示例:

<font color=#ffffff>White</font>

  符号实体,显示:wKiom1irnCiDmGlwAAACd7sXfUQ044.png、>、<、 、&、"、'、wKioL1irnDiSjGY5AAAC1EHM-JA774.png,使用如下标识:

&copy; &lt; &gt; &nbsp; &amp; &quot; &apos; &reg;

字符实体表示时包括末尾的分号。

 

2.6.label

  label只是一个内容标签,for属性与id关联时,可以定义焦点

<label for="username">用户名</label><input id="username" type="text" name="user" />

 

3.文字布局


3.1.空行

  一个“<p>”,表示一个空行。

吃了吗?<p>刚问个话

 

 

3.2.空行

  一个“<br>”,表示换行。

吃了吗?<br>回去就吃呀

 

 

3.3.文字对齐

  与标尺线的元素一样,使用“align”

<h3 align="center">Hello<\h3>
<h3 align="right">Hello<\h3>

 

3.4.列表

  无序列表,行首不显示序号

<ul>
  <li>Today
  <li>Tommorow
</ul>

 

  有序列表,行首显示行号

<ol>
  <li>Today
  <li>Tommorow
</ol>

 

  定义列表

<dl>
  <dt>Today
  <dd>Today is yesterday.
  <dt>Tomorrow
  <dd>Tomorrow is today.
</dl>

  定义列表的效果:

Today
  Today will be yesterday.
Tomorrow
  Tomorrow will be today.

 

 

4.图象


  更多关于图片,有另外一篇博文讲述。

4.1.基本用法

  指定位置、图像未载入时,显示文字“text”。

<img src="f.gif" alt="text">
<img src="f.gif" width="300px" alt="text" title="bat">

 

4.2.图像与文字对齐方式

<img src=URL align=top>西红柿炒蛋
<img src=URL align=middle>西红柿炒蛋
<img src=URL align=bottom>西红柿炒蛋

 

4.3.图像在页面中的对齐方式

<img src=URL align=left>

 

 

4.4.边框

  设置边框厚度使用属性“border”

<a href="URL"><img src=URL border=15></a>

 

 

5.表格table


  表格中每个方块,叫表元。

5.1.表格的基本语法

  tr:定义表行;th:定义表头;td:定义表格数据。例如

<!-- 这样的结构不好,这么写是为了减少行数 -->
<table border="1">
    <thead>
        <tr >
            <th>表头1</th><th>表头2</th><th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>第1行1列</td><td>第1行2列</td><td>第1行3列</td></tr>
        <tr><td>第2行1列</td><td>第2行2列</td><td>第2行3列</td></tr>
        <tr><td>第3行1列</td><td>第3行2列</td><td>第3行3列</td></tr>
    </tbody>
</table>

是个无框表格,设置border属性、或其值大于零时可以显示有框表格。

<table border>

 

  单元格合并:

<th colspan=3>
<th rowspan=3>

 

 

5.2.尺寸

  指定宽度

<table width=500px>

 

  设置表格尺寸

<table border width=170 height=100>

 

5.3.表格位置

  表格在页面中的位置,“align=center”……:

<table border="3" align="center">

 

  属性:cellspacing、cellpadding,分别表示单元格之间的厚度、单元格内边距。

<table  cellpadding=0 cellspacing=0>

 

 

  表元内文字对齐,“align=left、right、center”:

<td align=left>A</td>

 

  表元内文字纵向对齐,“top、middle、bottom”。

<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>

 

  表格在页面中的对齐:

<table align="left" border>

 

5.4.表格的标题

<table border>
  <caption align=center>Lunch</caption>

 

5.5.表元的背景色

<th bgcolor=Red>红色</th>
<th background="tomato.png">西红柿</th>

 

5.6.表元的边框颜色

<table cellspacing=5 border=5 bodercolor=#ff3a30>

 

 

6.会移动的文字


6.1.基本语法

  默认,向左移、循环移动。

<marquee>哈哈,我会动!</marquee>

 

6.2.移动方向

  默认是“behavior=scroll”。往哪移,“direction=left”:

<marquee direction=right>哈哈,我会往右动!</marquee>

 

 

6.3.移动到边上就停下了

  往哪移,“<marquee behavior=slide>”:

<marquee behavior=slide direction=right>哈哈,我要歇在右边!</marquee>

 

 

6.4.来回移

  “<marquee behavior=alternate>”:

<marquee behavior=alternate direction=right>哈哈,我就在你面前闪!</marquee>

 

6.5.循环次数

  循环次数到了,就消失了

<marquee loop=2>走两圈</marquee>

 

6.6.移动的速度、延时

  速度控制

<marquee scrollamount=50>这是个啥速度</marquee>
<marquee scrollamount=1>这是个啥速度</marquee>

  延时控制

<marquee scrollamount=50>这是个啥节奏</marquee>
<marquee scrolldelay=800 scrollamount=50>这是个啥节奏</marquee>

 

6.7.底色、面积

<marquee height=26 width=50% bgcolor=Yellow>哈哈,我会动!</marquee>

 

 

7.框架标记(多窗口分割)


7.1.纵向排列

  可以通过拖动分割线调整布局大小。

  <frameset cols=#>

<frameset cols=30%,30%,*>
    <frame src="baidu.htm"/>
    <frame src="sina.html"/>
    <frame src="51cto.html"/>
<frameset>

 

7.2.横向排列

  <frameset rows=#>

<frameset rows=30%,30%,*>
    <frame src="baidu.htm"/>
    <frame src="sina.html"/>
    <frame src="51cto.html"/>
<frameset>

 

实例(不能放在body中):

<!doctype html>
<html>
<head>
    <meta charset=utf-8/>
    <title>多窗口布局</title>
</head>

    <frameset rows=30%,30%,*>
        <frame src="recipes.html"/>
        <frame src="egg.html"/>
        <!-- <frame src="logo.bmp"> -->
    </frameset>

  属性frameboder设定分割线宽度,为零时,不可以拖动其布局。同时,可以使用noresize进制调整大小。

<frameset rows=130px,* frameborder=1>
    <frame src="toplist.html" noresize/>



 


 

  开始系统点学习编写网页代码。

 

egg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食网 - 西红柿炒鸡蛋</title>
    <link type="text/css" rel="stylesheet" href="layout.css">
</head>
<body>

<div >
    <div >
        
        <a  href="#">QQ登陆</a>
        <a  href="#">微博登陆</a>
    </div>
    <!-- <h1>美食网</h1> -->
    <div >
        <img src="logo.gif" alt="美食网">
    </div>
    
    <ul >
        <li><a href="home.html">主页</a></li>
        <li><a href="recipes.html">美食</a></li>
        <li><a href="suggest.html">建议</a></li>
    </ul>
</div>


<div >
    <h2>西红柿炒鸡蛋</h2>
    <p>这道菜,你是不知道,家家户户都爱吃,可是每个人都不会做。这可怎么办呢?今天呀,美食网就来帮助大家做这道菜。我们一起来完成吧!</p>
    <p><a href="legal.html">免责声明</a></p>

    <h3>材料</h3>
    <ul>
        <li>中型4个西红柿</li>
        <li>土鸡蛋4个</li>
        <li>盐5克</li>
        <li>食用植物油少许</li>
        <li>葱丝、<a target="_blank" href="http://item.jd.com/10343917576.html">白糖</a>、<a target="_blank" href="https://item.jd.com/964437.html">料酒</a></li>
        <li><strong>炒鸡蛋千万不能放味精</strong></li>
    </ul>

    <h3>步骤</h3>
    <ol>
        <li>打好鸡蛋、切好西红柿、葱丝。</li>
        <li>放油少许,把葱丝略炒。</li>
        <li>先炒鸡蛋,记得放盐。</li>
        <li>待鸡蛋稍硬,放入切好的西红柿。</li>
        <li>炒到西红柿有点变形,放入白糖和料酒。</li>
        <li>搅拌均匀后,准备出锅、加入葱丝,装盘。</li>
    </ol>
    
    <h3>美食图片展示</h3>
    <ul >
        <li><img src="eg/01.jpg" alt="展示01"></li>
        <li><img src="eg/02.jpg" alt="展示02"></li>
        <li><img src="eg/03.jpg" alt="展示03"></li>
        <li><img src="eg/04.jpg" alt="展示04"></li>
        <li><img src="eg/05.jpg" alt="展示05"></li>
        <li><img src="eg/06.jpg" alt="展示06"></li>
    </ul>
</div>

<div ></div>

<div >
        <div >
            版权所有 招财网 西安招财投资服务有限公司 地址:西安市高新区锦业路东段32号锦业时代广场B1栋26层 电话:4000-94-4000
            <br>陕ICP备14007227号
        </div>
</div>
    
</body>
</html>

 

layout.css

 
 /* 页面初始化 */
 html, body, h1, h2, h3, p, ul, ol, li, a {
     padding:0;
     border:0;
     margin:0;
 }
 
 /* 网页布局 */
 
 .login-bar{
    text-align:right;
    
 }

.login-bar a{
    color:yellow;
    background:url(login.png) 0 0 no-repeat;
    padding-left:32px;
    height:32px;
    display:inline-block;
    line-height:32px;
 }
 
 .login-bar a.qq-login{
     background-position:0 -32px;
 }
 
 .login-bar weibo-login{
     background-position:0  0;
 }
 
.nav{
    padding-left:0;
    text-align:center;
    margin:30px;
}
        
.nav li{
    display: inline;
}
        
.nav a{
    color:#b56663;
    text-decoration:none;
}
 
 .header {
     padding:20px;
     /*  */
     /* background-color:#000000; */
     background:#000000 url(header.jpg) top left repeat;
     
     width:890px;
     margin:0 auto;
 }
 
 .content {
     padding:35px;
     border:0px solid #dddddd;
     margin:30px auto 5px auto;
     
     width:880px;
     
     background:#000000 url(body.jpg) top left repeat;
}

.geli{
    background:#121212;
}

.copyright{
    padding:35px;
    border:0px solid #FFFFFF;
    margin:5px auto 30px auto;
    
    width:880px;
    
    background:#FFFFFF url() top left repeat;
}

/* h3标题前留白 */
.content h3 {
    margin: 30px 0 3px 0;
}

.logo {
    text-align:center;
    
}

.logo img{
    width: 255px;
    height: 166px;
}

/* 美食图片展示 */
.photos {
    margin: 0 0 30px 0;
    
}

.photos li {
    display:inline;
}

.photos li img {
    width:130px;
    /* height:290px; */
}
 
body {
    background:#FFFFFF url(main.jpg)top left repeat;
    font: normal normal 16px/33px 微软雅黑, 黑体, Verdana, Arial, sans-serif;
}
 
 h1 {
    color:#ffffff;
    text-align:center;
 }
 
 
 /* 通用样式 */
 a {
    text-decoration:none;
    color:darkred;
}
        
a:hover {
    text-decoration:underline;
    color:darkred;
}
        
h2, h3 {
    color:#79B1A3;
}

.rec li {
    list-style-type:none;
}

.rec li {
    border: 1px solid #b56663;
    padding-left:50px;
    margin: 15px 10px;
}

.rec li  p{
    padding-left:35px;
}