当前位置：首页 > news >正文

电子商务网站建设论文资料dw网页制作步骤图片

news 2025/11/8 12:44:32

电子商务网站建设论文资料,dw网页制作步骤图片,wordpress 获取二级栏目,领先的响应式网站建设平台一、网页的组成网页由三部分构成：HTML、JavaScript、CSS。 （1）HTML HTML 相当于网页的骨架，它通过使用标签来定义网页内容的结构。举个例子： 它把图片标签为img、把视频标签为video，然后组合到一个界面…

一、网页的组成

网页由三部分构成：HTML、JavaScript、CSS。

（1）HTML

HTML 相当于网页的骨架，它通过使用标签来定义网页内容的结构。

举个例子：

它把图片标签为img、把视频标签为video，然后组合到一个界面里，这种呈现方式就是HTML

如果你想找到它，

比如我们打开任意一个网站：

然后右键打开“检查”，进入Elements面板：

可以看到，当我们鼠标放置在某一标签上时，该标签标记的东西会被锁定，然后呈现出来。

当很多个标签组合，就成了我们看到的网页界面，

（2）CSS

经过上文得知HTML 负责网页内容的结构

那么 CSS 则控制这些内容的样式和布局。

即CSS通过选择器决定网页元素的字体、颜色、间距、对齐方式、背景、边框等。

比如：

打开Styles面板，下面的各种各样就是在设置样式

（3）JavaScript

如果说：HTML构建了网页、CSS装饰了网页。

那么JavaScript则提供了交互性

比如下图框中，带js后缀的代码，就是引入互动行为

二、制作一个简单网页

首先打开文本文件：

第一步，来定义文档类型

<!DOCTYPE html>

第二步要写：

<html lang="zh">
……你的HTML代码
</html>

<html lang="zh">我们可以理解为，告诉电脑我们要开始写了

正常来说我们可以直接写<html>，但加上 lang="zh"就表示指定语言为中文。

结尾的</html>代表，到这里就结束了。

而中间部分，则是我们要写的设置网页内容

第三部，写head标签和body标签

<html>包括head标签和body标签

所以我们要写：

<head>……</head><body>……</body>

head标签意思是网页头，即说明一下页面需要的配置，比如我们可以写：

body标签的意思是网页体，就是网页正文里要展现的东西，比如我们可以写：

<div id="word">其中div表示定义一个区块，这个区块的id是word，之后我们就可以通过id来获得这个区块，并进行相应的修改设置。

到此为止，我们的完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>简单网页</title>
</head>
<body><header><h1>欢迎访问我的网站</h1></header>    <div class="container"><h2>关于我们</h2><p>这是一个简单的网页示例，展示了HTML和CSS如何一起工作来构建网页结构和样式。</p></div>
</body>
</html>

其中h几表示几级标题，p标签表示一个段落

之后我们把文件后缀改为html，然后双击打开，展示如下；

三、相关概念

（1）节点和节点树

在HTML中，我们把所有的标签内容都看出节点

而所有的节点构成了节点树（HTML DOM树）

至于节点树的构成，相信如果你如果看了第二部分就明白了，其构成如下：

最顶端的节点称之为根节点

每个节点（如果有的话）上一个节点称为父节点，下一个节点称为子节点。

同级的子节点称为兄弟节点

这些概念同理于树部分概念

（2）选择器

在说到CSS时，我们提到了选择器，那么这是什么呢？

首先，选择器是用来定位节点的

比如，我们之前通过div来确定了一个id为word的节点

那么我们要去定位这个id，有三个常用办法：

第一，类选择器，以“ . ”开头

.word {background-color: yellow;
}

这会选中所有 class="word" 的元素，并给它们加上黄色背景。

第二，ID选择器，以“#”开头

#word {font-size: 24px;
}

这会选中具有 id="word" 的元素，并将字体大小设置为 24px。

第三，元素选择器，选择所有指定标签的元素

p {color: blue;
}

这会选中页面中的所有 <p> 标签，并将它们的文字颜色设置为蓝色。

常见的 CSS 选择器及其语法规则，汇总如下：

元素选择器

选中指定标签的所有元素。

p { color: red; }
这会选中页面中的所有 <p> 元素并将它们的文字颜色设置为红色。

2. 类选择器

选中所有具有指定类的元素。类选择器以 . 开头。

.highlight { background-color: yellow; }
这会选中所有 class="highlight" 的元素，并为它们设置黄色背景。

3. ID 选择器

选中具有指定 ID 的元素。ID 选择器以 # 开头。

#header { font-size: 24px; }
这会选中 ID 为 header 的元素，并将字体大小设置为 24px。

4. 通配符选择器

选中所有元素。

* { margin: 0; }
这会把页面中所有元素的外边距（margin）设置为 0。

5. 后代选择器

选中某个元素内部的所有指定子元素。空格表示层级关系，选中某个元素的所有后代元素。

div p { color: blue; }
这会选中所有位于 <div> 内部的 <p> 元素，并将它们的文字颜色设置为蓝色。

6. 子元素选择器

选中某个元素的直接子元素，使用 > 符号表示。

div > p { color: green; }
这会选中所有直接位于 <div> 元素内部的 <p> 元素，而不会选中更深层嵌套的 <p> 元素。

7. 并列关系选择器（兄弟选择器）

**相邻兄弟选择器 (+)**：选中某个元素后紧跟的第一个兄弟元素。
h1 + p { color: orange; }
这会选中紧接在 <h1> 元素后面的第一个 <p> 元素。
**通用兄弟选择器 (~)**：选中所有在指定元素后面的兄弟元素。

h1 ~ p { color: purple; }

这会选中所有位于 <h1> 后面的 <p> 元素。

8. 属性选择器

根据元素的属性和属性值来选择元素。

input[type="text"] { border: 1px solid black; }
这会选中所有 type="text" 的 <input> 元素，并给它们加上黑色边框。

9. 伪类选择器

选择元素的特定状态。
- :hover：当鼠标悬停在元素上时应用样式。
  
  a:hover { color: red; }
- :first-child：选中某元素是其父元素的第一个子元素。
  
  p:first-child { font-weight: bold; }

10. 伪元素选择器

选中元素的特定部分，如首字母、首行等。
- ::before：在元素的内容前插入内容。
  
  p::before { content: "Note: "; font-weight: bold; }
- ::after：在元素的内容后插入内容。
  
  p::after { content: "."; }

11. 组合选择器