摘要:标签不区分大小写,但推荐小写。标签可以嵌套,但不能交叉嵌套。标签也称为元素。比如行内标签亦可成行内元素。
?
??直接跳到末尾?? ——>领取专属粉丝福利?
☝️
?上一篇博文两万字博文教你python爬虫requests库,看完还不会我把我女朋友都给你【❤️熬夜整理&建议收藏❤️】被众多爬虫爱好者/想要学习爬虫的小伙伴们阅读之后,很多小伙伴私信我说——爬是会爬了,但是爬下来的都是网页源码数据,真心看不懂鸭!该怎么办??
?(苦笑)为了能让小伙伴们对日后所学的页面解析库理解更深,所以本博主又连夜加班加点,苦苦熬制本文(分上下两篇哦!),为大家深入全面的讲解一下常见的前端知识——学啥技术都是从底层抓起,万丈高楼平地起,它也是基于地基稳! 所以本文(共分上下两篇哦!)是比页面解析库要先一步总结给小伙伴们哦!?
?在这两篇博文中,本博主就带领小伙伴们认真地学习一下HTML(超文本标记语言)相关的必备知识(爬虫爬到数据之后解析页面数据你得多少能看懂页面结构!)——HTML是一门标记语言,标记语言由一套标记标签组成,学习HTML,就是学习标签。!?
相信有不少小伙伴已经通过我的上篇博文完全地学费了requests库,而本篇(以及下篇)文讲解的HTML知识,将会使你日后解析爬取到的页面数据信手拈来哦~
知识点补给站: |
如果把网页比作一个人的话,HTML相当于骨架,JavaScript相当于肌肉,CSS相当于皮肤。三者结合起来才能形成一个完善的网页。首先要普及的一个概念是一个网页组成部分: ①HTML:用于定义网页里面有什么内容; ②CSS:对内容进行排版; (1)找到要排版的内容————如何找到要排版的标签; (2)设置样式————标签都能设置哪些样式。 ③JavaScript:用于动态的控制页面。
HTML:(HyperText Markup Language)【超文本标记语言】
狭义的HTML指的是网页;
广义的HTML指的是前端技术(html,css,js,以及各种框架)——网页,移动端网页,小程序,公众号,移动端的app,快应用等。
详细介绍:
HypertText:超文本——超出文本的范畴,简单地说,不仅仅是文本,还可以是图像,音频,视频,flash等等;
Markup:标记——网页中会有很多标记,不同的标记有不同的含义和功能,标记也叫标签,Html会包含各种各样的标签,这些标签不能乱写,必须写w3c规范中包含的标签。
标签的举例:
① -- 双标签
②
-- 单标签
HTML是一门标记语言,标记语言由一套标记标签组成,学习HTML,就是学习标签。
编辑器:pycharm(搞python的肯定得用pycharm!)
浏览器:Firefox,Chrome(建议使用这俩哦!)
如果你再pycharm里新建一个html文件就会像下面这样!
<!DOCTYPE html> #文档类型的声明"en"> #根标签,即文档的开始。 lang(language),en(english)。声明语言类型是英语 #网页头部 "UTF-8"> #国际编码 meta配置 字符集编码的类型 Title</title> #网页标题</head> #网页的主体,可视化区域</body></html>
知识点补给站:
标签:作用:在html文件最前面进行声明,定义文档类型,告知浏览器用html规范去解析文档。
在pycharm中编写HTML文件时, 为注释,快捷键是Ctrl+/。
在pycharm中编写HTML文件时,打标签时可直接打标签名,再Tab即可实现自动补全。 如:输入p,再Tab会自动补全为:
由尖括号包裹单词构成,如:<html>,所以标签不可能以数字开头。
错误示例:</a></b>正确示例:</b></a>
开始标签又称开放标签标签体结束标签又称闭合标签或关标签
自闭合标签/单标签,如:,
等
单标签有两种写法: 写法一:只写开标签即可<br> 写法二:在开标签的结尾写一个/,如<br/>
通常为键值对形式出现,比如: 里面的charset为标签的属性,对应的单引号或者双引号里的称为属性值;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块状标签的特点</title></head><body> <!--块状标签的特点:(通过段落标签p进行说明)--> <!--1.设置宽高有效,以及外边距和内边距都可控制--> <!--2.在不设置宽度的情况下,宽度始终与父标签保持一致,与内容无关。是父标签容器的100%;--> <!--3.可以独占一行,实现自动换行。一个段落标签不管多少内容都占一行--> <!--4.当多个块状标签写一起时,默认排列方式是从上向下--> <!--5.可以容纳内联元素和其他块元素--> <p style="width:100px; height:100px">这是个段落标签,我是块状标签</p></body></html>
知识点补给站: 1.px是像素,是长度单位; 2.在网页查看元素(ELements)显示的是宽度*高度。 |
小知识点:网页的默认字号是1em(1em=16px)!
总共有四个:
<h1>我是一级标签,一个网页只能有一个,别的可以有多个h1> <h2>我是二级标签h2>
<p>我是段落标签p>
<ol type="A" start="3"> <li>这是有序列表1li> <li>这是有序列表2li> <li>这是有序列表3li> ol> <ul type="circle"> <li>这是无序列表1li> <li>这是无序列表2li> <li>这是无序列表3li> <li>这是无序列表4li> ul> <dl> <dt>水果dt> <dd>葡萄dd> <dd>榴莲dd> <dt>蔬菜dt> <dd>花菜dd> <dd>包菜dd> dl>
<div style="width:500px;height: 500px;background-color: #66a9fe;">我是一个divdiv>
知识点补给站: |
如果嫌打列表标签太麻烦,可使用快捷方法:(n表示相应的标签的个数,直接输入下面语句Tab一下即可生成!)
*是乘的作用,后面跟一个数字,数字是几,就会生成几个标签!
举例:
实现:
$可以代表一个数字,这个数字从1开始,逐步增大,通常和*连用。
举例:
实现:
{}里面用于书写标签的文本内容。
举例:
实现:
[]里面用于书写属性名和属性值(如果不加属性值,则创建属性值为空的属性)
举例①:
举例②:
实现①:
实现②:
>用于指示下一级标签,他们构成父子关系(包含关系)
举例:
说明:
+在当前标签的后面生成一个平级的标签(兄弟关系)
举例:
实现:
#a生成一个id位a的div标签
举例:
实现:
综合使用:
举例①:
实现①:
举例②:
实现②:
举例③:
实现③:
举例④:
实现④:
举例⑤:
实现⑤:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联标签,又称行内标签的特点</title></head><body> <!--内联标签的特点(通过文本标签span说明)--> <!--1.设置宽高无效,以及外边距和内边距都无法控制--> <!--2.宽度就是其文字或者图片宽度,无法控制--> <!--3.不会进行自动换行,只有本行放满才会放下一行--> <!--4.当多个内联标签写在一起时,默认排列方式是从左往右--> <!--5.内联元素只能容纳文本或者其他内联元素--> <span>我是个文本标签</span></body></html>
总共有四种:
<img src="" alt="" width="" height="">
<b>我是粗体b> <i>我是斜体i>
<a href="" title="超链接的一个说明(鼠标放上会显示的文本)" target="_self">我是超链接a>
<span>我是文本标签span>
知识点补给站第一站点: |
如果图片标签里填的是本地图片的地址(相对路径):
1.如果图片在同级目录下,直接: 当前目录名/图片名
或者: ./当前目录名/图片名
2.如果图片在上级目录下,直接: . ./图片名
知识点补给站第二站点: |
至于为什么要实现行内标签和块状标签的相互转换,小伙伴们在设置css样式时会get到这个点哦。
比如:块状标签是不能放在一行了,但我们可以通过先转换为行内标签就可以了!!!
从现在做起,坚持下去,一天进步一小点,不久的将来,你会感谢曾经努力的你! |
本博主会持续更新爬虫基础分栏及爬虫实战分栏(为了小伙伴们更好的进行页面解析,也会更新部分前端必备知识点博文!),认真仔细看完本文的小伙伴们,可以点赞收藏并评论出你们的读后感。并可关注本博主,在今后的日子里阅读更多爬虫文!
如有错误或者言语不恰当的地方可在评论区指出,谢谢! 如转载此文请联系我说明用以意并标注出处及本博主名,谢谢!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/122442.html
摘要:今天,一条就带大家彻底跨过排序算法这道坎,保姆级教程建议收藏。利用递归算法,对分治后的子数组进行排序。基本思想堆排序是利用堆这种数据结构而设计的一种排序算法,堆排序是一种选择排序,它的最坏,最好,平均时间复杂度均为,它也是不稳定排序。 ...
摘要:正式的专栏第篇,同学站住,别错过这个从开始的文章前面学委的入门到精通专栏积累了篇文章,当然学委博客还有几十篇应用的文章。 正式的Python专栏第9篇,同学站住...
摘要:友情提示先关注收藏,再查看,万字保姆级语言从入门到精通教程。及大牛出天地开始有随之乃有万种语年英国剑桥大学推出了语言。 友情提示:先关注收藏,再查看,13 万字保...
摘要:大家好,我是冰河有句话叫做投资啥都不如投资自己的回报率高。马上就十一国庆假期了,给小伙伴们分享下,从小白程序员到大厂高级技术专家我看过哪些技术类书籍。 大家好,我是...
摘要:因为是全中文的,对一些英语不好的人来说确实是福利。二下载安装下载官网下载地址进去之后,点击点击后就会自动下载了。 文章目录 推荐系列教程,推荐的一定是精选的!一....
阅读 2305·2021-11-18 10:02
阅读 1876·2021-10-13 09:40
阅读 2962·2021-09-07 10:07
阅读 2063·2021-09-04 16:48
阅读 950·2019-08-30 13:18
阅读 2417·2019-08-29 14:03
阅读 2876·2019-08-29 12:54
阅读 3125·2019-08-26 11:41