大数据爬虫前奏之Html和Css学习
Html十分鐘入門
在整個大數(shù)據(jù)技術(shù)分層中,數(shù)據(jù)來源之一就是爬蟲。而想要爬取更多數(shù)據(jù),對Web的學(xué)習(xí)必不可少。
Web知識主要分三大類,Html和Css、JavaScript、框架。
今天主要講關(guān)于Html的知識
1.Html是什么?
HTML全名是超文本標(biāo)記語言,Hyper Text Markup Language。它是一門語言,用于文本,其中標(biāo)記是它的基礎(chǔ)。后續(xù)大家就可以看到Html主要是各類標(biāo)記元素嵌套來展示數(shù)據(jù)。
本身它也有自己的格式,后綴以.hml .htm結(jié)束的就是html頁面,大家打開瀏覽器,ctl+s,保存的就是打開網(wǎng)頁的html文件。
2.Html怎么用?
<!-- 這是注釋,DOCTYPE 標(biāo)明這個文件是html格式的 --> <!DOCTYPE html> <html><!-- z這個是html的head--頭部分,我們看到的網(wǎng)頁頂部的標(biāo)題等信息就是在這里設(shè)置我們的script腳本如js,如果以文件形式抽離為單獨文件,引入的代碼就是寫在這里 --><head><meta charset="UTF-8"><title></title></head><!-- 這里是html的體--body部分,一般我們網(wǎng)頁中需要展示的各種信息就是以標(biāo)簽元素形式嵌套或者并列方式展現(xiàn)在這里,我們的script腳本如果很簡短,也可以寫在這里這里其實已經(jīng)可以看出,它和xml很相似,都是一對一對的標(biāo)簽中添加信息,也可以嵌套.當(dāng)然也可以不使用一對一對如<br/>,斜杠表示這個元素已經(jīng)結(jié)束,一對一對則方便在其中做嵌套使用--><body></body> </html>2.1排版標(biāo)簽
顯而易見,注釋標(biāo)簽,作為一門編程語言,注釋是一定需要的。雖然這門語言只是用來標(biāo)記,并且展示信息的,但注釋功能也必不可少。
paragraph,英文單詞段落的意思。這里的p就是指的段落,瀏覽器解析時會自動在段落前后加空格
line break就是換行的意思,這里br取break的前2個字母。我們排版時,肯定會需要換行,這個時候就可以用上這個標(biāo)簽
Horizontal divider水平分割線,這里取hr,水平單詞縮寫意思。同樣的,我們要做排版,水平分割線也是必不可少的。
ps:
2.2塊標(biāo)簽
用于在文檔中設(shè)定一個區(qū)塊,類似一個大的容器一樣,里面可以放各種具體展示信息的標(biāo)簽元素。這樣一來如果要做大塊大塊的布局,則直接調(diào)整不同div之間的布局就可以做到。
這個可以在一行之內(nèi)設(shè)定一個塊區(qū)域
顧名思義,這個就是設(shè)置字體相關(guān)信息,如大小,顏色,字體類型等信息的標(biāo)簽元素,可以嵌套其他的,但一般都是嵌套文字信息
最多有6級標(biāo)題,大家如果聯(lián)想到mark down語法,沒錯,mark down就是脫胎于html標(biāo)記語言的,不過做了更多簡化,但千絲萬縷,斬之不斷。
2.3列表標(biāo)簽
無序列表,常見type就是無序列表前面的圖形,有square、disc、circle
有序列表,就是每一個子行都有一個自動添加的數(shù)字
列表中的每一行
2.4圖片標(biāo)簽
經(jīng)常說的圖文并茂,作為描述文本為主的標(biāo)記性語言,圖片肯定不可或缺。
<img src="本地或者網(wǎng)絡(luò)路徑" style="width:100px; height:100px;"/>ps:
最新的瀏覽器等已經(jīng)不再支持直接讀取硬盤中的圖片文件路徑,所以需要測試,要把圖片資源拷貝到自己的web項目中進(jìn)行訪問
2.5鏈接標(biāo)簽
a,就是表示一個連接,屬性設(shè)置就是href,可以看錯是hyper reference link
<a href="//www.baidu.com/">簡單教程 </a>2.6表格標(biāo)簽
表格,table
<table border="1"><caption>表格標(biāo)題</caption><th>表頭1</th><th>表頭2</th><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>2.7表單標(biāo)簽
表單,form
<form>圣墟: <input type="text" name="不詳"><br>我的師兄太穩(wěn)健了: <input type="text" name="穩(wěn)教"></form>
ps:
2.8select和option標(biāo)簽
select就是一個下拉自定義的表格,option則是每個自定義選項的元素。
<select><option value="神船筆記本">神舟</option><option value="藍(lán)天模具筆記本">藍(lán)天自定義</option><option value="敗家之眼筆記本">華碩</option><option value="外星人貴筆記本">戴爾</option></select>3.Html有什么優(yōu)點和不足
html優(yōu)點,簡潔明了,使用標(biāo)記來展示出不同文本類型和數(shù)據(jù)。對比如word、ppt、excel等格式要輕量很多很多,也利于網(wǎng)絡(luò)傳輸和解析讀取。最早期的互聯(lián)網(wǎng)的硬件和網(wǎng)絡(luò)都能很好承載。
html不足,從自身體驗來看,還是顯得有些臃腫,出現(xiàn)錯誤定位對比編譯性的編程語言也比較麻煩。如果一個復(fù)雜網(wǎng)頁,html文件一般會顯得相對龐大.
具體可以看一下京東首頁的html文件,進(jìn)入瀏覽器之后,ctrl + s,保存的就是html頁面文件,大家可以看一下層級是非常深的,額比較復(fù)雜。所以淘寶,京東都已經(jīng)開發(fā)出無人化的html頁面生成技術(shù)來提升維護(hù)效率。
京東首頁
4.Html的設(shè)計思路和出發(fā)點
本質(zhì)其實就是使用標(biāo)記來區(qū)分各種類型的展示元素,并且允許嵌套,這樣就可以帶來非常豐富的樣式變種。至于每個元素則使用不同的屬性如style等來修飾,整體非常輕量級,利于使用瀏覽器引擎解析和渲染。
從整體來看,當(dāng)時設(shè)計時,可能并沒有設(shè)想到隨著現(xiàn)實業(yè)務(wù)發(fā)展,html網(wǎng)頁會變得比互聯(lián)網(wǎng)初期時復(fù)雜那么多,這樣也使得瀏覽器的引擎必須持續(xù)迭代來保證渲染性能和體驗。
總結(jié)
以上是生活随笔為你收集整理的大数据爬虫前奏之Html和Css学习的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql两张主表person even
- 下一篇: python全栈学习--day12(函数