一、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. Yeslab华为安全HCIE七门之--防火墙高级技术（17篇）

    Yeslab 全套华为安全HCIE七门之第三门 防火墙高级技术     课程目录: 华为安全HCIE-第三门-防火墙高级技术(17篇)\1_用户认证_用户_认证域_认证策略.avi 华为安全HCIE- ...

  2. 今日SGU 5.22

    SGU 296 题意:给你一个最多1000位的数,让你删除k位使得剩下的数最大 收获:贪心 #include<bits/stdc++.h> #define de(x) cout<&l ...

  3. Python入门：全站url爬取

    <p>作为一个安全测试人员,面对一个大型网站的时候,手工测试很有可能测试不全,这时候就非常需要一个通用型的网站扫描器.当然能直接扫出漏洞的工具也有很多,但这样你只能算是一个工具使用者,对于 ...

  4. 洛谷 P1913 L国的战斗之伞兵

    P1913 L国的战斗之伞兵 题目背景 L国即将与I国发动战争!! 题目描述 为了在敌国渗透作战,指挥官决定:派出伞兵前往敌国!然而敌国的风十分强烈,能让伞兵在同一高度不停转悠,直到被刮到一个无风区… ...

  5. 4.2.2 MINUS

    4.2.2 MINUS正在更新内容,请稍后

  6. Shiro结合Redis解决集群中session同步问题

    pom.xml文件中引入redis的依赖 在application.xml配置redis: <bean id="jedisConnectionFactory" class=& ...

  7. 阿里云 Ubuntu14.04 升级 python3.4 到 python 3.5/6

    买的阿里云服务器给的系统是Ubuntu14.04,里面装的Python3版本是Python3.4,本来也没什么,但是这个版本的Python安装flask和django各种报错,所以只好升级Python ...

  8. oracle取随机结果测试

    http://www.2cto.com/database/201307/227524.html

  9. 洛谷——P2957 [USACO09OCT]谷仓里的回声Barn Echoes

    https://www.luogu.org/problem/show?pid=2957 题目描述 The cows enjoy mooing at the barn because their moo ...

  10. eclipse个人插件

    1.SVN eclipse markets 安装m2e-subversion.svnkit 2.maven 本地装好mvn prefences导入maven安装目录和配置 3.单元测试覆盖率 EclE ...