栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Python

Python爬虫 了解Web前端——HTML

Python 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Python爬虫 了解Web前端——HTML

了解Web前端——HTML
  • HTML语言
    • 标签、元素、结构概述
      • HTML 标签
      • 元素
      • HTML 文件结构
    • HTML 的基本标签
      • 文件开始标签
      • 文件头部标签
      • 文件标题标签 </li><li>元信息标签 <meta></li><li>页面的主体标签 <body></li></ul> </li></ul> </li></ul> <p></p> HTML语言 <p>  HTML 是纯文本类型的语言,使用 HTML 编写的网页文件也是标准的纯文本文件。我们可以用人和文本编辑器,例如 Windows 的 “记事本” 程序打开它,查看其中的 HTML 源代码,也可以在用浏览器打开网页时,通过相应的 “查看” -> “源文件” 命令查看网页中的 HTML 代码。HTML 文件 可以直接由浏览器解释执行,而无需编译。 当用浏览器打开网页是,浏览器读取网页中的 HTML 代码,分析其语法结构,然后根据解释的结果显示网页内容。<br /> <br /></p> 标签、元素、结构概述 HTML 标签 <p>  HTML 的标签分单独出现的标签和成对出现的标签两种。<br /> 大多数标签成对出现,是由首标签和尾标签组成的。 首标签的格式为 <元素名称>,尾标签的格式为 </元素名称>。其完整语法如下:</p> <pre class="brush:python;toolbar:false"><元素名称>要控制的元素</元素名称> </pre> <p>  <mark>成对标签</mark>仅对包含在其中的文件部分发生作用,例如 <title> 和 标签用于界定标题元素的范围,也就是说, 和 标签之间的部分是此 HTML5 文件的标题。

          单独标签的格式为 <元素名称>,其作用是在相应的位置插入元素,例如
        标签便是在该标签所在位置插入一个换行符。

        说明:
          在每个 HTML5 标签中,大,小写混写均可。例如 、、,其结果都是一样的。

          在每个 HTML5 标签中,还可以设置一些属性,控制 HTML5 标签所建立的元素。这些属性将位于所建立元素的首标签,因此,首标签的基本语法如下:

        <元素名称 属性 1="值1" 属性 2="值 2"...>
        

          而尾标签的建立方式则为

        
        

          因此,在 HTML5 文件中某个元素的完整定义语法如下:

        <元素名称 属性 1="值1" 属性 2="值 2"...>元素资料
        

        说明:
          语法中,设置各属性所用的引号 “ ” 可省略。


        元素

          当用一组 HTML5 标签将一段文字包含在中间时,这段文字与包含文字的 HTML5 标签被称为;一个元素。

          由于在 HTML5 语法中,每个由 HTML5 标签与文字所形成的元素内,还可以包含另一个元素。因此,整个 HTML5 文件就像是一个大元素,包含了许多小元素。

          在所有的 HTML5 文件中,最外层的元素是由 标签建立的。在 标签所建立的元素中,包含了两个主要的子元素,这两个子元素是由 标签与 标签所建立的。 标签锁紧力的额元素内容为文件标题,而 标签所建立的元素内容为文件主体。

        HTML 文件结构

          在介绍 HTML 文件之前,先来看一个简单的 HTML 文件及其在浏览器上的显示结果。

          下面开始编写一个 HTML 文件,使用文件编辑器,例如在 Windows 自带的记事本中编写如下代码,然后将其保存为 .html 文件。

        
            
                文件标题
            
                
                    文件正文
                
        
        

          运行结果如下图所示:

          从上述代码中可以看出 HTML 文件的基本结构,如下图所示。



          其中, 与 之间的部分是 HTML 文件的文件头部分,用以说明文件的标题和整个文件的一些公共属性。 和 之间的部分是文件的主体部分,下面介绍的标签,如果不加特别说明,均是嵌套在这对标签中使用的。

        HTML 的基本标签 文件开始标签

          在任何一个 HTML 文件里,最先出现的 HTML 标签就是 ,它用于表示该文件是以超文本标识语言(HTML)编写的。 是成对出现的,首标签 和尾标签 分别位于文件的最前面和最后面,文件中的所有文件和 HTML 标签都包含在其中。例如:

        
            文件的全部内容
        
        

          该标签不带任何属性。

          事实上,现在常用的 Web 浏览器(例如 IE)都可以自动识别 HTML 文件们并不要求有 标签,也不对该标签进行任何操作。但是,为了提高文件的适用性,使编写的 HTML 文件能适应不断变化的 Web 浏览器,还是应该养成使用这个标签的习惯!!!

        文件头部标签

          习惯上,把 HTML 文件分为文件头和文件主体两个部分。文件主体部分就是在 Web 浏览器窗口的用户区看到的内容,而文件头部分用来规定该文件的标题(出现在 Web 浏览器窗口的标题栏中)和文件的一些属性。

           是一个表示网页头部的标签。在由 标签所定义的元素中,并不放置网页的任何内容,而是放置关于 HTML 文件的信息,也就是说它并不属于 HTML 文件的主体。它包含文件的标题、编码方式以及 URL 等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用。

          写在 和 中间的文本,如果又写在 标签中,那么表示该网页的名称,并作为窗口的名称显示在这个网页窗口的最上方。</p> <blockquote> <p>说明:<br /> 如果 HTML 文件并不需要提供相关信息时,可以省略 <head> 标签。</p> </blockquote> <br /> 文件标题标签 <title> <p>  <mark>每个 HTML 文件都需要有一个文件名称</mark>。在浏览器中,文件名称作为窗口名称显示在该窗口的最上方,这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用,今后想经常阅读,那么可以选择 IE 浏览器 “收藏” 菜单中的 “添加到收藏夹” 命令将它保存起来,供以后调用。网页的名称要写在 <title> 和 之间,并且 标签应包含在 <head> 与 </head> 标签中。</p> <p>  HTML 文件的标签是可以嵌套的,即在一对标签中可以嵌入另一对子标签,用来规定目标前所含范围的属性或其中某一部分内容,嵌套在 <head> 标签中使用的主要有 <title> 标签。<br /> <br /></p> 元信息标签 <meta> <p>  <mark>meta 元素提供的信息是用户不可见的</mark>,他不显示在页面中,一般用来定义页面信息的名称、关键字、作者等。在 HTML 中,meta 标记不需要设置结束标记,在一个尖括号内就是一个 meta 内容,而在一个 HTML 头页面中可以有多个 meta 元素。meta 元素的属性有两种:name 和 http-equiv,其中 name 属性主要用于描述网页,以便于搜索引擎机器人查找、分类。</p> 页面的主体标签 <body> <p>  网页的主体部分以 <body> 标记标志它的开始,以 <body> 标志它的结束。在网页的主体标签中有很多属性设置,如下表所示:</p> <table><thead><tr><th align="left">属性</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">text</td><td align="left">设定页面文字的颜色</td></tr><tr><td align="left">bgcolor</td><td align="left">设定页面背景的颜色</td></tr><tr><td align="left">background</td><td align="left">设定页面的背景图像</td></tr><tr><td align="left">bgproperties</td><td align="left">设定页面的背景图像为固定,不随页面的滚动而滚动</td></tr><tr><td align="left">link</td><td align="left">设定页面默认的链接颜色</td></tr><tr><td align="left">alink</td><td align="left">设定鼠标正在点击时的链接颜色</td></tr><tr><td align="left">vlink</td><td align="left">设定访问过后的链接颜色</td></tr><tr><td align="left">topmargin</td><td align="left">设定页面的上边距</td></tr><tr><td align="left">leftmargin</td><td align="left">设定页面的左边距</td></tr></tbody></table></div> </div> <div style="clear: both;"></div> <div class="author-info fl"> <div><span class="gray">转载请注明:</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div> <div><span class="gray">本文地址:</span><a href="https://www.mshxw.com/it/1023112.html" class="blue">https://www.mshxw.com/it/1023112.html</a></div> </div> <div class="prev fl"> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1024148.html">上一篇 7天学完Spring:Spring MVC框架基础学习</a> </p> <p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/1022570.html">下一篇 自助取款机系统(C#)</a> </p> </div> <div class="new_tag fl"> </div> </div> <div class="new_r fr" style="border-radius:10px;"> <div class="tui fl"> <h3>Python相关栏目本月热门文章</h3> <ul> <li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解(二)设备树语法详解">【Linux驱动开发】设备树详解(二)设备树语法详解</a></li> <li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li> <li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li> <li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流(ObjectOutputStream和ObjectInputStream)">【Java】对象处理流(ObjectOutputStream和ObjectInputStream)</a></li> <li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li> <li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li> <li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍</a></li> <li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成</a></li> <li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li> <li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li> <li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li> <li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li> <li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li> <li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口(包含C uci操作)">在openwrt使用C语言增加ubus接口(包含C uci操作)</a></li> <li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li> <li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li> <li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li> <li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li> <li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li> <li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li> </ul> </div> </div> </div> <!-- 公共尾部 --> <div class="link main"> <div class="link_tit"> <span class="on">热门相关搜索</span> </div> <div class="link_tab"> <div class="link_con"> <a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a> <a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a> <a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a> <a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a> <a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a> <a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a> <a href="http://www.mshxw.com/TAG_1/vim.html">vim</a> <a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a> <a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a> <a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a> <a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a> <a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a> <a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a> <a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a> <a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a> <a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a> <a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a> <a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a> <a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a> <a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a> <a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a> <a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a> <a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a> <a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a> <a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a> <a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a> <a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a> <a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a> <a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a> <a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a> <a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a> </div> </div> </div> <div class="footer"> <div class="dl_con"> <div class="width1200"> <dl> <dt>学习工具</dt> <dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd> <dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd> <dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd> <dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd> </dl> <dl> <dt>知识解答</dt> <dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd> <dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd> <dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd> </dl> <dl> <dt>写作必备</dt> <dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd> <dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd> </dl> <dl class="mr0"> <dt>关于我们</dt> <dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd> <dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd> <dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd> </dl> <div class="dl_ewm"> <div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群"> <p>名师互学网交流群</p> </div> <div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服"> <p>名师互学网客服</p> </div> </div> </div> </div> <div class="copyright"> <p>名师互学网 版权所有 (c)2021-2022 ICP备案号:<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a> </p> </div> </div> <!-- 手机端 --> <div class="m_foot_top"> <img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/> <a href="https://www.mshxw.com/about/index.html">关于我们</a> <a href="https://www.mshxw.com/archiver/">文章归档</a> <a href="https://www.mshxw.com/sitemap">网站地图</a> <a href="https://www.mshxw.com/about/contact.html">联系我们</a> <p>版权所有 (c)2021-2022 MSHXW.COM</p> <p>ICP备案号:<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p> </div> <div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div> <!--广告!--> <script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script> <script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script> <!--头条搜索!--> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script> <!--头条搜索结束!--> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </div> <script type="text/javascript"> $(".alert_kf").click(function() { mantis.requestChat(); }); </script> <script type="text/javascript"> var mySwiper_weixin = new Swiper('.pc_swiper_weixin', { autoplay: 3000, //可选选项,自动滑动 loop: true, speed: 1000, pagination: '.swiper-pagination', paginationClickable: true, }) </script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".to_top").fadeIn(1000); } else { $(".to_top").fadeOut(1000); } }); $(".to_top").click(function() { if ($('html').scrollTop()) { $('html').animate({ scrollTop: 0 }, 300); return false; } $('body').animate({ scrollTop: 0 }, 300); return false; }); }); </script> </body> </html>