整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.7.js"></script>
</head>
<body>
<h1>內(nèi)容選擇器</h1>
<ul>
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>舉頭望明月</li>
<li>低頭思故鄉(xiāng)</li>
</ul>
<input type="button" value="內(nèi)容選擇器" onclick="f()">
<input type="button" value="隱藏沒有包含明月的li標(biāo)簽" onclick="f2()"><br/><br/>
<input type="button" value="將沒有包含明月的li標(biāo)簽設(shè)置成可見" onclick="f3()">
<input type="button" value="visible的用法" onclick="f5()">
</body>
<script type="text/javascript">
function f()
{
//將內(nèi)容有明月關(guān)鍵字的li標(biāo)簽的背景設(shè)置成黃色，并修改字體大小
$('li:contains("明月")').css({background:"yellow",fontSize:"21px"})
}
function f2()
{
//因此沒有包含明月的li標(biāo)簽
$('li:not(:contains("明月"))').css({display:"none"})
}
function f3()
{
//用hidden樣式查找被因此的內(nèi)容
$('li:hidden').css({display:"block",color:"red",fontSize:"20px",background:"gray"})
}
function f5()
{
//將可見的li標(biāo)簽給隱藏
$('li:visible').css({display:"none"})
}
</script>
</html>
eb開發(fā)。不管是在工作還是在學(xué)習(xí)中，掌握一些實(shí)用的開發(fā)小技巧，你的效率都會(huì)大大提升哦！
一、將填充和邊距都設(shè)置為零
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
也有使用通配符*{padding:0;margin:0;}網(wǎng)站利弊端都各有其說法，對(duì)于*號(hào)這種，是把所有元素的內(nèi)外邊距都設(shè)置為了0，可能有些會(huì)出現(xiàn)些小細(xì)節(jié)的問題，所以選擇你適用的方案吧
二、重置瀏覽器的字體大小
body {
font:12px "宋體", Arial, Helvetica, sans-serif;
color: #000;
}
不保證所有的用于都安裝有你設(shè)置的字體，所以通常會(huì)在后面加上幾個(gè)通用的web安全字體
三、元素/標(biāo)簽選擇器
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}
table { border-collapse:collapse; border-spacing:0;}
img { border:0;}
ol,ul { list-style:none; }
p{word-wrap:break-word}
四、站點(diǎn)鏈接
站點(diǎn)鏈接的樣式必須保持此順序，包括用于創(chuàng)建懸停效果的選擇器組在內(nèi)
a:link {
color: #42413C;
text-decoration: none;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
五、設(shè)置水平居中
1）固定寬度 大多數(shù)的網(wǎng)站目前都是固定寬度的代碼如下：
#container { width:1000px;margin: 0 auto;}
2）如果是用百分百來定義寬度的話，可以這樣使用：
#container {
width: 80%;
max-width: 1260px; /* 最大寬度，IE6 不遵循max-width、min-width 此聲明。 */
min-width: 780px; /* 最小寬度 */
margin: 0 auto; /* 如果將 #container 寬度設(shè)置為 100%，則不需要此設(shè)置。 */
}
六、可以重復(fù)利用的規(guī)則
.left {float: left;}
.right {float: right;}
七、在同一元素上使用多種類
加粗的紅色字體，使用了兩種類
CSS代碼：
.red {color: red;}
.bold {font-weight: bold;}
Html代碼：
<p class="red bold">同一元素使用兩種類</p>
八、隱藏水平滾動(dòng)條
為了避免出現(xiàn)水平滾動(dòng)條，在body里加入 overflow-x:hidden
body{overflow-x:hidden}
九、解決IE6 的浮動(dòng)元素的雙倍邊距問題
對(duì)一個(gè)div設(shè)置了float:left 和 margin-left:100px 那么在IE6中，這個(gè)bug就會(huì)出現(xiàn)。您只需要多設(shè)置一個(gè)display即可，代碼如下：
div {float:left;margin:40px;display:inline;}
IE6下圖片也會(huì)產(chǎn)生3像素的空白距離，也用到display
img{display:block}
十、簡單的導(dǎo)航菜單
用html5 css3 的新語義標(biāo)簽來寫一下這段導(dǎo)航菜單代碼
html代碼：
<nav>
<ul>
<li><a >網(wǎng)站首頁</a></li>
<li><a >個(gè)人博客模板</a></li>
<li><a >慢生活</a></li>
</ul>
</nav>
CSS代碼：
nav ul li { display:inline;margin-right:10px;}
nav ul li a {color:#000;display:block;float:left;padding:5px;}
nav ul li a:hover {background:#eee;color:black;}
}
如果想選中的導(dǎo)航能高亮顯示，可以加上一段js代碼：
<script language="javascript">
var obj=null;
var As=document.getElementById('nav').getElementsByTagName('a');
obj=As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='nav_current'
</script>
提示：為了讓js能夠獲取到菜單的id取值，所以應(yīng)該給html中的nav標(biāo)簽添加一個(gè)id
<nav id="nav">
高亮顯示的樣式nav_current 也應(yīng)該在css中寫上一段代碼，比如：
#nav_current{background:#eee;color:red;}
如果你喜歡這篇文章，可以關(guān)注作者頭條公眾號(hào)，每天都會(huì)有精彩web干貨與你一起分享哦！
HTML：Hyper Text Markup Language
<!--
文檔聲明，標(biāo)識(shí)當(dāng)前網(wǎng)頁的版本的
該聲明標(biāo)識(shí)網(wǎng)頁是遵循h(huán)tml5語法規(guī)范的
編寫網(wǎng)頁時(shí)，一定要編寫的文檔聲明，
在某些瀏覽器中，如果不寫文檔聲明，會(huì)導(dǎo)致瀏覽器進(jìn)入到怪異模式
-->
<!doctype html>
<!-- html網(wǎng)頁中根標(biāo)簽，一個(gè)頁面中有且只有一個(gè)根標(biāo)簽
網(wǎng)頁中的所有內(nèi)容都應(yīng)該寫在根標(biāo)簽的內(nèi)部
-->
<html>
?
<!--
網(wǎng)頁的頭部，head標(biāo)簽中的內(nèi)容，不會(huì)在頁面中直接顯示
瀏覽器根據(jù)head中的內(nèi)容來解析網(wǎng)頁，搜索引擎也可以根據(jù)他們來檢索網(wǎng)頁
-->
<head>
<!-- 使用meta來設(shè)置頁面的字符集 -->
<meta charset="utf-8" />
<!--
網(wǎng)頁的標(biāo)題，一般會(huì)在頁面的標(biāo)簽頭部顯示
所屬引擎在檢索一個(gè)網(wǎng)頁時(shí)，會(huì)主要檢索title中的內(nèi)容
并依據(jù)該內(nèi)容，來判斷網(wǎng)頁的主要內(nèi)容，
title中的內(nèi)容會(huì)影響到網(wǎng)站在搜索引擎中的排名
-->
<title>我是title</title>
?
</head>
?
<!-- 網(wǎng)頁的主體，網(wǎng)頁中所有的可見內(nèi)容，都應(yīng)該寫在body中 -->
?
<body>
<h1>這是一個(gè)非常漂亮的網(wǎng)頁</h1>
</body>
</html><html>
<head>
<title>網(wǎng)頁的標(biāo)題</title>
</head>
<body>
<!--
注釋 HTML注釋中的內(nèi)容，
不會(huì)在頁面中顯示，
但是可以在源代碼中查看
通過注釋可以對(duì)代碼進(jìn)行解釋說明
一定要養(yǎng)成良好的編寫注釋的習(xí)慣
編寫注釋時(shí)，要求簡單明了
日期：
作者：
功能：
通過注釋可以將不希望在頁面中顯示代碼隱藏
HTML注釋不能嵌套（所有的多行注釋都不能嵌套）
-->
<!-- 這是頁面的1級(jí)標(biāo)題 -->
<h1>這是我的第二個(gè)網(wǎng)頁</h1>
<!-- 我是一個(gè)注釋 <!-- 我是注釋中的注釋 --> -->
</body>
</html> <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>常用的標(biāo)簽</title>
</head>
<body>
?
<!-- 標(biāo)題標(biāo)簽
在HTML一共有h1 ~ h6 六級(jí)標(biāo)題
6級(jí)標(biāo)題中 h1最大 h6最小
從h1 到 h6 重要性依次降低
h1最重要，h2其次 依次遞減
?
搜索引擎檢索頁面時(shí)，h1僅次于title，也會(huì)影響到頁面在搜索引擎中的排名
一個(gè)頁面一般只有一個(gè)h1標(biāo)簽
?
一般頁面中只會(huì)使用h1 ~ h3
?
-->
<h1>一級(jí)標(biāo)題標(biāo)簽</h1>
<h2>二級(jí)標(biāo)題標(biāo)簽</h2>
<h3>三級(jí)標(biāo)題標(biāo)簽</h3>
<h4>四級(jí)標(biāo)題標(biāo)簽</h4>
<h5>五級(jí)標(biāo)題標(biāo)簽</h5>
<h6>六級(jí)標(biāo)題標(biāo)簽</h6>
?
<!-- 段落標(biāo)簽 使用p標(biāo)簽來表示一個(gè)段落
段落標(biāo)簽會(huì)獨(dú)占一行，并和其他內(nèi)容會(huì)有一個(gè)距離
-->
<p>第一次</p>
<p>今天天氣真不錯(cuò)</p>
<hr />
<!--
在HTML中，默認(rèn)將多個(gè)空格和換行認(rèn)為是一個(gè)空格
使用br標(biāo)簽來表示一個(gè)換行
-->
<p>
床前明月光<br />
疑是地上霜<br />
舉頭望明月<br />
低頭思故鄉(xiāng)<br />
</p>
?
<!-- 水平線，可以在頁面的指定位置輸出一條水平線 -->
<hr />
?
<!--加粗：<strong>…</strong>-->
<!--斜體：<em>…</em>-->
?
<strong>簡介</strong>
<p>
<em>2008</em>年設(shè)立人才實(shí)訓(xùn)中心<br/>
<em>2009</em>年成為教育部軟件工程專業(yè)大學(xué)生實(shí)習(xí)基地<br/>
</p>
?
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
</head>
<body>
<!--
列表類似于購物清單
HTML中一共有三種列表
1.無序列表
- 使用ul標(biāo)簽來創(chuàng)建一個(gè)無序列表
- 使用li向無序列表中添加列表項(xiàng)
- 無序列表默認(rèn)使用 圓點(diǎn) 來作為項(xiàng)目符號(hào)
2.有序列表
- 有序列表和無序列表類似，不同的是它使用ol來創(chuàng)建其他的都和無序列表一樣
- 有序列表使用有序的序號(hào) 作為項(xiàng)目符號(hào)
3.定義列表
- 定義列表用來對(duì)一些內(nèi)容做解釋說明的
- 使用 dl 來創(chuàng)建一個(gè)定義列表
- 在dl中使用dt，來創(chuàng)建一個(gè)定義項(xiàng)
- 使用dd來創(chuàng)建一個(gè)對(duì)定義項(xiàng)的描述
- 列表之間可以互相嵌套，可以在有序列表中放無序列表，也可以在無序列表放有序列表
-->
<ul>
<li>西紅柿</li>
<li>大茄子</li>
<li>小辣椒</li>
</ul>
<ol>
<li>桃花源記</li>
<li>岳陽樓記</li>
<li>小石潭記</li>
<li>醉翁亭記</li>
</ol>
<p>菜譜</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>宮保雞丁</li>
<li>青椒肉絲</li>
</ul>
<dl>
<dt>武松</dt>
<dd>景陽岡上的大虎英雄，戰(zhàn)斗力99</dd>
<dd>后來打死西門大官人，后逃逸，出家為僧</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家，戰(zhàn)斗力0</dd>
</dl>
</body>
</html>常見的圖像格式 JPG GIF PNG BMP
所謂相對(duì)路徑，就是相對(duì)于自己的目標(biāo)文件位置。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”圖片，由于“11ha.jpg”圖片相對(duì)于“11111111.html”來說，是在同一個(gè)目錄的，那么在“11111111.html”文件里使用以下代碼后：
<img src=“11ha.jpg” alt=“小女孩” /> 只要這兩個(gè)文件的相對(duì)位置沒有變(也就是說還是在同一個(gè)目錄內(nèi))，那么無論上傳到Web服務(wù)器的哪個(gè)位置，在瀏覽器里都能正確地顯示圖片。
當(dāng)圖片在image文件夾里時(shí)：
src="image/11ha.jpg" alt="小女孩" /> 如果在image里很深的文件夾，也可以一直羅列下去：
<img src="image/renwu/11ha.jpg" alt="小女孩" /> 如果html文件在比圖片深一層的文件夾里：
<img src="../11ha.jpg" alt="小女孩" /> 如果html文件在比圖片深兩層的文件夾里，就在前面再羅列兩個(gè)點(diǎn)“..”，深幾層羅列幾次。
<img src=“../../11ha.jpg” alt=“小女孩” /> 圖片在html文件上兩級(jí)image文件夾中的renwu文件夾里
<img src=“../../image/renwu/11ha.jpg”/> <a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
href: 鏈接路徑 target:鏈接在哪個(gè)窗口打開,常用值：self、blank
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
