溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、通用模板：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”/>
<title>文檔標題</title>
<link rel="shortcut icon" href="img\wujiaoxing.ico"/> <!- -設置標簽頁圖標- ->
<link rel=”stylesheet” href=”url”/> <!--外接樣式表-->
</head>
<body>
<header role=”banner”>
<nav role=”navigation”> 頁眉 </nav>
</header>
<main role=”main”>
<article>
<section>
<p>主要內容</p>
</section>
</article>
</main>
<aside role=”complementary” >附注欄的其他內容</aside>
<footer role=”contentinfo”>頁腳（如：版權）</footer>
</body>
</html>
二、網頁三要素：
1. 元素標簽：
（1） 同行顯示：
<a> (鏈接標簽) </a>
<em>（斜體標簽）</em>
<strong>(粗體標簽)</strong>
<code> 標記代碼</code>
（2） 換行顯示：
1. <h2> (標題1標簽) </h2>
2. <h3> (標題2標簽) </h3>
3. <article> (文章標簽)</article>
4. <p> (段落標簽) </p>
5.<main></main>注:一個頁面最多使用一次！不能放置header; footer ; aside; article中
6. <header> </header>
7. <footer> </footer>
8. <hr> (分隔線標簽) </hr>
9. <div>容器標簽換行是 <div> 固有的唯一格式表現</div>
10. <section> 區塊 </section>
（3） 未知：
1.<img> (圖像標簽) </img>
2.<font> (字體標簽) </font>
3.<b> (粗體標簽) </b>
4.<i> (斜體標簽) </i>
5.<u> (下劃線標簽) </u>
6.<sup>(上標標簽) </sup>
7.<sub>(下標標簽) </sub>
8．<audio> </audio>
9.<video> </video>
10.<li> 列表</li>
11.<ol type=”a ” start=” 3”>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
12.<ul type=”disc/circle/square”>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
13．<ins>添加內容(表現為加下劃線)</ins>
14.<del>刪除內容（表現為加刪除線）</del>
15.<cite>標簽通常表示它所包含的文本對某個參考文獻的引用，比如書籍或者雜志的標題。按照慣例，引用的文本將以斜體顯示。
</cite>
16. <figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。</figure>
2. 屬性:
<a>: href; title;
<img>: src; width; height; alt
3. 值：
三、其他：
4. 注釋：
如：<!-- 我是被注釋內容，并且在瀏覽器中不會顯示 -->
5.學習相關鏈接：
網頁轉義符號HTML代碼大全：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
HTML 系列教程：http://www.w3school.com.cn/h.asp
各類標簽及其用法：http://www.w3school.com.cn/tags/tag_doctype.asp
6．鏈接錨鏈接：鏈接到某一頁面的特定區域。
模板：Selector(選擇器){
Attribute(屬性): value(值) ;
} // 各種元素。
Color：#000000(黑色)/#ffffff(白色)
注：單斜桿表示或者！
1.鏈接樣式：
a:link{
color: blue;
} /*鏈接激活前的外觀*/
a:hover{
color: orange;
} /*鼠標指向鏈接時的外觀*/
a:hover{
color: red;
} /*激活鏈接后的外觀*/
2.文本樣式：
字體：
font-family: Geneva,Tahoma,sans-serif; /*字體類型,三選一*/
font-style: italic/normal; /*斜體和正體二選一*/
font-weight: bolder/bold/normal/lighter; *更粗/正常/更細/三選一*/
font-size: 16px/1em; /*字體大小，默認1em=16px*/
line-height:16px /*行高*/
字間距：word-space:length(4px或其他);
字偶距: letter-space:length(4px或其他);
添加縮進：text-indent: length(2em或其他);
對齊文本：text-align: left/right/center/justify（兩端對齊）;
修改文本大小寫:text-transform: uppercase(大)/lowercase(小)/none;
裝飾文本：：text-decoration: underline/overline/through/none;
(下劃線/上劃線/刪除線/無)
3.元素顯示方式：display: block/inline/; (換行/行內顯示)
4.元素可見性：visibility: visible/hidden;
5.邊框：border-style :dashed/solid/dotted ; (虛線/實線/點劃線)
border -width:
border -color:
border:2px solid red;
border-radius:length; //邊框圓角半徑
6.外/內邊距：margin-top/-bottom:length;
Padding：length;
Padding-top/bottom/left/right:length;
7.元素浮動：float:left/right/none;
8.清除浮動：clear:left/right;
9.處理溢出：overflow: visible/hidden/scroll/auto;
10.修改指針形狀：cursor: pointer/default/crosshair/move/wait/help;
11.列表標記：
list-style-type:disc/circle/square….;
/*
disc:圓點；circle：圓圈；square：方塊；decimal：數字；
upper-alpha：大寫字母。
*/
12.有序列表：
<ol start=”2”>從2開始編號</ol>
List-style-position: inside/outside;
13.fieldset(表單):
表單字段(type屬性值)：text/email/password/url/submit/radio(單)/checkbook（復選）
<input type=”text” placeholder=”提示信息”>
單選框：
<p>
<input type="radio" id="tankzx" name="school" value="T"/>
<label for="tankzx" >tk</label>
</p>
復選框:
<p>
<input type="checkbox" id="tank" name="學校" value="TZ"/>
<label for="tank" >tk</label>
</p>
列表框：
<p>
<label for="state">State（國家）：</label>
<select id="state" name="state" size=” ”>
<optgroup label=”xx”> /*分組列表*/
<option value="ch">China</option>
<option value="usa">American</option>
</optgroup>
<option value="en">England<option>
</select>
</p>
14.表格:
<table>
<tr> //行標記
<th></th> //表頭標記
<td></td> //單元格標記
</tr>
<tr>
<td></td> //單元格標記
<td></td> //單元格標記
</tr>
</table>
1. 函數調用：
直接調用 (functionname(形參))
事件響應調用（onclick=”check()”）
超鏈接調用 (<a href=”javascript:check()”)
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
