:HTML结构分析-图片素材模板推荐免费ppt模版下载-道格办公

HTML结构分析

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)
    打赏 支付宝扫一扫 支付宝扫一扫
    single-end

    相关推荐