我要投稿

css书-自学CSS和HTML该看哪些书，学习HTML该看哪些书

bendan520 css

2023-08-21 0 8,178 百度已收录

进不了网站？换个网络试试！

学习html可以看的书：《精通HTML》、《简单介绍html》、《html+css+js网页制作从入门到熟练》、《HTML5+CSS3从入门到熟练》、《疯狂HTML5》 /CSS3/JavaScript课件》、《HTML5与CSS3权威手册》等

本教程的运行环境：windows7系统，HTML5版本，DellG3笔记本。

“精通 HTML”

本书深入阐述了(X)HTML及相关技术包括CSS、微格式、语义网等，并重点介绍了如何在适当的时候使用适当的标签。全书仍然实现了现代Web设计概念，以便读者可以学习如何利用每种类型标记提供的多样性来创建语义丰富且结构良好的网站。

本书适合具有初步HTML和CSS知识的Web设计开发人员阅读。

“简单深入的 HTML”

这本书是关于现代网络标准的优秀教程。它彻底打破了过时的内容，始终贯彻三层分离的思想。本书通过示例描述了如何使用html和css来设计符合现代Web标准的网页，并解释了如何使用javascript添加动态行为。本书的主体部分让读者接触html和xhtml的各种主题，并逐渐熟悉各种元素。最后一章将书中介绍的各种技术付诸实践，带领读者一步步创建一个实用的网站。

《Html+css+js网页制作从入门到熟练》

《HTMLCSSJavaScript网页制作从入门到精通》共分为18章和4个附录，重点讲述了使用HTML制作网页的各个方面，同时讲解了当前流行的Web标准和CSS网页布局示例，以及基于JavaScript语言的网页特效制作。为了方便读者，附表中收集了作者精心整理的60多个网页制作方法实例。

HTML5+CSS3从入门到精通

简介：本书以基础知识+中小实例+综合案例的形式讲述了用HTML5+CSS3设计和构建网站所需的知识。与专业手册、高级程序设计、开发手册等同类书籍相比，本书是一本适合快速入门的自学教程。

疯狂的HTML5/CSS3/JavaScript课件

简介：这是一本全面介绍HTML5、CSS3和JavaScript后端开发技术的书。系统介绍了常用的HTML5元素和属性、HTML5表单元素和属性、HTML5绘图支持、HTML5多媒体支持、CSS3特性和使用、前沿变体和动漫特性等等。此外，《疯狂HTML5/CSS3/JavaScript课件》还系统介绍了JavaScript编程知识，包括JavaScript基本句型、DOM编程以及HTML5新增的本地存储、离线应用、JavaScript多线程、客户端通信等。支持、WebSocket 编程等等。

HTML5和CSS3权威手册（第一卷）（第三版）

简介：本书分为两册。第二册从对HTML5构成的现有Web应用的改造入手，全面系统地讲解了HTML5相关技术；第一册全面系统地讲解了CSS3相关技术，从CSS3功能和模块结构开始css书，依次讲解了各个选项文本和字体相关样式、框相关样式、背景和边框相关样式、布局相关样式、变形处理、动画、颜色相关的款式等

HTML5 编程（第二版）

简介：《HTML5编程（第二版）》首先介绍了HTML5的历史背景、新的语义标签以及与之前HTML版本相比的根本变化css书，同时阐明了HTML5背后的设计原理。本书在上一版的基础上，增加了SVG和拖放API相关的新内容，并更新了部分内容。从第2章开始，围绕建立理想的富Web应用，一一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用，并辅以直观清晰的客户端和服务端—— side 示例代码可以让开发者快速了解和掌握新一代Web标准所包含的核心技术。

本书面向经验丰富的Web应用开发人员，对HTML5和未来Web应用技术开发感兴趣的读者也可以从中学习。

写在上面

在最近的工作中，我接触到了网页复制的相关内容。这篇文章总结一下。

一行代码实现网页复制

要实现网页复制，一行代码就够了。

window.print();

浏览器会手动拉出复制预览页面。您可以将网页另存为pdf或直接选择打印机进行复制。

如何复制页面中的某些元素

互联网上有很多图书馆可以做到这一点。其总体逻辑是：

1. 获取对应DOM元素的html字符串。

2. 创建一个新的不可见 iframe。

3、在iframe中，使用document.write传入html字符串。

4. 在 iframe 中，调用 window.print 拉出复制预览。

打印时，如果想要实现所见即所得，还需要传入相应的样式。大多数第三方库都希望用户能够传入特定的css文件，第三方库会将css文件导出到iframe中，从而使样式生效。当然，还有一个简单的方法，就是内联样式，直接写在html元素的style属性中。在代码开发过程中css 分页，我们可以使用@page规则来设置页面特定的复制样式。喜欢：

// 设置打印时的大小为A4纸大小。
@page {
  size: A4; // 注意，这里并不能改变打印预览中的选项。
  margin-left: 1in; // 页面左边距1英寸。
}

// 设置首页的上边距为10厘米
@page :first {
margin-top: 10cm 
}

如何达到完美的复印效果

前面我们介绍了关于复印的基本内容。事实上，W3C已经制定了与复制相关的标准。

但由于各个浏览器的支持不同，所以实现复杂的复制比较困难。比如我们要复制一个页面，内容是一篇文章，里面有图片和特殊的样式，我们用HTML来实现。

第一个需要了解的知识点是：复制网页时，默认会手动分页。当然，你也可以设置css在指定的地方进行分页。

.selector {
  page-break-after  : auto | always | avoid | left | right;
  page-break-before : auto | always | avoid | left | right;
  page-break-inside : auto | avoid;
}

例如，设置 page-break-before:always 强制在当前元素之前分页：

当页面中的元素被分页意外截断时，可以设置 page-break-inside: void 来要求元素内部严禁截断。如果您添加另一个要求怎么办：向每个页面添加特定的脚注和页脚。

根据以上内容，为了达到完美的复制效果，我首先考虑以下方案：

1、先使用pdf生成工具生成网页相关内容的pdf，然后直接复制pdf。

2、我们可以估算出页面中元素的高度，然后估算出它们在复制的页面中的高度，在每页适当的地方自动插入脚注和页脚，并在页脚处设置脚注和页脚的分页属性同时，手动分页。

第一种方案对于内容较少的网页来说比较方便。对于内容较长的网页来说，成本不小。因为内容较长的网页在复制时需要考虑分页，需要考虑如何添加脚注和页码。第二种方案，整个过程更加可控，但对高度估算的精度要求比较高。

网页复制是一个很好的解决方案

由于业务特点，需要越来越多的通用方案，因此没有采用生成pdf的方案。相反，使用标准复制方案。

W3C 实际上制定了标准，但浏览器实现却没有跟上。因此，我们需要一个polyfill。正好，有这么一个polyfill：paged.js

W3C标准将复制的页面分为几个部分css 分页，如上图所示。页面的内容显示在页面区域中，周围的部分可以设置不同的内容。

让复制的页面手动排版，在不希望被页面截断的地方设置page-break-inside:void，以保证页面内容的完整性。设置顶部和底部区域以显示特定脚注。

这是一个完整的反例：

css书-自学CSS和HTML该看哪些书，学习HTML该看哪些书



<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <style>
    p {
      font-size: 48px;
    }
    @page {
        size: A4;

        margin-left: 0.3in;
        margin-right: 0.3in;

        /* 设置中间的页脚为页码 */
        @bottom-center {
            content: counter(page) ' / ' counter(pages);
        }

        /* 左上方的页眉设置为特定汉字内容 */
        @top-left {
            content: 'hello world';
            text-align: left;
            font-size: 12px;
        }
        /* 右上方的页眉，指定为 header-right 元素，这里的 header-right, 要和下面 running 中的取值    对应上 */
        @top-right {
            content: element(header-right);
            text-align: right;
        }
    }

    /* position running，设置为 header-right */
    .header-right {
        position: running(header-right);
    }

  </style>
  <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

</head>

  <body>
    /* 使用自定义元素的方式，设定右上角页眉。*/
    <div class='header-right'><img style="width: 60px" src="https://coypan.info/public/gzh_qrcode.jpg" /></div>
    <p>
      Hello World。Hello World。Hello World。Hello World。
      Hello World。Hello World。Hello World。Hello World。
      Hello World。Hello World。Hello World。Hello World。
      Hello World。Hello World。Hello World。Hello World。
      Hello World。Hello World。Hello World。Hello World。
    </p>
    /* 不让该元素中的内容被分页截断 */
    <p style="page-break-inside: avoid">
      这里的内容不能从中间截断。这里的内容不能从中间截断。
      这里的内容不能从中间截断。这里的内容不能从中间截断。
      这里的内容不能从中间截断。这里的内容不能从中间截断。
      这里的内容不能从中间截断。这里的内容不能从中间截断。
      这里的内容不能从中间截断。这里的内容不能从中间截断。
      这里的内容不能从中间截断。这里的内容不能从中间截断。
    </p>
  </body>
</html>

最终复制预览效果如下：

这里需要注意的是：不要在iframe中使用paged.js，我试过了，会出现莫名其妙的问题（也可能是错误的，欢迎有经验的大佬指教）。也就是说，当我们想要部分复制一个网页时，不使用第三方库，可以考虑单独拾取对应的内容，制作一个新页面。在新的页面中，我们也可以愉快地使用paged.js来实现更加完美的复制效果。

写在前面

由于网上关于复制网页的内容并不多，所以要完成整个过程还是有很多陷阱的。其实还有其他方案可以实现网页复制，比如前面提到的PDF方案，最后贴一个GPT-4的答案：

收藏 (0) 打赏

感谢您的支持，我会继续努力的!