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.wfuyu.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 程序员人生 版权所有
