整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
模型是CSS布局的基礎(chǔ)，理解它的每個組成部分對于創(chuàng)建整潔、響應(yīng)式的網(wǎng)頁至關(guān)重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內(nèi)容（Content），并解釋它們?nèi)绾喂餐ぷ鱽韯?chuàng)建網(wǎng)頁布局。
在CSS中，盒模型是一種用于設(shè)計(jì)和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內(nèi)容、內(nèi)邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關(guān)重要。
+-------------------------------+
| Margin |
| +-------------------------+ |
| | Border | |
| | +-------------------+ | |
| | | Padding | | |
| | | +-------------+ | | |
| | | | Content | | | |
| | | +-------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+
每個盒子從里到外包括：
邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。
/* 單邊邊距設(shè)置 */
.element {
margin-top: 10px; /* 上邊距 */
margin-right: 15px; /* 右邊距 */
margin-bottom: 10px; /* 下邊距 */
margin-left: 15px; /* 左邊距 */
}
/* 簡寫形式 */
.element {
margin: 10px 15px; /* 上下邊距 | 左右邊距 */
}
邊距可以用來創(chuàng)建元素之間的空間，或者將元素與頁面邊緣分開。當(dāng)兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現(xiàn)象稱為邊距折疊。
邊框是盒子的一個可視化組件，圍繞著內(nèi)邊距和內(nèi)容。邊框的樣式、寬度和顏色都可以自定義。
.element {
border-style: solid; /* 邊框樣式 */
border-width: 2px; /* 邊框?qū)挾?*/
border-color: black; /* 邊框顏色 */
}
/* 簡寫形式 */
.element {
border: 2px solid black;
}
邊框?qū)τ谕怀鲲@示元素或分隔內(nèi)容非常有用。你還可以只為邊框的一邊或幾邊設(shè)置樣式。
填充是圍繞內(nèi)容內(nèi)部的空間，它可以增加內(nèi)容和邊框之間的距離。與邊距不同，填充區(qū)域會被背景顏色或背景圖片覆蓋。
.element {
padding-top: 5px; /* 上填充 */
padding-right: 10px; /* 右填充 */
padding-bottom: 5px; /* 下填充 */
padding-left: 10px; /* 左填充 */
}
/* 簡寫形式 */
.element {
padding: 5px 10px; /* 上下填充 | 左右填充 */
}
填充對于控制元素內(nèi)部的空白區(qū)域非常有用，它可以幫助改善內(nèi)容的可讀性。
內(nèi)容是盒子中的文字、圖片或其他媒體。內(nèi)容的大小可以通過設(shè)置width和height屬性來控制，但實(shí)際可見區(qū)域的大小還會受到內(nèi)邊距和邊框的影響。
.element {
width: 200px;
height: 150px;
}
內(nèi)容區(qū)域是設(shè)計(jì)和布局的核心，所有的文本和媒體都在這里顯示。
<!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>
理解盒模型是前端開發(fā)的基礎(chǔ)，它允許我們精確控制元素的布局和間距。通過恰當(dāng)?shù)厥褂眠吘唷⑦吙颉⑻畛浜蛢?nèi)容，我們可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁設(shè)計(jì)。隨著響應(yīng)式設(shè)計(jì)的興起，現(xiàn)代CSS框架已經(jīng)將盒模型的概念整合進(jìn)其核心，使得跨設(shè)備布局變得更加一致和簡單。
在日常開發(fā)中，經(jīng)常使用開發(fā)者工具來檢查和調(diào)試盒模型的各個部分，確保我們的樣式表現(xiàn)按照預(yù)期工作。掌握盒模型，你將能夠更加自信地處理網(wǎng)頁布局的挑戰(zhàn)。
內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。
Element類型用于表示XML或HTML元素，提供了對元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問；
Element類繼承自Node接口；它繼承了Node接口中的所有屬性和方法，比如parentNode、childNode等；同時，它在Node接口的基礎(chǔ)上擴(kuò)展了自己的屬性和方法；
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屬性：表示元素的標(biāo)識符，與全局屬性id對應(yīng)；
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屬性一樣，可以返回元素的標(biāo)簽名，在HTML文檔中返回大寫，在XML中返回原生，因此在使用tagName時，最后使用toLowerCase()轉(zhuǎn)換；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.tagName); // DIV
if(mydiv.tagName.toLowerCase() == "div"){
//...
}一般使用tagName，因?yàn)閺淖至x上理解更加清晰；
Element的子類型HTMLElement：
HTMLElement類型直接繼承自Element，因此，HTML元素即屬于HTMLElement類也屬于Element類；
所有HTML元素都由HTMLElement類型或其子類型表示，比如：HTMLDIVElement，就是具體的div元素的類型；
HTMLElement類型在Element類的基礎(chǔ)上，并添加了一些屬性，這些屬性分別對應(yīng)于每個HTML元素中都存在的標(biāo)準(zhǔn)特性：id、title、lang、dir、className；
這些屬性都是可讀可寫的，并且也是動態(tài)的；
<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特性（屬性）：
每個元素都有若干個特性，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息；DOM為Element對象定義了一些API來獲取或設(shè)置這些XML或HTML屬性(特性)；
操作特性主要有三個方法：
getAttribute()、setAttribute()、removeAttribute()；這些方法可以針對任何特性使用，包括那些以HTMLElement類型屬性的形式定義的特性；
getAttribute(attributeName)方法：
返回元素上一個指定的特性值，如果指定的特性不存在，則返回null或 ""；特性的名稱不區(qū)分大小寫；
如果取得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元素的標(biāo)準(zhǔn)特性)，但要注意，根據(jù)HTML5的規(guī)范，自定義特性應(yīng)該加上data-前綴以便驗(yàn)證；
console.log(mydiv.getAttribute("custom")); // customvalue
console.log(mydiv.getAttribute("data-name")); // wangwei任何元素的所有特性，都可以通過DOM元素本身的屬性來訪問，不過，只有公認(rèn)的(非自定義)特性才會以屬性的形式添加到DOM對象中；但I(xiàn)E可以為自定義特性創(chuàng)建屬性；
console.log(mydiv.id);
console.log(mydiv.className);
console.log(mydiv.myname); // undefined
console.log(mydiv.align); // left，認(rèn)為align是公認(rèn)的
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屬性名不區(qū)分大小寫，但Javascript屬性名則大小寫敏感；從HTML屬性名轉(zhuǎn)換到Javascript屬性名應(yīng)該采用小寫，但是如果屬性名包含不止一個單詞，則采用小駝峰式，如：defaultCheded和tabIndex；
有些HTML屬性名在Javascript中是保留字，對于這些屬性，一般的規(guī)則是為該屬性名加前綴”html”，如，HTML的for屬性在Javascript中變?yōu)閔tmlFor屬性，class屬性比較特殊，它在Javascript中變成className屬性；
表示HTML屬性的值通常是字符串，但當(dāng)屬性為布爾值或數(shù)值時，Javascript中對應(yīng)的屬性也是布爾值或數(shù)值，而不是字符串；
<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特性，有關(guān)CSS編程，后面我們會講到）；
事件處理程序特性，類似于onclick等這樣的事件處理程序，當(dāng)在特性中使用時，onclick中包含的就是JS代碼，使用getAttribute(）會返回相應(yīng)的代碼的字符串，但在訪問onclick屬性時，會返回一個Javascript函數(shù)；
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)方法：
設(shè)置指定元素上的某個特性值，如果特性已經(jīng)存在，則更新該值，否則，使用指定的名稱和值添加一個新的特性；
該接受兩個參數(shù)：要設(shè)置的特性名和值；
此方法可以操作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通過該方法設(shè)置的特性名會被統(tǒng)一轉(zhuǎn)換成小寫形式，即“ID”最終會變成“id”；
mydiv.setAttribute("ID","myID"); // id
mydiv.setAttribute("CID","customID"); // cid布爾特性只要出現(xiàn)在元素上就會被認(rèn)為是 true，無論它的值是什么；一般來說，應(yīng)該將 value 設(shè)置為空字符串，也有人使用這個屬性的名稱作為值，雖然不會出現(xiàn)什么問題，但不規(guī)范的；
var txtInput = document.getElementById("txtInput");
txtInput.setAttribute("readonly",true);// 會渲染成readonly="true"
txtInput.setAttribute("readonly",""); // 渲染成readonly
console.log(txtInput.readOnly); // true因?yàn)樗刑匦远际菍傩裕灾苯咏o屬性賦值可以設(shè)置特性的值，但如果添加的是一個自定義的屬性，該屬性不會自動成為元素的特性；
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()方法設(shè)置class，但不能通過屬性設(shè)置class，因?yàn)閏lass是關(guān)鍵字，需要className進(jìn)行屬性設(shè)置；
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()需要一個特性參數(shù)，判斷該元素是否包含有指定的特性，而hasAttributes()檢測的是否有特性，具體是什么特性，則不是它所關(guān)心的了；
var mydiv = document.getElementById("mydiv");
console.log(mydiv.hasAttribute("title"));
if(!mydiv.hasAttribute("align"))
mydiv.setAttribute("align","center");
console.log(mydiv.hasAttributes()); // true當(dāng)屬性為布爾值時，hasAttribute()方法特別有用，比如HTML表單的disabled屬性，只要判斷它有沒有這個屬性即可，不用管它的值；
attributes屬性：
返回該元素所有屬性節(jié)點(diǎn)的一個實(shí)時集合，該集合是一個NamedNodeMap對象，是一個只讀的類數(shù)組對象，只有Element類型擁有；該屬性與NodeList類似，也是一個動態(tài)的集合；也可以使用索引方式訪問，并且可以枚舉；
元素的每個特性都由一個Attr節(jié)點(diǎn)表示，Attr對象是一個特殊的Node，不會像普通的Node一樣去使用；Attr的name和value屬性返回該屬性的名字和值；
每個Attr節(jié)點(diǎn)都保存在NamedNodeMap對象中；此節(jié)點(diǎn)都有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對象：
表示一個無順序的屬性節(jié)點(diǎn) Attr 對象的集合；其是類數(shù)組對象，同時也是動態(tài)的；
屬性和方法：
length屬性：返回映射(map)中對象的數(shù)量；
getNamedItem(name)：返回給定名稱name的屬性節(jié)點(diǎn)；
item(pos)：返回位于數(shù)字pos位置處的節(jié)點(diǎn)；(注：各個瀏覽器會返回不同的順序)；
setNamedItem(node)：向列表中添加或替換特性節(jié)點(diǎn)；
removeNamedItem(name)：從列表中移除特性為name的節(jié)點(diǎn)；與removeAttribute()相同，但其會返回被刪除的特性(Attr)節(jié)點(diǎn)；
可以通過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結(jié)構(gòu)序列化為XML或HTML字符串時，多數(shù)都會涉及遍歷元素特性；
// 迭代元素的所有特性，構(gòu)造成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循環(huán)
// 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));創(chuàng)建Element元素：
document.createElement(tagName)方法：用于創(chuàng)建一個由標(biāo)簽名稱tagName指定的HTML元素，如果用戶代理無法識別tagName，則會生成一個未知 HTML 元素；
該方法只接受一個參數(shù)，即要創(chuàng)建元素的標(biāo)簽名；此標(biāo)簽名在HTML中不區(qū)分大小寫，在XML(包括XHTML)中，是區(qū)分大小寫的；
在創(chuàng)建新元素的同時，也為新元素設(shè)置了ownerDocument屬性；同時還可以操作元素的特性，為它添加子節(jié)點(diǎn)，以及執(zhí)行其他操作；
新創(chuàng)建的元素，必須添加到文檔樹中，才能顯示出來，可以利用appendChild，insertBefore()或replaceChild()方法；
var div = document.createElement("div");
div.innerHTML = "<h2>零點(diǎn)程序員</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的子節(jié)點(diǎn)：
元素可以有任意數(shù)目的子節(jié)點(diǎn)和后代節(jié)點(diǎn)，這些子節(jié)點(diǎn)可能是元素、文本、注釋處處理指令；但HTML中的空白也會被解析為文本節(jié)點(diǎn)；因此在執(zhí)行某項(xiàng)操作時，要先檢查一下nodeType屬性；
<!-- 結(jié)構(gòu) -->
<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);
// }元素節(jié)點(diǎn)也支持getElementsByTagName() 方法，可以通過它獲得某個特定的標(biāo)簽名的子節(jié)點(diǎn)或后代節(jié)點(diǎn)；
var myList = document.getElementById("myList");
var lis = myList.getElementsByTagName("li");
console.log(lis); // dom.html:23 HTMLCollection(3)自定義Element的方法：
Element和HTMLDocument等類型都像String和Array一樣是類，它們不是構(gòu)造函數(shù)，但它們有原型對象，可以自定義方法擴(kuò)展它；
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前端開發(fā)之Javascript-零點(diǎn)程序員-王唯
如果您看過《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這篇教程，請按照其中說明創(chuàng)建一個txt文件。具體過程如下：
step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎(chǔ)自學(xué)網(wǎng)頁制作"。例如我在D盤中建立了"零基礎(chǔ)自學(xué)網(wǎng)頁制作"文件夾。
step2：在文件夾中創(chuàng)建"HTML框架.txt"文件。鼠標(biāo)移動到空白處點(diǎn)擊右鍵選擇"文本文檔"。
命名為"html框架"，如下圖所示。
如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點(diǎn)擊"工具"，找到"文件夾選項(xiàng)"
菜單如下：點(diǎn)擊"查看選項(xiàng)"。
下拉滑條，找到"隱藏已知文件類型的擴(kuò)展名"選項(xiàng)，將前面的對勾去掉。
如果您使用的是win10的話請參考《邊學(xué)邊做網(wǎng)頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發(fā)了。
step3：把"HTML框架"復(fù)制粘貼到"html框架.txt"文件中。HTML框架代碼如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代碼講解請參照《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作》這篇教程中的講解。
粘貼后效果如下：使用CTRL+s組合鍵保存文件。
step4：復(fù)制"html框架.txt"文件，更名為"第一個網(wǎng)頁.txt"。原始的"html框架.txt"文件為以后備用。
如圖所示：
step5：把"第一個網(wǎng)頁.txt"的后綴名".txt"改為".html"。
首先將光標(biāo)放在"第一個網(wǎng)頁.txt"文件上，點(diǎn)擊右鍵，選擇"重命名"。如圖：
選擇".txt"
更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:
大膽的點(diǎn)擊"是"即可。
修改后文件是這樣的，如圖：因?yàn)槲业哪J(rèn)瀏覽器是360，所以，".html"文件圖標(biāo)顯示為360瀏覽器的圖標(biāo)，顯示其他瀏覽器的圖標(biāo)也沒有問題。
step6：將鼠標(biāo)移動到"第一個網(wǎng)頁.html"文件上，單擊右鍵，選擇打開方式，如圖：
選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。
點(diǎn)擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經(jīng)顯示我們的代碼框架了。成功！
如果網(wǎng)頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們?yōu)楸P子中加些簡單的"菜"。
首先我們?yōu)轫撁嫣砑?#34;標(biāo)題"
在添加標(biāo)題前，我們來看一下html框架代碼中的內(nèi)容，在<html></html>標(biāo)簽中有<head></head>和<body></body>兩個兄弟標(biāo)簽。
我們在頁面中看到的所有的內(nèi)容都是添加到<body></body>標(biāo)簽中間！
<head></head>標(biāo)簽中的內(nèi)容并不會顯示在頁面中。
那么如何添加"標(biāo)題"呢？
標(biāo)題在HTML中用<h></h>標(biāo)簽表示。在<h></h>中間加入文字內(nèi)容即可。如下所示：
<h>第一個頁面</h>右鍵，使用"記事本"打開"第一個網(wǎng)頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點(diǎn)擊"選擇默認(rèn)程序"
在"其他程序"中找到"記事本"。點(diǎn)擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>然后，使用瀏覽器打開，如圖所示：標(biāo)題出現(xiàn)在頁面中了。
下面，我們來添加段落內(nèi)容。
段落在HTML中使用<p></p>標(biāo)簽添加。代碼如下
<p>千里之行始于足下</p>請各位自行將代碼添加到"第一個網(wǎng)頁.html"文件中吧！示例代碼如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網(wǎng)頁</h><p>千里之行始于足下</p> </body> </html>結(jié)果如圖所示：
通過這個練習(xí)，我們可以發(fā)現(xiàn)一個規(guī)律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。
這也簡單回答了代碼結(jié)構(gòu)與排版的關(guān)系，html的標(biāo)簽語句只是標(biāo)記了它所承載的信息的屬性和版面位置。
基于這個特性，html被稱為超文本標(biāo)記語言。
下一期我們具體討論頁面中文字編輯的技巧。
喜歡的小伙伴請加關(guān)注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
