1）html的簡單介紹
首先我們知道，Web工程是由兩部分組成的：瀏覽器部分、web服務器部分，而其中瀏覽部分就是以頁面的形式呈現的。還由於web工程是基於網絡的，而能夠接入廣域網的終端有很多種，爲了保證用戶能夠正常使用瀏覽器，就需要讓不同的硬件和不同的操作系統都能夠解析和識別頁面信息，而瀏覽器能夠對ASCII碼形式的網頁進行識別和操作。所以，前段頁面總是以純ASCII碼進行編寫的，不存在編譯問題。
HTML的英文全稱是 Hyper Text Marked Language，即超文本標記語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一，使分散的Internet資源連接爲一個邏輯整體，這些是我在百度百科看到的名詞解釋。實際上，html是一種XML格式的文件，且是文本文件。html現在已經發展到了第6版本，而在html1-4版本中，因爲瀏覽器的差異，存在很大的兼容性問題。到了html5版本，增加了大量的語義性很強的標籤和高複雜度標籤。
2）前端頁面的內容
前端頁面的內容分爲三類：
1、數據：基本上是由標籤+數據
2、樣式：CSS，用來修飾、控制數據的顯示特點
3、響應：javascript，面向事件的編程
·CSS
CSS：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
樣式是可以覆蓋的，順序是：
外部樣式、內部樣式 -> 行間樣式
外部樣式和內部樣式按照前後順序，後者覆蓋前者，書寫順序決定覆蓋順序。
·JS（javascript）
JavaScript是一種屬於網絡的腳本語言，代碼不進行預編譯，通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的，也就是用來完成頁面的事件響應，可以直接嵌入HTML頁面，也可以單獨寫成.js文件。
JavaScript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架，可以跨平臺使用，支持多種瀏覽器操作。
3）簡單頁面編寫
目標是做一個關於表格的簡單頁面，效果如下：
首先新建一個txt文本文檔，重命名爲##.html，用編程軟件打開進行代碼編寫（可以用Sublime工具），具體的代碼實現如下，這是html代碼，裏面嵌入了CSS文件和JS文件；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一個表格頁面</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body id="res" background = "./res/小北01.jpg">
<table id="table">
<caption id="login">註冊信息</caption>
<thead>
<tr>
<td class="celLeft">賬號</td>
<td class="celRight">
<input class="txtWidth" type="text" name="id"
placeholder="長度在2到6個字符之間">
</td>
</tr>
<tr>
<td class="celLeft">密碼</td>
<td class="celRight">
<input class="txtWidth" type="password" name="password"
placeholder="不能使用特殊字符">
</td>
</tr>
<tr>
<td class="celLeft">性別</td>
<td class="celRight">
<input id="sexMale" type="radio" name="sex"
checked="true">
<label for="sexMale">男</label>
<input id="sexFemale" type="radio" name="sex">
<label for="sexFemale">女</label>
</td>
</tr>
<tr>
<td class="celLeft">出生日期</td>
<td class="celRight">
<select id="birthYear"></select>
<label>年</label>
<select id="birthMonth"></select>
<label>月</label>
<select id="birthDate"></select>
<label>日</label>
</td>
</tr>
<tr>
<td class="celLeft">愛好</td>
<td id="hobbies" class="celRight">
<input id="beisi" type="checkbox" name="hobby" value="貝斯">
<label for="beisi">貝斯</label>
<input id="jita" type="checkbox" name="hobby" value="吉他">
<label for="jita">吉他</label>
<input id="shufa" type="checkbox" name="hobby" value="書法">
<label for="shufa">書法</label>
<input id="jiewu" type="checkbox" name="hobby" value="街舞">
<label for="jiewu">街舞</label>
<br>
<input class="txt" id="all" type="button" value="全選">
<input class="txt" id="none" type="button" value="清空">
<input class="txt" id="rev" type="button" value="反選">
</td>
</tr>
<tr>
<td colspan="2">
<input class="submit" id="finish" type="submit" value="提交信息">
</td>
</tr>
</thead>
</table>
</body>
<script type="text/javascript" src="./js/index.js"></script>
</html>
對了，在這裏我添加了背景圖片的設置，是之前我在網上看到的方法，在body標籤中加入 background = “##.jpg”，也需要註明圖片的路徑，之後再CSS文件中寫了有關背景圖片的尺寸大小的設置，但網上有人說在這種方法已經過時了，有另外的添加背景圖片的方法，我目前還不太清楚，對於別的插入背景圖片的方法，還正在學習，之後如果有更適合的方法，會持續更改。
CSS代碼；（相關解釋在代碼中註釋）
#table {
margin: 0 auto;//設置爲水平居中
font-size: 20px;//字體大小
width: 450px;//相對寬度
}
#login{
font-size: 32px;
color: #810310;//顏色設置
}
.txtWidth{
width: 95%;
height: 70%;
}
.celLeft{
background: pink;//背景顏色
width: 28%;
height: 45px;
text-align: center;//字體位置爲居中
}
.celRight{
background: pink;
height: 45px;
text-align: center;
}
.txt{
font-size: 18px;
}
.submit{
font-size: 20px;
display: block;
margin: 0 auto;
}
#res {
background-size:90%;//背景圖片的尺寸
}
關於CSS還有一些需要說明，就是裏面class和id的使用：
1、首先在語法上有區別，id對應的css是用樣式選擇符“#”（井號），class對應的css是用樣式選擇符“.”(英文半角輸入句號)。
2、其次，使用方面也有區別：class可以在頁面裏面重複使用，id由於在頁面裏面只能出現一次，所以不能重複使用，所以儘量用class來寫，這樣能在頁面裏面重複引用你寫的css，減小工作量和代碼量。
3、還有一點，由於id是頁面中唯一的，更多的是定義來留給給頁面裏面的javascript用，用以完成某個id對於的事件的響應。
javascript代碼：
（主要添加了出生日期和愛好選擇的事件響應，這裏的var就相當於C語言中的變量類型）
//有關出生日期的年月日初始化
var birthYear = document.getElementById("birthYear");
var now = new Date();
var nowYear = now.getFullYear();
var minYear = nowYear - 30;
var maxYear = nowYear - 12;
for(var year = minYear ; year <= maxYear; year ++) {
var option = document.createElement("option");
option.text = year;
option.value = year;
birthYear.append(option);
}
var birthMonth = document.getElementById("birthMonth");
var monthHtml = "";
for(var month = 1 ; month <= 12 ; month++) {
monthHtml += "<option>";
monthHtml += month;
monthHtml += "</option>";
}
birthMonth.innerHTML = monthHtml;
birthYear.onchange = function() {
var year = birthYear.value;
var month = birthMonth.value;
setBirthDate(year, month);
}
birthMonth.onchange = function() {
var year = birthYear.value;
var month = birthMonth.value;
setBirthDate(year, month);
}
//根據年和月的選擇結果來初始化日期的值
var birthDate = document.getElementById("birthDate");
function setBirthDate(year, month) {
var maxData = new Date(year,month,0);
var lastDate = maxData.getDate();
for(var data = 1 ; data <= lastDate ; data ++) {
var option = document.createElement("option");
option.text = data;
option.value = data;
birthDate.append(option);
}
}
setBirthDate(birthYear.value, birthMonth.value);
//有關愛好選擇按鈕的事件響應
var hobbies = document.getElementsByName("hobby");
var all = document.getElementById("all");
var none = document.getElementById("none");
var rev = document.getElementById("rev");
function setHobbies(value) {
for(var index = 0 ; index < hobbies.length ; index ++) {
hobbies[index].checked = value;
}
}
all.onclick = function() {
setHobbies(true);
}
none.onclick = function() {
setHobbies(false);
}
rev.onclick = function() {
for(var index = 0 ; index < hobbies.length ; index ++) {
hobbies[index].checked = !hobbies[index].checked;
}
}
這裏需要說明的是CSS文件和JS文件在HTML文件中的嵌入，方法如下（需要註明要嵌入文件的路徑）：
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script type="text/javascript" src="./js/index.js"></script>
最後，在建立的##.html文件，單擊右鍵，選擇打開方式爲用瀏覽器打開，就會看到關於頁面的編寫結果了；
