整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。
在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。
+-------------------------------+
| Margin |
| +-------------------------+ |
| | Border | |
| | +-------------------+ | |
| | | Padding | | |
| | | +-------------+ | | |
| | | | Content | | | |
| | | +-------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+
每個盒子從里到外包括：
邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。
/* 單邊邊距設置 */
.element {
margin-top: 10px; /* 上邊距 */
margin-right: 15px; /* 右邊距 */
margin-bottom: 10px; /* 下邊距 */
margin-left: 15px; /* 左邊距 */
}
/* 簡寫形式 */
.element {
margin: 10px 15px; /* 上下邊距 | 左右邊距 */
}
邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。
邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。
.element {
border-style: solid; /* 邊框樣式 */
border-width: 2px; /* 邊框寬度 */
border-color: black; /* 邊框顏色 */
}
/* 簡寫形式 */
.element {
border: 2px solid black;
}
邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。
填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。
.element {
padding-top: 5px; /* 上填充 */
padding-right: 10px; /* 右填充 */
padding-bottom: 5px; /* 下填充 */
padding-left: 10px; /* 左填充 */
}
/* 簡寫形式 */
.element {
padding: 5px 10px; /* 上下填充 | 左右填充 */
}
填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。
內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。
.element {
width: 200px;
height: 150px;
}
內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
border: 1px solid #ddd;
margin: 20px;
}
.box {
background-color: #007bff;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid #0056b3;
text-align: center;
}
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to My Page</h1>
</div>
<div class="content">
<h2>Understanding CSS Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
<div class="box">Content Box</div>
</div>
<div class="footer">
Footer Content
</div>
</div>
</body>
</html>
理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。
在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。
內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。
Element類型用于表示XML或HTML元素，提供了對元素標簽名、子節點及特性的訪問；
Element類繼承自Node接口；它繼承了Node接口中的所有屬性和方法，比如parentNode、childNode等；同時，它在Node接口的基礎上擴展了自己的屬性和方法；
Element類型的特征：
var mydiv = document.getElementById("mydiv");
console.log(mydiv.nodeType); // 1
console.log(mydiv.nodeName); // DIV
console.log(mydiv.nodeValue); // null
console.log(mydiv.parentNode); // <body>
console.log(mydiv.childNodes); // NodeListElement的屬性：
id屬性：表示元素的標識符，與全局屬性id對應；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.id);
mydiv.id = "yourdiv";
console.log(mydiv.id);
var yourdiv = document.getElementById("yourdiv");
console.log(yourdiv.id);tagName屬性：與nodeName屬性一樣，可以返回元素的標簽名，在HTML文檔中返回大寫，在XML中返回原生，因此在使用tagName時，最后使用toLowerCase()轉換；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.tagName); // DIV
if(mydiv.tagName.toLowerCase() == "div"){
//...
}一般使用tagName，因為從字義上理解更加清晰；
Element的子類型HTMLElement：
HTMLElement類型直接繼承自Element，因此，HTML元素即屬于HTMLElement類也屬于Element類；
所有HTML元素都由HTMLElement類型或其子類型表示，比如：HTMLDIVElement，就是具體的div元素的類型；
HTMLElement類型在Element類的基礎上，并添加了一些屬性，這些屬性分別對應于每個HTML元素中都存在的標準特性：id、title、lang、dir、className；
這些屬性都是可讀可寫的，并且也是動態的；
<div id="mydiv" name="mydiv" title="DIV" lang="en" dir="ltr" class="divclass">
// …
<script>
var mydiv = document.getElementById("mydiv");
console.log(mydiv.id);
console.log(mydiv.title);
console.log(mydiv.lang);
console.log(mydiv.dir);
console.log(mydiv.className);
mydiv.id = "yourdiv";
mydiv.title = "你的DIV";
mydiv.lang = "fr";
mydiv.dir = "rtl";
mydiv.className = "reddiv";
</script>Element特性（屬性）：
每個元素都有若干個特性，這些特性的用途是給出相應元素或其內容的附加信息；DOM為Element對象定義了一些API來獲取或設置這些XML或HTML屬性(特性)；
操作特性主要有三個方法：
getAttribute()、setAttribute()、removeAttribute()；這些方法可以針對任何特性使用，包括那些以HTMLElement類型屬性的形式定義的特性；
getAttribute(attributeName)方法：
返回元素上一個指定的特性值，如果指定的特性不存在，則返回null或 ""；特性的名稱不區分大小寫；
如果取得class，需要傳入class，而不是className；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.getAttribute("id")); // mydiv
console.log(mydiv.getAttribute("class")); // divclass
console.log(mydiv.getAttribute("title")); // null也可以取得自定義特性(即不是HTML元素的標準特性)，但要注意，根據HTML5的規范，自定義特性應該加上data-前綴以便驗證；
console.log(mydiv.getAttribute("custom")); // customvalue
console.log(mydiv.getAttribute("data-name")); // wangwei任何元素的所有特性，都可以通過DOM元素本身的屬性來訪問，不過，只有公認的(非自定義)特性才會以屬性的形式添加到DOM對象中；但IE可以為自定義特性創建屬性；
console.log(mydiv.id);
console.log(mydiv.className);
console.log(mydiv.myname); // undefined
console.log(mydiv.align); // left，認為align是公認的
var img = document.getElementById("myimg");
var imgurl = img.src;
console.log(img.id === "myimg");
var f = document.forms[0];
f.action = "https://www.zeronetwork.cn/do.php";
f.method = "POST";HTML屬性名不區分大小寫，但Javascript屬性名則大小寫敏感；從HTML屬性名轉換到Javascript屬性名應該采用小寫，但是如果屬性名包含不止一個單詞，則采用小駝峰式，如：defaultCheded和tabIndex；
有些HTML屬性名在Javascript中是保留字，對于這些屬性，一般的規則是為該屬性名加前綴”html”，如，HTML的for屬性在Javascript中變為htmlFor屬性，class屬性比較特殊，它在Javascript中變成className屬性；
表示HTML屬性的值通常是字符串，但當屬性為布爾值或數值時，Javascript中對應的屬性也是布爾值或數值，而不是字符串；
<label id="lbInput" for="txtInput">文本框：</label>
<input id="txtInput" tabindex="2" type="text" readonly />
<script>
var txtInput = document.getElementById("txtInput");
console.log(txtInput.tabIndex); // 1
console.log(txtInput.readOnly); // true
var lbInput = document.getElementById("lbInput");
console.log(lbInput.htmlFor); // txtInput
</script>style和事件處理程序特性：
style：在通過getAttribute()訪問時，返回的style特性值中包含的是CSS文本；而通過屬性訪問它會返回一個CSSStyleDeclaration對象（由于style屬性是用于以編程方式訪問元素樣式的對象，因此并沒有直接映射到style特性，有關CSS編程，后面我們會講到）；
事件處理程序特性，類似于onclick等這樣的事件處理程序，當在特性中使用時，onclick中包含的就是JS代碼，使用getAttribute(）會返回相應的代碼的字符串，但在訪問onclick屬性時，會返回一個Javascript函數；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.getAttribute("style")); // font-size: 14px;color:red;
console.log(mydiv.style); // CSSStyleDeclaration or CSS2Properties
console.log(mydiv.getAttribute("onclick")); // alert('zeronetwork');
console.log(mydiv.onclick); // function onclick(event)setAttribute(name, value)方法：
設置指定元素上的某個特性值，如果特性已經存在，則更新該值，否則，使用指定的名稱和值添加一個新的特性；
該接受兩個參數：要設置的特性名和值；
此方法可以操作HTML特性也可以操作自定義特性；
var mydiv = document.getElementById("mydiv");
mydiv.setAttribute("id","outerdiv");
mydiv.setAttribute("class","outerdivclass");
mydiv.setAttribute("title","mydiv title");
mydiv.setAttribute("style","border-bottom:1px solid;color:purple;");
mydiv.setAttribute("custom","custom value");
console.log(mydiv.title); // mydiv title
console.log(mydiv.custom); // undefined通過該方法設置的特性名會被統一轉換成小寫形式，即“ID”最終會變成“id”；
mydiv.setAttribute("ID","myID"); // id
mydiv.setAttribute("CID","customID"); // cid布爾特性只要出現在元素上就會被認為是 true，無論它的值是什么；一般來說，應該將 value 設置為空字符串，也有人使用這個屬性的名稱作為值，雖然不會出現什么問題，但不規范的；
var txtInput = document.getElementById("txtInput");
txtInput.setAttribute("readonly",true);// 會渲染成readonly="true"
txtInput.setAttribute("readonly",""); // 渲染成readonly
console.log(txtInput.readOnly); // true因為所有特性都是屬性，所以直接給屬性賦值可以設置特性的值，但如果添加的是一個自定義的屬性，該屬性不會自動成為元素的特性；
mydiv.title = "mydiv title";
mydiv.style = "border-bottom:1px solid;color:purple;";
mydiv.custom = "custom value"; // html中并沒有渲染custom
console.log(mydiv.title); // mydiv title
console.log(mydiv.custom); // custom value
console.log(mydiv.getAttribute("title")); // mydiv title
console.log(mydiv.getAttribute("custom")); // null可以通過setAttribute()方法設置class，但不能通過屬性設置class，因為class是關鍵字，需要className進行屬性設置；
var mydiv = document.getElementById("mydiv");
mydiv.setAttribute("class","att_class");
// mydiv.class = "att_class"; // 無效,class是保留字
mydiv.className = "att_class";
console.log(mydiv.class); // undefined
console.log(mydiv.className); // att_classremoveAttribute(attrName)方法：
用于從指定的元素徹底刪除元素的特性；
此方法不僅會清除特性的值，而且也會從元素中完全刪除特性；
此方法并不常用，但在序列化DOM元素時，可以通過它來確切地指定要包含哪些特性；
var mydiv = document.getElementById("mydiv");
mydiv.removeAttribute("class");
mydiv.removeAttribute("style");
mydiv.setAttribute("custom","custom_value");
mydiv.removeAttribute("custom");
mydiv.title = "mydiv title";
mydiv.removeAttribute("title");hasAttribute(attrName)方法和hasAttributes()方法：
用于檢測特性是否存在；其中hasAttribute()需要一個特性參數，判斷該元素是否包含有指定的特性，而hasAttributes()檢測的是否有特性，具體是什么特性，則不是它所關心的了；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.hasAttribute("title"));
if(!mydiv.hasAttribute("align"))
mydiv.setAttribute("align","center");
console.log(mydiv.hasAttributes()); // true當屬性為布爾值時，hasAttribute()方法特別有用，比如HTML表單的disabled屬性，只要判斷它有沒有這個屬性即可，不用管它的值；
attributes屬性：
返回該元素所有屬性節點的一個實時集合，該集合是一個NamedNodeMap對象，是一個只讀的類數組對象，只有Element類型擁有；該屬性與NodeList類似，也是一個動態的集合；也可以使用索引方式訪問，并且可以枚舉；
元素的每個特性都由一個Attr節點表示，Attr對象是一個特殊的Node，不會像普通的Node一樣去使用；Attr的name和value屬性返回該屬性的名字和值；
每個Attr節點都保存在NamedNodeMap對象中；此節點都有nodeName、nodeValue等屬性，nodeName就是特性的名稱，nodeValue就是特性的值；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.attributes);
console.log(mydiv.attributes[1]);
console.log(mydiv.attributes.title);
console.log(mydiv.attributes.custom);
mydiv.attributes.title = "wangwei"; // 無效
console.log(mydiv.attributes[1].nodeType); // ATTRIBUTE_NODE
console.log(mydiv.attributes[1].nodeName);
console.log(mydiv.attributes[1].nodeValue);NamedNodeMap對象：
表示一個無順序的屬性節點 Attr 對象的集合；其是類數組對象，同時也是動態的；
屬性和方法：
length屬性：返回映射(map)中對象的數量；
getNamedItem(name)：返回給定名稱name的屬性節點；
item(pos)：返回位于數字pos位置處的節點；(注：各個瀏覽器會返回不同的順序)；
setNamedItem(node)：向列表中添加或替換特性節點；
removeNamedItem(name)：從列表中移除特性為name的節點；與removeAttribute()相同，但其會返回被刪除的特性(Attr)節點；
可以通過attributes屬性使用方括號直接訪問特性；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.attributes);
console.log(mydiv.attributes.item(1));
console.log(mydiv.attributes.getNamedItem("name"));
console.log(mydiv.attributes[1]);
console.log(mydiv.attributes["name"]);
mydiv.attributes["id"].nodeValue = "newID";
mydiv.attributes.getNamedItem("name").nodeValue = "newName";
var deleteStyle = mydiv.attributes.removeNamedItem("style");
console.log(deleteStyle);
var yourdiv = document.getElementById("yourdiv");
yourdiv.attributes.setNamedItem(deleteStyle);
var attr = document.createAttribute("dir");
attr.nodeValue = "ltr";
mydiv.attributes.setNamedItem(attr);使用attributes屬性較麻煩，因此使用getAttribute()、removeAttribute()和removeAttribute()方法比較常用；但在遍歷元素的特性時，attributes屬性比較方便；
遍歷attributes屬性：
在需要將DOM結構序列化為XML或HTML字符串時，多數都會涉及遍歷元素特性；
// 迭代元素的所有特性，構造成name=”value” name=”value”這樣的字符串格式
var mydiv = document.getElementById("mydiv");
function outputAttributes(element){
var pairs = new Array();
for(var attr in element.attributes){
if(element.attributes[attr] instanceof Attr){
// console.log(attr + element.attributes[attr]);
var attrName = element.attributes[attr].nodeName;
var attrValue = element.attributes[attr].nodeValue;
// console.log(attrName);
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
// 或者使用for循環
// for(var i=0,len=element.attributes.length; i<len; i++){
// var attrName = element.attributes[i].nodeName;
// var attrValue = element.attributes[i].nodeValue;
// // console.log(attrName);
// pairs.push(attrName + "=\"" + attrValue + "\"");
// }
return pairs.join(" ");
}
console.log(outputAttributes(mydiv));創建Element元素：
document.createElement(tagName)方法：用于創建一個由標簽名稱tagName指定的HTML元素，如果用戶代理無法識別tagName，則會生成一個未知 HTML 元素；
該方法只接受一個參數，即要創建元素的標簽名；此標簽名在HTML中不區分大小寫，在XML(包括XHTML)中，是區分大小寫的；
在創建新元素的同時，也為新元素設置了ownerDocument屬性；同時還可以操作元素的特性，為它添加子節點，以及執行其他操作；
新創建的元素，必須添加到文檔樹中，才能顯示出來，可以利用appendChild，insertBefore()或replaceChild()方法；
var div = document.createElement("div");
div.innerHTML = "<h2>零點程序員</h2>";
div.id = "outerDiv";
div.className = "outerDiv";
div.setAttribute("style","color:green;");
console.log(div.ownerDocument);
document.body.appendChild(div);
var h3 = document.createElement("h3");
h3.setAttribute("onclick","alert('this is zeronetwork');");
h3.innerText = "zeronetwork";
div.insertBefore(h3, null);Element的子節點：
元素可以有任意數目的子節點和后代節點，這些子節點可能是元素、文本、注釋處處理指令；但HTML中的空白也會被解析為文本節點；因此在執行某項操作時，要先檢查一下nodeType屬性；
<!-- 結構 -->
<ul id="myList">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<!-- 或者刪除空白 -->
<ul id="myList"><li>HTML</li><li>CSS</li><li>Javascript</li></ul>
// js代碼
var myList = document.getElementById("myList");
console.log(myList.childNodes.length);
for(var i=0,len=myList.childNodes.length; i<len; i++){
if(myList.childNodes[i].nodeType == Node.ELEMENT_NODE)
console.log(myList.childNodes[i].nodeName);
}
// 或者
// for(var n in myList.childNodes){
// if(myList.childNodes[n].nodeType && myList.childNodes[n].nodeType == Node.ELEMENT_NODE)
// console.log(myList.childNodes[n].nodeName);
// }元素節點也支持getElementsByTagName() 方法，可以通過它獲得某個特定的標簽名的子節點或后代節點；
var myList = document.getElementById("myList");
var lis = myList.getElementsByTagName("li");
console.log(lis); // dom.html:23 HTMLCollection(3)自定義Element的方法：
Element和HTMLDocument等類型都像String和Array一樣是類，它們不是構造函數，但它們有原型對象，可以自定義方法擴展它；
Element.prototype.next = function(){
if(this.nextElementSibling) return this.nextElementSibling;
var sib = this.nextSibling;
while(sib && sib.nodeType !== 1) sib = sib.nextSibling;
return sib;
}
console.log(document.getElementById("mydiv").next());Web前端開發之Javascript-零點程序員-王唯
如果您看過《HTML是什么？——零基礎自學網頁制作》這篇教程，請按照其中說明創建一個txt文件。具體過程如下：
step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。
step2：在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。
命名為"html框架"，如下圖所示。
如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點擊"工具"，找到"文件夾選項"
菜單如下：點擊"查看選項"。
下拉滑條，找到"隱藏已知文件類型的擴展名"選項，將前面的對勾去掉。
如果您使用的是win10的話請參考《邊學邊做網頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發了。
step3：把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代碼講解請參照《HTML是什么？——零基礎自學網頁制作》這篇教程中的講解。
粘貼后效果如下：使用CTRL+s組合鍵保存文件。
step4：復制"html框架.txt"文件，更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。
如圖所示：
step5：把"第一個網頁.txt"的后綴名".txt"改為".html"。
首先將光標放在"第一個網頁.txt"文件上，點擊右鍵，選擇"重命名"。如圖：
選擇".txt"
更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:
大膽的點擊"是"即可。
修改后文件是這樣的，如圖：因為我的默認瀏覽器是360，所以，".html"文件圖標顯示為360瀏覽器的圖標，顯示其他瀏覽器的圖標也沒有問題。
step6：將鼠標移動到"第一個網頁.html"文件上，單擊右鍵，選擇打開方式，如圖：
選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。
點擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經顯示我們的代碼框架了。成功！
如果網頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。
首先我們為頁面添加"標題"
在添加標題前，我們來看一下html框架代碼中的內容，在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。
我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間！
<head></head>標簽中的內容并不會顯示在頁面中。
那么如何添加"標題"呢？
標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示：
<h>第一個頁面</h>右鍵，使用"記事本"打開"第一個網頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"
在"其他程序"中找到"記事本"。點擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>然后，使用瀏覽器打開，如圖所示：標題出現在頁面中了。
下面，我們來添加段落內容。
段落在HTML中使用<p></p>標簽添加。代碼如下
<p>千里之行始于足下</p>請各位自行將代碼添加到"第一個網頁.html"文件中吧！示例代碼如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網頁</h><p>千里之行始于足下</p> </body> </html>結果如圖所示：
通過這個練習，我們可以發現一個規律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。
這也簡單回答了代碼結構與排版的關系，html的標簽語句只是標記了它所承載的信息的屬性和版面位置。
基于這個特性，html被稱為超文本標記語言。
下一期我們具體討論頁面中文字編輯的技巧。
喜歡的小伙伴請加關注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
