一、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. 简单学习Python之路1

    如何在cmd中打开文件:先用win+R打开cmd界面,在已知到你自己要打开文件的地址之后比如(F:\workspace),你先按F:,然后在用cd workspace进入workspace的文件中,然 ...

  2. Perl线程介绍

    Perl 中的线程 本文首先概述了线程的概念和意义,接着回顾了 Perl 语言中对线程支持的演化历史,然后通过一系列示例重点介绍了 Perl 中线程的实现,数据的共享以及线程间的同步,最后归纳并总结了 ...

  3. vim7.4官方源码在vs2013的编译方法及问题总结

    vim7.4发布也有一段时候了,也该是把之前编译的7.3重新编译一下了,于是考虑着到最新的visual studio 2013编译一下,也顺便看看有没有其它问题. 1.安装vs2013,这个应该不用说 ...

  4. python垃圾回收算法

    标准python垃圾回收器由两部分组成,即引用计数回收器和分代垃圾回收器(即python包中的gc module).其中,引用计数模块不能被禁用,而GC模块可以被禁用. 引用计数算法 python中每 ...

  5. IDEA集成Python插件,SDK配置

    (第一次写在博客园添加随笔, 会有些生硬,有不对的地方和描述错误之处希望可以指出) 最近在学习一个新的知识点,涉及到Python的使用,因为第一次接触很多地方都不是很明白 ,好,废话不多说,现在直接上 ...

  6. nyoj 214 单调递增子序列(二) 【另类dp】

    单调递增子序列(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 ,a2...,an}(0<n<=100000),找出单调递增最长子序列.并求出其长度 ...

  7. 阿里云server改动MySQL初始password---Linux学习笔记

    主要方法就是改动 MySQL依照文件以下的my.cnf文件 首先是找到my.cnf文件. # find / -name "my.cnf" # cd /etc 接下来最好是先备份my ...

  8. OpenCASCADE解非线性方程组

    OpenCASCADE解非线性方程组 eryar@163.com Abstract. 在科学技术领域里常常提出求解非线性方程组的问题,例如,用非线性函数拟合实验数据问题.非线性网络问题.几何上的曲线曲 ...

  9. 在oracle存储过程中创建暂时表

    在oracle的存储过程中,不能直接使用DDL语句,比方create.alter.drop.truncate等. 那假设我们想在存储过程中建立一张暂时表就仅仅能使用动态sql语句了: create o ...

  10. 关于SQL分页存储过程的分析

    建 立一个 Web 应用,分页浏览功能必不可少.这个问题是数据库处理中十分常见的问题.经典的数据分页方法是:ADO 纪录集分页法,也就是利用ADO自带的分页功能(利用游标)来实现分页.但这种分页方法仅 ...