我们在python3 爬虫学习:爬取豆瓣读书Top250(二)中已经爬到我们需要的几个数据,但是代码略显杂乱,输出的结果也并没有跟书本一一对应,所以这节课就要把这些问题统统解决掉。...我们使用BeautifulSoup对象的select()方法,将CSS选择器作为参数传入到select()里面,可以把下面的例子改写一下: #查找所有属性为class = 'pl2' 的 div 标签...items = bs.find_all('div' , class_ = 'pl2') for i in items: #查找 class_='pl2' 的 div 标签中的 a 标签 tag...属性的值 link = tag['href'] #字符串格式化,使用\n换行 print('书名:{}\n链接:{}' .format(name , link)) 改写后例子: #查找所有属性为...class = 'pl2' 的 div 标签 items = bs.select('div.pl2 a') for i in items: #获取a标签的文本内容用i.text,但是这里还可以这样写
, 28 1月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 Html—内联标签和块状标签及简单标签整理 在html中有两种标签 像行内短语/图片.../加粗等被称为内联标签,此标签不会为自己的内容占据新的一行,即此标签的内容会承接在上一个标签之后(同一行)。...像段落/标题/节div>等标签被称为块状标签,此标签会为自己的内容占据新的一行(即换行)。可以设置宽高。...如果需要图片能够在新的一行显示,可以用包裹标签来实现 内联标签 行内短语 图片 ( 无序列表 列表每一项 有序列表 表单 表示导航区域 表示主体区域
HTTP涉及到的知识点非常多,我们这里仅整理出几个比较重要的知识点。最主要的是41.3.5小节的HTTP请求消息和41.3.6小节的HTTP响应消息,针对这两个知识点专门在41.4小节做了一个举例。...HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此HTTP协议不适合传输一些敏感信息,比如信用卡号、密码等。...协议的另一个补充是字节服务,允许客户端请求资源的某一部分,服务器仅回应某资源的指定部分。 41.3.9 HTTP版本 HTTP已经演化出了很多版本,它们中的大部分都是向下兼容的。...Cache-Control 这个是响应头域,表示缓冲控制,无论是否可以缓存此对象,都要告诉服务器到客户端的所有缓存机制。这里表示604800秒后缓冲的内容失效。 ...这里是1270字节的数据。 剩下的内容就是HTML格式的消息实体了。 具体大家可以实际操作下,有个感性的认识,另外就是换个其它的网址也操作下,加深理解。
在上面的例子中可以看到代码中的空格,换行符都保留下来。...---- 初识div 认识div在排版中的作用 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个div>标签中,这个div>标签的作用就相当于一个容器。...如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用div>标签作为容器。 ? 给div命名,使逻辑更加清晰 在上一小节中,我们把一些标签放进div>里,划分出一个独立的逻辑部分。...文字,网页链接到http://www.zhaolion.com这个网页。 title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。...在浏览器中显示的结果: ? 使用提交按钮,提交数据 在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
,一个是默认的‘/’,另一个是’/Hi’.在两个路径下的components里面,我们对三个区域都定义了显示内容。...在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。...这节课只能算是一个简单的过渡入门,教会大家原理,如果想做出实用酷炫的过渡效果,你需要有较强的动画制作能力,我们下节课继续学习动画的知识。...第9节:mode的设置和404页面的处理 在学习过渡效果的时候,我们学了mode的设置,但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。...第11节:编程式导航 这是这篇文章的最后一节,前10节课的导航都是用标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?
CodeMirror高级功能 在第一节中,笔者展示了codemirror的简单使用。...下面方法中返回的结果体意思是:下拉列表中展示hello和world两行提示,from和to表示当用户选择了提示内容后,这些提示内容要替换编辑区域的哪个字符串。...自定义代码提示内容后,如果想让弹出的内容与实际插入内容不一样,则需要将返回结果进行调整。...CodeMirror命令API 第二节中我们使用到了cm自带的搜索功能,它虽然默认指定了快捷键,如果你想要自行触发这些功能,cm提供了命令API可以帮助你实现想法。...readOnly参数便可以设置为只读,但实际上如果设置值为true后,用户还能在浏览器中编辑,如果希望页面上不能编辑,则将该值设置为'nocursor'即可。
-- h1 到 h6 大小依次变小,同时自动换行--> ..........超链接标签 A: 链接资源 链接到资源的路径"> 显示在页面上的内容 href: 链接的资源的地址 target:设置打开的方式 ,默认是在当前页打开 可以取四个值 属性值...div>标签 标签div>可将网页页面分割成不同的独立部分,通常用于定义文档中的区域或节。...(一般情况) 由上到下,由外到内。...relative : 不会把对象从文档流中拖出 可以使用top、bottom等属性进行定位 结尾: 如果内容中有什么不足,或者错误的地方,欢迎大家给我留言提出意见
Web API - DOM 第二节(操作元素) 1.常见的鼠标事件 ? 2....获取内容时的区别: innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容时的区别: innerText不会识别html,而innerHTML会识别 案例...// innerText 和 innerHTML的区别 // 1. innerText 不识别html标签 非标准 去除空格和换行 var div = document.querySelector...标准 保留空格和换行的 div.innerHTML = '今天是: 2019'; // 这两个属性是可读写的 可以获取元素里面的内容...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。
在XML文档中有且只能有一个根元素,文档中的元素必须由开始标签和结束标签组成,除了是单标签,即为空元素语法,标签之间不能交叉使用,属性值必须用“”括起来。...br用于插入一个换行符。 div用于定义文档中的分区或者节,是一个块级元素。 span与div类似,该元素不换行。...超链接与锚点 HTML5保留了超链接,a标签元素,用于从一个页面跳转到另一个页面,a标签的重要属性为href,它是指向链接的目标。...在HTML4.01中,a元素可以是超链接,或是锚点,但是在HTML5中,a元素就是超链接,如果没有href属性,那么就只是超链接的占位符。..., warp默认值为soft,在表单中提交时,textarea中文本不换行, 当提交表单时,如果wrap="hard",则提交的文本会包含换行符 css3选择器 兄弟选择器,2.新增的属性选择器
我们在一个网页中右键点击打开网页源代码,你就会发现源代码就是就是使用的html语言写的; 网站就是指在因特网上根据一定的规则,使用HTML等制作的作用于展示特定内容相关的网页集合; 网页是构成网站的基本元素...#网页中的正文部分是在之中;与 是并列关系 HTML基本结构标签 每一个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写的...>我来展示下div的效果div> div>我来展示下div的效果div> 我们发现div的效果就是div里面的内容写完后就会自动换行;与不同的是div...的效果 我来展示下div的效果 span与div不同的是写完标签中的内容之后不会换行,而是稍微留一点的空隙,然后继续开始后面的写作...>标签把图片插入到网页去;(复制下面的代码) <!
div> 在这个示例中, 元素被嵌套在 div> 元素的内部。div> 元素通常用于组合和分组页面上的内容块。...另一个常见的例子是将链接 元素嵌套在段落 元素内: Visit our website for more information... 这里, 元素被嵌套在 元素中,形成一个包含链接的段落。 通过合理和有效地嵌套HTML元素,可以更好地组织内容、优化页面结构,并提升页面的可访问性和用户体验。...常见的块级元素: div>: 用于定义文档中的分区或节。 : 用于定义段落。 to : 用于定义标题。 : 用于创建表单。...在 HTML 中,常见的空元素包括: :换行符,用于在文本中创建换行。 :用于插入图像。 :用于创建输入字段。
文章目录 前言 块级元素 行内元素 行内块级元素 ---- 前言 HTML中的标记 块级元素 h1-h6>>1-6级标题 p>>段落 div>>定义文档中的节 ul>>定义无序列表 ol>>定义有序列表...figcaption>>定义 figure 元素的标题 audio>>定义声音内容 video>>定义视频 nav>>定义导航链接 dl>>定义定义列表 dt>>定义定义列表中的项目 dd>...比如章节、页眉、页脚或文档中的其他部分 article>>定义文章 aside>>定义页面内容之外的内容。【可用作文章的侧栏。】 datails>>定义元素的细节。...行内元素 br>>定义换行 a>>定义超链接 i>>定义文字倾斜 b>>定义文字加粗 em>>定义文字倾斜,语义更加强调 abbr>>定义缩写 bdi>> 定义文本的文本方向,使其脱离其周围文本的方向设置...>>定义命令按钮 style>>定义文档的样式信息 span>>定义文档中的节 base>>定义页面中所有链接的默认地址或默认目标 行内块级元素 img>>定义图像 input>>定义输入控件
--…-->标记,在HTML中,这个标记代表的是注释的意思,就是这个标记里边的东西是为了让别人更容易理解你的代码而写的,这些内容不会被浏览器显示到页面中。 ...本节课比起前2节课可能会有些长,希望朋友们不要心急,慢慢来。 在HTML中,我们可以对网页中的文本设置以下格式: 1. 分段与换行 2. 设置段落对齐方式 3. 设置字体 4. 设置字号 5....位于分段标记和之间的内容,被浏览器认为是一个段落,从而加以区别显示,而标记则强行规定了当前行的中断,我们知道,在WORD里打字的时候,如果这一行写不下了,它会自动换行,其实在网页里也是这个道理...cols属性的值设为“*,*,*”,则将浏览器窗口分为等宽的三个窗格,如果将其值设为“*,2*,3*”,则表示中间的窗格的宽度为左边窗格宽度的2倍,右边窗格的宽度为左边窗格宽度的3倍。...文件链接:这种链接是我们最常用的链接,这个指向的文件如果是一个网页,那么即实现的是从一个网页向另一个网页跳转,如果指向的文件是一个rar压缩包或其他文件,则实现的是这些资源的下载。
是段落标签,h5中通常使用成对的标签来划分段落,需要一对的使用,它也有换行的意义。是强制换行标签,单独使用即可,这个换行相对会紧凑一点儿。...相对路径 —— 这种地址形式利用的是构建链接的两个文件之间的相对关系,不受站点文件夹所处服务器位置的影响,省略了绝对地址中的相同部分。...优点是站点文件夹所在服务器地址发生改变时,文件夹的所有内部文件地址都不会发生改变。缺点是内容页面换了位置时,链接容易失效。同时它也更容易被抄袭和采集。 2-3 使用链接标签打开新窗口的方式有哪些?...div>标签可以定义文档中的分区或节。div>占用的宽度是一行,这意味着div>div>中的内容自动地开始一个新行。 标签用来对同一行内的文字分类分组。...占用的宽度与分组内容的宽度一致。 2-5 如何为图片添加链接?
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一、绝对获取,获取元素的3种方式:—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象...例如,如果和之间有换行或空格,则的第一个孩子节点nodeName是:#text 3, 上面的和#text节点是兄弟关系...div id="div1"> div> div id="div2"> div区域2中的文字 div> div id="div3"> div区域3中的文字 <...//创建一个文本节点 var oTextNode = document.createTextNode("新添加的文本内容"); //获取div1...节点 var oDivNode1 = document.getElementById("div1"); //让div1节点把oTextNode
如果大家有网络方面的书籍,比如《TCP/IP详解》,也可以直接看书籍。 41.4 HTTP通信实例 为了帮助大家更好的理解HTTP的请求消息和响应消息,我们这里举一个例子。...特别注意,末尾也要有回车和换行符,反映在这里就是空白的第3行,由回车和换行符切换到这一行的。 空行 空行也是必不可少的,反映在这里就是空白的第4行,也是由回车和换行符切换到这一行的。...Cache-Control 这个是响应头域,表示缓冲控制,无论是否可以缓存此对象,都要告诉服务器到客户端的所有缓存机制。这里表示604800秒后缓冲的内容失效。...ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制,并且允许客户端进行缓存协商。 Expires 属于响应头域,表示指定一个日期/时间,超过该时间则认为此回应已经过期。...这里是1270字节的数据。 剩下的内容就是HTML格式的消息实体了。 具体大家可以实际操作下,有个感性的认识,另外就是换个其它的网址也操作下,加深理解。
React 是一种流行的 JavaScript 库,用于构建动态用户界面。在一个 React 应用程序中,有时需要一个按钮或链接来触发显示或隐藏一个相关的组件。...isVisible 表示与当前值相反的布尔值。如果 isVisible 的值为 false,则将其取反后变为 true,如果 isVisible 的值为 true,则将其取反后变为 false。...然后,我们编写了一个名为 handleClickOutside 的事件处理函数,它将检查用户单击的元素是否在菜单之外。如果用户单击的元素不在菜单中,则将可见性设置为 false,菜单将被隐藏。...如果用户单击的元素不在模态对话框中,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。...这些示例可以用作参考,帮助你在自己的 React 应用程序中实现点击显示或隐藏另一个组件的功能。
我们首先,不想让他换行。...title="顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告 到这之前都是完整内容...ol + li 和 ul + li ol代表有序列表,li代表这个列表中的内容。...ul代表无序列表,li代表这个列表中的内容。 注意:在ol和ul中,内容只能写在li中,不能写在其他地方 图片  pre HTML的特点,如果有连续的空格,默认会为一个,连续的回车,默认也是一个回车 图片 图片
HTML div> 标签 定义和用法 可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。...如果用 id 或 class 来标记 div>,那么该标签的作用会变得更加有效。 用法 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 固有的唯一格式表现。...; } 内容主体 分为四个模块:title,菜单,主体,底部 div id="container"> div id="heading">梦溪分享div> div id="content_menu">内容菜单div> div id="content_body">内容主体...div> div id="footing">底部div> div> 布局样式-梦溪分享 ---- 版权属于:Cyril 本文链接:https://www.cyrilstudio.top
由于浏览器会合并空白字符,忽略掉换行,导致如果文档中含有代码块时显示不符合开发工具下的代码格式风格。... & div> 都是通用标签,没什么具体的语义 : 标签通常用于标记段落中的某块文本内容,然后通过该标签,可以单独为这块文本内容增加 CSS 样式 div> : 标签一般用于... 标签用于表示文档中的某一节,其实也就是某一块区域,这块区域有自己单独独立的含义。通俗的理解,有些类似于第一节,第二节的概念。... : 标签表示某一节的尾部,最常见的基本每个网页尾部都会有版权信息,作者介绍,相关链接,免责声明等信息,这部分信息都适用于放在尾部标签 里。...footer 标签表示文档中某一个区域,它包含着到其他页面或者同一页面的其他部分的链接。 直译其实也就是导航的作用。 ?
领取专属 10元无门槛券
手把手带您无忧上云