国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

探尋爬蟲世界01：HTML頁面結(jié)構(gòu)

2年前作者：howard2005分類：Toy博客閱讀(18)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了探尋爬蟲世界01：HTML頁面結(jié)構(gòu)。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

一、引言

（一）背景介紹：選擇爬取51job網(wǎng)站數(shù)據(jù)的原因

在當(dāng)前社會(huì)環(huán)境下，就業(yè)市場的競爭日益激烈，內(nèi)卷現(xiàn)象愈發(fā)普遍。為了更好地理解不同行業(yè)、職業(yè)的招聘需求與發(fā)展趨勢，我們選擇從知名招聘網(wǎng)站www.51job.com（前程無憂）中爬取并分析相關(guān)招聘信息數(shù)據(jù)。51job作為國內(nèi)領(lǐng)先的招聘服務(wù)平臺(tái)，其上匯聚了各行各業(yè)大量的企業(yè)招聘信息，具有較高的權(quán)威性和實(shí)時(shí)性。
通過爬蟲技術(shù)自動(dòng)化抓取51job網(wǎng)站上的職位分類、薪資待遇、技能要求等相關(guān)數(shù)據(jù)，我們可以對人力資源市場進(jìn)行深度挖掘和大數(shù)據(jù)分析。例如，了解熱門行業(yè)的職位分布、薪酬水平的變化趨勢、各地區(qū)崗位供需情況等，這對于求職者合理規(guī)劃職業(yè)發(fā)展路徑，以及企業(yè)制定招聘策略、調(diào)整人才結(jié)構(gòu)都具有重要的參考價(jià)值。此外，通過對大量招聘信息的數(shù)據(jù)分析，還可以揭示出未來一段時(shí)間內(nèi)的行業(yè)熱點(diǎn)與新興領(lǐng)域，幫助社會(huì)各界洞察就業(yè)市場的潛在機(jī)遇與挑戰(zhàn)。因此，爬取51job網(wǎng)站數(shù)據(jù)對于個(gè)人職業(yè)規(guī)劃、企業(yè)戰(zhàn)略決策乃至整個(gè)社會(huì)的人力資源配置優(yōu)化都具有重要意義。

（二）目標(biāo)與需求明確：爬取51job網(wǎng)站數(shù)據(jù)的目的與用戶需求

在本項(xiàng)目中，我們的核心目標(biāo)是通過編寫Python爬蟲程序，從www.51job.com獲取詳盡、準(zhǔn)確且具有代表性的招聘信息數(shù)據(jù)。具體目的包括：

行業(yè)趨勢分析：通過對不同職位類別及其對應(yīng)數(shù)量的統(tǒng)計(jì)分析，揭示各行業(yè)招聘市場的供需狀況和熱度變化，為求職者選擇職業(yè)方向提供數(shù)據(jù)支持。
薪資水平研究：抓取職位的薪資范圍信息，結(jié)合地域、工作經(jīng)驗(yàn)等因素進(jìn)行對比分析，幫助求職者了解市場平均薪資水平，合理定位自身價(jià)值，并為企業(yè)設(shè)定薪酬體系提供參考依據(jù)。
技能要求洞察：解析招聘信息中的技能關(guān)鍵詞，分析各類崗位對技能的要求及發(fā)展趨勢，有助于教育培訓(xùn)機(jī)構(gòu)優(yōu)化課程設(shè)置，同時(shí)引導(dǎo)求職者提升關(guān)鍵技能以適應(yīng)市場需求。
區(qū)域就業(yè)機(jī)會(huì)探索：根據(jù)不同地區(qū)的職位發(fā)布數(shù)量和類型差異，挖掘地區(qū)間的就業(yè)機(jī)會(huì)分布特點(diǎn)，為政府制定區(qū)域人才政策、企業(yè)布局人力資源以及個(gè)人規(guī)劃職業(yè)發(fā)展路徑提供決策依據(jù)。

綜上所述，我們根據(jù)用戶需求明確了爬取51job網(wǎng)站數(shù)據(jù)的主要目的，旨在通過多維度的數(shù)據(jù)挖掘與分析，助力社會(huì)各界更深入地理解當(dāng)前人力資源市場動(dòng)態(tài)，從而做出更為科學(xué)合理的決策。

二、網(wǎng)頁結(jié)構(gòu)探索

（一）51job網(wǎng)頁結(jié)構(gòu)分析

1、頁面組成：了解51job網(wǎng)站的整體結(jié)構(gòu)

51job（前程無憂）作為一個(gè)專業(yè)的招聘求職網(wǎng)站，其頁面結(jié)構(gòu)設(shè)計(jì)嚴(yán)謹(jǐn)且功能明確。整體上，網(wǎng)站采用了模塊化布局，主要由頭部導(dǎo)航區(qū)、搜索與篩選區(qū)域、職位列表展示區(qū)、用戶中心及功能入口區(qū)、底部信息區(qū)等五大核心部分組成。
- 頭部導(dǎo)航區(qū)通常包括品牌標(biāo)識、首頁鏈接、各業(yè)務(wù)頻道入口（如校園招聘、獵頭服務(wù)、企業(yè)服務(wù)等），以及登錄/注冊按鈕，為用戶提供便捷的導(dǎo)航跳轉(zhuǎn)和賬戶操作。
- 搜索與篩選區(qū)域是用戶快速定位職位的關(guān)鍵入口，允許用戶輸入關(guān)鍵詞搜索職位，并提供了多種篩選條件，如工作地點(diǎn)、薪資范圍、工作經(jīng)驗(yàn)、公司性質(zhì)、發(fā)布時(shí)間等，便于用戶精細(xì)化查找匹配的工作機(jī)會(huì)。
- 職位列表展示區(qū)是網(wǎng)頁的核心內(nèi)容區(qū)，以列表形式呈現(xiàn)符合條件的職位信息，每個(gè)職位條目包含職位名稱、公司名稱、工作地點(diǎn)、薪資待遇、發(fā)布日期等關(guān)鍵信息，方便用戶快速瀏覽并點(diǎn)擊查看詳情。
- 用戶中心及功能入口區(qū)通常位于頁面右上角或側(cè)邊欄，包含了個(gè)人中心、投遞記錄、收藏職位、簡歷管理等功能入口，幫助已登錄用戶進(jìn)行個(gè)性化管理和操作。
- 底部信息區(qū)則包含了關(guān)于51job網(wǎng)站的各類服務(wù)條款、隱私政策、聯(lián)系方式、合作伙伴鏈接以及其他法律聲明等內(nèi)容，此外還可能提供網(wǎng)站地圖、反饋入口等輔助性服務(wù)鏈接。

2、頁面元素：探索網(wǎng)頁上的關(guān)鍵元素和布局

51job網(wǎng)頁在元素布局上注重用戶體驗(yàn)和交互設(shè)計(jì)，各個(gè)元素根據(jù)功能邏輯有序排列，具有良好的層次感和可讀性。
- 職位卡片：每一個(gè)職位都被設(shè)計(jì)成獨(dú)立的卡片式組件，集成了標(biāo)題、摘要、公司信息、福利標(biāo)簽等多種元素，通過統(tǒng)一的設(shè)計(jì)語言提高信息識別度和吸引力。
- 響應(yīng)式設(shè)計(jì)：為了適應(yīng)不同屏幕尺寸和設(shè)備類型，51job網(wǎng)站采用了響應(yīng)式布局策略，保證在桌面端、移動(dòng)端都能實(shí)現(xiàn)良好的顯示效果。
- 動(dòng)態(tài)加載與分頁機(jī)制：職位列表采用滾動(dòng)加載或分頁加載的方式，確保即使有大量數(shù)據(jù)也能流暢展示，同時(shí)減少初始加載時(shí)的數(shù)據(jù)量。
- 交互控件：例如下拉菜單、復(fù)選框、滑動(dòng)選擇器等，用于實(shí)現(xiàn)復(fù)雜的篩選功能，讓用戶可以高效地定制搜索條件。
- 視覺提示與行為召喚元素：如醒目的“立即申請”、“收藏職位”等按鈕，鼓勵(lì)用戶參與互動(dòng)，促進(jìn)應(yīng)聘過程的轉(zhuǎn)化率提升。
總之，51job網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)充分體現(xiàn)了人性化與實(shí)用性的原則，通過科學(xué)合理的布局和豐富多樣的交互元素，滿足了求職者和招聘方多樣化的需求，構(gòu)建了一套高效便捷的在線招聘平臺(tái)。

（二）HTML頁面結(jié)構(gòu)與標(biāo)簽詳解

1、HTML基礎(chǔ)結(jié)構(gòu)概述

HTML（HyperText Markup Language）是構(gòu)建網(wǎng)頁內(nèi)容的基礎(chǔ)標(biāo)記語言，其基礎(chǔ)結(jié)構(gòu)由一系列標(biāo)簽元素組成。在HTML文檔中，每個(gè)頁面通常以<!DOCTYPE>聲明開始，緊接著是<html>根元素，該元素內(nèi)部包含了兩大部分：<head>和<body>。
<head>部分包含文檔的元數(shù)據(jù)信息，如文檔標(biāo)題（通過<title>標(biāo)簽定義）、字符集設(shè)定、樣式表鏈接（CSS）、腳本文件引用（JavaScript）等，這些內(nèi)容不會(huì)直接呈現(xiàn)在網(wǎng)頁主體區(qū)域，而是用于描述文檔屬性或提供頁面表現(xiàn)所需的資源。
<body>部分則是實(shí)際網(wǎng)頁內(nèi)容的承載區(qū)，包括文本、圖像、鏈接、表格、列表、段落等各種可見元素，如<h1>至<h6>定義標(biāo)題層級，<p>表示段落，<a>定義超鏈接，<img>插入圖片等。通過合理布局和嵌套使用這些標(biāo)簽，可以構(gòu)造出豐富多樣的網(wǎng)頁界面。
總的來說，HTML基礎(chǔ)結(jié)構(gòu)為網(wǎng)頁內(nèi)容的組織提供了清晰的框架，確保了信息的有效傳達(dá)與展現(xiàn)，并且易于被瀏覽器解析渲染，為用戶提供良好的瀏覽體驗(yàn)。

2、常用標(biāo)簽深度解讀

（1）表格標(biāo)簽

<table>是HTML中用于創(chuàng)建和展示表格數(shù)據(jù)的核心標(biāo)簽，它允許開發(fā)者以行與列的形式組織信息，適用于呈現(xiàn)結(jié)構(gòu)化數(shù)據(jù)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo01</title>
		<style>
			td {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 定義一個(gè)基本的表格 -->
		<table border="1" cellpadding="5" align="center">
		  <!-- 表格中的行由<tr>標(biāo)簽定義 -->
		  <tr>
		    <!-- 每個(gè)單元格由<td>標(biāo)簽定義，此處為表頭單元格 -->
		    <th>姓名</th>
		    <th>年齡</th>
		    <th>職業(yè)</th>
		  </tr>
		  
		  <!-- 其他行數(shù)據(jù) -->
		  <tr>
		    <td>張三豐</td>
		    <td>28</td>
		    <td>軟件工程師</td>
		  </tr>
		  <tr>
		    <td>令狐沖</td>
		    <td>30</td>
		    <td>產(chǎn)品經(jīng)理</td>
		  </tr>
		</table>
	</body>
</html>

查看網(wǎng)頁效果
標(biāo)簽說明
- <table>：該標(biāo)簽標(biāo)志著表格的開始和結(jié)束，所有表格相關(guān)的元素（如行、列）都包含在其中。
- <tr>：代表表格的一行數(shù)據(jù)，每個(gè)表格至少有一個(gè)<tr>元素。
- <th>：定義表格的表頭單元格，通常用于放置列標(biāo)題，其默認(rèn)樣式與其他單元格不同，通常加粗且居中顯示。
- <td>：定義標(biāo)準(zhǔn)的數(shù)據(jù)單元格，用于存放表格的實(shí)際內(nèi)容，每行內(nèi)可以有多個(gè)<td>元素來形成多列布局。
添加樣式，讓表格好看點(diǎn)

		<style>
			body {
				font-family: Arial, sans-serif;
			}

			table {
				border-collapse: collapse;
				width: 75%;
				margin: 0 auto;
				background-color: #f2f2f2;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
			}

			th,
			td {
				padding: 10px;
				text-align: center;
				border-bottom: 1px solid #ddd;
			}

			th {
				background-color: #4CAF50;
				color: white;
				font-weight: bold;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}

			tr:nth-child(even) {
				background-color: #e9e9e9;
			}

			tr:hover {
				background-color: #ddd;
			}
		</style>

在上述代碼中，我們對表格進(jìn)行了以下樣式設(shè)置
- 設(shè)置了整個(gè)頁面的基礎(chǔ)字體。
- 調(diào)整了表格寬度、居中顯示、邊框合并和陰影效果。
- 為單元格（td）設(shè)置了內(nèi)邊距、水平居中對齊和下邊框。
- 為表頭單元格（th）添加了背景色、文字顏色、加粗字體以及圓角效果。
- 使用偽類 nth-child(even) 為偶數(shù)行添加了淺灰色背景。
- 當(dāng)鼠標(biāo)懸停在某一行時(shí)，該行會(huì)變?yōu)闇\灰色背景。
查看添加了樣式的表格，是不是覺得漂亮些了？
其他一些輔助性標(biāo)簽
- <thead>：用于包裹表格的表頭部分。
- <tbody>：用于包裹表格的主要體部分，可以有多組。
- <tfoot>：用于包裹表格的頁腳部分，常用于總結(jié)或統(tǒng)計(jì)信息。
- <colgroup>和<col>：用于定義表格列的整體屬性。
通過這些標(biāo)簽的靈活組合和應(yīng)用，可以根據(jù)需求創(chuàng)建出各種復(fù)雜度的表格結(jié)構(gòu)，并通過CSS進(jìn)一步美化和定制表格樣式。
知名網(wǎng)站在設(shè)計(jì)和展示數(shù)據(jù)時(shí)，廣泛使用HTML表格標(biāo)簽來布局信息。表格是網(wǎng)頁內(nèi)容中組織結(jié)構(gòu)化數(shù)據(jù)的常用手段，尤其適合于呈現(xiàn)多行多列的數(shù)據(jù)集，如財(cái)務(wù)報(bào)告、產(chǎn)品列表、統(tǒng)計(jì)資料等。
一些常見情況下表格標(biāo)簽在知名網(wǎng)站上的應(yīng)用
1. 新聞網(wǎng)站：財(cái)經(jīng)頻道可能會(huì)用表格展示股票價(jià)格、交易量等金融數(shù)據(jù)。
2. 電子商務(wù)平臺(tái)（如Amazon、eBay）：商品詳情頁面會(huì)使用表格列出產(chǎn)品的各項(xiàng)規(guī)格和技術(shù)參數(shù)。
3. 社交媒體（如Twitter、LinkedIn）：雖然不常使用傳統(tǒng)的表格形式，但在某些功能上例如數(shù)據(jù)分析或用戶管理后臺(tái)可能有表格展示。
4. 維基百科：在條目中用于羅列分類、時(shí)間線、對比數(shù)據(jù)等信息。
5. 政府與教育機(jī)構(gòu)：發(fā)布統(tǒng)計(jì)數(shù)據(jù)、課程表或者考試成績時(shí)，表格是必不可少的元素。
6. 企業(yè)官方網(wǎng)站：展示產(chǎn)品目錄、服務(wù)定價(jià)、功能對比等信息時(shí)使用表格以便清晰對照閱讀。
現(xiàn)代網(wǎng)頁設(shè)計(jì)中，為了響應(yīng)式布局和更好的用戶體驗(yàn)，往往會(huì)結(jié)合CSS來靈活控制表格樣式，并確保在不同設(shè)備上都能良好顯示。同時(shí)，對于大量數(shù)據(jù)的處理，開發(fā)者還可能采用更先進(jìn)的數(shù)據(jù)展示組件或庫，比如基于JavaScript的數(shù)據(jù)表格插件（如Bootstrap Table, DataTables, ag-Grid等）。
新浪財(cái)經(jīng)股票首頁（https://finance.sina.com.cn/stock/）里就有表格標(biāo)簽的示例
提取表格部分代碼，沒有樣式，創(chuàng)建網(wǎng)頁demo02.html
查看網(wǎng)頁效果，就是一行表格，沒有邊框線
我們定義表格樣式文章來源地址http://www.zghlxwxcb.cn/news/detail-801963.html

		<style>
			/* 定義表格基礎(chǔ)樣式 */
			.tab01 {
				border-collapse: collapse;
				width: 100%;
				margin: 0 auto;
				background-color: #f5f5f5;
				font-family: Arial, sans-serif;
				text-align: center;
			}

			/* 定義表格行樣式 */
			.tab01 tr {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ddd;
			}

			/* 定義表格鏈接單元格樣式 */
			.tab01 td a {
				display: block;
				color: #333;
				text-decoration: none;
				padding: 0 15px;
			}

			/* 鼠標(biāo)懸停時(shí)的鏈接樣式 */
			.tab01 td a:hover {
				background-color: #e0e0e0;
			}

			/* 當(dāng)前激活的標(biāo)簽樣式 */
			.tab01 .active {
				background-color: #007bff;
				color: white;
			}

			/* 環(huán)球市場特殊鏈接樣式 */
			.tab01 td:last-child a {
				background-color: #007bff;
				color: white;
				border-radius: 0 4px 4px 0;
				cursor: pointer;
			}
		</style>

這段CSS樣式定義了表格 .tab01 的背景色、邊框和居中顯示，并對表格內(nèi)的鏈接進(jìn)行了樣式處理，包括鼠標(biāo)懸停時(shí)的效果和激活狀態(tài)的顏色。同時(shí)，它還為“環(huán)球市場”的特殊鏈接設(shè)置了不同的樣式以區(qū)別于其他標(biāo)簽按鈕。
新浪財(cái)經(jīng)港股頁面有多行表格示例
提取表格源碼，沒有樣式，創(chuàng)建網(wǎng)頁demo02_2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo02_2</title>
	</head>
	<body>
		<table class="hq-table01">
			<tbody class="hq-tbody01">
				<tr data-stock="hk_hk00700" data-code="00700" data-market="hk" data-type="hk">
					<td class="name"><a title="騰訊控股" href="http://stock.finance.sina.com.cn/hkstock/quotes/00700.html"
							target="_blank">騰訊控股</a></td>
					<td class="percent"> <span data-percent="" class="up">1.040%</span> </td>
					<td class="price"> <span data-price="" class="up">291.400</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="00700"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=00700" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk01810" data-code="01810" data-market="hk" data-type="hk">
					<td class="name"><a title="小米集團(tuán)－Ｗ" href="http://stock.finance.sina.com.cn/hkstock/quotes/01810.html"
							target="_blank">小米集團(tuán)－Ｗ</a></td>
					<td class="percent"> <span data-percent="" class="down up">0.559%</span> </td>
					<td class="price"> <span data-price="" class="down up">14.380</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="01810"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=01810" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk09988" data-code="09988" data-market="hk" data-type="hk">
					<td class="name"><a title="阿里巴巴－ＳＷ"
							href="http://stock.finance.sina.com.cn/hkstock/quotes/09988.html"
							target="_blank">阿里巴巴－ＳＷ</a></td>
					<td class="percent"> <span data-percent="" class="down">-0.213%</span> </td>
					<td class="price"> <span data-price="" class="down">70.400</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="09988"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=09988" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk03690" data-code="03690" data-market="hk" data-type="hk">
					<td class="name"><a title="美團(tuán)－Ｗ" href="http://stock.finance.sina.com.cn/hkstock/quotes/03690.html"
							target="_blank">美團(tuán)－Ｗ</a></td>
					<td class="percent"> <span data-percent="" class="down up">0.066%</span> </td>
					<td class="price"> <span data-price="" class="down up">75.300</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="03690"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=03690" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk02269" data-code="02269" data-market="hk" data-type="hk">
					<td class="name"><a title="藥明生物" href="http://stock.finance.sina.com.cn/hkstock/quotes/02269.html"
							target="_blank">藥明生物</a></td>
					<td class="percent"> <span data-percent="" class="up">5.932%</span> </td>
					<td class="price"> <span data-price="" class="up">31.250</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="02269"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=02269" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk01797" data-code="01797" data-market="hk" data-type="hk">
					<td class="name"><a title="東方甄選" href="http://stock.finance.sina.com.cn/hkstock/quotes/01797.html"
							target="_blank">東方甄選</a></td>
					<td class="percent"> <span data-percent="" class="down">-0.546%</span> </td>
					<td class="price"> <span data-price="" class="down">27.350</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="01797"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=01797" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk00981" data-code="00981" data-market="hk" data-type="hk">
					<td class="name"><a title="中芯國際" href="http://stock.finance.sina.com.cn/hkstock/quotes/00981.html"
							target="_blank">中芯國際</a></td>
					<td class="percent"> <span data-percent="" class="down">0.000%</span> </td>
					<td class="price"> <span data-price="" class="down">17.360</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="00981"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=00981" target="_blank">吧</a> </td>
				</tr>
				<tr data-stock="hk_hk02318" data-code="02318" data-market="hk" data-type="hk">
					<td class="name"><a title="中國平安" href="http://stock.finance.sina.com.cn/hkstock/quotes/02318.html"
							target="_blank">中國平安</a></td>
					<td class="percent"> <span data-percent="" class="down">0.000%</span> </td>
					<td class="price"> <span data-price="" class="down">32.700</span> </td>
					<td class="icon"> <a class="ba" data-event="hkStock|add" data-scode="02318"
							href="javascript:void(0)">+</a> <a class="ba"
							href="http://guba.sina.com.cn/?s=bar&amp;name=02318" target="_blank">吧</a> </td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

查看網(wǎng)頁效果，有興趣的讀者不妨給它加個(gè)好看的樣式
拓展練習(xí)，制作如下圖所示的表格

（2）列表標(biāo)簽

列表標(biāo)簽在HTML中用于組織有序或無序的內(nèi)容集合，主要包括<ul>（unordered list - 無序列表）和<ol>（ordered list - 有序列表），以及<li>（list item - 列表項(xiàng)）子標(biāo)簽。它們可創(chuàng)建具有項(xiàng)目符號或編號的列表結(jié)構(gòu)，常用于展示菜單、步驟說明、數(shù)據(jù)列舉等場景。

a. 無序列表

無序列表在HTML中由<ul>標(biāo)簽定義，其內(nèi)部包含一系列用<li>標(biāo)簽標(biāo)識的列表項(xiàng)，瀏覽器默認(rèn)為每個(gè)列表項(xiàng)添加項(xiàng)目符號（如圓點(diǎn)、方塊等），用于呈現(xiàn)無特定順序關(guān)系的信息集合。
在這個(gè)示例中，<ul>標(biāo)簽定義了一個(gè)無序列表，其中包含了三個(gè)由<li>標(biāo)簽標(biāo)識的列表項(xiàng)：蘋果、香蕉和橙子。瀏覽器會(huì)自動(dòng)在每個(gè)列表項(xiàng)前添加一個(gè)默認(rèn)項(xiàng)目符號（通常是一個(gè)圓點(diǎn)），展示出一個(gè)沒有特定順序關(guān)系的水果列表。

b. 有序列表

有序列表在HTML中由<ol>標(biāo)簽定義，其內(nèi)部同樣包含一系列用<li>標(biāo)簽標(biāo)識的列表項(xiàng)，但瀏覽器會(huì)自動(dòng)為每個(gè)列表項(xiàng)添加遞增編號（如數(shù)字、字母等），以呈現(xiàn)具有明確順序關(guān)系的信息集合。
在這個(gè)示例中，<ol>標(biāo)簽創(chuàng)建了一個(gè)有序列表，列舉了早晨起床后的三個(gè)步驟，并且瀏覽器會(huì)給每個(gè)步驟自動(dòng)加上序號。

（3）超鏈接標(biāo)簽

超鏈接標(biāo)簽<a>在HTML中用于創(chuàng)建指向其他網(wǎng)頁、文件或特定位置的鏈接。通過href屬性定義目標(biāo)URL，用戶點(diǎn)擊后可跳轉(zhuǎn)至指定資源。
在這個(gè)示例中，文本“歡迎訪問瀘州職業(yè)技術(shù)學(xué)院官網(wǎng)”被超鏈接標(biāo)簽<a>包裹，點(diǎn)擊時(shí)會(huì)跳轉(zhuǎn)到"https://www.lzy.edu.cn"網(wǎng)址。

（4）容器標(biāo)簽

<div>標(biāo)簽在HTML中作為通用容器元素，用于組合、組織和布局文檔中的內(nèi)容。它本身不具備樣式，但可通過CSS對內(nèi)部元素進(jìn)行分組、定位和樣式設(shè)置，實(shí)現(xiàn)靈活的頁面布局結(jié)構(gòu)。
新浪財(cái)經(jīng)首頁就有<div>標(biāo)簽示例
提取容器代碼，沒有樣式，創(chuàng)建網(wǎng)頁demo06.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo06 - 容器標(biāo)簽</title>
	</head>
	<body>
		<div class="m-p1r-blk2" data-sudaclick="blk_yjlx_01_3">
			<ul id="directAd_gongjiu_id" class="m-r-list m-r-list-brown">
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=6187306105" target="_blank">姜兆華</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-15/zl-inacqkhh5938852.shtml"
						target="_blank">拿什么拯救房地產(chǎn)？</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1765859735" target="_blank">程實(shí)</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-15/zl-inacqcyk6052440.shtml"
						target="_blank">經(jīng)濟(jì)拐點(diǎn)與貨幣變局</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=2165803434" target="_blank">靳毅</a>：<a
						href="http://finance.sina.com.cn/zl/bank/2024-01-15/zl-inacqcym8958052.shtml"
						target="_blank">一季度，利率債供給如何？</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=5119678266" target="_blank">管濤</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-15/zl-inacqcyi8269009.shtml"
						target="_blank">對美國M2負(fù)增長不宜過度解讀</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1584104532933" target="_blank">金李</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-15/zl-inacqcyp5734381.shtml"
						target="_blank">財(cái)富管理如何助力共同富裕？</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1705952971" target="_blank">張瑜</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-15/zl-inacqcyi8267864.shtml"
						target="_blank">出口價(jià)格何時(shí)能回升？</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=2096408413" target="_blank">連平</a>：<a
						href="https://finance.sina.cn/zl/2024-01-13/zl-inackhse0275291.d.html"
						target="_blank">2023年寬信用力度維持高位</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1642557103030" target="_blank">蔣飛</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-13/zl-inackakc0756883.shtml"
						target="_blank">出口谷底已經(jīng)過去</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1661504227" target="_blank">楊德龍</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-13/zl-inackaiy1058030.shtml"
						target="_blank">布局優(yōu)質(zhì)龍頭股正當(dāng)其時(shí)</a>
				</li>
				<li>
					<a href="http://finance.sina.com.cn/zl/author.d.html?uid=1584104532933" target="_blank">張曉燕</a>：<a
						href="http://finance.sina.com.cn/zl/china/2024-01-13/zl-inackakc0756166.shtml"
						target="_blank">如何解決科技創(chuàng)新融資難題</a>
				</li>
				<li><a target="_blank" href="https://tzxy.sina.com.cn/content"
						suda-uatrack="key=touzixueyuan&amp;value=cjpcpt_op_lt1">東方紅陳晨</a>：<a target="_blank"
						href="https://tzxy.sina.com.cn/video/1877471117/154380"
						suda-uatrack="key=touzixueyuan&amp;value=cjpcpt_op_lt1">0114周評解讀視頻</a></li>
			</ul>
		</div>
	</body>
</html>

查看網(wǎng)頁效果

（三）以51job網(wǎng)站為例分析HTML結(jié)構(gòu)

具體案例：識別51job頁面中的關(guān)鍵HTML元素

三、實(shí)戰(zhàn)目標(biāo)設(shè)定及抓取策略

1. 目標(biāo)明確

確定具體要抓取的數(shù)據(jù)

2. 抓取策略制定

如何識別和抓取目標(biāo)數(shù)據(jù)
使用的工具和技術(shù)

四、總結(jié)與展望

總結(jié)講稿內(nèi)容
展望可能的進(jìn)一步優(yōu)化和深入研究方向

到了這里，關(guān)于探尋爬蟲世界01：HTML頁面結(jié)構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

運(yùn)用Python解析HTML頁面獲取資料
在網(wǎng)絡(luò)爬蟲的應(yīng)用中，我們經(jīng)常需要從HTML頁面中提取圖片、音頻和文字資源。本文將介紹如何使用Python的requests庫和BeautifulSoup解析HTML頁面，獲取這些資源。一、環(huán)境準(zhǔn)備首先，確保您已經(jīng)安裝了Python環(huán)境。接下來，我們需要安裝以下庫： requests ：用于發(fā)送HTTP請求 Beautifu
2024年02月11日
瀏覽(16)
Python爬蟲——BeautifulSoup，獲取HTML中文檔，標(biāo)簽等內(nèi)容
將復(fù)雜的HTML文檔轉(zhuǎn)換成一個(gè)復(fù)雜的樹形結(jié)構(gòu)，每個(gè)結(jié)點(diǎn)都是一個(gè)Python對象，所有對象可以分為四種： Tag NavigableString BeautifulSoup Comment 首先要引入該函數(shù)，再打開相應(yīng)的html文件讀取其中的內(nèi)容，在使用BeautiSoup對其進(jìn)行解析，解析的時(shí)候要使用相應(yīng)類型的解析器html.parser bs當(dāng)中
2024年02月06日
瀏覽(28)
【Python爬蟲開發(fā)基礎(chǔ)⑤】HTML概述與基本標(biāo)簽詳解
專欄：python網(wǎng)絡(luò)爬蟲從基礎(chǔ)到實(shí)戰(zhàn) 歡迎訂閱！近期還會(huì)不斷更新~ 往期推薦：【Python爬蟲開發(fā)基礎(chǔ)①】Python基礎(chǔ)（變量及其命名規(guī)范）【Python爬蟲開發(fā)基礎(chǔ)②】Python基礎(chǔ)（正則表達(dá)式）【Python爬蟲開發(fā)基礎(chǔ)③】Python基礎(chǔ)（文件操作方法匯總）【Python爬蟲開發(fā)基礎(chǔ)④】爬蟲
2024年02月09日
瀏覽(36)
Python爬蟲技術(shù)系列-02HTML解析-BS4
參考連接： https://beautifulsoup.readthedocs.io/zh_CN/v4.4.0/# http://c.biancheng.net/python_spider/bs4.html 2.1.1 Beautiful Soup安裝 Beautiful Soup 簡稱 BS4（其中 4 表示版本號）是一個(gè) Python 第三方庫，它可以從 HTML 或 XML 文檔中快速地提取指定的數(shù)據(jù)。Beautiful Soup 語法簡單，使用方便，并且容易理解，
2024年02月05日
瀏覽(36)
第一個(gè)Python程序_獲取網(wǎng)頁 HTML 信息[Python爬蟲學(xué)習(xí)筆記]
使用 Python 內(nèi)置的 urllib 庫獲取網(wǎng)頁的 html 信息。注意，urllib 庫屬于 Python 的標(biāo)準(zhǔn)庫模塊，無須單獨(dú)安裝，它是 Python 爬蟲的常用模塊。 1) 獲取響應(yīng)對象向百度（http://www.baidu.com/）發(fā)起請求，獲取百度首頁的 HTML 信息，代碼如下：上述代碼會(huì)返回百度首頁的響應(yīng)對象，其中
2024年01月17日
瀏覽(21)
Python爬蟲技術(shù)系列-02HTML解析-xpath與lxml
參考連接： XPath教程 https://www.w3school.com.cn/xpath/index.asp lxml文檔 https://lxml.de/index.html#support-the-project 爬蟲專欄 https://blog.csdn.net/m0_38139250/category_12001010.html XPath的中文名稱為XML路徑語言（XML Path Language），其最初的設(shè)計(jì)是用來搜索 XML 文檔，但也適用于HTML文檔搜索。1996年11月，
2024年02月07日
瀏覽(20)
04 python38的scrapy和selenium處理異步加載的動(dòng)態(tài)html頁面
1.4.1 taobao_login.py模擬登陸生成cookies.json 1.4.2 taobao_login_after.py淘寶登陸后測試修改下載中間件配置 1.6.1 添加數(shù)據(jù)模型 1.6.2 修改爬蟲代碼 1.6.3 測試運(yùn)行爬蟲
2024年02月06日
瀏覽(26)
【HTML】-- 01 初識HTML
Hyper Text Markup Language：超文本標(biāo)記語言 1.1 W3C標(biāo)準(zhǔn) W3C World Wide Web Consortium(萬維網(wǎng)聯(lián)盟) 成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和最具影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu) http://www.w3.org/ http://www.chinaw3c.org/ W3C標(biāo)準(zhǔn)包括：結(jié)構(gòu) 化標(biāo)準(zhǔn)語言(HTML、XML) 表現(xiàn) 標(biāo)準(zhǔn)語言(CSS) 行為標(biāo)準(zhǔn)(DOM、ECMAScr
2024年01月18日
瀏覽(18)
HTML世界之標(biāo)簽Ⅲ
dfn 標(biāo)簽是一個(gè)短語標(biāo)簽，用來定義一個(gè)定義項(xiàng)目。寫法： dfn/dfn dialog 標(biāo)簽定義一個(gè)對話框、確認(rèn)框或窗口。屬性值描述 open open 規(guī)定 dialog 元素是有效的，用戶可以與它進(jìn)行交互。寫法：? dialog open/dialog em 標(biāo)簽是一個(gè)短語標(biāo)簽，用來呈現(xiàn)為被強(qiáng)調(diào)的文本。寫法： em/em f
2024年04月26日
瀏覽(13)
HTML世界核心
目錄一、基本文檔（Basic Documentation) 二、基本標(biāo)簽（Basic Tags）三、文本格式化（Formatting）四、鏈接（Links）五、圖片（Images）六、樣式/區(qū)塊（Styles/Sections）七、無序列表（Disorder List）八、有序列表（Sequence List）九、定義列表（Defining List）十、表格（Tables）十一、框
2024年02月22日
瀏覽(8)

<option id="xqnz6"><pre id="xqnz6"><center id="xqnz6"></center></pre></option>