19.HTML CSS边距、边框、填充和内容

模型是CSS布局的基础，理解它的每个组成部分对于创建整洁、响应式的网页至关重要。本文将深入探讨盒模型的四个主要组成部分：边距（Margin）、边框（Border）、填充（Padding）和内容（Content），并解释它们如何共同工作来创建网页布局。

盒模型概述

在CSS中，盒模型是一种用于设计和布局的概念模型，它将HTML元素视为一个盒子。这个盒子包括了元素的内容、内边距、边框和外边距。理解盒模型对于控制元素的大小和在页面上的位置至关重要。

盒模型的结构

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每个盒子从里到外包括：

内容（Content）：这是盒子中的实际内容，包括文本、图片或其他媒体。
内边距（Padding）：内容区域周围的空间，内边距是透明的。
边框（Border）：围绕内边距和内容的线框，可以设置大小、样式和颜色。
外边距（Margin）：盒子外围的空间，用来隔开相邻的盒子。

边距（Margin）

边距是盒子外部的空间，它决定了元素之间的间隔。边距是透明的，不可见，不会被背景颜色或背景图片覆盖。

/* 单边边距设置 */
.element {
  margin-top: 10px;    /* 上边距 */
  margin-right: 15px;  /* 右边距 */
  margin-bottom: 10px; /* 下边距 */
  margin-left: 15px;   /* 左边距 */
}

/* 简写形式 */
.element {
  margin: 10px 15px;   /* 上下边距 | 左右边距 */
}

边距可以用来创建元素之间的空间，或者将元素与页面边缘分开。当两个元素的垂直边距相遇时，它们会合并成一个边距，这个现象称为边距折叠。

边框（Border）

边框是盒子的一个可视化组件，围绕着内边距和内容。边框的样式、宽度和颜色都可以自定义。

.element {
  border-style: solid; /* 边框样式 */
  border-width: 2px;  /* 边框宽度 */
  border-color: black; /* 边框颜色 */
}

/* 简写形式 */
.element {
  border: 2px solid black;
}

边框对于突出显示元素或分隔内容非常有用。你还可以只为边框的一边或几边设置样式。

填充（Padding）

填充是围绕内容内部的空间，它可以增加内容和边框之间的距离。与边距不同，填充区域会被背景颜色或背景图片覆盖。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 简写形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充对于控制元素内部的空白区域非常有用，它可以帮助改善内容的可读性。

内容（Content）

内容是盒子中的文字、图片或其他媒体。内容的大小可以通过设置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类型的特征：

nodeType值为1；
nodeName的值为元素的标签名；
nodeValue的值为null；
parentNode可能是Document或Element；
其子节点可能是Element、Text,Comment、ProcessingInstruction、CATASection或EntityReference；

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);  // NodeList

Element的属性：

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_class

removeAttribute(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-零点程序员-王唯

txt文件变成html网页文件

如果您看过《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></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是什么？——零基础自学网页制作

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>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：HTML基础知识之列表和表格的使用
下一篇：HTML 简介

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商