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