HTML结构分析 作者: 道格办公 • 2022-12-11 • 图片素材模板推荐 • 浏览量 916 yper text markup language(超文本标记语言)的缩写,是一种用于创建网页结构的标记语言。HTML使用标记来描述网页中的各个元素,如标题、段落、链接等。Web浏览器可以读取HTML文件,并根据其中的标记来渲染和显示网页内容。 HTML的工作原理如下: 1. HTML文件由一系列标签(tag)组成,每个标签由尖括号包围,例如``。 2. 标签通常成对出现,包括一个开始标签和一个结束标签,例如`...`。 3. 开始标签和结束标签之间的内容是标签的内容,可以是文本或其他HTML标签。 4. 标签可以包含属性(attribute),属性提供了关于标签的额外信息,例如``。 5. 标签的属性通常用于指定元素的样式、链接目标或其他行为。 6. 标签可以嵌套,即一个标签可以包含另一个标签。 通过分析HTML结构,我们可以了解网页的布局和内容,进而通过爬虫技术提取我们所需的数据。 如果想学会爬虫,熟悉HTML代码是必须的,如果不会HTML代码我们就没有办法分析页面结构,也就没有办法更好的做解析了。一、HTML工作原理原理 html是hypertext markup lanaguage缩写 超文本标记语言,是一种解释性语言,不需要编译,由浏览器解释执行 html组成 html 负责数据展示 css 负责美化页面 js 页面的动态效果 二、认识标签marquee标签的引入,学习标签应该: 记住功能 标签写法 可分为:单标签和对标签 <!--单标签 --> <标签名 属性1='属性值' 属性2='属性值' 属性3=属性值> <!--对标签 --> <标签名 属性1='属性值' 属性2='属性值' 属性3=属性值>内容</标签名> 注意事项: 标签不能创造 书写标签的时候应该用英文半角 属性值可以单引号、双引号引起来,也可以不写引号,推荐使用单引号括起来 属性必须写在开始标签里 标签可以嵌套,一个标签要完全嵌套到另外一个标签里 三、全局架构标签(重点)<!doctype html> 文档类型,html表名是html5的文档<html> 根标签<head> 头部 <meta charset='UTF-8'> 告诉浏览器用utf-8编码格式解释文档 <title>Document</title> 文档标题</head><body> </body></html> 3.1 title标签 <title>Document</title> 设置文档标题,显示窗口的标题栏 3.2 设置字符集 <meta charset='UTF-8'> 字符集是告诉浏览器用那种编码格式解读html文档,注意html文档本身有一个编码格式,这两个编码格式必须一致,不一致就乱码 3.3 body (了解)内容显示区,有些常用属性: topmargin 上外边距 leftmargin 左外边距 text 文字颜色 bgcolor 背景颜色 background 背景图片,和bgcolor冲突,设置了背景图片,背景颜色就是不显示 3.4 全局属性 每一个标签都有的属性,常用的有id、class、name、style 四、html常用标签html文件显示特点:多个空格、换行、tab键用一个空格代替;如果英文字符间没有空格,会看成一个单词,不会自动折行4.1 常用标签 h1~h6 标题,一般一个页面只设置一个h1标题 hr (单标签) 水平分割线 width 可以使用绝对值,300,不带单位,也可以使用百分比 50% align 对齐方式:left center(默认) right p 段落标签,有段前间距和段后间距 br (单标签) 换行 nobr (双标签) 不换行,所修饰内容无论多长,不会自动换行,显示不下,会有滚动条 pre 保持原来的样式,无论空格还是换行都会正常显示 b(strong) 加粗 i(cite,em) 斜体 u 下划线 sub/sup 下标/上标,看圈在那边,在下边就是下标 font (face/color/size) 字体 face 字体名称,到window目录下font子目录下查看 color 字体颜色 size 值取1~7,7最大 blockquote 引用,会从正常的文本中分离,留有左右边距 4.2 注释和实体引用 注释 <!--我是注释 --> <!-- 我是注释 --> 注释的作用: 1 提高代码的可读性,主要给其他团队成员看的,方便维护 2 方便调试 实体引用 空格 < < > > & & ' " ' ' 五、列表5.1 有序列表(ol/li) type: 数字,a ,A,I ,i start 开始标号,默认从1开始 5.2 无序列表(ul/li) type 项目符号: disc 默认 实心圆圈 square 实心方块 circle 空心圆圈 5.3 自定义列表(dl/dt/dd) 六、超级连接(重点)超链接的写法 <a href='http://www.baidu.com/'>百度</a> url 统一资源定位符 https://baike.baidu.com:80/item/%E6%9D%A8%E5%B9%82/149851?fr=aladdin#4 第一部分: 协议 http https ftp news magnet(磁力链接) 第二部分:主机,服务器地址 可以是域名或ip地址 第三部分:冒号后面的数字,端口 http 80(默认) https :443 ftp:21 mysql:3306 端口编号从0~65535 其中0~1023归操作系统使用 第四部分:从端口后的斜线到?,中间这部分叫路径,请求文件的路径 第五部分:从?到#中间这部分,是请求参数,query string ;写法: 键=值&键2=值 第六部分:锚点 也就是同一个页面内的跳转,必须用#开头 href 所请求的url,注意url必须写协议 title 鼠标放到超链接上时显示的提示 target _blank 新窗口打开 _self 当前窗口打开,默认 七、img标签(单标签)img是单标签,<img src='' title='' alt='' border='' width='' height=''>绝对路径和相对路径 本机绝对路径:file:///C:/python/web/1/ym.jpg 网络绝对路径:https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=32ceb0ef04d79123f4ed9c26cc5d32e7/7c1ed21b0ef41bd55520081359da81cb38db3de2.jpg 网站绝对路径(了解): /代表网站根目录 相对路径:相对于html文档所在目录 ../上级目录 ./当前目录 ./3/index.html ../1.html src 图片来源,可以是相对路径也可以是绝对路径 title 图片提示文字 alt 图片不显示的时候的提示文字 border 图片边框大小,一般默认为0 width/height 一般只设置一个,另外一个等比例缩放 八、表格 table 表 border 表格线 cellspacing:单元格的间距 cellpadding:单元格到内容距离 align:水平对齐 left、center、right height可以不用设置,自动撑开 tr 行 align :水平对齐 left center right valign:垂直对齐 top middle bottom 注意:如果没有给该表格设置高度,那么设置valign无效,在以后布局页面的时候,一般不使用valign,只有一种情况使用到,就是图片和文字并排排放的时候,需要设置图片的valign为middle td 单元格 colspan 跨列 向右合并 rowspan 跨行 向下合并 width/height th 就是表格的表头,内容会加粗,和td用法相同 caption 表格标题,跟随表格移动 <table border=1 width=100> <tr align='left'> <td>A</td> <td>A</td> <td>A</td> </tr> <tr align='left'> <td>B</td> <td>B</td> <td>B</td> </tr> </table> 九、表单(重要)用途:收集用户信息,提交给服务器 基本使用: 不是所有的标签都可以提交,能够向服务器提交信息的表单项,只有表单项:input、select、textarea才可以向服务器提交信息 表单项必须放到form标签中才可以提交信息 action:提交地址,一般是服务器的页面 method:提交方式,最重要的两种为get方式和post方式,默认是get提交 get和post的区别: 1.get用于向服务器请求数据,post一般用于向服务器提交数据 2. get请求通过url传递数据,数据会暴露在浏览器地址栏里,不安全; post请求数据在请求体中,不会在浏览器地址栏里出现,相对安全 3. get传参,数据大小受url限制,一般几k大小 post传参理论上无限制 enctype:用于文件上传,值为:multipart/form-data,现在了解 input框 type:text placeholder:占位符,一般用于提示用户,当用户输入时,会自动消失 maxlength:最大字符数 type 类型:单行文本框(text)、密码框(password)、复选框(checkbox)、单选框(radio)、文件上传(file)、按钮(button)、重置按钮(reset)、提交(submit) name:名称,要提交,必须设置name value 默认值 readonly 只读 disabled 不可用 size 公有属性:type、name、value、readonly、disabled、size 单行文本框 <input type='text' value='重置' /> 提交按钮 type:submit value:提交按钮的标题 <input type='submit' value='提交' /> 重置按钮 清空用户输入 type:reset <input type='reset' value='重置' /> 密码框 type:password <input type='password' name='password' /> 单选框 一般用于多选一,name相同是一组,一组中只能选一个 type:radio checked:是否选中 value:一般用0或1表示,必须设置,否则服务器无法区别选中是哪一个 <input type='radio' name='ball1' checked value ='basketball'/> 篮球 复选框 一般name值相同 type:checkbox value:必须设置 checked: 是否选中 <input type='checkbox' name='ball1' checked/> 篮球 <input type='checkbox' name='ball2' checked/> 足球 文件上传 type:file <input type='file' name='upload' enctype=''/> 隐藏按钮 一般用于提交无需用户输入的数据 type:hidden name和value值必须设置 <input type='hidden' name='a' value='123'/> button 一般配合js代码使用 <button>按钮</button> 下拉框(select) selected:是否选中 value 需要设置,否则值就是option中间的文字 name 必须设置 size:显示的行数,如果设置这个属性,下拉框会变成列表框 multiple:是否可以选择多行 下拉框选项(option) <select name=''> <option>1</option> <option>2</option> <option>3</option> </select> 多行文本(textarea) cols:列数 rows:行数 注意textarea标签的内容不能有任何值,否则便会显示 <textarea cols=10 rows=6> </textarea> label标签 配合radio、checkbox使用,方便用户选中 <input type='radio' name='sex' value='男' checked id='man'> <label for='man'>男</label> 十、开发者工具的使用当然一个标准的网页中CSS和JavaScript也是必不可少的。我们如何分析一个网页呢?以chrome为例我们访问:https://movie.douban.com/ 每一个页面的元素定位都是按照如下的步骤完成的。下面我们再来看看Network的使用。此时的Network是空白的,我们需要再次刷新一下页面。 接下来查看请求和相应内容 通过这些的查看可以设置爬虫的请求头等信息。系列文章第1天:收藏!一文掌握数据分析在企业的实际流程第2天:Jupyter Notebook介绍、安装及使用教程第3天:如果不懂Numpy,请别说自己是Python程序员第4天:能是全网最清晰易懂的Numpy教程第5天:Numpy数组中的运算与拼接,看这篇就够了...第6天:收藏!Numpy中常用的方法和属性汇总第7天:菜鸟用Python操作MongoDB,看这一篇就够了第8天:redis在爬虫中的应用-END-Python 专栏关于 Python 都在这里 文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/fr/articles/detail/HTML%20structure%20analysis.html 赞 (810) 打赏 支付宝扫一扫 平安顺 专栏作者 48 196 生成海报 相关推荐 【实战教程】PPT科研绘图教程(016)——静电纺丝示意图 【实战教程】PPT科研绘图教程(016)——静电纺丝示意图 yarodong 2017年11月23日 20.0K 86 18 313 【实战教程】PPT科研绘图教程(016)——静电纺丝示意图 【实战教程】PPT科研绘图教程(016)——静电纺丝示意图 yarodong 2017年11月23日 20.0K 86 18 313 史上最全PPT科研作图教程及素材(第二版) 史上最全PPT科研作图教程及素材(第二版) yarodong 2017年11月23日 20.0K 86 18 313 史上最全PPT科研作图教程及素材(第二版) 史上最全PPT科研作图教程及素材(第二版) yarodong 2017年11月23日 20.0K 86 18 313 【实战教程】PPT科研绘图教程(001)——光催化机理示意图 【实战教程】PPT科研绘图教程(001)——光催化机理示意图 yarodong 2017年11月23日 20.0K 86 18 313 发表回复 请登录后评论... 登录后才能评论 提交 评论列表(196条) 禹涵 2023年6月28日 17:05 测试 回复 上一页 1 … 4 5 6
评论列表(196条)
测试