一、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. Android手机使用WIFI及USB建立FTP服务器总结

    想必大家经常在PC和Android之间传输文件,并不是每次都会插USB接口进行文件传输,就算是插上USB接口,还是有个问题,那就是Android打开大容量存储模式之后,经常很多软件就会被强制停止使用, ...

  2. mysql 查看单个表每个索引的大小

    /*单个表每个索引的大小*/ SELECT sum(stat_value) pages, table_name part, index_name, concat(,),'M',' rows') * @ ...

  3. cogs 1396. wwww

    1396. wwww ☆   输入文件:wwww.in   输出文件:wwww.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 对于一个递归函数w(a,b,c) 如果 ...

  4. PMP杂谈--制约因素与如果条件

     制约因素和如果条件都是项目范围说明书的内容.它们是项目范围基准的一部分,是定义活动.估算活动持续时间.制定进度计划.估算成本.制定预算.识别风险和规划採购等多个过程的输入. 差别:制约因素是确定 ...

  5. 创建maven项目pom.xml出现错误（依赖Missing）

    Maven的依赖问题 在聚合模块时候,发现在父工程目录中的依赖存在一些问题.一开始是${pagehelper.version},后来将版本直接填写相应的版本如图下 依赖添加失败 * 在父工程的jar包 ...

  6. js---11闭包

    //匿名立即调用函数 (function(){//把a,b,f全部隐藏在函数中,外部访问不到, var a = 5; var b = 6; function f(){ alert(a); } wind ...

  7. Day5费用流

    算法 zkw费用流:多路增广,增光D[y]=D[i]+c的边 无源汇上下界最小费用可行流 每次强行增加下界的流量 类似网络流,拆边 原边的费用为c,拆出来的边费用为0 负边和负圈 直接应用 SDOI2 ...

  8. 简单说一下 JSON和JSONP

    JSON和JSONP,但从缩写看,可能会以为他们是很相似的两个名词,但他们除了缩写相似外,他们是两种类型的概念. 首先: JSON(JavaScript Object Notation)即JavaSc ...

  9. 将BT下载对抗到底

    将BT下载对抗到底      随着互联网业务的多元化,各种P2P应用也越来越多,在企业中多数流量都会被类似于BT的下载所占用,BT之所以会危害到局域网,是因为它占用了大量网络带宽.网络管理员可以通过一 ...

  10. linux环境下禅道搭建

    1.下载禅道安装包,根据操作系统的版本: 2.上传包到linux的opt目录中: 3.解压包: cd /opt tar xzvf 禅道包名称,如:tar xzvf ZenTaoPMS.8.1.3.zb ...