課堂作業(yè)要求
- 選擇簡書“解密大數(shù)據(jù)”專題里面上次爬蟲課的作業(yè)文檔地址作為分析頁面
- 分析并提交該頁面的網(wǎng)頁結(jié)構(gòu)分析與元素標(biāo)簽位置信息
作業(yè)內(nèi)容
網(wǎng)頁地址：http://www.lxweimin.com/p/88d0addf64fa
瀏覽器：Chrome
HTML 基礎(chǔ)
對html有一定基礎(chǔ)，但有些元素不太熟悉，瀏覽頁面源碼時，摘錄學(xué)習(xí)了下：
- <!DOCTYPE>: 聲明文檔的類型，以便瀏覽器知道如何顯示該文檔。非Html標(biāo)簽。簡書的聲明是這樣的：<!DOCTYPE html>，表示網(wǎng)頁至少升級到[HTML5]的第一步。(http://www.w3school.com.cn/html/html5_intro.asp)。
- HTML <meta> 標(biāo)簽：存放描述文檔的元信息，比如作者、關(guān)鍵字、文檔類型、編碼等。簡書的編碼：<meta charset="utf-8">，支持各種語言顯示。
頁面結(jié)構(gòu)
這個頁面由三大部分組成：
頂部導(dǎo)航欄
包含簡書的一些基本功能元素，以及用戶信息文章入口正文
包含文章正文，作者及支持部分，作者與讀者互動評論部分，以及頁邊欄底部
包含簡書的一些推薦內(nèi)容
圖片.png
頁面標(biāo)簽位置
根據(jù)頁面三大部分，在chrome中通過開發(fā)者工具，查看各部分對應(yīng)源碼，分析各頁面元素位置：
所有的頁面內(nèi)容均包含在 <body lang="zh-CN" class="reader-black-font">
圖片.png
- 頂部導(dǎo)航欄
可根據(jù)class屬性“navbar navbar-default navbar-fixed-top”獲取。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
如要找到用戶標(biāo)簽，可通過下面高亮的路徑。
- 正文
所有內(nèi)容均在<div class="note">標(biāo)簽內(nèi)
圖片.png
- 底部
所有內(nèi)容均在<div class="note-bottom">內(nèi)
全局圖：
圖片.png
