html網頁設計實例_html網頁設計：一個簡單的登錄界面代碼！

1、製作一個HTML5網頁

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
content="width=device-width;user-scalable=no;initial-scale=1.0;maximum-scale=1.0;minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/data.php">
</head>
<body>
<script>let student = new Object;
student.no = 1;
student.name = "大企鵝";
student.sex = "男";
student.born = "1995-09-25";
student.score = 0;
student.learn = function () {
    student.score += 10
};
student.age = function () {
    let returnAge;
    // 根據生日計算年齡（"1995-09-25"）
    //以下五行是為了獲取出生年月日，如果是從身份證上獲取需要稍微改變一下
let strBirthdayArr = student.born.split("-");
    let birthYear = strBirthdayArr[0];
    let birthMonth = strBirthdayArr[1];
    let birthDay = strBirthdayArr[2];
    d = new Date();
    let nowYear = d.getFullYear();
    let nowMonth = d.getMonth() + 1;
    let nowDay = d.getDate();
    if (nowYear == birthYear) {
        returnAge = 0;//同年則為0歲
} else {
        let ageDiff = nowYear - birthYear; //年之差
if (ageDiff > 0) {
            if (nowMonth == birthMonth) {
                let dayDiff = nowDay - birthDay;//日之差
if (dayDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            } else {
                let monthDiff = nowMonth - birthMonth;//月之差
if (monthDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            }
        } else {
            returnAge = -1;//返回-1 表示出生日期輸入錯誤晚於今天
}
    }

    return returnAge;//返回周歲年齡
};
document.body.innerHTML += student.score + "<br>";
document.body.innerHTML += student.age();
</script>
</body>
</html>

需要自定義年齡，初分數。

Usage：學習: student.learn() 計算年齡： student.age()

2、html網頁設計：一個簡單的登錄界面代碼！

是這樣的效果嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>3</title>
<script>
function r()
{

var username=document.getElementById("username");

var pass=document.getElementById("password");
if(username.value=="")
{
alert("請輸入用戶名");
username.focus();
return;
}
if(pass.value=="")
{
alert("請輸入密碼");
return;
}
return true;
}
</script>
</head>
<body>
<form>
<table width="350" bgcolor="#ccffcc" style="border-color" border="1">
<tr align=center>
<td>用戶名</td><td><input type="text" name="username" id="username"></td>
</tr>
<tr align=center><td>密碼</td><td><input type="password" name="password" id="password"></td></tr>
<tr align=center><td>驗證碼</td><td><input type="text" name="yanzheng"></td></tr>
<tr align=center><td colspan="2"><input type="button" value="登錄" onclick="r();"/> <input type="reset" value="重置"/></td></tr>

</table>
</form>
</body>
</html>

3、用html如何製作一個簡單的網頁代碼？

1、首先，在計算機桌面上創建一個新文件夾，然後在該文件夾中創建一個新的文本文檔。

2、然後雙擊打開帶有記事本的文本文檔，如下圖所示，我們編寫一個簡單的html代碼。

3、單擊「另存為」的功能選項，顯示默認保存為編碼為ANSI。

4、我們將更改編碼和文件名，將其更改為如圖所示的圖像並保存。

5、然後返回到新創建的文件夾，發現有一個額外的html文件。

6、最後，使用瀏覽器打開html文件，效果如圖所示，簡單的網頁被成功編寫。

4、網頁製作簡單案例 8個網頁的網站

這個還是不難的。你可以把你們老師的具體要求發出來，根據你們老師的要求來做。

5、靜態網頁製作實例啊,靜態網頁製作實例啊,誰有啊?

設計雲免費靜態網頁製作實例就可以下載

6、製作一個簡單的index.html網頁

實現的方法和詳細的操作步驟如下：

1、第一步，右鍵單擊計算機桌面上的空白區域以創建一個新的「文本文檔」，如下圖所示，然後進入下一步。

2、其次，完成上述步驟後，輸入要在新創建的文本文檔中顯示的內容，如下圖所示，然後進入下一步。

3、接著，完成上述步驟後，返回桌面，將文本文檔的名稱和後綴更改為「
index.html」，如下圖所示，然後進入下一步。

4、然後，完成上述步驟後，該文件的默認「打開方式」將成為瀏覽器，雙擊「index.html」文件，如下圖所示，然後進入下一步。

5、最後，完成上述步驟後，就打開了剛創建的「index.html」文件了，如下圖所示。這樣，問題就解決了。

7、需要一份html教程的網頁製作，主題是我的個人網頁，

這是我在大學學的知識
給你借鑒一下，希望對你有幫助
網頁設計教程
<html>文字操作（一）
1、段落 <p>……</p>
在dreamweaver設計界面中，enter（回車）即為另起一段。
2、換行 <br/>
在dreamweaver設計界面中，shift+enter即為另起一段。
3、標題1~6 <h1>……</h1>
標題1最大，依次變小。
4、空格:
Dreamweaver 只允許一次空格，如果需要使用連續空格，則需要設置，或使用；
或使用快捷鍵：ctrl+shift+space（空格鍵）
5、水平線 <hr>
size:水平線的粗細
width:長度
align:對齊方式
<htlm>文字操作（二）
一、幾個文字特殊效果
1、加粗<b></b> <strong></strong>
2、傾斜<i></i> <em></em>
3、上標<sup></sup>（適合用代碼來實現，設計中無法完成）
4、下標<sub></sub>（適合用代碼來實現，設計中無法完成）
隨著css的逐漸普及，文字的效果都更多的通過css來實現，以上的幾個標簽作為了解即可。
二、文字列表
1、無序列表
無序列表有兩個標簽<ul>和<li>
<ul>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ul>
2、有序列表
有序列表有兩個標簽<ol>和<li>
<ol>
<li>CSS教程</li>
<li>DOM教程</li>
<li>XML教程</li>
<li>Flash教程</li>
</ol>
圖片
一、如何獲取圖像
最好的途徑是通過互聯網
二、使用設計界面插入圖像
1、菜單（一個圖片屬性：替換文字）
2、工具欄
3、拖曳
三、圖像格式擴展閱讀：
http://blog.sina.com.cn/s/blog_45ac0d0a010005d8.html
JPEG圖像、GIF圖像、PNG圖像

四、代碼
<img src=" " width=" " height=" " alt=" "/>

一、超級鏈接的基本知識
1、含義：實現網頁之間的跳轉和聯系
2、分類：
絕對鏈接 http://www.baidu.com
相對鏈接在同一站點不同位置之間的鏈接
二、三種常見的超級鏈接
1、文字鏈接<a href="http://www.baidu.com">百度</a>
2、圖像鏈接
3、圖像熱點鏈接
===============
還有不是太常用的鏈接
1、空連接 <a href="#">空連接</a>
2、錨鏈接:在同一頁面的不同位置跳轉
三、鏈接的屬性
鏈接目標 <a href="http://www.baidu.com" target="_blank">百度</a>

表單設計
一、設計界面
1、單元格間距
2、單元格邊距
二、代碼
1、從屬關系：表格由行組成，行由單元格組成。
表格：<table>……</table>
行：<tr>……</tr>
單元格：<td>……</td>
2、<table>標簽的屬性
bgcolor:背景色
cellspacing:表格的單元格間距（間距）
cellpadding:表格的單元格邊距（填充）
文字占據一行<div></div>
文字不佔據一行<span></span>
、html引入css的幾種方法
1、鏈接式
將css代碼寫在一個獨立的文件中，文件的擴展名為.css。然後在html網頁中使用<link/>標簽將外部css文件放在<head></head>之間。舉例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="tp.css" rel="stylesheet" type="text/css">
</head>
2、嵌入式
將Css代碼寫在<head></head>之間，並且用<style></style>包含起來，如果考慮到兼容性，可以再使用 將css代碼包含其中。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
</head>
1．標簽選擇器：
就是網頁元素本身，所有的XHTML框架中的標簽都可以作為CSS樣式的選擇器，如定義段落樣式，我們可以選擇P標簽的名稱，即把P作為選擇器。P{/*定義段落屬性*/}。如果定義了標簽樣式，則整個網頁中使用了該標簽都會應用這個樣式。一般應用在統一文檔的某個元素的顯示樣式中。
2．ID選擇器：
它是唯一的，網頁中不同的元素它的ID是不一樣的。而且一個元素它只能應用一個ID。因為如果我們使用Javascript來控制網頁元素的時候它是通過ID來實現的，在這種情況下就無法正常工作了。它在定義的時候用#開始，它在應用的時候用id=」」。它的名稱由設計者來確定。
3．類選擇：
它的名稱也是由設計者來確定的，它在定義的時候用點號開始，應用的時候用class=「」；它與ID選擇器所不同的是它具有一對多的特性而ID是一對一的特性。也就是說一個類選擇器它可以應用到多個網頁元素中而且一個元素可以應用多個類，一個元素也可以應用兩個類樣式，中間用空格分開，但不能是三個或者更多。在同等條件下，ID具有比class更高的優先權。
1、復雜類選擇器
p.one{color:red}
實例：
<style>
.one{color:red;}
p.two{color:blue;}
</style>
.one可以用於各種標簽；而。two只能用於p標簽。
2、後代選擇器
div p{color:#00FF00}
例子：
<div>
<h1>這是一個標題。</h1>
<p>我是一個兵。</p>
</div>
3、組合選擇器（集體聲明）
p，h1，.one{color:red}
4、通用選擇器
對html文檔的所有元素進行控制。
*{color：red；}
5、偽類選擇器
a:link;hover;visited;active
或者：a.one:link;a#two:link
當用css定義鏈接的各種狀態時，一定要注意其書寫順序，即：:link :visited :hover :active。
如果不按照該順序書寫可能無法達到自己希望的效果。
一、屬性
1.大小 font-size
大小就是字型大小，可以直接填入數字，然後選擇單位。
2.樣式
font-style
設置文字的外觀，包括正常、斜體、偏斜體。
3.行高 line-height
這項設置在網頁製作種很常用。設置行高，可以選擇「正常」，讓計算機自動調整行高，也可以使用數值和單位結合的形式自行設置。需要注意的是，單位應該和文字的單位一致，行高的數值是包括字型大小數值在內的。例如，文字設置為12pt，如果要創建一倍行距，則行高應該為24pt。
4.修飾 font-decoration
文本的特殊樣式：上下劃線、刪除線、閃爍（IE不支持此效果）
5.粗細 font-weight
設置文字的加粗還是變細的效果。
6.顏色 color
設置文字的色彩。
顏色的表示方法常見的有RGB模式、十六進制模式和名稱模式。
7.字體 font-family
設置文字的字體，注意多個字體的選擇。
8.文本對齊 text-align
設置文本的水平對齊方式。這里也不僅僅局限於文字，泛指所包含的內容。
9.文字縮進 text-indent
這是最重要的項目。中文文字的首行縮進就是由它來實現的。首先填入具體的數值，然後選擇單位。文字的縮進和字型大小要保持統一。如字型大小為12px，像創建兩個中文自的縮進效果，文字縮進就應該為18px。
二、屬性值：css中的單位
1、大小單位：px和em
2、顏色單位：red和#00ff00
三、css背景
1、背景色：background-color: （5-1）
2、背景圖片：background-image:url(^);（5-3）
3、背景圖片的重復方式：background-repeat：（5-5）
4、背景圖片的位置：background-position：top right；（30% 70%;水平位置垂直位置）(300px 30px;)（5-8）
5、背景圖片的固定與否：background-attachment：scroll；（fixed；）背景是否與網頁內容一起滾動。（5-10）
fixed：背景不動，內容動；scroll：背景和內容一起滾動
6、背景圖片的綜合樣式：background：blue url(……) no-repeat fixed 5px 10px;
7、列表樣式：list-style：

8、誰能幫我用HTML語言做一個簡單的網頁?代碼就行

<html>

<head>

<title>第一個html網頁</title>

<metacharset="utf-8">

</head>

<body>

</body>

</html>

<html>

<head>

<title>第一個html網頁</title>

<metacharset="utf-8">

</head>

<body>

<table>

<tr>

<td>第一行第一列專</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

</table>

</body>

</html>

(8)html網頁設計實例擴展資料

HTML語言特點

1、HTML語法較屬弱。

在w3c制定的HTML5規范中，對於HTML5在語法結構上的規格限制是較鬆散的，如、或在瀏覽器中具有同樣的功能，是不區分大小寫的。另外，也沒有嚴格要求每個控制標記都要有相對應的結束控制標記。

2、HTML5編寫簡單。

即使用戶沒有任何編程經驗，也可以輕易使用HTML來設計網頁，HTML5的使用只需將文本加上一些標記(Tags)即可。

3、HTML標記數目有限。

在w3C所建議使用的HTML5規范中，所有控制標記都是固定的且數目是有限的。固定是指控制標記的名稱固定不變，且每個控制標記都已被定義過，其所提供的功能與相關屬性的設置都是固定的。

導航:首頁 > 萬維百科 > html網頁設計實例

html網頁設計實例

與html網頁設計實例相關的知識