Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
果您覺(jué)得該文章對(duì)您有幫助,讓更多人受用,請(qǐng)關(guān)注“鍵盤碼農(nóng)”,轉(zhuǎn)發(fā)該文章。謝謝您的支持!
今天跟大家寫了一份js的聯(lián)動(dòng)全選的源碼,代碼少,清晰易懂。
效果是這樣的:
點(diǎn)擊全選下面的就會(huì)被全部全選,或者下面的被一一選擇,全選按鈕也會(huì)被選中。運(yùn)用復(fù)選框來(lái)實(shí)現(xiàn)的聯(lián)動(dòng)全選的功能。
點(diǎn)擊上面的復(fù)選框就會(huì)被全選
Javascript:聯(lián)動(dòng)全選
當(dāng)下放的復(fù)選框沒(méi)有被全選,最上面的全選按鈕未被選中
復(fù)選框聯(lián)動(dòng)全選js代碼實(shí)現(xiàn):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function ()
{
var oBtn1 = document.getElementById('btn1');
var oBox = document.getElementById('box');
var oInputs = oBox.getElementsByTagName('input');
oBtn1.onclick = function ()
{
if (oBtn1.checked == true) {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = true;
}
} else {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = false;
}
}
}
//點(diǎn)擊每一個(gè)input框
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].onclick = function ()
{
var n = 0;
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].checked == true) {
n++;
}
}
if (n == oInputs.length) {
oBtn1.checked = true;
} else {
oBtn1.checked = false;
}
}
}
}
</script>
</head>
<body>
<h1>全選/全不選</h1>
<input type="checkbox" id="btn1">
<div id="box">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</div>
</body>
</html>
相對(duì)比較簡(jiǎn)單,對(duì)于初學(xué)者應(yīng)該有很好的幫助!請(qǐng)關(guān)注鍵盤碼農(nóng)。后期繼續(xù)更新,如有什么看法請(qǐng)?jiān)谙路皆u(píng)論。第一時(shí)間為您解答哦!
TML 代碼約定
很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。
在2000年至2010年,許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對(duì)于 HTML5 ,我們應(yīng)該形成比較好的代碼規(guī)范,以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行:
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫,可以使用以下代碼:
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母:
混合了大小寫的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來(lái)更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素),但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉:
我們可以這么寫:
<meta charset="utf-8">
也可以這么寫:
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁(yè)面,使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時(shí)使用大小寫是非常不好的習(xí)慣。
開(kāi)發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來(lái)更加清爽。
小寫字母容易編寫。
不推薦:
<div CLASS="menu">
推薦:
<div class="menu">
屬性值
HTML5 屬性值可以不用引號(hào)。
屬性值我們推薦使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的,建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易于閱讀。
以下實(shí)例屬性值包含空格,沒(méi)有使用引號(hào),所以不能起作用:
<table class=table striped>
以下使用了雙引號(hào),是正確的:
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí),它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸,在加載時(shí)可以預(yù)留指定空間,減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號(hào)
等號(hào)前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過(guò)長(zhǎng)
使用 HTML 編輯器,左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無(wú)緣無(wú)故添加空行。
為每個(gè)邏輯功能塊添加空行,這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格,不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想,
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。
菜鳥教程,學(xué)的不僅是技術(shù),更是夢(mèng)想。</p>
</body>
表格實(shí)例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實(shí)例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中, <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實(shí)例:
<!DOCTYPE html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素,用于描述頁(yè)面的語(yǔ)言:
<!DOCTYPE html>
<html lang="zh">
聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中, <head>標(biāo)簽是可以省略的。
默認(rèn)情況下,瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。
實(shí)例
<!DOCTYPE html>
<html>
<title>頁(yè)面標(biāo)題</title>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?
現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的,標(biāo)題名描述了頁(yè)面的主題:
<title>菜鳥教程</title>
標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長(zhǎng)的評(píng)論可以在 <!-- 和 --> 中分行寫:
<!--
這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。
這是 一個(gè)較長(zhǎng)評(píng)論 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。
-->
長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格,更易于閱讀。
樣式表
樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長(zhǎng)的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來(lái)縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。
在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問(wèn) HTML 元素
一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:
實(shí)例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問(wèn) JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫敏感: london.jpg 不能通過(guò) London.jpg 訪問(wèn)。
其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫不敏感: london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。
你必須保持統(tǒng)一的風(fēng)格,我們建議統(tǒng)一使用小寫的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。
區(qū)別在于:
.htm 應(yīng)用在早期 DOS 系統(tǒng),系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。
在 Unix 系統(tǒng)中后綴沒(méi)有特別限制,一般用 .html。
技術(shù)上區(qū)別
如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是,通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件,你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣,HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
章我們給大家講解一下什么是css選擇器?css3中5種常見(jiàn)的基本選擇器。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你有所幫助。
一:什么是css選擇器?
CSS是一種用于屏幕上渲染html,xml等一種語(yǔ)言,CSS主要是在相應(yīng)的元素中應(yīng)用樣式,來(lái)渲染相對(duì)應(yīng)用的元素,那么這樣我們選擇相應(yīng)的元素就很重要了,如何選擇對(duì)應(yīng)的元素,此時(shí)就需要我們所說(shuō)的選擇器。在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素。選擇器主要是用來(lái)確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點(diǎn)。
二:css3中5種常見(jiàn)的基本選擇器
css3中的選擇器種類有很多,下面介紹的是5種常見(jiàn)的基本選擇器:通配選擇器,類選擇器,元素選擇器, ID選擇器和群組選擇器。
1.通配符選擇器(所有瀏覽器支持)
通用選擇器用*來(lái)表示,用來(lái)選擇所有元素,,也可以選擇某個(gè)元素下的所有元素;
*{marigin: 0;
padding: 0;
font-size: 14px;
}
上面代碼大家在reset樣式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都設(shè)置為0,字體大小都設(shè)置為14px,另外一種就是選擇某個(gè)元素下的所有元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符選擇器</title>
<style>
.demo * {
width: 50px;
height: 50px;
border:1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<div class="demo">
<div>1</div>
<p>2</p>
<span>3</span>
</div>
</body>
</html>
效果圖:
我們可以看到在demo元素里的三個(gè)子元素div,p,span都是分別沒(méi)有設(shè)置css樣式的,但只要我們?cè)O(shè)置了demo元素下的所有元素的統(tǒng)一樣式,那么demo元素里的三個(gè)子元素div,p,span就會(huì)出現(xiàn)樣式。
對(duì)了,在這里說(shuō)一下,我目前是在職web前端開(kāi)發(fā),如果你現(xiàn)在正在學(xué)習(xí)前端,了解前端,渴望成為一名合格的web前端開(kāi)發(fā)工程師,在入門學(xué)習(xí)前端的過(guò)程當(dāng)中有遇見(jiàn)任何關(guān)于學(xué)習(xí)方法,學(xué)習(xí)路線,學(xué)習(xí)效率等方面的問(wèn)題,都可以隨時(shí)關(guān)注并私信我:前端,我都會(huì)根據(jù)大家的問(wèn)題給出針對(duì)性的建議,缺乏基礎(chǔ)入門的視頻教程也可以直接來(lái)找我,我這邊有最新的web前端基礎(chǔ)精講視頻教程, 還有我做web前端技術(shù)這段時(shí)間整理的一些學(xué)習(xí)手冊(cè),面試題,開(kāi)發(fā)工具,PDF文檔書籍教程,都可以直接分享給大家。
2.類選擇器 (所有瀏覽器都支持類選擇器,但多類選擇器(.className1.className2)不被ie6支持。)
類選擇器根據(jù)類名來(lái)選擇,前面以”.”來(lái)標(biāo)志,是以一獨(dú)立于文檔元素的方式來(lái)指定樣式,使用類選擇器之前需要在html元素上定義類名,換句話說(shuō)需要保證類名在html標(biāo)記中存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">類選擇器</div>
</body>
</html>
效果圖:
3.元素選擇器(所有瀏覽器支持)
元素選擇器(標(biāo)簽名選擇器),是css3選擇器中最常見(jiàn)而且最基本的選擇器。元素選擇器其實(shí)就是文檔的元素,如html,body,p,div等等下下面例子中選擇了span元素,并設(shè)置了字體顏色為紅色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
}
span{
color: red;
}
</style>
</head>
<body>
<div class="demo">
<p>這里使用<span>元素選擇器</span>改變了樣式</p>
</div>
</body>
</html>
效果圖:
4.ID選擇器(所有瀏覽器都支持)
ID選擇器和上面說(shuō)的類選擇器是很相似的,在使用ID選擇器之前也需要先在html文檔中加注ID名稱,這樣在樣式選擇器中才能找到相對(duì)應(yīng)的元素,不同的是ID選擇器是一個(gè)頁(yè)面中唯一的值,我們?cè)陬愂褂脮r(shí)是在相對(duì)應(yīng)的類名前加上一個(gè)“.”號(hào)(.className)而id選擇器是在名稱前使用"#"如(#demo)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID選擇器</div>
</body>
</html>
效果圖:
ID選擇器有幾個(gè)地方需要特別注意:
第一:一個(gè)文檔中一個(gè)id選擇器只充許使用一次,因?yàn)閕d在頁(yè)面中是唯一的;
第二,id選擇器不能像類選擇器一樣多個(gè)合并使用,一個(gè)元素只能命名一個(gè)id名;
第三,可以在不同的文檔中使用相同的id名,比如說(shuō)在“test.html”中給h1定了“#important”,也可給“test1.html”中定義p的id為"#important",但前提是不管在test.html還是test1.html中只充許有一個(gè)id叫"#important"的存在。
5.群組選擇器(所有瀏覽器都支持)
當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。群組選擇器是將具有相同樣式的元素分組在一起,每個(gè)選擇器之間使用逗號(hào)“,”隔開(kāi),這個(gè)逗號(hào)告訴瀏覽器,規(guī)則中包含多個(gè)不同的選擇器,如果不有這個(gè)逗號(hào),那么所表達(dá)的意就完全不同了,省去逗號(hào)就成了我們前面所說(shuō)的后代選擇器,這一點(diǎn)大家在使用中千萬(wàn)要小心加小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>群組選擇器</title>
<style>
.demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
p,li{
color: blue;
}
.demo1,.demo2{
color: #fff;
}
</style>
</head>
<body>
<div class="demo">
<p>這里是一個(gè)段落!</p>
<ul><li>列表</li></ul>
<a href="#" class="demo1">鏈接一</a><br>
<span class="demo2">文字文字!</span>
</div>
</body>
</html>
效果圖:
以上就是什么是css選擇器?css3中5種常見(jiàn)的基本選擇器(代碼實(shí)例)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注我!!!
作者:程序猿的生活
鏈接:https://zhuanlan.zhihu.com/p/152153067
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。