Python爬虫之路(4)-- 常见的前端标签

常见的前端标签认识

前端(页面展示)最基础的三件套HTML,CSS,JavaScript鼓励大家去了解学习一下,此处只讲解可能遇到的最常见的标签。

下面给出的示例可以创建一个html文件,然后在浏览器打开它,使用F12开发者工具分析。

  1. 基础标签示例:
xml 复制代码
 <html>
   <head>
     <title>My Web Page</title>
   </head>
   <body>
     <h1>Welcome to my website!</h1>
   </body>
 </html>

2.文本标签示例:

css 复制代码
 <h1>This is a Heading 1</h1>
 <p>This is a paragraph of text.</p>
 <a href="https://www.example.com" target="_blank">Click me</a>
 <span style="color:red;">This text is red.</span>

①:<h..>此类标签表示 ..级标题的含义,比如

内容

表示"内容"将以二级标题的方式进行展示。

②:

内容
:p标签表示被包裹的"内容"将以段落的形式展示。

③: :定义超链接。href 属性指定链接地址,target 属性指定打开方式。当点击a标签时,就会跳转到href指向的地址。

④: 用于对文本进行样式设置,通常与 CSS 配合使用。作用与p标签类似,但是可以在style属性里面添加样式,比如例子中的 color=red,就将内容渲染成了红色。

3.图像和多媒体标签示例:

css 复制代码
 <img src="image.jpg" alt="My Image">
 <video src="video.mp4" controls>Your browser does not support the video tag.</video>
 <audio src="audio.mp3" controls>Your browser does not support the audio tag.</audio>
  1. <img>: 插入图像。src 属性指定图像文件路径,alt 属性提供图像的替代文字描述(当图片无法正常渲染展示时使用)。
  2. <video><audio>: 插入视频和音频文件。src 属性指定媒体文件路径,controls 属性显示播放控件。

4.列表标签示例:

css 复制代码
 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
 </ul>
 <ol>
   <li>First</li>
   <li>Second</li>
   <li>Third</li>
 </ol>

<ul><ol>: 分别定义无序和有序列表。<li> 定义列表项。

5.表单标签示例:

xml 复制代码
 <form>
   <label for="name">Name:</label>
   <input type="text" id="name" name="name"><br>
 ​
   <label for="email">Email:</label>
   <input type="email" id="email" name="email"><br>
 ​
   <button type="submit">Submit</button>
 </form>
  1. <form>: 定义表单。<input> 定义输入字段,type 属性指定字段类型,name 属性指定字段名称,value 属性指定默认值。<label><input> 元素定义标签。<button> 定义提交按钮。

6.布局标签示例:

css 复制代码
 <header>
   <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </nav>
 </header>
 ​
 <main>
   <div>
     <h2>Main Content</h2>
     <p>This is the main content of the page.</p>
   </div>
   <aside>
     <h3>Sidebar</h3>
     <p>This is the sidebar content.</p>
   </aside>
 </main>
 ​
 <footer>
   <p>&copy; 2024 My Website</p>
 </footer>
  1. <div>: 定义文档中的分区或节,通常用于布局和样式设置。
  2. <header>, <nav>, <main>, <aside>, <footer>: HTML5 新增的语义化布局标签,更好地描述页面结构。

这些示例展示了 HTML 标签的基本用法和属性。在爬虫实际开发中,只需要认识这些标签,以及相应的属性作用即可,当然也推荐大家去学习相关知识,尤其是JavaScript。

结语

有任何问题欢迎大家的评论和指正。再次声明,本专栏只做技术探讨,严谨商用,恶意攻击等。

这是我的 GitHub 主页:Rosyrain (github.com),里面有一些我学习时候的笔记或者代码。

欢迎大家Follow/Star/Fork三连。

相关推荐
liangshanbo12151 天前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15881 天前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 天前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15881 天前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 天前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 天前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li1 天前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊1 天前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz1 天前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom1 天前
iframe实战:跨域通信与安全隔离
前端·安全