bs4解析html（bs4解析器）



4. 文本标签通常都是行内元素。

2.文本修饰标签

• 加粗：
• 斜体：
• 上标文本：

• 下标文本：

• 删除文本：
• 插入文本：

• 包裹容器，无语义（div的缩小版）：

5.不常用的文本标签

备注：

1. 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。

2. blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。

3. 有些语义感不强的标签，我们很少使用，例如：

small 、 b 、 u 、 q 、 blockquote

4. HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：

h1~h6 、 p 、 div 、 em 、 strong 、 span

1. 基本使用

总结：

1. 像素（ px ）是一种单位。

2. 尽量不同时修改图片的宽和高，可能会造成比例失调。

3. 暂且认为 img 是行内元素。

4. alt 属性的作用：

搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。

当图片无法展示时候，有些浏览器会呈现 alt 属性的值。

盲人阅读器会朗读 alt 属性的值。

2. 路径的分类

1.相对路径

以当前位置作为参考点，去建立路径。

2.绝对路径

以根位置作为参考点，去建立路径。

1. 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）

2. 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。

注意点：

使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。

使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入

失败。

3.常见的图片格式

1.jpg 格式

概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节

2.png 格式

概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。

主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。

使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配

图等。

3.bmp 格式

概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。

主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动

态图。

使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使

用）

4.gif 格式

概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。

主要特点：支持的颜色较少、支持简单透明背景、支持动态图。

使用场景：网页中的动态图片。

5.webp 格式

概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。

主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。

使用场景：网页中的各种图片。

6.base64 格式

1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。

2. 原理：把图片进行 base64 编码，形成一串文本。

3. 如何生成：靠一些工具或网站。

4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。

5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

主要作用：从当前页面进行跳转

可以实现：

①跳转到指定页面

②跳转到指定文件（也可触发下载）

③跳转到锚点位置

④唤起指定应用

1.跳转到网页

注意点：

1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！

2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

当前窗口跳转至京东去秒杀：

新窗口跳转至百度：

当前窗口跳转至本地网页：

用图片使当前窗口跳转至本地网页：

2.跳转到文件

注意1：若浏览器无法打开文件，则会引导用户下载。

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

3.跳转到锚点

使用方式：

• 第一步：设置锚点

注意点：

1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。

2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

• 第二步：跳转锚点

注意点：

“#”代表跳转至锚点，不加后系统则认为是超链接，会导致乱码。

示例：

4.唤起指定应用

通过 a 标签，可以唤起设备应用程序。

注意： li 标签最好写在 ul 或 ol 中，不要单独使用。

1. 有序列表（ol）

概念：有顺序或侧重顺序的列表。

2. 无序列表（ul）

概念：无顺序或不侧重顺序的列表。

3. 列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。

4. 自定义列表

1. 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

2. 一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称（标题），一个 dd 就是术语描述（可以有多个）。

1. 基本结构

注意点：

1. <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格

边框的宽度，

只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。

2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

3. 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。

4. 给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

3. 跨行跨列

1. colspan ：指定要跨的列数。

表示跨了5列

2. rowspan ：指定要跨的行数。

表示垮了4列

注意点：

1. 不要用 <br> 来增加文本之间的行间隔，应使用 <p> 元素，或后面即将学到的 CSS

margin 属性。

2. <hr> 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

概念：一个包含交互的区域，用于收集用户提供的数据。

1. 基本结构

action和name中的内容应由对应的后端人员确定，如上百度地址后加“/s”，提交数据名为“wd”。京东地址后加“/search”，提交数据名为“keyword”

2. 常用表单控件

① 文本输入框

常用属性如下：

name 属性：数据的名称。

value 属性：输入框的默认输入值。

maxlength 属性：输入框最大可输入长度。

② 密码输入框

常用属性如下：

name 属性：数据的名称。

value 属性：输入框的默认输入值（一般不用，无意义）。

maxlength 属性：输入框最大可输入长度。

③ 单选框

常用属性如下：

name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。

value 属性：提交的数据值。

checked 属性：让该单选按钮默认选中。

比如默认选男：

④ 复选框

常用属性如下：：

name 属性：数据的名称。

value 属性：提交的数据值。

checked 属性：让该复选框默认选中。

⑤ 隐藏域

用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。

value 属性：指定的是真正提交的数据。

⑥ 提交按钮

注意：

1. button 标签 type 属性的默认值是 submit 。

2. button 不要指定 name 属性

3. input 标签编写的按钮，使用 value 属性指定按钮文字

⑦ 重置按钮

注意点：

1. button 不要指定 name 属性

2. input 标签编写的按钮，使用 value 属性指定按钮文字。

⑧ 普通按钮

注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

⑨文本域

常用属性如下：

1. rows 属性：指定默认显示的行数，会影响文本域的高度。

2. cols 属性：指定默认显示的列数，会影响文本域的宽度。

3. 不能编写 type 属性，其他属性，与普通文本输入框一致。

⑩ 下拉框

常用属性及注意事项：

1. name 属性：指定数据的名称。

2. option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文

字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

3. option 标签设置了 selected 属性，表示默认选中。

3. 禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件。

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

4.label 标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

1. 让 label 标签的 for 属性的值等于表单控件的 id 。

2. 把表单控件套在 label 标签的里面。

for属性：

label内：

单选框：

复选框：

5. fieldset 与 legend 的使用

fieldset 可以为表单控件分组、 legend 标签是分组的标题。

6. 表单总结

iframe 标签的实际应用：

1. 在网页中嵌入广告。

2. 与超链接或表单的 target 配合，展示不同的内容。

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实 体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一 个分号 ; 。

常见字符实体总结：

完整实体列表，参考：

常用的全局属性：

注：“id”、“dir”、“title”不可以在<head>、<html>、<meta>、<<script>、<style>、<title>中使用

完整的全局属性，参考：

网页内的基本信息

1. 配置字符编码

2. 针对 IE 浏览器的兼容性配置。

3. 针对移动端的配置

4. 配置网页关键字

5. 配置网页描述信息

6. 针对搜索引擎爬虫配置

7. 配置网页作者

8. 配置网页生成工具

9. 配置定义网页版权信息

10. 配置网页自动刷新

若不写链接，则原网页自刷新

11.其他

完整的网页元信息，参考：

Ctrl+/ ——注释/取消注释光标所在行

Ctrl+Alt+↑ ——向上复制一行

Ctrl+Alt+↓ ——向下复制一行

Ctrl+Shift++ ——页面整体放大

Ctrl+Shift+- ——页面整体缩小

Ctrl+Shift+Delete ——跳转清楚浏览数据

Shift+Tab ——与Tab作用相反

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/74552.html