1、HTML
以下內容記錄經常使用的html元素，可另存為html文件以查看效果：
<!doctype html>
<html lang="zh-cn">
<head>
<!--meta屬性提供頁面元信息，不顯示-->
<meta charset="UTF⑻">
<meta name="Generator" content="EditPlus"/>
<meta name="Author" content="zjc"/>
<meta name="Keywords"content="HTML,XHTML,css"/>
<meta name="Description" content="經常使用元素速記表"/>
<title>HTML Demo</title>
</head>
<body>
<h1>h1―h6定義標題</h1>
<p>p標記定義段落，閱讀器顯示時會自動換行</p>
<br/>(換行)
<hr/>(分割線)
<pre>原始樣式輸出，比如保存空 格
換行
及縮進</pre>
<strong>加強顯示，類似粗體文字</strong>
<i>斜體文字</i>
<b>粗體文字</b>
<a href="http://www.126.com/">文字鏈接</a>
<a href="http://www.126.com/" target="_blank"><img src="URL" alt="圖片鏈接"></a>
<a name="書簽">定義頁面的書簽（位置）</a>
<a href="#書簽">跳轉到那個書簽（位置）</a>
<ul>
<li>無序號列表-條目1</li>
<li>無序號列表-條目2</li>
</ul>
<ol type="A">
<li>有序號列表-條目A</li>
<li>有序號列表-條目B</li>
</ol>
<dl>
<dt>自定義列表項目1</dt>
<dd>條目1⑴</dd>
<dd>條目1⑵</dd>
<dt>自定義列表項目2</dt>
<dd>條目2⑴</dd>
<dd>條目2⑵</dd>
</dl>
<table border="1">
<tr>
<th colspan="2">表格標題行</th>
</tr>
<tr>
<td>1行第1列</td>
<td>1行第2列</td>
</tr>
<tr>
<td>2行第1列</td>
<td>2行第2列</td>
</tr>
</table>
<div class="main" style=color:#ff0000"><p>div是區塊/小節 定義，閱讀器顯示時會自動換行。section、div、header、footer等標簽通經常使用于頁面布局。class、id可以為外部樣式表預設標識</p></div>
<p>段內<span id="important" style="color:#00ff00">布局元素</span>，可以使用css單獨對此部份文字進行修飾</p>
<form action="this.jsp" method="post/get">
<input type="text" name="lastname" value="zjc"size="20" maxlength="50">
<input type="password"><br/>
<input type="checkbox" checked="checked">Married<br/>
<input type="radio" name="sex" value="Male"checked="checked">Male<br/>
<input type="radio" name="sex"value="Female">Female<br/>
<input type="hidden">
<select>
<option>http://www.jyygyx.com
<option selected>工程師
<option>銷售
</select>
<br/>
<textarea name="Comment" rows="2"cols="20"></textarea><br/>
<input type="submit" value="提交表單">
<input type="reset" value="清除所有">
</form>
</body>
</html>
以下是html框架（frame）示例――由于frame實際上是多個文件的組合，所以在履行腳本、頁面刷新等操作時常常出現意外結果，現在用的不多。大部份網站采取div區塊布局到達類似的“排版”效果。
<!doctype html>
<html lang="en">
<head>
<title>Frame Demo</title>
</head>
<frameset rows="20%,80%">
<frame src="/frame/title.html" noresize="noresize">
<frameset cols="25%,75%">
<frame src="/frame/menu.html">
<frame src="/frame/content.html">
</frameset>
</frameset>
<!--使用框架，就不能帶body節點了，帶了也顯示不了。
<body>
iframe是內聯框架，相當于在某個區域嵌入另外1個html頁面，是寫在body內的，但不是所有閱讀器都支持。
<iframe src="/test.html"width="200" height="200" frameborder="0"></iframe>
</body>
-->
</html>
2、XHTML
XHTML 指的是可擴大超文本標記語言；XHTML 與 HTML 4.01 幾近是相同；XHTML 是更嚴格更純凈的HTML 版本；XHTML 是以 XML 利用的方式定義的 HTML；XHTML 是 W3C 推薦標準。
根據以上定義，可以看出xhtml和普通html區分僅在于格式更規范。
例如：
必須具有根元素（<html>）
元素必須正確嵌套
元素必須始終關閉
元素、屬性必須小寫
屬性值必須用引號、不能簡寫
3、css
css（層疊樣式表）用于在分離的文件中對html內容進行外觀修飾。提供了豐富的功能以滿足多種視覺效果。css最基本格式為：選擇器{屬性:值;屬性:值;......}
如：h1 {color:red;font-size:10px}
div.main,span#important{color:green}
body table {font-size:10px}
總結：html/xhtml、css、javascript是很自然的mvc架構，html是內容；css是展現；javascript是控制，這也是目前網站所用的主流技術組合，很多前端技術框架也是基于3者來完成的。
下一篇 《銷售總監》讀書筆記
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
