整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
可以看到內(nèi)聯(lián)樣式（通過(guò)元素中 style 屬性定義的樣式）的優(yōu)先級(jí)大于任何選擇器；而給屬性值加上 !important 又可以把優(yōu)先級(jí)提至最高，就是因?yàn)樗膬?yōu)先級(jí)最高，所以需要謹(jǐn)慎使用它，以下有些使用注意事項(xiàng)：
字體相關(guān)：font-family、font-style、font-size、font-weight 等；
文本相關(guān)：text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等；
列表相關(guān)：list-style、list-style-image、list-style-type、list-style-position 等；
其他屬性：visibility、cursor 等；
對(duì)于其他默認(rèn)不繼承的屬性也可以通過(guò)以下幾個(gè)屬性值來(lái)控制繼承行為：
inherit：繼承父元素對(duì)應(yīng)屬性的計(jì)算值；
initial：應(yīng)用該屬性的默認(rèn)值，比如 color 的默認(rèn)值是 #000；
unset：如果屬性是默認(rèn)可以繼承的，則取 inherit 的效果，否則同 initial；
revert：效果等同于 unset，兼容性差。
在 CSS 中任何元素都可以看成是一個(gè)盒子，而一個(gè)盒子是由 4 部分組成的：內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。盒模型有 2 種：標(biāo)準(zhǔn)盒模型和 IE 盒模型，本別是由 W3C 和 IExplore 制定的標(biāo)準(zhǔn)。
如果給元素設(shè)置如下樣式:
.box {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid #eee;
margin: 10px;
}
標(biāo)準(zhǔn)盒模型認(rèn)為:盒子的實(shí)際尺寸 = 內(nèi)容（設(shè)置的寬/高） + 內(nèi)邊距 + 邊框
所以 .box 元素內(nèi)容的寬度就為 200px，而實(shí)際的寬度則是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。
IE 盒模型認(rèn)為：盒子的實(shí)際尺寸 = 設(shè)置的寬/高 = 內(nèi)容 + 內(nèi)邊距 + 邊框
.box 元素所占用的實(shí)際寬度為 200px，而內(nèi)容的真實(shí)寬度則是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。
現(xiàn)在高版本的瀏覽器基本上默認(rèn)都是使用標(biāo)準(zhǔn)盒模型，而像 IE6 這種老古董才是默認(rèn)使用 IE 盒模型的。
在 CSS3 中新增了一個(gè)屬性 box-sizing，允許開發(fā)者來(lái)指定盒子使用什么標(biāo)準(zhǔn)，它有 2 個(gè)值：
格式化上下文（Formatting Context）是 CSS2.1 規(guī)范中的一個(gè)概念，大概說(shuō)的是頁(yè)面中的一塊渲染區(qū)域，規(guī)定了渲染區(qū)域內(nèi)部的子元素是如何排版以及相互作用的。
概念：塊格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，只有塊級(jí)盒子參與，它規(guī)定了內(nèi)部的塊級(jí)盒子如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC的應(yīng)用場(chǎng)景有代碼
以上內(nèi)容參考c s s原理-[Formatting Context]
IFC 的形成條件非常簡(jiǎn)單，塊級(jí)元素中僅包含內(nèi)聯(lián)級(jí)別元素，需要注意的是當(dāng)IFC中有塊級(jí)元素插入時(shí)，會(huì)產(chǎn)生兩個(gè)匿名塊將父元素分割開來(lái)，產(chǎn)生兩個(gè) IFC。
就是flex布局這里就不多介紹了請(qǐng)看阮一峰的文章f le x 布局
內(nèi)容過(guò)多建議查看阮一峰的文章Grid 網(wǎng)格布局教程
其實(shí)屏幕分辨率是指在屏幕的橫縱方向上的像素點(diǎn)數(shù)量，比如分辨率 1920×1080 意味著水平方向含有 1920 個(gè)像素?cái)?shù)，垂直方向含有 1080 個(gè)像素?cái)?shù)。px表示css像素，在css中是絕對(duì)的長(zhǎng)度單位,也是基礎(chǔ)單位，其他長(zhǎng)度單位會(huì)被瀏覽器換算成px。但是對(duì)于設(shè)備而言p x又是相對(duì)單位，比如說(shuō)寬高為2px正常屏幕下，其實(shí)就是4個(gè)像素點(diǎn)，而在設(shè)備像素比(devicePixelRatio) 為 2 的 Retina 屏幕下，它就有 16 個(gè)像素點(diǎn)。所以屏幕尺寸一致的情況下，屏幕分辨率越高，顯示效果就越細(xì)膩。
em 是 CSS 中x相對(duì)的長(zhǎng)度單位。
em計(jì)算的時(shí)候會(huì)層層計(jì)算:比如
<div>
<p></p>
</div>
div { font-size: 2em; }
p { font-size: 2em; }
對(duì)于上面的例子 由于html 的字體大小是16px,所以p標(biāo)簽最終計(jì)算出來(lái)后的字體大小是 16 * 2 * 2 = 64px
rem(root em) 和em一樣也是相對(duì)長(zhǎng)度單位，不過(guò)rem 相對(duì)的是html 根元素的font-size 值。
rem 由于是基于 html 的 font-size 來(lái)計(jì)算，所以通常用于自適應(yīng)網(wǎng)站或者 H5 中。
比如在做 H5 的時(shí)候，前端通常會(huì)讓 UI 給 750px 寬的設(shè)計(jì)圖，而在開發(fā)的時(shí)候可以基于 iPhone X 的尺寸 375px * 812px 來(lái)寫頁(yè)面，這樣一來(lái)的話，就可以用下面的 JS 依據(jù)當(dāng)前頁(yè)面的視口寬度自動(dòng)計(jì)算出根元素 html 的基準(zhǔn) font-size 是多少。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth = 750, // 設(shè)計(jì)圖寬度
recalc = function () {
var clientWidth = docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >= 640 ) {
docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 綁定事件的時(shí)候最好配合防抖函數(shù)
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
比如當(dāng)視口是 375px 的時(shí)候，經(jīng)過(guò)計(jì)算 html 的 font-size 會(huì)是 100px，這樣有什么好處呢？好處就是方便寫樣式，比如從設(shè)計(jì)圖量出來(lái)的 header 高度是 50px 的，那我們寫樣式的時(shí)候就可以直接寫：
header {
height: 0.5rem;
}
相對(duì)視口的單位，除了 vw/vh 外，還有 vmin 和 vmax：
image-20211118100339533
Retina 顯示屏比普通的屏幕有著更高的分辨率，所以在移動(dòng)端的 1px 邊框就會(huì)看起來(lái)比較粗，為了美觀通常需要把這個(gè)線條細(xì)化處理。
最完美的解決方案:媒體查詢+偽類+ transform 實(shí)現(xiàn)
.scale-1px-bottom {
position: relative;
border:none;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.scale-1px-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
}
同時(shí)設(shè)置4個(gè)方向的邊框線 寫在項(xiàng)目里自己要添加關(guān)于媒體查詢的內(nèi)容喲
.scale-1px {
position: relative;
margin-bottom: 20px;
border:none;
}
.scale-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
浮動(dòng)概念: 浮動(dòng)元素會(huì)脫離文檔流并向左/向右浮動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素。
需要清除浮動(dòng)的原因，它造成的問(wèn)題？
因?yàn)楦?dòng)元素會(huì)脫離正常的文檔流，并不會(huì)占據(jù)文檔流的位置，所以如果一個(gè)父元素下面都是浮動(dòng)元素，那么這個(gè)父元素就無(wú)法被浮動(dòng)元素所撐開，這樣一來(lái)父元素就丟失了高度，這就是所謂的浮動(dòng)造成的父元素高度坍塌問(wèn)題。
父元素高度一旦坍塌將對(duì)后面的元素布局造成影響，為了解決這個(gè)問(wèn)題，所以需要清除浮動(dòng)，讓父元素恢復(fù)高度，那該如何做呢？
清除浮動(dòng)的兩種方式：1BFC 清除浮動(dòng)，2.clear清除浮動(dòng)
原理： 計(jì)算BFC元素的高度的時(shí)候浮動(dòng)的子元素的高度也會(huì)計(jì)算在內(nèi)，就是利用這條規(guī)則清除浮動(dòng)的。
假設(shè)一個(gè)父元素 parent 內(nèi)部只有 2 個(gè)人元素 child，且它們都是左浮動(dòng)的，這個(gè)時(shí)候 parent 如果沒(méi)有設(shè)置高度的話，因?yàn)楦?dòng)造成了高度坍塌，所以 parent 的高度會(huì)是 0，此時(shí)只要給 parent 創(chuàng)造一個(gè) BFC，那它的高度就能恢復(fù)了。
而產(chǎn)生 BFC 的方式很多，我們可以給父元素設(shè)置overflow: auto 來(lái)簡(jiǎn)單的實(shí)現(xiàn) BFC 清除浮動(dòng)，但是為了兼容 IE 最好用 overflow: hidden。
.parent {
overflow: hidden;
}
.clearfix { // ie低版本瀏覽器兼容
zoom: 1;
}
.clearfix::after {
content: ""; // 內(nèi)容為空保證高度為0
display: block; //clear: both; 只對(duì)塊元素起作用
clear: both; // 清除浮動(dòng)的關(guān)鍵
}
可以結(jié)合這個(gè) codepen demo 一起理解上圖的 clear 清楚浮動(dòng)原理。
上面這個(gè) demo 或者圖里為了展示需要所以給偽元素的內(nèi)容設(shè)置為了 ::after，實(shí)際使用的時(shí)候需要設(shè)置為空字符串，讓它的高度為 0，從而父元素的高度都是由實(shí)際的子元素?fù)伍_。
參考：CSS中的浮動(dòng)和清除浮動(dòng)，梳理一下
針對(duì)同一個(gè)類型的 HTML 標(biāo)簽，不同的瀏覽器往往有不同的表現(xiàn)，所以在網(wǎng)站制作的時(shí)候，開發(fā)者通常都是需要將這些瀏覽器的默認(rèn)樣式清除，讓網(wǎng)頁(yè)在不同的瀏覽器上能夠保持一致。
針對(duì)清楚瀏覽器默認(rèn)樣式參考CSS 大師 Eric A. Meyer 寫的reset.css ；
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
除了 reset.css 外，后來(lái)又出現(xiàn)了 Normalize.css 。關(guān)于 Normalize.css, 其作者 necolas 專門寫了一篇文章介紹了它，并談到了它和 reset.css 的區(qū)別。這個(gè)是他寫那篇文章的翻譯版：讓我們談一談 Normalize.css。
這個(gè)偷個(gè)懶就不寫寫那么多描述
查看以上這些方案的示例： codepen demo
這里不多寫了看我之前的知乎文章：常見(jiàn)的兩欄布局三欄布局，圣杯雙飛翼布局方案
對(duì)響應(yīng)式布局的理解： 就是根據(jù)網(wǎng)頁(yè)頁(yè)面的放大縮小或者不同的機(jī)型，顯示出來(lái)的頁(yè)面效果是一樣美觀的。
你有用過(guò)哪些前端性能優(yōu)化的方法？
談?wù)勑阅軆?yōu)化問(wèn)題
前端性能優(yōu)化最佳實(shí)踐？
Beautiful Soup 是一個(gè)可以從 HTML 或 XML 文件中提取數(shù)據(jù)的 Python 庫(kù)，它提供了一些簡(jiǎn)單的操作方式來(lái)幫助你處理文檔導(dǎo)航，查找，修改文檔等繁瑣的工作。因?yàn)槭褂煤?jiǎn)單，所以 Beautiful Soup 會(huì)幫你節(jié)省不少的工作時(shí)間。
上一篇文章我們介紹了如何使用 Beautiful Soup 來(lái)遍歷文檔中的節(jié)點(diǎn)，這片文章我們繼續(xù)血學(xué)習(xí)如何使用 Beautiful Soup 指定文檔中搜索到你想要的內(nèi)容。
同樣為了故事的順利發(fā)展，我們繼續(xù)使用之前的 HTML 文本，下文的所有例子都是基于這段文本的。
html_doc = """
<html><head><title>index</title></head>
<body>
<p class="title"><b>首頁(yè)</b></p>
<p class="main">我常用的網(wǎng)站
<a href="https://www.google.com" class="website" id="google">Google</a>
<a href="https://www.baidu.com" class="website" id="baidu">Baidu</a>
<a href="https://cn.bing.com" class="website" id="bing">Bing</a>
</p>
<div><!--這是注釋內(nèi)容--></div>
<p class="content1">...</p>
<p class="content2">...</p>
</body>
"""
soup = BeautifulSoup(html_doc, "lxml")正式講解搜索文檔之前，我們有必要了解下 Beautiful Soup 的過(guò)濾器，這些過(guò)濾器在整個(gè)搜索的 API 中都有所體現(xiàn)，他們可以被用在 TAG 的 name 中，屬性中，字符串中或他們的混合中。聽(tīng)起來(lái)有點(diǎn)繞是么，看幾個(gè)例子就懂了。
1、根據(jù) TAG 的 name 來(lái)查找標(biāo)簽，下面的例子會(huì)查找文檔中的所有 b 標(biāo)簽。同時(shí)要注意統(tǒng)一傳入 Unicode 編碼以避免 Beautiful Soup 解析編碼出錯(cuò)。
# demo 1
tags = soup.find_all('b')
print(tags)
#輸出結(jié)果
[<b>首頁(yè)</b>]2、如果傳入正則表達(dá)式作為參數(shù)，那么 Beautiful Soup 會(huì)通過(guò)正則表達(dá)式的 match() 來(lái)匹配內(nèi)容。
# demo 2
import re
for tag in soup.find_all(re.compile("^b")):
print(tag.name)
#輸出結(jié)果
body
b3、如果傳入列表參數(shù)，那么 Beautiful Soup 會(huì)將與列表中任一一個(gè)元素匹配的內(nèi)容返回。
# demo 3
for tag in soup.find_all(['a', 'b']):
print(tag)
#輸出結(jié)果
<b>首頁(yè)</b>
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>4、True 可以匹配任何值，下面的例子是查找所有的 TAG 但不會(huì)返回字符串。
# demo 4
for tag in soup.find_all(True):
print(tag.name, end=', ')
#輸出結(jié)果
html, head, title, body, p, b, p, a, a, a, div, p, p, 5、方法。我們可以定義一個(gè)方法，該方法只接受一個(gè)參數(shù)，若該方法返回 True 則表示當(dāng)前元素匹配并且被找到，返回 False 意味著沒(méi)找到。下面的例子展示了查找所有同時(shí)包含 class 屬性和 id 屬性的節(jié)點(diǎn)。
# demo 5
def has_id_class(tag):
return tag.has_attr('id') and tag.has_attr('class')
tags = soup.find_all(has_id_class)
for tag in tags:
print(tag)
#輸出結(jié)果
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>大部分情況字符串過(guò)濾器就可以滿足我們的需求，外加這個(gè)神奇的方法過(guò)濾器，我們就可以實(shí)現(xiàn)各種自定義需求了。
該函數(shù)搜索當(dāng)前節(jié)點(diǎn)下的所有子節(jié)點(diǎn)，其簽名如下find_all( name , attrs , recursive , text , **kwargs )。我們可以傳入指定 TAG 的 name 來(lái)查找節(jié)點(diǎn)，上面已經(jīng)舉過(guò)例子了，這里不在贅述。我們來(lái)看幾個(gè)其他的用法。
1、如果我們傳入 find_all() 函數(shù)不是搜索內(nèi)置的參數(shù)名，那么搜索是就會(huì)將該參數(shù)對(duì)應(yīng)到屬性上去。下文的例子表示查找 id 為 google 的節(jié)點(diǎn)。
搜索指定名字的屬性時(shí)可以使用的參數(shù)值包括：字符串，正則表達(dá)式，列表，True。也就是我們上文介紹過(guò)的過(guò)濾器。
# demo 6
tags = soup.find_all(id='google')
print(tags[0]['href'])
for tag in soup.find_all(id=True): # 查找所有包含 id 屬性的 TAG
print(tag['href'])
#輸出結(jié)果
https://www.google.com
https://www.google.com
https://www.baidu.com
https://cn.bing.com2、按照 CSS 類名搜索，但是鏢師 CSS 的關(guān)鍵字 class 在 Python 中是內(nèi)置關(guān)鍵字，從 Beautiful Soup 4.1.1 版本開始，可以通過(guò) class_ 參數(shù)搜索有指定 CSS 類名的 TAG：
class_ 參數(shù)同樣接受不同類型的過(guò)濾器：字符串，正則表達(dá)式，方法，True。
# demo 7
tags = soup.find_all("a", class_="website")
for tag in tags:
print(tag['href'])
def has_seven_characters(css_class):
return css_class is not None and len(css_class) == 7
for tag in soup.find_all(class_=has_seven_characters):
print(tag['id'])
#輸出結(jié)果
https://www.google.com
https://www.baidu.com
https://cn.bing.com
google
baidu
bing同時(shí)，因?yàn)?CSS 可以有多個(gè)值，所以我們可以分別搜索 CSS 中的每個(gè)值。
# demo 8
css_soup = BeautifulSoup('<p class="body strikeout"></p>', 'lxml')
tags = css_soup.find_all("p", class_="strikeout")
print(tags)
#輸出結(jié)果
[<p class="body strikeout"></p>]3、不僅可以按照標(biāo)簽和 CSS 來(lái)搜索整個(gè)文檔，還可以使用 text 來(lái)按照內(nèi)容來(lái)搜索。同時(shí) text 還可以配合其他屬性一起來(lái)完成搜索任務(wù)。
# demo 9
tags = soup.find_all(text="Google")
print("google : ", tags)
tags = soup.find_all(text=["Baidu", "Bing"])
print("baidu & bing : ", tags)
tags = soup.find_all('a', text="Google")
print("a[text=google] : ", tags)
#輸出結(jié)果
google : ['Google']
baidu & bing : ['Baidu', 'Bing']
a[text=google] : [<a class="website" href="https://www.google.com" id="google">Google</a>]
4、限制返回?cái)?shù)量
有時(shí)候文檔樹過(guò)于龐大，我們不想查查找整棵樹，只想查找指定數(shù)量的節(jié)點(diǎn)，或者只想查找子節(jié)點(diǎn)，而不想查找孫子節(jié)點(diǎn)，指定 limit 或者 recursive 參數(shù)即可。
# demo 10
tag = soup.find_all("a", limit=1)
print(tag)
tags = soup.find_all("p", recursive=False)
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>]
[]因?yàn)樵搶?duì)象的兒子節(jié)點(diǎn)沒(méi)有 p 標(biāo)簽，所以返回的是空列表。
該函數(shù)只會(huì)返回一個(gè)結(jié)果，與 find_all(some_args, limit=1) 是等價(jià)的，唯一的區(qū)別就是該函數(shù)直接返回結(jié)果，而 find_all() 函數(shù)返回包含一個(gè)結(jié)果的列表。另外 find_all() 方法沒(méi)有找到目標(biāo)是返回空列表, find() 方法找不到目標(biāo)時(shí),返回 None。除此之外使用上沒(méi)有其他差別。
除了 find_all() 和 find() 外，Beautiful Soup 中還有 10 個(gè)用于搜索的 API，其中中五個(gè)用的是與 find_all() 相同的搜索參數(shù)，另外 5 個(gè)與 find() 方法的搜索參數(shù)類似，區(qū)別僅是它們搜索文檔的范圍不同。
find_parents() 和 find_parent() 用來(lái)搜索當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。
find_next_siblings() 和 find_next_sibling() 對(duì)在當(dāng)前節(jié)點(diǎn)后面解析的所有兄弟節(jié)點(diǎn)進(jìn)行迭代。
find_previous_siblings() 和 find_previous_sibling() 對(duì)在當(dāng)前節(jié)點(diǎn)前面解析的所有兄弟節(jié)點(diǎn)進(jìn)行迭代。
find_all_next() 和 find_next() 對(duì)當(dāng)前節(jié)點(diǎn)之后的 TAG 和字符串進(jìn)行迭代。
find_all_previous() 和 find_previous() 對(duì)當(dāng)前節(jié)點(diǎn)之前的 TAG 和字符串進(jìn)行迭代。
以上五組函數(shù)的區(qū)別僅僅是前者返回一個(gè)所有符合搜索條件的節(jié)點(diǎn)列表，而后者只返回第一個(gè)符合搜索條件的節(jié)點(diǎn)。
因?yàn)檫@ 10 個(gè) API 的使用和 find_all() 與 find() 大同小異，所有i這里不在舉例，讀者可以自己探索。
在 Tag 或 BeautifulSoup 對(duì)象的 .select() 方法中傳入字符串參數(shù)即可使用 CSS 選擇器的語(yǔ)法找到 TAG。
1、通過(guò)某個(gè)標(biāo)簽逐層查找。
# demo 11
tags = soup.select("body a")
for tag in tags:
print(tag['href'])
#輸出結(jié)果
https://www.google.com
https://www.baidu.com
https://cn.bing.com
2、查找某個(gè)標(biāo)簽下的直接子標(biāo)簽
# demo 12
tags = soup.select("p > a")
print(tags)
tags = soup.select("p > #google")
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>, <a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>, <a class="website" href="https://cn.bing.com" id="bing">Bing</a>]
[<a class="website" href="https://www.google.com" id="google">Google</a>]3、通過(guò) CSS 類名直接查找
# demo 13
tags = soup.select(".website")
for tag in tags:
print(tag.string)
#輸出結(jié)果
Google
Baidu
Bing4、通過(guò)標(biāo)簽的 id 屬性查找
# demo 14
tags = soup.select("#google")
print(tags)
#輸出結(jié)果
[<a class="website" href="https://www.google.com" id="google">Google</a>]5、通過(guò)屬性的值來(lái)查找
# demo 15
tags = soup.select('a[href="https://cn.bing.com"]')
print(tags)
#輸出結(jié)果
[<a class="website" href="https://cn.bing.com" id="bing">Bing</a>]本章節(jié)介紹了 Beautiful Soup 關(guān)于文檔搜索的相關(guān)操作，熟練掌握這些 API 的操作可以讓我們更快更好找到我們想要定位的節(jié)點(diǎn)，不要看到這么多函數(shù)嚇怕了，其實(shí)我們只需要熟練掌握 find_all() 和 find() 兩個(gè)函數(shù)即可，其余 API 的使用都大同小異，稍加練習(xí)即可快速上手。
avaScript 是互聯(lián)網(wǎng)上最流行的腳本語(yǔ)言，這門語(yǔ)言可用于 HTML 和 web，可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。它是一個(gè)腳本語(yǔ)言，它是一個(gè)輕量級(jí)，但功能強(qiáng)大的編程語(yǔ)言，它也是有語(yǔ)法規(guī)則，有變量定義的編程語(yǔ)言。
在js中，聲明變量，可以用var或let關(guān)鍵字。在ES6之前，我們都是用var來(lái)聲明變量，而且JS只有函數(shù)作用域和全局作用域，沒(méi)有塊級(jí)作用域，所以{}限定不了var聲明變量的訪問(wèn)范圍，而let解決了這個(gè)問(wèn)題。在ES6中，還新增了const關(guān)鍵字，用于聲明常量。
let s = "老陳說(shuō)編程"
var i = 100;
const PI = 3.14;在js中，數(shù)據(jù)類型有值類型：字符串（String）、數(shù)字(Number)、布爾(Boolean)、對(duì)空（Null）、未定義（Undefined)，還有引用數(shù)據(jù)類型：對(duì)象(Object)、數(shù)組(Array)和函數(shù)(Function)。可以使用 typeof 操作符來(lái)檢測(cè)變量的數(shù)據(jù)類型。
// 字符串
var laochen="老陳說(shuō)編程";
// 數(shù)字
var num = 10;
// 布爾
var x = true;
// 數(shù)組
var p = new Array("Python","前端","Java","App");
p[1]="前端+小程序"
/*對(duì)象*/
var person={
id: 666,
firstname : "老陳",
lastname : "陳老"
};
/* 訪問(wèn)對(duì)象屬性 */
firstname =person.firstname;
lastname =person["lastname"];字符串用于存儲(chǔ)和處理文本。在日常，在編程中，都是經(jīng)常見(jiàn)到，以至于大多數(shù)編程語(yǔ)言，都對(duì)其特別"照顧"，提供好多專門用于處理字符串的方法。在Javascript中，字符串可以使用單引號(hào)或雙引號(hào)聲明。方法挺多的，用到時(shí)，自己查一下就好了，我只說(shuō)幾個(gè)關(guān)鍵的。
var s = "老陳說(shuō)編程";
// 用索引訪問(wèn)字符
var c = s[2];
// 計(jì)算字符串的長(zhǎng)度
var len = s.length;
// 用加號(hào)或concat()附件其他字符串
var new_str = s + "，只說(shuō)實(shí)用的技術(shù)";
new_str = new_str.concat(",如Python、Java、App等。");
// 獲取子字符串
var sub = new_str.substring(0,11);上過(guò)幼兒園的朋友都知道，要進(jìn)行數(shù)學(xué)運(yùn)算時(shí)， 要用到+、-、*、/等運(yùn)算符。有了運(yùn)算符，計(jì)算方便的不得了，特別是1+1這種。好了，不開玩笑了，說(shuō)下Javascript的4種運(yùn)算符。
1. 算術(shù)運(yùn)算符
在大多數(shù)編程語(yǔ)言中，算術(shù)運(yùn)算符都會(huì)有+(加法）、-(減法)、*(乘法)、/(除法)、%(取模-余數(shù)）、++(自增)、--(自減)這幾種，你學(xué)會(huì)了Js的，在其他編程語(yǔ)言中，用法也是一樣的。
var x = 100, y = 8;
// 自增
y++;
// 自減
x--;
// 加法
x = x + y;
// 減法
x = x - y;
// 乘法
x = x * y;
// 除法
x = x / y;
// 取模
x = x % y;2. 賦值運(yùn)算符
同大多數(shù)編程語(yǔ)言一樣，Js的賦值也是用=，同運(yùn)算符結(jié)合之后，便有了+=、-=、*=、/=和%=。
var x = 100, y = 8;
// 加法
x += y;
// 減法
x -= y;
// 乘法
x *= y;
// 除法
x /= y;
// 取模
x %= y;3. 比較運(yùn)算符
比較運(yùn)算符在邏輯語(yǔ)句中使用，以測(cè)定變量或值是否相等，結(jié)果返回true或者false。在Js中，比較兩個(gè)數(shù)用==符號(hào)， 不等于!=， 大于>，小于<，大于或等于>=和小于或等于<= 。
var x = 100, y = 8;
var result = (x>=y);4. 邏輯運(yùn)算符
邏輯運(yùn)算符用于測(cè)定變量或值之間的邏輯，常用多個(gè)組合式的判斷。大多數(shù)編程語(yǔ)言，常用的邏輯運(yùn)算符有和&&、或||和非!，這3個(gè)符號(hào)。
var x = 1001, y = 11;
var result = (x>80) && y > 10;語(yǔ)句，是一門編程語(yǔ)言的核心內(nèi)容，有了語(yǔ)句，編程的世界才精彩。JavaScritp語(yǔ)句內(nèi)有有條件語(yǔ)句、for循環(huán)語(yǔ)句和while語(yǔ)句。
1. 條件語(yǔ)句
條件語(yǔ)句用于基于不同的條件來(lái)執(zhí)行不同的動(dòng)作(業(yè)務(wù))，在 JavaScript 中，我們可使用的條件語(yǔ)句有if、if...else、if...else if....else和switch 語(yǔ)句。
let lang = 1;
let result = ""
switch (lang) {
case 1:
result = "Python";
break;
case 2:
result = "前端";
break;
case 3:
result = "App";
break;
default:
result = "Java";
}2. for循環(huán)
for循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)，如果您希望一遍又一遍地運(yùn)行相同的代碼，并且每次的值都不同，那么使用循環(huán)是很方便的。
for 循環(huán)的語(yǔ)法：for (語(yǔ)句 1; 語(yǔ)句 2; 語(yǔ)句 3) { 被執(zhí)行的代碼塊 } 。
let result = ""
for (let i=0; i<10; i++)
{
result += i + "<br/>";
}3. while循環(huán)
while 循環(huán)會(huì)在指定條件下循環(huán)執(zhí)行代碼塊。只要符合指定條件為 true，循環(huán)就可以一直執(zhí)行代碼塊。
while (條件)
{
需要執(zhí)行的代碼
}
let i = 1;
let result = "";
while (i < 6) {
result += i + "<br/>";
i++;
}do/while 循環(huán)是 while 循環(huán)的變體。該循環(huán)會(huì)在檢查條件是否為真之前執(zhí)行一次代碼塊，然后如果條件為真的話，就會(huì)重復(fù)這個(gè)循環(huán)。
do
{
需要執(zhí)行的代碼
}
while (條件);
let i = 1;
let result = ""
do {
result += i + "<br/>";
i++;
}
while (i < 5);函數(shù)是可重復(fù)使用的代碼塊，在面向?qū)ο罄铮瘮?shù)也叫作方法。JavaScript 函數(shù)語(yǔ)法:
function 函數(shù)名(argument1,argument2)
{
// 執(zhí)行代碼
}
函數(shù)參數(shù)可以是0個(gè)，也可以是多個(gè)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript語(yǔ)法</title>
<style>
button {
border: none;
color: white;
padding: 8px 32px;
font-size: 16px;
margin-top: 15px;
}
.bl {
background-color: #4CAF50; /* Green */
}
</style>
<script>
function myFun(name) {
alert(name + "說(shuō)編程");
}
</script>
</script>
</head>
<body>
<button class="bl" onclick="myFun('老陳')">調(diào)用函數(shù)</button>
</body>
</html>好了，有關(guān)javascript語(yǔ)法的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。
#前端##HTML5##JavaScript##程序員##Web#
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
