具体描述
《网页设计与制作》 前言 在信息爆炸的时代，互联网已成为信息传播、商业交流、文化展示乃至社会互动不可或缺的平台。而构成这个虚拟世界基石的，便是形态各异、功能多样的网页。一本好的网页设计与制作指南，不仅是技术学习的阶梯，更是创意实现、商业成功的助推器。本书《网页设计与制作》旨在为广大网页设计爱好者、初学者以及有志于提升网页制作技能的从业者提供一份系统、深入且实用的学习路径。 我们深知，一个成功的网页，绝不仅仅是代码的堆砌或视觉元素的随意组合。它需要精巧的设计理念，对用户体验的深刻洞察，以及对前端技术的熟练掌握。本书将带领读者从零开始，一步步构建起属于自己的、既美观又实用的网页。我们将避免枯燥乏味的理论灌输，而是以项目驱动、案例分析相结合的方式，让学习过程充满乐趣和成就感。 本书的编写，力求做到以下几点： 系统性与全面性： 涵盖网页设计与制作的核心知识体系，从基础的HTML、CSS布局，到动态交互的JavaScript，再到响应式设计、前端框架的应用，以及更深层次的性能优化与SEO考虑，力求为读者建立起完整的知识框架。 实用性与可操作性： 每一个知识点都配以详实的讲解和可运行的代码示例，读者可以即时动手实践，巩固所学。本书中的案例设计贴近实际需求，涵盖了不同类型的网站，便于读者举一反三。 前沿性与发展性： 关注当前网页设计与开发领域的最新趋势和技术动态，例如现代CSS特性、ES6+的新语法、流行前端框架的理念等，帮助读者掌握面向未来的技能。 易读性与启发性： 语言通俗易懂，结构清晰，逻辑严谨。在讲解技术的同时，也融入了设计原则、用户体验理念等软实力，鼓励读者发挥创意，独立思考。 本书不仅仅是一本技术手册，更是一扇通往数字创意世界的大门。希望通过《网页设计与制作》的学习，您能够自信地将脑海中的创意转化为生动的网页，无论是搭建个人博客，展示作品集，还是构建企业官网，甚至是开发一款交互式应用，都能得心应手。 在这个快速变化的数字时代，掌握网页设计与制作的技能，就是掌握了与世界对话的一种强大方式。让我们一起踏上这段精彩的旅程，用代码和创意，点亮数字世界。 第一章：认识网页——数字世界的基石 在深入学习技术之前，我们首先需要建立对网页的基本认知。网页，作为互联网信息呈现和交互的主要载体，其背后蕴含着丰富的学问。本章将从宏观角度，带领大家认识网页的本质、发展历程，以及它在现代社会中所扮演的重要角色。 1. 什么是网页？ 定义： 网页（Web Page）是互联网上的一种信息页面，通常以HTML（HyperText Markup Language）为基础语言编写，通过浏览器来解析和展示。它可以包含文本、图像、音频、视频、链接等多种元素，能够实现丰富的交互功能。 构成要素： 内容（Content）： 网页上展示的文字、图片、视频等信息。 结构（Structure）： HTML负责定义网页内容的层级和逻辑关系。 表现（Presentation）： CSS（Cascading Style Sheets）负责控制网页的外观样式，如颜色、字体、布局、大小等。 行为（Behavior）： JavaScript负责实现网页的动态交互功能，如用户点击事件、动画效果、数据加载等。 与网站的区别： 网站（Website）是由一系列相互关联的网页组成的集合，通常围绕一个主题或目的。一个网站至少包含一个首页，并通过链接将其他页面串联起来。 2. 网页的发展历程与演变 早期静态网页： 最初的网页以静态展示信息为主，内容更新困难，交互性差。主要依靠HTML进行结构描述。 动态网页的兴起： 随着服务器端脚本语言（如PHP, ASP）和数据库技术的出现，动态网页得以实现，能够根据用户请求或数据变化生成内容，提高了网页的灵活性。 富媒体与交互性的增强： Flash、JavaScript等技术的普及，使得网页能够呈现更丰富的多媒体内容和复杂的交互效果，用户体验大幅提升。 响应式设计与移动优先： 移动互联网的爆发式增长，促使网页设计必须适应不同尺寸的屏幕。响应式设计（Responsive Web Design）成为主流，确保网页在桌面、平板、手机等设备上都能获得良好的浏览体验。 现代前端开发： 如今，网页开发已进入一个高度工程化的阶段，前端框架（如React, Vue, Angular）的出现，极大地提高了开发效率和代码的可维护性。Web Components、Progressive Web Apps (PWA) 等新概念也在不断涌现。 3. 网页在现代社会中的重要作用 信息传播的渠道： 新闻资讯、知识分享、研究成果等都通过网页进行广泛传播。 商业活动的核心： 电子商务、品牌推广、在线营销、客户服务等都依赖于功能完善的网站。 文化交流的平台： 艺术展览、音乐分享、社区论坛等，促进了不同文化背景下的交流与理解。 社会服务的载体： 在线教育、政务公开、医疗咨询等，极大地便利了人们的生活。 个人表达的空间： 博客、个人主页、作品集等，为个人提供了展示才华和思想的平台。 4. 成为一名合格的网页设计与制作人员需要具备的素质 技术基础： 扎实的HTML、CSS、JavaScript功底是必备的。 设计审美： 良好的色彩感、布局感、排版能力，能够创造视觉吸引力。 用户体验意识： 深刻理解用户需求，设计易于使用、直观友好的界面。 逻辑思维能力： 能够将复杂的需求转化为清晰的代码结构。 解决问题的能力： 面对技术难题，能够主动搜索、分析并解决。 持续学习的态度： 技术更新迭代快，需要不断学习新知识、新工具。 沟通协作能力： 与设计师、后端工程师、产品经理等有效沟通。 第二章：HTML——网页的骨架与灵魂 HTML（HyperText Markup Language，超文本标记语言）是构建网页内容结构的基础，它定义了网页中的各个元素，是网页的“骨架”。本章将深入探讨HTML的核心概念和常用标签，帮助读者掌握创建网页结构的能力。 1. HTML基础概念 什么是HTML： 一种用于创建网页的标准标记语言。它不是编程语言，而是标记语言，用于描述文档的结构。 标签（Tags）： HTML通过标签来标记不同的内容元素。大多数标签成对出现，由开始标签（``）和结束标签（` `）组成，中间包裹着内容。例如：`
`。 文档结构： 一个标准的HTML文档通常包含 ``（声明文档类型）、``（根元素）、``（包含元信息，如标题、字符集等）和 ``（包含网页可见内容）等部分。 2. HTML文档结构与基本标签 ``： 声明文档类型，告知浏览器使用HTML5标准解析。 ``： HTML文档的根元素。 ``： 包含关于HTML文档的元信息，如： ``： 定义文档的字符编码，UTF-8是国际通用标准，支持多种语言。 ``： 定义网页的标题，显示在浏览器标签页或窗口标题栏。 `<link rel="stylesheet" href="style.css">`： 引入外部CSS样式文件。 `<script src="script.js"></script>`： 引入外部JavaScript文件。 `<body>`： 包含网页的所有可见内容，例如文本、图片、链接、表格等。 3. 常用HTML内容结构标签 标题标签： `<h1>` 到 `<h6>`，用于定义不同级别的标题，`<h1>`是最重要的标题。 段落标签： `<p>`，用于定义文本段落。 文本格式化标签： `<strong>` 或 `<b>`： 加粗文本，`<strong>` 强调重要性。 `<em>` 或 `<i>`： 斜体文本，`<em>` 强调语气。 `<u>`： 下划线文本。 `<mark>`： 标记高亮文本。 `<del>`： 删除线文本。 `<sub>`： 下标文本。 `<sup>`： 上标文本。 列表标签： 无序列表： `<ul>` (unordered list) 配合 `<li>` (list item)。 有序列表： `<ol>` (ordered list) 配合 `<li>`。 链接标签： `<a href="url">链接文本</a>`，用于创建超链接。`href`属性指定链接目标，`target="_blank"`可在新窗口打开。 图像标签： `<img src="image.jpg" alt="图片描述">`，用于插入图像。`src`属性指定图像文件路径，`alt`属性提供替代文本，对SEO和可访问性很重要。 水平线标签： `<hr>`，用于创建水平分隔线。 4. HTML语义化标签（HTML5新特性） `<header>`： 定义文档或节的头部，通常包含标题、Logo、导航等。 `<nav>`： 定义导航链接的部分。 `<main>`： 定义文档的主要内容。一个文档应该只有一个`<main>`元素。 `<article>`： 定义独立的、可复用的内容块，如博客文章、新闻报道。 `<section>`： 定义文档中的一个节或区域，通常带有标题。 `<aside>`： 定义与主内容相关但可以独立于主内容存在的侧边栏、引用等。 `<footer>`： 定义文档或节的底部，通常包含版权信息、联系方式等。 `<figure>` 和 `<figcaption>`： 用于包含图像、图表、代码示例等，并可为其提供标题。 5. HTML表单——用户交互的入口 `<form>`： 定义一个HTML表单。 `action` 属性：指定表单提交的数据处理URL。 `method` 属性：指定提交方法，常用`GET`（数据附加在URL后）和`POST`（数据放在请求体中）。 输入控件： `<input>`： 最常用的表单控件。`type`属性决定其类型，如： `text`：单行文本输入框。 `password`：密码输入框。 `email`：电子邮件输入框（带有基本的验证）。 `number`：数字输入框。 `date`：日期选择器。 `checkbox`：复选框。 `radio`：单选按钮（需要name属性相同才能实现互斥）。 `submit`：提交按钮。 `button`：普通按钮。 `file`：文件上传。 `<textarea>`： 多行文本输入区域，`rows`和`cols`属性控制大小。 `<select>` 和 `<option>`： 下拉列表。 `<label>`： 为表单控件提供标签，通过`for`属性与控件的`id`关联，提高可访问性。 表单的 `name` 和 `id` 属性： `id` 用于唯一标识一个元素，常用于JavaScript和CSS。`name`属性则用于在表单提交时，标识输入控件的键名。 6. HTML表格——结构化数据展示 `<table>`： 定义一个表格。 `<tr>`： 定义表格中的一行。 `<th>`： 定义表格头部单元格（通常加粗居中）。 `<td>`： 定义表格中的数据单元格。 `<thead>`、`<tbody>`、`<tfoot>`： 分别定义表格的表头、表体和表脚，有助于语义化和样式控制。 `colspan` 和 `rowspan` 属性： 分别用于合并单元格的列和行。 7. HTML列表——信息条理化展示 无序列表 (`<ul>`): 项目之间没有特定顺序，常用于导航菜单、项目列表等。 有序列表 (`<ol>`): 项目有顺序，常用于步骤说明、排名列表等。`type`属性可改变列表标记（如数字、字母）。 定义列表 (`<dl>`): 用于术语和定义的列表，包含`<dt>`（定义术语）和`<dd>`（定义描述）。 8. HTML实体（Entities） 用于表示HTML中特殊字符，例如`<` (小于号) 用 `<` 表示，`>` (大于号) 用 `>` 表示，`&` (和号) 用 `&` 表示，`©` (版权符号) 用 `©` 表示。 第三章：CSS——网页的容貌与气质 如果说HTML是网页的骨架，那么CSS（Cascading Style Sheets，层叠样式表）就是网页的“容貌”和“气质”。它负责控制网页的视觉呈现，从颜色、字体、布局到动画效果，CSS都能胜任。本章将带领读者深入理解CSS的工作原理，并掌握构建美观网页的关键技能。 1. CSS基础概念 什么是CSS： 一种样式表语言，用于描述HTML文档的显示样式。它允许开发者将内容的结构（HTML）与表现（CSS）分离，提高代码的可维护性和灵活性。 CSS规则： CSS由一系列“规则”组成，每条规则包含一个“选择器”和一组“声明”。 选择器（Selector）： 指定要应用样式的HTML元素。 声明（Declaration）： 由一个“属性-值”对组成，指定要应用的样式。 属性（Property）： 例如 `color`（颜色）、`font-size`（字体大小）、`margin`（外边距）等。 值（Value）： 例如 `red`、`16px`、`10px` 等。 语法： `selector { property: value; property: value; }` 例如：`p { color: blue; font-size: 16px; }` 2. CSS的引入方式 行内样式（Inline Styles）： 直接在HTML元素的`style`属性中编写CSS。 ` <p style="color: red; font-size: 14px;">这是一个红色段落。</p> ` 优点： 优先级最高，直接应用。 缺点： 难以维护，不利于代码分离，不推荐大量使用。 内部样式表（Internal Stylesheet）： 在HTML文档的`<head>`部分使用`<style>`标签编写CSS。 ` <head> <style> p { color: green; } </style> </head> ` 优点： 适用于单个HTML页面的样式。 缺点： 无法在多个页面之间共享。 外部样式表（External Stylesheet）： 将CSS代码保存在独立的`.css`文件中，然后在HTML文档的`<head>`部分使用`<link>`标签引入。 CSS文件（style.css）： ```css p { color: purple; } ``` HTML文件： ```html <head> <link rel="stylesheet" href="style.css"> </head> ``` 优点： 最推荐的方式，实现了内容与样式的完全分离，便于维护和复用。 3. CSS选择器——精准定位元素 元素选择器（Type Selectors）： 根据HTML元素的标签名选择。 `h1 { font-size: 2em; }` 类选择器（Class Selectors）： 以`.`开头，根据元素的`class`属性选择。一个元素可以有多个class。 `.highlight { background-color: yellow; }` `<p class="highlight">这段文字会被高亮。</p>` ID选择器（ID Selectors）： 以``开头，根据元素的`id`属性选择。一个ID在一个HTML文档中必须是唯一的。 `main-title { color: navy; }` `<h1 id="main-title">我的标题</h1>` 后代选择器（Descendant Selectors）： 选择某个元素内部的后代元素。 `div p { color: gray; }` (选择 `<div>` 内部的所有 `<p>` 元素) 子选择器（Child Selectors）： 只选择某个元素的直接子元素。 `ul > li { list-style-type: square; }` (选择 `<ul>` 的直接子 `<li>` 元素) 相邻兄弟选择器（Adjacent Sibling Selectors）： 选择紧接在另一个元素后的元素。 `h2 + p { margin-top: 0; }` (选择紧跟在 `<h2>` 后的 `<p>` 元素) 通用兄弟选择器（General Sibling Selectors）： 选择某个元素之后的所有兄弟元素。 `h2 ~ p { color: olive; }` (选择 `<h2>` 之后的所有 `<p>` 兄弟元素) 伪类（Pseudo-classes）： 用于选择元素的特定状态。 `:hover`：鼠标悬停时。 `:active`：元素被激活时（如点击时）。 `:focus`：元素获得焦点时（如输入框）。 `:nth-child(n)`：选择父元素下的第n个子元素。 `:first-child`：第一个子元素。 `:last-child`：最后一个子元素。 伪元素（Pseudo-elements）： 用于设置元素特定部分的样式。 `::before`：在元素内容之前插入生成的内容。 `::after`：在元素内容之后插入生成的内容。 `::first-letter`：设置元素首字母的样式。 `::first-line`：设置元素首行的样式。 属性选择器（Attribute Selectors）： 根据元素的属性及其值进行选择。 `[type="text"] { border: 1px solid blue; }` `a[target="_blank"] { background-image: url(external-link.png); }` 4. CSS盒模型（Box Model） 每个HTML元素都被视为一个盒子。盒模型由以下几部分组成： 内容（Content）： 元素的实际内容（文本、图片等）。 内边距（Padding）： 内容与边框之间的空间。 边框（Border）： 元素边缘的线。 外边距（Margin）： 元素边框与相邻元素之间的空间。 属性： `width`, `height`, `padding`, `border`, `margin`。 `box-sizing` 属性： `content-box`（默认）：宽度和高度只包含内容，Padding和Border会加在上面，使元素实际尺寸变大。 `border-box`：宽度和高度包含内容、Padding和Border。这样可以更方便地控制元素的总尺寸。 5. CSS布局技术——定位与排版 块级元素（Block-level Elements）： 默认占据一行，宽度为100%，如`<div>`, `<p>`, `<h1>`。 行内元素（Inline Elements）： 默认在同一行显示，宽度自适应内容，如`<span>`, `<a>`, `<strong>`。 `display` 属性： `block`：块级元素。 `inline`：行内元素。 `inline-block`：既有行内元素的特性（不独占一行），又有块级元素的特性（可设置宽、高、margin、padding）。 `none`：隐藏元素，不占据空间。 定位（Positioning）： `position: static;`（默认）：元素按照正常文档流排列。 `position: relative;`：相对定位，相对于其正常位置进行偏移，不影响其他元素布局。 `position: absolute;`：绝对定位，相对于最近的已定位祖先元素进行定位。如果不存在已定位祖先，则相对于初始包含块（通常是`<html>`）。 `position: fixed;`：固定定位，相对于浏览器视口进行定位，始终保持在屏幕上的同一位置。 `position: sticky;`：粘性定位，在视口内时表现为相对定位，当滚动到某个阈值时，表现为固定定位。 `top`, `right`, `bottom`, `left`：与`position`属性配合使用，用于偏移元素。 `z-index`：用于设置元素的堆叠顺序。 浮动（Floats）： `float: left;` 或 `float: right;`。用于将元素脱离正常文档流，并使其向左或向右浮动，允许其他内容围绕其排列。 清除浮动（Clearfix）： 由于浮动会影响父元素的尺寸，需要使用clearfix技巧来解决。 Flexbox（弹性盒子模型）： 一种一维布局模型，用于在容器中对项目进行高效的对齐、分布空间和排序。 容器属性： `display: flex;`, `flex-direction`, `justify-content`, `align-items`, `flex-wrap` 等。 项目属性： `flex-grow`, `flex-shrink`, `flex-basis`, `order`, `align-self` 等。 Grid（网格布局）： 一种二维布局模型，用于将容器分割成行和列，从而实现更复杂的页面布局。 容器属性： `display: grid;`, `grid-template-columns`, `grid-template-rows`, `gap`, `justify-items`, `align-items` 等。 项目属性： `grid-column`, `grid-row`, `grid-area` 等。 6. CSS文本与字体样式 `font-family`: 设置字体族。 `font-size`: 设置字体大小。 `font-weight`: 设置字体粗细。 `font-style`: 设置字体样式（如 `italic` 斜体）。 `line-height`: 设置行高。 `text-align`: 设置文本对齐方式（left, right, center, justify）。 `text-decoration`: 设置文本装饰（如 `underline`, `line-through`）。 `color`: 设置文本颜色。 7. CSS颜色与背景 `color`: 设置文本颜色。 `background-color`: 设置背景颜色。 `background-image`: 设置背景图片。 `background-repeat`: 设置背景图片是否重复。 `background-position`: 设置背景图片位置。 `background-size`: 设置背景图片大小。 颜色表示法： 命名颜色（`red`, `blue`） 十六进制（`FF0000`） RGB（`rgb(255, 0, 0)`） RGBA（`rgba(255, 0, 0, 0.5)`，包含透明度） HSL（`hsl(0, 100%, 50%)`） HSLA（`hsla(0, 100%, 50%, 0.5)`） 8. 响应式设计（Responsive Web Design） 媒体查询（Media Queries）： 允许根据设备的特性（如屏幕宽度、分辨率、方向等）应用不同的CSS样式。 `@media (max-width: 768px) { / 样式 / }` 响应式布局技巧： 使用相对单位（百分比 `%`，视口单位 `vw`, `vh`）。 弹性图片（`max-width: 100%; height: auto;`）。 Flexbox和Grid布局的灵活运用。 第四章：JavaScript——网页的生命力与交互 如果说HTML定义了网页的结构，CSS赋予了它美观的外表，那么JavaScript（简称JS）就是赋予网页“生命力”的魔法师，它能够实现网页的动态交互、数据处理，让网页变得生动有趣。本章将带领读者进入JavaScript的世界，学习如何让网页“动起来”。 1. JavaScript基础概念 什么是JavaScript： 一种高级、解释型、动态类型的脚本语言。它主要运行在浏览器中，用于创建动态内容、控制多媒体、制作动画等。 作用： DOM操作： 修改HTML结构和CSS样式，创建、删除、修改网页元素。 事件处理： 响应用户的操作，如点击、鼠标移动、键盘输入等。 数据验证： 在用户提交表单前进行数据检查。 异步通信（AJAX）： 在不重新加载整个页面的情况下，与服务器交换数据。 动画效果： 创建平滑的视觉过渡和动效。 表单处理： 动态控制表单的行为。 JavaScript的引入方式： 内部脚本： 在HTML文档的`<head>`或`<body>`中使用`<script>`标签。 ```html <script> alert('Hello, world!'); </script> ``` 外部脚本： 将JavaScript代码保存在独立的`.js`文件中，并在HTML文档的`<head>`或`<body>`中使用`<script src="script.js"></script>`引入。 script.js： ```javascript alert('Hello, external world!'); ``` 建议： 通常将外部脚本放在`<body>`标签的末尾，以避免阻塞HTML页面的渲染。 2. JavaScript语法基础 变量（Variables）： 用于存储数据。 `var`, `let`, `const` 关键字。 `let` 和 `const` 是ES6（ECMAScript 2015）引入的，推荐使用。`let` 声明的变量可重新赋值，`const` 声明的变量不可重新赋值（但对于对象和数组，其内部属性和元素仍可修改）。 命名规则： 字母、数字、下划线（_）、美元符号（$）。不能以数字开头。 数据类型（Data Types）： 基本数据类型： `String`：字符串（用单引号 `'` 或双引号 `"` 括起来）。 `Number`：数字（整数、浮点数）。 `Boolean`：布尔值（`true` 或 `false`）。 `Undefined`：未定义（变量已声明但未赋值）。 `Null`：空值。 `Symbol`（ES6）：唯一且不可变的原始值。 引用数据类型： `Object`：对象，键值对的集合。 `Array`：数组，有序的元素集合。 `Function`：函数。 运算符（Operators）： 算术运算符： `+`, `-`, ``, `/`, `%` (取模)。 赋值运算符： `=`, `+=`, `-=`, `=`, `/=`, `%=`。 比较运算符： `==` (等于), `===` (严格等于，值和类型都相同), `!=` (不等于), `!==` (严格不等于), `>`, `<`, `>=`, `<=`。 逻辑运算符： `&&` (逻辑与), `||` (逻辑或), `!` (逻辑非)。 其他运算符： `typeof` (返回数据类型), `instanceof` (判断对象是否为某个类的实例)。 条件语句（Conditional Statements）： `if...else`: ```javascript if (condition) { // code to execute if condition is true } else { // code to execute if condition is false } ``` `switch`: ```javascript switch (expression) { case value1: // code break; case value2: // code break; default: // default code } ``` 循环语句（Loops）： `for` 循环： ```javascript for (initialization; condition; increment) { // code } ``` `while` 循环： ```javascript while (condition) { // code } ``` `do...while` 循环： ```javascript do { // code } while (condition); ``` `for...in`: 遍历对象的属性名。 `for...of` (ES6): 遍历可迭代对象的元素（如数组、字符串）。 函数（Functions）： 可重复使用的代码块。 声明函数： ```javascript function myFunction(parameter1, parameter2) { // code return result; // Optional } ``` 匿名函数/函数表达式： ```javascript const myFunc = function(parameter) { // code }; ``` 箭头函数（Arrow Functions, ES6）： ```javascript const myArrowFunc = (parameter1, parameter2) => { // code return result; }; ``` 数组（Arrays）： 创建：`const arr = [1, 'hello', true];` 访问元素：`arr[0]` 常用方法：`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `slice()`, `concat()`, `forEach()`, `map()`, `filter()`, `reduce()` 等。 对象（Objects）： 创建： ```javascript const myObject = { name: 'Alice', age: 30, greet: function() { console.log('Hello!'); } }; ``` 访问属性：`myObject.name` 或 `myObject['age']`。 添加/修改属性：`myObject.city = 'New York';` 3. DOM（Document Object Model）操作——与HTML互动 什么是DOM： DOM是将HTML文档表示为一个由节点组成的树形结构。JavaScript可以通过DOM API来访问、修改和创建HTML文档的内容、结构和样式。 获取元素： `document.getElementById('myId')`: 通过ID获取元素。 `document.getElementsByClassName('myClass')`: 通过类名获取元素（返回HTMLCollection，类数组对象）。 `document.getElementsByTagName('div')`: 通过标签名获取元素（返回HTMLCollection）。 `document.querySelector('selector')`: 通过CSS选择器获取第一个匹配的元素。 `document.querySelectorAll('selector')`: 通过CSS选择器获取所有匹配的元素（返回NodeList）。 修改元素内容： `element.innerHTML`: 获取或设置元素的HTML内容（会解析HTML标签）。 `element.textContent`: 获取或设置元素的文本内容（不解析HTML标签）。 修改元素属性： `element.setAttribute('attributeName', 'value')`: 设置属性。 `element.getAttribute('attributeName')`: 获取属性。 `element.style.propertyName = 'value'`: 修改内联样式。 创建和删除元素： `document.createElement('tagName')`: 创建新元素。 `parentNode.appendChild(newNode)`: 将新元素添加到父元素末尾。 `parentNode.insertBefore(newNode, referenceNode)`: 在特定节点前插入新元素。 `parentNode.removeChild(childNode)`: 移除子节点。 `element.remove()`: 移除元素本身。 修改元素类名： `element.classList.add('className')` `element.classList.remove('className')` `element.classList.toggle('className')` `element.classList.contains('className')` 4. 事件处理——响应用户交互 什么是事件： 用户在网页上进行的操作，如点击、滚动、输入、鼠标悬停等。 事件监听器（Event Listeners）： 用于“监听”特定元素的特定事件，并在事件发生时执行相应的函数（回调函数）。 添加事件监听器： DOM 0 级事件处理（不推荐）： `element.onclick = function() { / code / };` DOM 2 级事件处理（推荐）： `element.addEventListener('eventType', function(event) { / code / });` `eventType`: 事件类型，如 `click`, `mouseover`, `keydown`, `submit` 等。 `event` 对象：包含事件的详细信息（如鼠标坐标、按键码等）。 事件冒泡与事件捕获： 事件在DOM树中传播的方式。 阻止事件默认行为： `event.preventDefault();` (例如阻止表单提交后页面跳转)。 阻止事件传播： `event.stopPropagation();` (阻止事件向上冒泡或向下捕获)。 5. AJAX——实现无刷新更新 什么是AJAX（Asynchronous JavaScript and XML）： 一种在后台与服务器进行数据交换的技术，可以实现网页的局部更新，而无需重新加载整个页面。 主要组成： JavaScript (XMLHTTPRequest对象或Fetch API)。 XML (也可使用JSON等其他格式)。 CSS（用于样式）。 DOM（用于动态显示和交互）。 `XMLHttpRequest` 对象： `new XMLHttpRequest()` `open(method, url, async)` `send(data)` `onreadystatechange` 事件：监听请求状态变化。 `readyState` 属性：0（未初始化）、1（正在发送）、2（已接收）、3（正在处理）、4（完成）。 `status` 属性：HTTP状态码（如200表示成功）。 `responseText` / `responseXML`：获取响应内容。 Fetch API（现代AJAX）： 提供了更强大、更灵活的API来发起网络请求。 `fetch(url)` 返回一个Promise。 `.then(response => response.json())` 处理JSON响应。 `.then(data => { / 使用数据 / })`。 `POST` 请求： ```javascript fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(...) ``` 6. 现代JavaScript特性（ES6+） 箭头函数（Arrow Functions） 模板字符串（Template Literals）： 使用反引号 `` ` ``，方便嵌入变量和多行字符串。 `` `Hello, ${name}!` `` 解构赋值（Destructuring Assignment）： 快速从数组或对象中提取值。 `const [a, b] = [1, 2];` `const { name, age } = person;` 模块化（Modules）： `import` 和 `export`，用于组织和复用代码。 类（Classes）： 语法糖，用于创建对象和实现面向对象编程。 Promise： 用于处理异步操作，简化回调地狱。 Async/Await： 基于Promise，使异步代码看起来更像同步代码，提高可读性。 第五章：网页制作实践——从概念到实现 在掌握了HTML、CSS和JavaScript的基础知识后，本章将带领读者将这些技能付诸实践，通过一个完整的项目流程，理解网页制作的实际过程，并学习一些常用的工具和优化技巧。 1. 项目流程概述 需求分析： 明确网站的目标、功能、目标用户。 原型设计（Wireframing & Prototyping）： 绘制页面草图，规划页面布局和导航，甚至制作可交互的原型。 视觉设计（UI Design）： 设计页面的整体风格、颜色、字体、图标、图片等视觉元素。 前端开发（HTML, CSS, JavaScript）： 根据设计稿编写代码，实现页面结构、样式和交互。 测试与调试： 在不同浏览器、设备上测试页面的兼容性和功能，修复bug。 部署上线： 将网站文件上传到服务器，让用户可以访问。 维护与优化： 定期更新内容，优化性能，根据用户反馈进行改进。 2. 常用工具与资源 代码编辑器： Visual Studio Code (VS Code), Sublime Text, Atom 等。提供代码高亮、自动补全、代码格式化等功能。 浏览器开发者工具： Chrome DevTools, Firefox Developer Tools。是调试HTML、CSS、JavaScript不可或缺的利器，可以查看元素、调试代码、监控网络请求等。 设计工具： Figma, Sketch, Adobe XD。用于创建高保真设计稿和原型。 图库资源： Unsplash, Pexels, Pixabay (免费高质量图片)。 图标资源： Font Awesome, Iconfont (阿里巴巴)。 前端框架/库（入门级了解）： Bootstrap, Tailwind CSS： CSS框架，提供预设组件和样式，快速搭建响应式页面。 jQuery： JavaScript库，简化DOM操作和事件处理（在现代JS开发中逐渐被原生JS取代）。 React, Vue.js, Angular： 前端框架，用于构建复杂的单页应用（SPA）。 3. 构建一个简单的个人作品集网站（案例分析） 需求： 展示个人信息、作品、联系方式。 结构设计（HTML）： 导航栏 (`<nav>`, `<ul>`, `<li>`, `<a>`) 英雄区域（Banner，包含大标题和简短介绍，`<img>`, `<h1>`, `<p>`） 关于我（`section`, `<img>`, `<p>`） 我的作品（`section`, `<div>` 容器，每个作品一个`article`或`div`，包含图片、标题、描述，`<img>`, `<h2>`, `<p>`) 联系方式（`section`, `form`） 页脚（`<footer>`） 样式设计（CSS）： 整体布局（Flexbox或Grid） 响应式设计（媒体查询） 颜色主题、字体选择 作品卡片样式 表单样式 交互实现（JavaScript）： 导航栏的平滑滚动链接。 作品图片的灯箱效果（点击放大）。 表单提交的简单验证（例如邮箱格式）。 4. 网页性能优化基础 减少HTTP请求： 合并CSS和JavaScript文件，使用CSS Sprites（合并图片）。 优化图片： 选择合适的图片格式（JPEG, PNG, WebP），压缩图片大小。 压缩代码： 压缩HTML、CSS、JavaScript文件。 延迟加载（Lazy Loading）： 对非首屏的图片、视频等资源，在用户滚动到可视区域时再加载。 使用CDN（Content Delivery Network）： 加速资源加载。 优化CSS和JavaScript加载顺序： 优先加载关键CSS，异步加载JavaScript。 5. SEO（Search Engine Optimization）基础 语义化HTML： 使用正确的HTML标签（`<h1>`到`<h6>`, `<nav>`, `<article>`等）帮助搜索引擎理解内容结构。 `alt`属性： 为图片添加描述性`alt`文本。 `title`属性： 为链接和重要元素添加描述性`title`文本。 Meta标签： `<meta name="description" content="网站的描述">` `<meta name="keywords" content="网站的关键词">` (现在重要性较低) 清晰的URL结构： 易于理解和包含关键词的URL。 内容质量： 提供有价值、原创的内容。 移动友好： 响应式设计对SEO至关重要。 结语 网页设计与制作是一门融合了技术、艺术与用户体验的综合性学科。从HTML的结构搭建，到CSS的视觉美化，再到JavaScript的交互赋予，每一步都需要细致的思考和精湛的实践。本书《网页设计与制作》力求为读者打下坚实的基础，指引前进的方向。 我们希望通过本书的学习，您不仅能够掌握编写网页的代码，更能培养出对用户需求的洞察力，对设计美学的追求，以及解决技术难题的能力。互联网世界瞬息万变，技术更新迭代飞快，但不变的是对优质内容和良好用户体验的不懈追求。 请记住，理论学习是起点，实践是关键。拿起您的代码编辑器，开始动手创作吧！不断尝试，不断犯错，不断学习，您定能在网页设计与制作的道路上越走越远，创造出令人惊叹的数字作品。 祝您学习愉快，创作成功！
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;">
<div class="col-md-12" style='background-color:#EBEEF3;padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem'>
<h2>
作者简介
</h2>
<div style='margin-left:30px;'>
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;">
<div class="col-md-12" style='background-color:#EBEEF3;padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem'>
<h2>
目录信息
</h2>
<div style='margin-left:30px;'>
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;">
<div class="col-md-12 " style='padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem;background-color:#EBEEF3;'>
<h2 style=''>
读后感
</h2>
<div style=''>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>
</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>
</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>
</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>
</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>
</p>
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;">
<div class="col-md-12 " style='padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem;background-color:#EBEEF3;'>
<h2 style=''>
用户评价
</h2>
<div style=''>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>老实说，我原本对这种“工具书”的阅读体验并不抱太大期望，总觉得技术书籍难免枯燥乏味，充斥着生硬的术语和晦涩的语法说明。然而，《网页设计与制作》这本书却成功地颠覆了我的认知。它的叙述方式极其生动，更像是一本优秀的“技术故事书”。作者在讲解JavaScript的基础应用时，没有像其他教材那样枯燥地罗列函数和变量，而是通过一个模拟的“在线留言板”项目，一步步引导我们如何实现表单验证、动态内容加载等效果。这种以项目驱动的学习方式，极大地激发了我的探索欲。我感觉我不是在“学”一门技术，而是在“创造”一个真实可用的东西。尤其让我印象深刻的是，书中对浏览器兼容性的处理方式。它没有简单地说“要兼容”，而是深入分析了不同浏览器引擎在渲染特定CSS属性时的差异，并提供了实用的“兼容性补丁”代码片段。这对于我们这些需要面对复杂线上环境的开发者来说，简直是救命稻草。读完后，我不仅掌握了如何编写代码，更重要的是，理解了代码背后的逻辑和浏览器的工作原理，这才是成为一个优秀前端工程师的关键。</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>我是一名有一定基础的平面设计师，希望转型到网页领域，之前尝试了好几本书，但它们要么过于偏重代码实现而忽略了设计美学，要么就是纯粹讲设计理论却不涉及技术落地。直到我翻阅了《网页设计与制作》，才发现它完美地架起了这两座桥梁。这本书的后半部分关于响应式布局（Responsive Design）的讲解，简直是教科书级别的。它不是简单地介绍媒体查询（Media Queries），而是深入探讨了“移动优先”（Mobile First）的设计哲学。作者通过一系列案例对比，清晰地论证了为什么应该先为小屏幕用户设计，然后再逐步扩展到大屏幕，这种思维的转变对我触动非常大。书中还详细介绍了CSS Grid和Flexbox布局的最新用法，并且非常负责任地给出了在旧版浏览器中的兼容性回退方案。对于像我这样需要将已有的品牌视觉识别系统（VI）转化到数字媒介上的设计师来说，这本书提供的指导非常实用，它教我如何将对齐、留白、层级这些平面概念，优雅地融入到动态的网页环境中。</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>这本书的排版和视觉呈现绝对是行业内的标杆水平。要知道，我们读的是一本关于“设计”的书，如果它自身的设计感跟不上，那简直是一种讽刺。幸运的是，《网页设计与制作》在这方面做得无可挑剔。它的纸张质量上乘，印刷清晰锐利，即便是最小的字体和代码块也能看得一清二楚，长时间阅读眼睛也不会感到疲劳。更值得称赞的是，它对色彩的运用把握得非常精准。在讲解色彩理论和对比度时，书中的示例图会用不同的色块组合，直观地展示出什么是“高可访问性”的配色，什么又是“视觉灾难”。很多理论书籍往往把这些抽象的概念放在文字里让我们自行想象，而这本书直接“画”给你看。此外，对于代码块的格式化也非常专业，缩进清晰、高亮明确，这使得我们很容易就能在书本和自己的编辑器之间进行对照学习。这本书本身就是一本绝佳的“视觉设计范例”，它用自身的优秀设计，潜移默化地提升了我的审美标准，让我意识到，好的代码和好的设计是密不可分的。</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>如果要我用一个词来形容这本书的价值，那就是“前瞻性”。它不仅仅停留在教授当前的HTML5和CSS3基础语法上，更重要的是，它引导我们去关注网页设计的未来趋势。例如，书中有一章专门讨论了Web Components的概念，以及如何使用现代JavaScript框架（虽然没有深入到框架本身，但提供了必要的基础知识）来构建可复用、可维护的用户界面。这种对技术栈前沿的关注，让这本书的生命力远超那些只关注“当下”技术的教材。我特别欣赏作者在讨论性能优化时所采取的务实态度——它不仅仅告诉我们“要快”，还详细解释了如何通过优化图片加载（如使用WebP格式）、延迟加载非关键资源，以及如何利用浏览器缓存机制来实现页面的秒开效果。这些细节决定了一个网站的生死。总而言之，阅读这本书的过程，就像是进行了一次全面的“网页开发体检”，不仅修补了我已有的知识漏洞，更帮我提前预习了未来几年内我都需要掌握的核心技能，这笔投资绝对是值得的。</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p>这本《网页设计与制作》这本书，简直是为我这种初学者量身定做的“通关秘籍”！我之前对网页设计完全是一头雾水，打开各种教程视频，不是讲得太深奥，就是跳过了基础概念，看得我云里雾里。但是这本书不一样，它从最基本的HTML结构开始讲起，那种耐心和细致，仿佛作者就在我身边手把手地教我。它没有直接抛出复杂的框架知识，而是先用清晰的比喻解释了什么是“骨架”、“皮肤”和“血液”，让我立刻对网页的构成有了直观的认识。特别是关于CSS的部分，讲解得尤为到位。我记得有一章专门讲了盒模型（Box Model），作者用了好几个实际案例来对比不同设置下的边距、内边距和边框对元素布局的影响，还配了大量的图示，我甚至可以清晰地看到元素周围那看不见的“盒子”是如何运作的。读完这一章，我终于明白了为什么我的元素总是错位，那种豁然开朗的感觉，真的太棒了！而且，书里还穿插了许多实用的设计原则，比如如何选择合适的配色方案、如何保证字体在不同设备上的可读性，这些内容虽然不是纯粹的技术代码，但对于做出一个“好看”又“好用”的网站来说至关重要。这本书真正做到了理论与实践的完美结合，读完后我信心倍增，已经能独立完成一个包含导航栏、图库和响应式布局的基础网站了。</p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p></p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p></p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p></p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p></p>
评分<span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span><span class="star-icon full">☆</span>
<p></p>
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem">
<div class="col-md-12 ">
<div class="list-group" id='hashshow'>
</div>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;">
<div class="col-md-12 " style='padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem'>
<ul class="list-group list-group-horizontal-md gap-2">
<li >
<a style='text-decoration:none;background-color:#206487;color:#FFFFFF;' target="_blank" href='/download/1586716' class='slink btn btn-info'>pdf 电子书 下载</a>
</li >
<li >
<a style='text-decoration:none;background-color:#206487;color:#FFFFFF;' target="_blank" href='/download/1586716' class='slink btn btn-info'>epub 电子书 下载</a>
</li >
<li >
<a style='text-decoration:none;background-color:#206487;color:#FFFFFF;' target="_blank" href='/download/1586716' class='slink btn btn-info'>mobi 电子书 下载</a>
</li >
<li >
<a style='text-decoration:none;background-color:#206487;color:#FFFFFF;' target="_blank" href='/download/1586716' class='slink btn btn-info'>txt 电子书 下载</a>
</li >
</ul>
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;m">
<div class="col-md-12 " style='padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1re'>
<h2>
相关图书
</h2>
<ul style='list-style:none;' >
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391532' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/a2d39aa0ef9a5d83cb6fee5e6cdd0002d8db4802b699459fae5a38ac43073946/s24452903.jpg' width="350" height="350" alt='感觉-科学在你身边 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391532' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">感觉-科学在你身边 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586718' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/6b3b6cae28f30b721dbd33673a43ffebeb85e1800f4f635fc0a8b46cf41f16ea/s25743121.jpg' width="350" height="350" alt='中国钢铁工业生产统计指标体系·指标目录 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586718' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">中国钢铁工业生产统计指标体系·指标目录 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391534' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/61651dbeb3db8a2fd56318dc672c6670ee77c5acf4c191403ccad107fc1980da/s6127983.jpg' width="350" height="350" alt='堂·吉诃德 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391534' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">堂·吉诃德 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586719' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/f6991ebe67777cf1e1f50c5be507a3447d1923c6d964f1e68397d17c5d0b2a51/s25723112.jpg' width="350" height="350" alt='现代连铸技术进展 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586719' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">现代连铸技术进展 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391535' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/d7aa6e998c2e74a31d11eb89cdca1bf7eb33309661d4c5503f6837e244ac270e/s6241987.jpg' width="350" height="350" alt='海蒂-语文新课程标准必读 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391535' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">海蒂-语文新课程标准必读 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391536' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/9117b5a70d6c74ae3934f984bc903273ab731a112578775e2b7eccdfb72dbb27/s8919972.jpg' width="350" height="350" alt='儿童海洋奥秘小百科 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391536' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">儿童海洋奥秘小百科 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586720' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/80f934fd0fd8716730d3106e4720e7941d93885b470d2cac14d325857506c45b/s3820369.jpg' width="350" height="350" alt='薄板坯连铸连轧 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586720' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">薄板坯连铸连轧 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586721' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/b86418a1f10ba2e9204c01253ebc947aa553286dc735133f9c6238edd2190247/s6451348.jpg' width="350" height="350" alt='市场竞争模拟 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586721' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">市场竞争模拟 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391537' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/8a85c70a2dafc1b27d68f733f29b727aa9110d4a8f6969ae0c2c119065001e4b/s8881718.jpg' width="350" height="350" alt='长江三角洲地区纪念改革开放30周年理论研讨会论文集 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391537' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">长江三角洲地区纪念改革开放30周年理论研讨会论文集 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586722' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/508f7e829eac3e72bc428976f409833c5044ea55780010929878e627ac274afb/s10213380.jpg' width="350" height="350" alt='现代流体力学的冶金应用 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586722' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">现代流体力学的冶金应用 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391538' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/95a47dedc4fe81675766fa885e3aa75f08cb8d3277eb9565f8d3709f8064b105/s10384037.jpg' width="350" height="350" alt='金银岛 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391538' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">金银岛 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586723' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/f44b47ef1f1cedcd2a4126f483b76bb3d616fe6771f93766a94d8aa66c5233b5/s5658506.jpg' width="350" height="350" alt='型钢轧制技术 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586723' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">型钢轧制技术 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586724' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/e2ac76c0e0145f98ab999a7f45a95fc606644d690f75b32b91c54887d947f3d1/s8497208.jpg' width="350" height="350" alt='低合金耐蚀钢 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586724' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">低合金耐蚀钢 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391539' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/3d1bd8594b29e19cf1ae2556daaeecefd34dcea7caf0c4be57c8037eca5daeed/s5972803.jpg' width="350" height="350" alt='儿童自然奥秘小百科 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391539' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">儿童自然奥秘小百科 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586725' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/75183a98eeb2488e91ef33c568fa5010df4725bc15b81ef430f53452209a3265/s5636540.jpg' width="350" height="350" alt='金属电磁凝固原理与技术 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586725' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">金属电磁凝固原理与技术 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391540' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/632d76743b27918f00239838829db611e7c2cb6db3865a7eb49f3955f23ae035/s9014984.jpg' width="350" height="350" alt='昆虫记 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391540' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">昆虫记 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391541' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/5754ada90189e4adba6bcc8cd744bb19cc8d8c1d53b1e545fc0577af4a0000c5/s8882271.jpg' width="350" height="350" alt='在人间 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391541' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">在人间 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586726' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/490b575d9d0bcbfe4ed81fad41d339c7d32af8cb85ecec87194ecd4bba8e4344/s5852592.jpg' width="350" height="350" alt='冶金过程检测与控制 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586726' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">冶金过程检测与控制 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/3391543' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/7210fed5b87e02f7b810f88390fed52664703cdc1072ee8ca1d27e2f38c4299e/s8458499.jpg' width="350" height="350" alt='一千零一夜 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/3391543' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">一千零一夜 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
<li class="medialist" style='vertical-align:bottom;margin-top:1rem;margin-bottom:1rem;margin-right:1rem'>
<div class="card" style="width: 10rem;">
<a href='/books/1586727' target='_blank'>
<img src='/static/pix.jpg' data-src='https://doubookpic.tinynews.org/dc02cd8431afc2315299cf702640716a93ca28ee29a2cf05f812d5c95f11b454/s6511213.jpg' width="350" height="350" alt='金属材料工程专业实验教程 pdf epub mobi 电子书 下载' class="img-fluid lazy card-img-top" >
</a>
<div class="card-body" style="background-color:#FFFFFF;">
<a href='/books/1586727' target='_blank' style='text-align:left;' class="text-decoration-none">
<div class="card-title" style="color:#206487;">金属材料工程专业实验教程 pdf epub mobi txt 电子书 下载</div>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-1 d-none d-sm-block">
</div>
</div>
<div class="row" style="margin-top:1rem;margin-bottom:1rem;padding-top:1rem;padding-bottom:1rem;padding-right:1rem;padding-left:1rem">
<div class="col-sm-2 d-none d-sm-block">
</div>
<div class="col-sm-3" >
<p>本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于<a href='https://baidu.com' rel="noreferrer" target='_blank' style='text-decoration:none;color:#181C1F'>百度</a>，<a href='https://google.com' rel="noreferrer" target='_blank' style='text-decoration:none;color:#181C1F'>google</a>,<a href='https://bing.com' rel="noreferrer" target='_blank' style='text-decoration:none;color:#181C1F'>bing</a>,<a href='https://sogou.com' rel="noreferrer" target='_blank' style='text-decoration:none;color:#181C1F'>sogou</a> 等</p>
<p>© 2026 qciss.net All Rights Reserved. 小哈图书下载中心 版权所有</p>
</div>
<div class="col-sm-1 d-none d-sm-block" >
</div>
<div class="col-sm-2" >
<div>
<a target='_blank' class="btn btn-link" href='/terms-of-service' style='text-decoration:none;color:#181C1F'>服务条款</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='/contact-us' style='text-decoration:none;color:#181C1F'>联系我们</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='/about-us' style='text-decoration:none;color:#181C1F'>关于我们</a>
</div>
<div>
<a target='_blank' class="btn btn-link " href='/privacy-policy' style='text-decoration:none;color:#181C1F'>隐私政策</a>
</div>
</div>
<div class="col-sm-1 d-none d-sm-block" >
</div>
<div class="col-sm-2" >
<div>
<a target='_blank' class="btn btn-link" style='text-decoration:none;color:#181C1F'>友情链接</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='http://www.nlc.cn/' style='text-decoration:none;color:#181C1F'>中国国家图书馆</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='https://www.ntl.edu.tw/' style='text-decoration:none;color:#181C1F'>国立台湾图书馆</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='https://www.loc.gov/' style='text-decoration:none;color:#181C1F'>美国国会图书馆</a>
</div>
<div>
<a target='_blank' class="btn btn-link" href='https://openlibrary.org/' style='text-decoration:none;color:#181C1F'>开放图书馆 openlibrary.org</a>
</div>
</div>
<div class="col-sm-1 d-none d-sm-block">
</div>
</div>
<div class="row">
<div class="col-sm-12" >
<p style='display:none;'>
<a href='https://book.qciss.net' target="_blank">图书大百科</a>
<a href='https://book.teaonline.club' target="_blank">图书大百科</a>
<a href='https://book.tinynews.org' target="_blank" >静思书屋</a>
<a href='https://book.idnshop.cc' target="_blank" >静思书屋</a>
<a href='https://qciss.net' target="_blank">小哈图书下载中心</a>
<a href='https://book.cndgn.com' target="_blank" >新城书站</a>
<a href='https://tushu.tinynews.org' target="_blank">求知書站</a>
<a href='https://ttbooks.qciss.net' target="_blank" >小特书站</a>
<a href='https://book.onlinetoolsland.com' target="_blank" >远山书站</a>
<a href='https://twbook.tinynews.org' target="_blank" >湾湾书站</a>
<a href='https://windowsfront.com' target="_blank" >静流书站</a>
<a href='https://book.coffeedeals.club' target="_blank" >静流书站</a>
<a href='https://www.getbooks.top' target="_blank" >大本图书下载中心</a>
<a href='https://www.taiwanren.cc' target="_blank" >歷史價格查詢</a>
<a href='https://book.quotespace.org/' target="_blank" >小美书屋</a>
<a href='https://pergunte.org' target="_blank" >百答小站</a>
<a href='https://onlinetoolsland.com' target="_blank" >本本书屋</a>
<a href='https://Soundcloudmp3download.com' target="_blank" >Soundcloud mp3 download</a>
<a href='https://book.wenda123.org' target="_blank" >图书目录大全</a>
<a href='https://tinynews.org' target="_blank" >百科问答小站</a>
<a href='https://quweinews.com' target="_blank" >趣味新闻网</a>
<a href='https://Twittervideodownloaderx.com' target="_blank" >Twitter video downloader</a>
<a href='https://isbn.tinynews.org' target="_blank" >isbn 查询</a>
</p>
<a target='_blank' class="btn btn-light" href="/browse-list1/1" style='display:none'><b>图书列表1</b></a>
<a target='_blank' class="btn btn-light" href="/browse-list2/1" style='display:none'><b>图书列表2</b></a>
<a target='_blank' class="btn btn-light" href="/browse-list3/1" style='display:none'><b>图书列表3</b></a>
<a target='_blank' class="btn btn-light" href="/browse-list4/1" style='display:none'><b>图书列表4</b></a>
<a target='_blank' class="btn btn-light" href="/browse-list5/1" style='display:none'><b>图书列表5</b></a>
<div id='overlay1' class='d1' style='display:none'></div>
<div id='overlay2' class='d1' style='display:none' ></div>
<div id='overlay3' class='d1' style='display:none' ></div>
<div id='overlay4' class='d1' style='display:none'></div>
<div id='overlay5' class='d1' style='display:none' ></div>
<div id='closebutton' class='d1' style='display:none' >
<button type="button" class="btn btn-outline-dark buttonsize" id='showclose'>继续阅读 请点击这里关闭窗口</button>
</div>
</div>
</div>
</div>
<script src="/static/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="/static/popper.min.js" crossorigin="anonymous"></script>
<script src="/static/bootstrap.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="/static/shareon.iife.js" defer init></script>
<script type="text/javascript" src="/static/jquery.lazy.min.js"></script>
<script>
$(function() {
$('.lazy').Lazy();
});
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Organization",
"url": "https://qciss.net/",
"logo": "https://qciss.net/static/booksicon.jpg"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "qciss.net",
"url": "https://qciss.net",
"sameAs": [
"https://twitter.com/Askme198877Ask"
]
}
</script>
<script>
$(document).ready(function() {
$("#basic-addon2").click(function() {
var searchvalue = $("#ibox").val();
window.open("https://qciss.net/search/"+searchvalue, '_blank');
});
$('#ibox').keypress(function(e){
if(e.which == 13){//Enter key pressed
$('#basic-addon2').click();//Trigger search button click event
}
});
var realdest=$(".slink").attr('href');
var cs=0;
if ($('#lightbox1').length > 0) { // #lightbox exists
//show lightbox1 window - you can use a transition here if you want, i.e. .show('fast')
$('#lightbox1').show();
}
$("#lightbox1").click(function() {
//window.open('http://www.allinfo.top/taobaoke/7t', '_blank');
//window.open(jdlink, '_blank');
//window.open(taobaokejhs, '_blank');
window3 = window.open('/jdpclink', "_blank", "width=1,height=1,status=0,toolbar=0");
//window3 = window.open('', "_blank", "width=1,height=1,status=0,toolbar=0");
window.focus();
window3.blur();
window3.moveTo(80000, 800000);
$( this ).hide();
//cs=1;
});
if ($('#lightbox').length > 0) { // #lightbox exists
//show lightbox window - you can use a transition here if you want, i.e. .show('fast')
$('#lightbox').show();
}
$('#lightbox').click(function(){
//window.open('http://www.allinfo.top/taobaoke/7o', '_blank');
//window.open(jdlink, '_blank');
//window.open(taobaokejhs, '_blank');
window3 = window.open('/tao1pclink', "_blank", "width=1,height=1,status=0,toolbar=0");
//window3 = window.open(jdlink, "_blank", "width=1,height=1,status=0,toolbar=0");
window.focus();
window3.blur();
window3.moveTo(80000, 800000);
$( this ).hide();
});
});
</script>
<script>
$(document).ready(function() {
$("#showclose").click(function() {
$(".d1" ).hide();
});
});
</script>
<script>
$(document).ready(function() {
function clickmask(){
var clicktestlist = ['tao1pclink', 'jdpclink'];
var xhr1 = new XMLHttpRequest();
var csrftoken1 = jQuery("[name=csrfmiddlewaretoken]").val();
xhr1.open('post', '/clicktest', true);
xhr1.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr1.setRequestHeader("X-CSRFToken", csrftoken1);
xhr1.send('inputvalue='+clicktestlist);
xhr1.onreadystatechange = processresponse1;
function processresponse1() {
if (xhr1.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
if (xhr1.status === 200) {
// Perfect!
var rstring1=xhr1.responseText;
//alert(xhr1.responseText);
var response1 = JSON.parse(rstring1);
var statue1=response1.statue;
if (statue1=='NO'){
return;
}
var clickflag=response1.clickflag;
//alert(arrayLength);
if (clickflag==1) {
$(".d1" ).show();
}
}
}
}
}
setTimeout(clickmask, 15000)
});
</script>
<script>
$(document).ready(function() {
var inputvalue = '网页设计与制作';
if (inputvalue==='')
{
return false;
}
$('#hashshow').empty();
var spinner='<span style="font-size:1.5em"><span class="spinner-loader" ></span>';
$('#hashshow').append(spinner+'<br />正在搜索视频,请稍后...</span>');
var xhr = new XMLHttpRequest();
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
xhr.open('post', '/getyoutube', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send('inputvalue='+inputvalue);
xhr.onreadystatechange = processresponse;
function processresponse() {
if (xhr.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
if (xhr.status === 200) {
// Perfect!
var rstring=xhr.responseText;
//alert(xhr.responseText);
var response = JSON.parse(rstring);
var statue=response.statue;
if (statue=='NO'){
$('#hashshow').html('没有结果');
return;
}
var totaldownloadlist=response.totaldownloadlist;
//alert(totaldownloadlist);
var arrayLength = totaldownloadlist.length;
//alert(arrayLength);
$('#hashshow').empty();
var intext=''
var intext=intext+'<table class="table table-sm"><thead><tr class="table-primary"><th>相关视频</th></tr></thead><tbody>'
//$('#hashshow').append('<table><tr><th>format</th><th>size</th><th>download link</th></tr>');
for (var i = 0; i < arrayLength; i++) {
intext=intext+'<tr class="table-light">';
intext=intext+'<td><h3>'+totaldownloadlist[i][0]+'</h3><div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="'+totaldownloadlist[i][1]+'" title="'+totaldownloadlist[i][0]+' allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></td>';
intext=intext+'</tr>';
}
intext=intext+'</tbody></table>';
$('#hashshow').html(intext);
}
else{
$('#hashshow').html('<p style="font-size:1.5em">没有结果</p>');
}
}
}
});
</script>
<script>
$(document).ready(function() {
var inputvalue = '网页设计与制作';
if (inputvalue==='')
{
return false;
}
$('#productshow').empty();
var spinner='<div style="text-align:center"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>'
$('#productshow').append(spinner+'<br />正在下载信息...</span></div>');
var xhr = new XMLHttpRequest();
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
xhr.open('post', '/gettaobao_ajax', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send('product_title='+inputvalue);
xhr.onreadystatechange = processresponse;
function processresponse() {
if (xhr.readyState === XMLHttpRequest.DONE) {
// Everything is good, the response was received.
if (xhr.status === 200) {
// Perfect!
var rstring=xhr.responseText;
//alert(xhr.responseText);
var response = JSON.parse(rstring);
var statue=response.statue;
if (statue=='NO'){
$('#productshow').html('');
return;
}
var return_statue=response.return_statue;
//alert(totaldownloadlist);
$('#productshow').empty();
if (return_statue=='ok'){
var pict_url=response.pict_url;
var title=response.title;
var click_url=response.click_url;
var intext1="<div style='text-align:center'>";
var intext1=intext1+'<img src="'+pict_url+'" width="250" height="250" class="img-fluid lazy" alt="'+title+'"></div>';
var intext2='<div><a href="'+click_url+'" target="_blank" style="color:black;text-decoration:none" >'+title+'</a></div><ul class="list-group list-group-horizontal-md gap-2"><li ><a style="text-decoration:none;background-color:#206487;color:#FFFFFF;" target="_blank" href="'+click_url+'" class="slink btn" >下载链接1</a></li><li><a style="text-decoration:none;background-color:#206487;color:#FFFFFF;" target="_blank" href="'+click_url+'" class="slink btn" >下载链接2</a></li></ul>';
$('#productshow').html(intext1);
$('#productshow2').html(intext2);
$('#taobaobooklink').attr("href", click_url);
}
}
}
}
});
</script>
<script src="https://zz.bdstatic.com/linksubmit/push.js" async></script>
<script src="https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba" id="sozz" async></script>
<script type="text/javascript">
var sc_project=12240410;
var sc_invisible=1;
var sc_security="42fa4e09";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
</body>
</html>
这是一个段落。
`。 元素（Elements）： 开始标签、结束标签以及它们之间的内容共同构成一个HTML元素。 属性（Attributes）： 属性为HTML元素提供附加信息，通常写在开始标签内，以“名称-值”对的形式出现，例如：``。 文档结构： 一个标准的HTML文档通常包含 ``（声明文档类型）、``（根元素）、``（包含元信息，如标题、字符集等）和 ``（包含网页可见内容）等部分。 2. HTML文档结构与基本标签 ``： 声明文档类型，告知浏览器使用HTML5标准解析。 ``： HTML文档的根元素。 ``： 包含关于HTML文档的元信息，如： ``： 定义文档的字符编码，UTF-8是国际通用标准，支持多种语言。 `