html基础标签大全（网页开发基础）

lt;hr>：画一条直线

1.<h1></h1>~<h6></h6>

2.<meta>标签

（1）描述文档类型和字符编码

（2）提供搜索关键字和内容描述信息，方便搜索引擎的搜索

例：<head>

平台，提供各类服饰、美容、家居、数码、……" />

</head>

3.HTML标签分类（方便后续的布局设计）：

块级标签：显示为“块”状，前后隔一行

行级标签：按行逐一显示

分类好处：方便后续的布局设计

4.有序列表标签：ol li

5.无序列表标签：ul li

6.定义描述标签：dt是块状标签，所以常用于图文混编的布局场合

<dl>

……

</dl>

7.表单form,一般和table一起使用：

<form>

<table>

<tr>

</tr>

.....

</table>

</form>

8.请说出实际开发常用的4种块状结构是什么？

（1）.div-ui(ol)-li:常用于分类导航栏或者菜单等

（2）.div-dl-dt-dd:常用于图文混编场合

（3）.table-tr-td:常用于图文布局或显示数据

（4）.form-table-tr-td：常用于布局表单，登录，注册……

9.图像标签：

alt:当图片刷新不出来显示这个文字

title:鼠标放在图片上显示的文字

10.链接标签

11.特殊符号：

空格：

大于：>1、因为<、>等符号在HTML中已使用，所以必须用其他符号来代替,都以分号结束（；）

小于：<

引号：&quot

版本号：©

12.各种功能表单元素

会持续更新哦！免费学习资源。

、什么是前端

前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

前端设计一般可以理解为网站的视觉设计，比如 UI 设计；前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。

HTMLHTML 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构； CSSCSS 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等； JavaScriptJavaScript 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。

2、网页组成

一个网页的组成部分主要包括下面几个部分：文字、图片、输入框、视频、音频、超链接文字、图片、输入框、视频、音频、超链接等。

3、Web 标准

说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全称为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。

与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。

那么 Web 标准规范了下面三个部分：

HTML 标准（结构标准），相当人的骨架结构。CSS 样式（表现）标准，相当于给人化妆变得更漂亮。JavaScript 行为标准，相当于人在唱歌，页面更灵动。

4、浏览器内核

浏览器内核是一个浏览器的核心部分，也就是「渲染引擎渲染引擎」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

这里涉及到一个「兼容性问题兼容性问题」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

内核和对应的浏览器：内核和对应的浏览器：

trident : IE windows gecko : firefox 跨平台 webkit : safari/chrome presto : opera 渲染速度最快 blink : google/opera 共同开发

5、认识 HTML

HTML 全称为：超文本标记语言超文本标记语言（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。

6、 HTML 结构标准

HTML 基本结构如下：

<!doctype html> 声明文档类型
<html> 根标签
  <head> 头标签
    <title></title> 标题标签
  </head>
  <body> 主体标签
  </body>
</html>

<!DOCTYPE html> 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。<html></html> 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。<head></head> 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。<body></body> 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。

7、html 标签分类

单标签 <! Doctype html> 双标签 <html> </html> ，<head></head>， <title></title>

8、 html 标签关系分类

包含（嵌套关系） <head><title></title></head> 父子关系并列关系 <head></head><body></body> 兄弟姐妹

9、开发工具

前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。

那么我推荐大家使用的是「Sublime Text 3」代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。

提到 Web 开发工具不得不提到 JebBrain 全家桶的「 Webstorm 」软件。目前已经被广大 Web 开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。它令人称道的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。

还有近些年来崛起的【visual studio code】，已经成为前端开发的主流工具。

建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大的便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。

1、什么是前端
2、网页组成
3、Web 标准
4、浏览器内核
5、认识 HTML
6、HTML 结构标准
7、html 标签分类
8、html 标签关系分类
9、开发工具

学习了解更多前端、互联网内容，点赞关注我。私信获取完整前端学习资料。

两天有个客户需要把网页转为pdf，之前也没开发过类似的工具，就在百度搜索了一波，主要有下面三种

在线转pdf
使用浏览器打印功能转pdf
使用本地软件工具转pdf

在线转pdf

在百度（我一般用必应）搜索“在线网页转pdf”就有很多可以做这个事的网站，免费的如

PDF24Tools

各种pdf的操作都有，免费使用，速度一般。

官网地址https://tools.pdf24.org/zh

PDF24 Tools

doctron

开源免费项目，使用golang写的，提供在线转

官网地址http://doctron.lampnick.com/

doctron在线体验demo

还有挺多其他的，可以自己搜索，但是都不符合我的预期。

使用浏览器打印功能转pdf

在浏览器右键，点击打印或者ctrl+p
在弹出的打印对话框中找到目标打印机选择“另存为PDF”
点击“保存”按钮即可下载pdf了

使用本地软件工具转pdf

Doctron，这是我今天要介绍的重头戏。

Doctron是基于Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将html转为pdf、图片(使用chrome(Chromium)浏览器内核，保证转换质量)。支持PDF添加水印。

使用chrome内核保证高质量将HTML转为pdf/图片。
简易部署(提供docker镜像,Dockerfile以及k8s yaml配置文件)。支持丰富的转换参数。转为pdf和图片支持自定义大小。
无状态服务支持。

管他的，先把代码下载下来再说

git clone https://gitcode.net/mirrors/lampnick/doctron.git

仓库

运行

go build
./doctron --config conf/default.yaml

运行截图

转pdf，访问http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>，更换链接中的url为你需要转换的url即可。

转换效果

然后就可以写程序去批量转换需要的网页了，但是我需要转换的网页有两个需求

1、网站需要会员登录，不然只能看得到一部分

2、需要把网站的头和尾去掉的

这就为难我了，不会go语言啊，硬着头皮搞了，肯定有个地方打开这个url的，就去代码慢慢找，慢慢调试，功夫不负有心人，终于找到调用的地方了。

第一步：添加网站用户登录cookie

添加cookie之前

添加cookie之后

第二步：去掉网站头尾

chromedp.Evaluate(`$('.header').css("display" , "none");
		$('.btn-group').css("display" , "none");
		$('.container .container:first').css("display" , "none");
		$('.breadcrumb').css("display" , "none");
		$('.footer').css("display" , "none")`, &ins.buf),

打开网页后执行js代码把头尾隐藏掉

第三步：程序化，批量自动生成pdf

public static void createPDF(String folder , String cl ,  String pdfFile, String urlhref) {
        try {
            String fileName = pdfFile.replace("/", ":");
            String filePath = folder + fileName;
            File srcFile = new File(filePath);
            File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
            File destFile = new File(newFolder, fileName);
            if(destFile.exists()){
                return;
            }
            if(srcFile.exists()){
                //移动到对应目录
                if(!newFolder.exists()){
                    newFolder.mkdirs();
                }
                FileUtils.moveFile(srcFile , destFile);
                return;
            }
            if(!newFolder.exists()){
                newFolder.mkdirs();
            }
            String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
            HttpEntity<String> entity = new HttpEntity<String>(null, null);
            RestTemplate restTemplate = new RestTemplate();
            ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
            if (bytes.getBody().length <= 100) {
                if(urlList.containsKey(urlhref)){
                    Integer failCount = urlList.get(urlhref);
                    if(failCount > 3){
                        System.out.println("下载失败：" + cl + " / " + pdfFile +"  " + urlhref);
                        return;
                    }
                    failCount++;
                    urlList.put(urlhref , failCount);
                }else{
                    urlList.put(urlhref , 1);
                }

                createPDF(folder , cl ,  pdfFile , urlhref);
            }else{
                if (!destFile.exists()) {
                    try {
                        destFile.createNewFile();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                try (FileOutputStream out = new FileOutputStream(destFile);) {
                    out.write(bytes.getBody(), 0, bytes.getBody().length);
                    out.flush();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

最终成果：

文件夹分类存放

pdf文件

在线咨询

上一篇：PS软件怎么切图，PS怎么导出html格式文件
下一篇：CSS-画一个iPhone12

您的项目需求

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

整合营销服务商