大数据爬虫前奏之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(函数