HTML 文件框架結構_ZenDei技術網路在線

1.head 1.1.meta標簽 1.2.link標簽 2.body 背景圖片設置設置背景色，文字顏色 bgcolor：背景色 text：非鏈接文字 link：可鏈接文字 alink：正被點擊的可鏈接文字 vlink：已經點過的可鏈接文字顏色值，採用十六進位表示，或者英文字母。設置時十六進位借 ...

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="/">返迴首頁</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>

　　符號實體，顯示：、>、<、、&、"、'、，使用如下標識：

&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 style="">
            <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=30%,30%,*>
    <frame src="baidu.htm"/>
    <frame src="sina.html"/>
    <frame src="51cto.html"/>
<frameset>

7.2.橫向排列

<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 class="header">
    <div class="login-bar">
        
        <a class="qq-login" href="#">QQ登陸</a>
        <a class="weibo-login" href="#">微博登陸</a>
    </div>
    <!-- <h1>美食網</h1> -->
    <div class="logo">
        <img src="logo.gif" alt="美食網">
    </div>
    
    <ul class="nav">
        <li><a href="home.html">主頁</a></li>
        <li><a href="recipes.html">美食</a></li>
        <li><a href="suggest.html">建議</a></li>
    </ul>
</div>


<div class="content">
    <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 class="photos">
        <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 class="geli"></div>

<div class="copyright">
        <div class="text-center height-big">
            版權所有 招財網 西安招財投資服務有限公司 地址：西安市高新區錦業路東段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;
}