一、HTML

下面内容记录经常使用的html元素。可另存为html文件以查看效果：

<!doctype html>

<html lang="zh-cn">

<head>

<!--meta属性提供页面元信息，不显示-->

<meta charset="UTF-8">

<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-1</dd>

<dd>条目1-2</dd>

<dt>自己定义列表项目2</dt>

<dd>条目2-1</dd>

<dd>条目2-2</dd>

</dl>

<table border="1">

<tr>

<th colspan="2">表格标题行</th>

</tr>

<tr>

<td>一行第1列</td>

<td>一行第2列</td>

</tr>

<tr>

<td>二行第1列</td>

<td>二行第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>程序猿

<option selected>project师

<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是内联框架，相当于在某个区域嵌入另外一个html页面。是写在body内的，但不是全部浏览器都支持。

<iframe src="/test.html"width="200" height="200" frameborder="0"></iframe>

</body>

-->

</html>

二、XHTML

XHTML 指的是可扩展超文本标记语言；XHTML 与 HTML 4.01 差点儿是同样。XHTML 是更严格更纯净的HTML 版本号。XHTML 是以 XML 应用的方式定义的 HTML。XHTML 是 W3C 推荐标准。

依据以上定义，能够看出xhtml和普通html差别仅在于格式更规范。

比如：

必需拥有根元素（<html>）

元素必须正确嵌套

元素必须始终关闭

元素、属性必须小写

属性值必须用引號、不能简写

三、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是控制。这也是眼下站点所用的主流技术组合，非常多前端技术框架也是基于三者来完毕的。

HTML、XHTML、css速记的更多相关文章

  1. 使用XHTML+CSS构架的好处到底有哪些？

    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰. 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{ma ...

  2. 关于DIV+CSS和XHTML+CSS的理解

    WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...

  3. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  4. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  5. div+css 和 xhtml+css是一回事么?

    div+css 和 xhtml+css是一回事.只是说法不一样,表达得意思都是通过CSS定义DIV 布局. 那为什么地方要说成XHTML +css 呢? 以为我们做网站用CSS布局得时候不光是用了DI ...

  6. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  8. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  9. Web标准：一、xhtml css基础知识

    说明:这些知识是我看<十天学会DIV+CSS教程完整版 完美整理+完整代码>这篇文章后记下来的一些内容,包括少部分不懂得地方去百度到的一些解释等,该文章的地址: http://wenku. ...

随机推荐

  1. 【 Codeforces Round #425 (Div. 2) D】Misha, Grisha and Underground

    [Link]:http://codeforces.com/contest/832/problem/D [Description] 给你一棵树; 然后给你3个点 让你把这3个点和点s,t,f对应; 然后 ...

  2. 洛谷 P1683 入门

    P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...

  3. Split Shape by Plane in OpenCASCADE

    Split Shape by Plane in OpenCASCADE eryar@163.com Abstract. Sometimes you want to split a shape by p ...

  4. Apple iMac性能基准测试

    这里我要向大家介绍的一款苹果操作系统下的性能测试软件名叫GeekBench,是加拿大PrimateLabs公司出品. 下载地址:http://www.primatelabs.ca/geekbench/ ...

  5. 2048游戏分析、讨论与扩展 - Part I - 游戏分析与讨论

    2048这个游戏从刚出開始就风靡整个世界. 本技术博客的目的是想对2048涉及到相关的全部问题进行仔细的分析与讨论,得到一些大家能够接受而且理解的结果. 在这基础上,扩展2048的游戏性,使其变得更好 ...

  6. win8用久了变得非常慢, 磁盘占用100%

    完美解决方式:  直接重装win7 完美解决这个问题 在网上查了非常久也没找到有效方法, 求教

  7. UVA - 10167 - Birthday Cake （简单枚举）

    思路:简单枚举 AC代码: #include <cstdio> #include <cstring> #include <iostream> #include &l ...

  8. Windows 98 二十岁了，这些功能都是从它开始的（虽然 Windows 98 不如 Windows 95 那样具有革命性，但完成度更高，更加成熟。到最后还是：相见不如怀念。）

    1998 年 6 月 25 日午夜,美国著名连锁零售店 CompUSA 门外挤满了狂热的消费者和媒体,他们在等待一款软件发售:Windows 98,即使明知它要到当天早上才正式上市. ▲ 在 Comp ...

  9. php实现遍历文件目录

    php实现遍历文件目录 一.总结 1.熟悉简单:很经典的例子,多看,然后发现熟悉了很简单 二.php实现遍历目录 php实现遍历目录 代码一: //遍历目录 function iteral($path ...

  10. metadata 和 routing

    虽然在刚开始源码概述时把代码分为分布式和数据两部分,但是它们的界限并不明显.之前这几篇可以说是这两部分的衔接.我们在快速接近数据(index)部分.本篇分析一下之前分析cluster遗留下的问题:Me ...