導航:首頁 > 萬維百科 > html5網頁設計思路

html5網頁設計思路

 發布時間：2020-10-04 12:23:40

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、html5網頁設計期末作業，要求是一個網站（至少4個網頁）

按F12或者右鍵→檢查 可查看網頁源代碼，左上角元素下面的圖標，可讓你看具體區域的代碼，右面那一列是CSS樣式，你找幾個簡單的網頁把代碼復制過來慢慢改唄

3、HTML5是什麼意思，網頁設計？

關於HTML5的解釋簡要如下：
1、HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標准制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標准，以期能在互聯網應用迅速發展的時候，使網路標准達到符合當代的網路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要插件的豐富性網路應用服務（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，並且提供更多能有效加強網路應用的標准集。
2、具體來說，HTML5添加了許多新的語法特徵，其中包括<video>、<audio>和<canvas>元素，同時集成了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數據內容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標准化了。同時APIs和DOM已經成為HTML5中的基礎部分了。HTML5還定義了處理非法文檔的具體細節，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯誤，ITJOB。

4、HTML5網頁前端設計中如下圖表單的代碼怎麼寫？

下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡單，div 太麻煩了；
<html xmlns=" http://www.dayinmandarin.com ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>黑板</title>
</head>
<body>
<div style="width:500px;">
<h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;">用戶注冊頁面</h1>
<table cellpadding="0" cellspacing="10" style="margin:0 auto;">
<tr>
<td align="right" valign="top"><div>用戶名：</div></td>
<td><input style='width:250px' value='請輸入用戶名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>密 碼：</div></td>
<td><input style='width:250px' value='請輸入密碼' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>確 認：</div></td>
<td><input style='width:250px' value='請再次輸入密碼' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>姓 名：</div></td>
<td><input style='width:250px' value='請輸入真實姓名' /></td>
</tr>
<tr>
<td align="right" valign="top"><div>郵 箱：</div></td>
<td><input style='width:250px' value='請輸入電子郵箱' /></td>
</tr>
</table>
<div align="center"><input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注冊" /></div>
</div>
</body>
</html>

5、網頁設計Html5

左邊的左浮動，右邊的右浮動，沒有問題的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div0 {
    width: 800px;
}
#divL {
    width: 598px;
    height: 300px;
    float: left;
    background-color: #ddd;
}
#divR {
    width: 200px;
    height: 300px;
    background-color: #eee;
    float: right;
}
#l1 {
    height: 50px;
    background-color: #888;
}
#l2 {
    height: 100px;
    background-color: #aaa;
}
</style>
</head>
<body>
<div id='div0'>
  <div id='divL'>
    <div id='l1'>左浮動內容1</div>
    <div id='l2'>左浮動內容2</div>
  </div>
  <div id='divR'>右浮動內容</div>
</div>
</body>
</html>

顯示結果：

6、網頁設計與HTML5的關系

網頁設計是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
網頁設計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網頁設計甚至會考慮到通過聲光、交互等來實現更好的視聽感受。
萬維網的核心語言、標准通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改。
2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標准規范終於制定完成。

7、如何用HTML5製作網頁

html5標簽掌握了，從上到下從左到右，標簽合理使用，先把框架搭好，再結合css3做效果，先花時間把html5 css3看兩遍，再看網頁設計html5製作教程就ok了

當然這只是最簡單的

8、HTML5怎麼製作響應式網頁

1.調整視口

代碼實例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移動端開發實例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代碼解析：由於使用不同設備打開網頁時，寬度均有所不同，所以不能講視口設置為固定值，應當為width=device-width,即將視口設置為當前設備的寬度。

2.確定設計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那麼在1080px的設計圖中，最小字體應當為42px。

代碼實例：

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

3.浮動布局

各個區塊都是浮動的，不是固定不變的。為了能自適應各個窗口。

代碼實例：

.main {
  float: left;
  width: 70%;
}
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設備載入相應樣式

有條件應用樣式：

 <style>
    @media all and(min-width:500px){ ... }
    @media (orientation){ ... }
</style>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於500px的設備設置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態（可見區域大於或等於寬度）下的移動端設備設置樣式。

有條件的載入樣式表：

<head>
    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />
    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />
</head>

代碼解析：

第一行媒體查詢代碼指的是：為寬度大於等於1024px的設備，載入wide.css文件。

第二行媒體查詢代碼指的是：為寬度小於等於320px的設備，載入mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代碼解析：

水平方向的值，將具體像素調整為百分比。百分比的計算是根據父級的內容區寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那麼子元素轉換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據父級計算，當標簽結構級別不同時，計算公式中的「分母」也有所不同，在開發時這個地方很容易出現問題，請務必注意。

垂直方向的值，將具體像素調整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉換為rem單位，即195/42= 4. 64rem。

9、html5網頁製作+javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
<script type="text/javascript">
 function Student(id, name, gender, birthday, score) {
        this.id = id;
 this.name = name;
 this.gender = gender;
 this.birthday = birthday;
 this.score = score;
 this.study = function () {
            this.score = this.score === 100 ? this.score : this.score += 1;
 };
 this.getAge = function () {
            return new Date().getFullYear() - new Date(birthday).getFullYear()
        };
 }
 
    var student = new Student(1,'張三','男','1996-2-12',20);
 console.log('學習成績:'+student.score);
 console.log('年齡:'+student.getAge());
 student.study();
 console.log('學習成績:'+student.score); //學分加1
 student.study();
 console.log('學習成績:'+student.score); //學分加1
</script>
<body>
請打開瀏覽器控制台查看日誌輸出效果。
</body>
</html>

與html5網頁設計思路相關的知識