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