一、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. 学习《概率机器人》中英文PDF+Probabilistic Robotics

    研究机器人时,使机器人能够应对环境.传感器.执行机构.内部模型.近似算法等所带来的不确定性是必须面对的问题. <概率机器人>对概率机器人学这一新兴领域进行了全面的介绍.概率机器人学依赖统计 ...

  2. C++的new_handler

    这个new_handler其实对应于signal_handler 当operator new申请一个内存失败时,它会进行如下的处理步骤:1.如果存在客户指定的处理函数,则调用处理函数(new_hand ...

  3. Transport Tablespace Set(三) ----transport single tablespace

    源端字符集与endian查看: SQL> select userenv('language') from dual; USERENV('LANGUAGE') SIMPLIFIED CHINESE ...

  4. 动态规划 LCS，LIS

    1.最大连续子序列 dp[i]=max(dp[i-1]+a[i],a[i]) 以i为结尾 2.最大不连续子序列 dp[i]=max(dp[j]+a[i],dp[j]) 3.最大连续递增子序列 if a ...

  5. ajax ---- json 和 xml 区别

    2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...

  6. vue组件中 IS 用法

    //html <link rel="stylesheet" href="http://www.jq22.com/demo/animate-141106223642/ ...

  7. OpenCV —— 直方图与匹配

    直方图就是对数据进行统计,将统计值组织到一系列事先定义好的bin中.bin中的数值是从数据中计算出来的特征的统计量,这些数据可以是诸如梯度,方向,色彩或任何其他特征. 直方图获得是是数据分布的统计图 ...

  8. Atcoder ABC 071 C,D

    C - Make a Rectangle Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement W ...

  9. java（面向对象 ）

    java面向对象的语言 对象:真实存在唯一的事物. 类:实际就是对某种类型事物的共性属性与行为的抽取. 面向对象的计算机语言核心思想: 找适合的对象做适合的事情. 如何找适合的对象: 1.sun已经定 ...

  10. POJ 2079 Triangle 旋转卡壳求最大三角形

    求点集中面积最大的三角形...显然这个三角形在凸包上... 但是旋转卡壳一般都是一个点卡另一个点...这种要求三角形的情况就要枚举底边的两个点 卡另一个点了... 随着底边点的递增, 最大点显然是在以 ...