Python小案例71- HTML基础及语法

TML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签用于描述网页的结构和内容。HTML标签通常由尖括号包围，例如<tag>。

HTML标签可以分为两类：块级元素和内联元素。块级元素用于组织网页的结构，例如段落、标题、列表等。内联元素用于标记文本中的特定部分，例如链接、强调文本等。

HTML标签可以包含属性，属性提供了有关标签的额外信息。例如，<a>标签用于创建链接，可以使用href属性指定链接的目标URL。

除了标签和属性，HTML还支持一些特殊字符实体，用于表示特殊字符，例如小于号（<）、大于号（>）等。

HTML可以与CSS（层叠样式表）和JavaScript一起使用，以增强网页的外观和功能。CSS用于控制网页的样式，例如颜色、字体、布局等。JavaScript用于实现交互性和动态效果，例如表单验证、动画等。

通过使用HTML，开发人员可以创建具有结构良好、易于理解和导航的网页。它是构建互联网的基础之一，被广泛应用于网站开发和内容管理系统。

HTML的语法由标签、属性和内容组成。下面是HTML的基本语法规则：

标签：HTML标签用于定义网页的结构和内容。标签通常由尖括号包围，例如<tag>。标签可以是成对出现的，其中包含一个开标签和一个闭标签，例如<tag>content</tag>。也可以是自闭合标签，即只有一个标签，没有内容，例如<tag />。
属性：HTML标签可以包含属性，属性提供了有关标签的额外信息。属性通常以键值对的形式出现，例如<tag attribute="value">。属性的值可以是字符串或布尔值。常见的属性包括class、id、src、href等。
内容：HTML标签可以包含文本内容或其他标签。文本内容直接放置在标签的开闭标签之间，例如<p>这是一个段落。</p>。标签可以嵌套在其他标签中，形成标签的层次结构。
注释：HTML注释用于在代码中添加注释，不会在网页中显示。注释以结尾，例如。

下面是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>

在这个示例中，<!DOCTYPE html>声明了文档类型为HTML5。<html>标签是HTML文档的根元素。<head>标签用于定义文档的头部信息，例如标题和样式表。<title>标签定义了网页的标题，将显示在浏览器的标题栏中。<body>标签用于定义文档的主体内容。<h1>标签定义了一个一级标题，<p>标签定义了一个段落，<a>标签定义了一个链接。

当今数字化的时代，网页成为人们获取信息、进行交流和参与活动的主要平台之一。一个网页的构成涉及多个要素，从基本的结构到丰富的内容呈现，每个部分都发挥着特定的作用。本文将探讨一个网页的主要组成要素，帮助读者更好地理解网页的结构和功能。

1. HTML（超文本标记语言）

HTML是网页的基本构建块，它定义了网页的结构和内容。HTML使用标记（标签）来描述文本、图像、链接等元素的布局和层次结构。常见的HTML标签包括<head>、<body>、<p>、<img>等，它们分别用于定义文档头部、主体内容、段落、图像等。

2. CSS（层叠样式表）

CSS负责网页的样式和布局。通过CSS，开发者可以定义文本的字体、颜色、大小，设置元素的边距、背景、定位等。CSS的主要作用是美化和排版网页，提供更好的用户体验。样式表可以嵌入在HTML文档中，也可以作为外部文件引用。

3. JavaScript

JavaScript是一种用于网页交互和动态效果的脚本语言。它使开发者能够在用户浏览网页时动态地改变HTML和CSS，实现交互性的功能。例如，通过JavaScript可以创建响应用户操作的表单验证、动画效果、内容更新等。

4. 图片和多媒体文件

图像、音频和视频是网页中常见的多媒体元素。图像通常使用<img>标签插入，而音频和视频可以通过<audio>和<video>标签嵌入。这些元素丰富了网页的内容，使其更具吸引力和信息量。

5. 链接和导航

链接是网页中连接不同页面和资源的纽带。通过<a>标签，开发者可以创建文本或图像链接，使用户能够轻松地导航到其他页面。导航菜单、导航栏等也是常见的导航元素，它们帮助用户快速定位和访问网站的不同部分。

6. 页面结构（Header、Footer、Nav等）

一个网页通常分为头部（Header）、主体（Body）、尾部（Footer）等结构部分。头部包含网页的标题、导航菜单等信息，尾部包含版权信息、联系方式等。这些结构元素有助于提供清晰的页面布局和导航结构。

7. 表单

表单是网页中用户输入和提交信息的主要方式。通过<form>标签，开发者可以创建包括文本框、按钮、下拉框等在内的表单元素。JavaScript通常与表单结合使用，用于实现实时验证、交互性效果等功能。

8. 响应式设计

随着移动设备的普及，响应式设计变得越来越重要。通过使用响应式设计技术，开发者可以确保网页在不同设备上都能够良好地显示和交互。媒体查询和弹性布局是常用于实现响应式设计的技术手段。

9. 元数据（Metadata）

元数据提供了关于网页的信息，如标题、描述、关键词等。这些信息不直接显示在页面上，但对搜索引擎优化（SEO）和用户体验都至关重要。元数据通常包含在<head>标签中。

10. 版本控制系统

虽然不直接展现在用户面前，但版本控制系统对于开发和维护网页代码至关重要。使用版本控制系统，如Git，可以跟踪代码的变化、协同开发，确保代码的可维护性和可扩展性。

一个网页的构成要素是多样而复杂的，它们共同作用于用户，创造出丰富、交互和令人愉悦的在线体验。了解这些组成要素有助于开发者更好地理解网页的结构，同时也为用户提供了更流畅的浏览体验。

OM 文档对象模型

DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。

DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系。

节点

节点（node) 一词来自于网络理论，这代表着网络中一个个的连接点，网络是由节点构成的。对于html文档也是一样，文档是由节点构成的集合。

1.元素节点

元素节点如 <body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。

2.文本节点

文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。

3.属性节点

元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。

html:

<body>

<p title="这里显示提示信息">这是一个段落</p>

</body>

p ：元素节点。

title="这里显示提示信息"：属性节点。

这是一个段落：文本节点

获取文档对象

一、直接引用节点

1.getElementById()

这个方法返回一个与给定id属性值的元素节点相对应的对象。

例：document.getElementById(‘ha’);

2.getElementsByTagName()

这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

例：document.getElementsByTagName(‘li’);

3.getElementsByName()

通过 name 获取一个对象数组

二、间接引用节点

除了可以直接引用节点，还可以通过节点间的关系来引用相对节点。

1.引用子节点

每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节

点。

例：document.childNodes[0];//引用文档的根节点

document.childNodes[0].childNodes[0]//引用<head>节点

document.childNodes[0].childNodes[1]//引用<body>节点

除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是：

element.firstChild;

element.lastChild;

它们分别表示第一个子结点和最后一个子结点。

2.引用父节点

html的节点层次是一个树状结构，除了根节点外，每个节点都仅有一个父节点，可以由parentNode属性来引用

element.parentNode;//引用父节点

3.引用兄弟节点

属于同一个文档层次的节点称为兄弟节点，有两个属性可以用于兄弟节点间引用，分别是：

element.nextSibling; //引用下一个兄弟节点

element.previousSibling;//引用上一个兄弟节点

三、获取节点信息

在获得一个节点的引用后，有一些方法可以获得该节点的信息。

1.nodeName 获取节点名称

语法：Node.nodeName;

不同的类型的节点，nodeName的返回值有所差异：

元素节点：返回标记名称;

属性节点：返回属性名称;

文本节点：返回文本 #text

2.nodeType 获取节点类型

语法： Node.nodeType;

元素节点：返回 1

属性节点：返回 2

文本节点：返回 3

3.nodeValue 获取节点的值

语法： Node.nodeValue;

元素节点：返回null

属性节点：返回节点值

文本节点：返回文本内容

四、处理属性节点

1. getAttribute 获取节点属性值

object.getAttribute(attribute)

例： var a = document.getElementsByTagName(‘a’);

for(var i=0; i<a.length; i++){

alert(a[i].getAttribute(‘title’));

}

2.setAttribute() 设置节点属性值

object.setAttribute(attribute, value)

例：var link = document.getElementById(‘link’);

link.setAttribute(‘title’, ‘链接提示信息’);

DOM 总结：

一份文档就是一棵树;

节点分为不同的类型，分别是：元素节点，属性节点，文本节点;

每个节点都是一个对象;

getElementById()方法将返回一个对象，该对象对应着文档里的一个元素节点;

getElementsByTagName()方法返回一个对象数组，它们分别对应着文档里的元素

节点;

下一节将讲到事件及表单对象等。

在线咨询

上一篇：网页设计HTML零基础入门
下一篇：HTML中嵌入视频和音频代码

您的项目需求

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

整合营销服务商