分类： XHTML（CSS）

HTML学习资料整理

适用对象

这是一篇关于HTML（XHTML,HTML5）+CSS方面的资源整理的文章,仅适用于新手或者初学者。老鸟请自动忽略，对于很多朋友说HTML入门很难，希望这篇文章可以帮到大家。

html

在线学习

  1. w3school:http://www.w3school.com.cn/ (包含了丰富的WEB学习内容,推荐设置此网站为首页,每天学习)
  2. RGB颜色查询对照表:http://www.114la.com/other/rgb.htm (可查询颜色,很丰富,推荐使用高版本Google Chrome浏览器访问)
  3. 在线调试HTML+CSS：http://dabblet.com/ （在线调试HTML+CSS,效果即时显示[!!不支持中文字符]，可用于简单的页面调试）
  4. 我总结的HTML+CSS教程(入门级别的): http://www.w1520.com/xhtml/  （白话版的教程）
  5. 这样去写你的HTML：http://sofish.de/1688 （简单介绍了一下怎么写HTML,新手应当看看）
  6. 各种代码格式化：http://www.ostools.net/codeformat （格式化你的HTML+CSS代码）

代码工具

  1. Adobe Dreamweav: 下载地址 (专业HTML+CSS编写工具,有代码自动提示功能,内附破解补丁)
  2. Gedit: 下载地址 (Linux下面的代码编辑器,可以编写多种语言[无代码提示功能])
  3. 其他工具.

书籍

  1. 《HTML、XHTML、CSS与JavaScript入门经典》   (很不错的一本书,只是JavaScript的部分我没看下去…)
  2. 《Web编程入门经典》  （推荐看看）
  3. 《HTML、CSS入门经典》 （推荐）

>>提示:看书比较费时间,看其中一本即可。

在线求助

  1. CSDN：http://bbs.csdn.net  (N多大牛集散地,内有很多版块)

>>提示:其余论坛也可以,但一般问题,我都在CSDN问。

前端博客

  1. 前端观察：http://www.qianduan.net/
  2. Kejun’s Blog: http://hikejun.com/blog/
  3. 大发贱志：http://ceezi.com/

按照层次去写你的CSS

最近一直没写博客，有两方面的原因：

一、不知道写什么，忽然觉得迷茫；

二、忙于考试，以前从未觉得考试如此困难

今天，一个初学CSS的朋友发我一个图，然后问怎么把图片调整到边框。

CSS图
image-1619

将图片与边框之间的距离去掉?

她的代码是这样写的:

HTML代码.

HTML代码
image-1620

HTML代码

拿到之后，我也略微思考了半天，修改了li.box的padding和margin属性.还是没有起色。怎么办？

于是我尝试着在CSS里定义了下面这条语句：

#main ul { margin:auto; padding:0; width:240px; height:auto; text-align:left; }

也就是这条语句界面一下子就“和谐”了。

修改后的效果图
image-1621

 

定义后的效果图

 

这忽然让我联想到了:自上到下。于是在写CSS的时候，请注意以下顺序，即便上级没有什么可用的信息，也一定要写上（有时候觉得这条CSS确实没多大用处，但差错偏偏就出现在这里）。

 

XHTML Strict不支持的标签

XHTML Strict（严格版本）如果您需要干净的标记，免于表现层的混乱，请使用此类型。

XHTML Strict DTD：

这是一个简单的文本，为了我自己方便，也公开提供给大家。

按功能类别排列

下面的表格列出了所有的 HTML/XHTML 元素，并定义了每个元素可以出现在哪种文档类型声明 (DTD) 中 。

标签HTML 4.01 / XHTML 1.0XHTML 1.1
TransitionalStrictFrameset
<a>YesYesYesYes
<abbr>YesYesYesYes
<acronym>YesYesYesYes
<address>YesYesYesYes
<applet>YesNoYesNo
<area />YesYesYesNo
<b>YesYesYesYes
<base />YesYesYesYes
<basefont />YesNoYesNo
<bdo>YesYesYesNo
<big>YesYesYesYes
<blockquote>YesYesYesYes
<body>YesYesYesYes
<br />YesYesYesYes
<button>YesYesYesYes
<caption>YesYesYesYes
<center>YesNoYesNo
<cite>YesYesYesYes
<code>YesYesYesYes
<col />YesYesYesNo
<colgroup>YesYesYesNo
<dd>YesYesYesYes
<<del>YesYesYesNo
<dfn>YesYesYesYes
<dir>YesNoYesNo
<div>YesYesYesYes
<dl>YesYesYesYes
<dt>YesYesYesYes
<em>YesYesYesYes
<fieldset>YesYesYesYes
<font>YesNoYesNo
<form>YesYesYesYes
<frame />NoNoYesNo
<frameset>NoNoYesNo
<h1> to <h6>YesYesYesYes
<head>YesYesYesYes
<hr />YesYesYesYes
<html>YesYesYesYes
<i>YesYesYesYes
<iframe>YesNoYesNo
<img />YesYesYesYes
<input />YesYesYesYes
<ins>YesYesYesNo
<isindex>YesNoYesNo
<kbd>YesYesYesYes
<label>YesYesYesYes
<legend>YesYesYesYes
<li>YesYesYesYes
<link />YesYesYesYes
<map>YesYesYesNo
<menu>YesNoYesNo
<meta />YesYesYesYes
<noframes>YesNoYesNo
<noscript>YesYesYesYes
<object>YesYesYesYes
<ol>YesYesYesYes
<optgroup>YesYesYesYes
<option>YesYesYesYes
<p>YesYesYesYes
<param />YesYesYesYes
<pre>YesYesYesYes
<q>YesYesYesYes
<s>YesNoYesNo
<samp>YesYesYesYes
<script>YesYesYesYes
<select>YesYesYesYes
<small>YesYesYesYes
<span>YesYesYesYes
<strike>YesNoYesNo
<strong>YesYesYesYes
<style>YesYesYesYes
<sub>YesYesYesYes
<sup>YesYesYesYes
<table>YesYesYesYes
<tbody>YesYesYesNo
<td>YesYesYesYes
<textarea>YesYesYesYes
<tfoot>YesYesYesNo
<th>YesYesYesYes
<thead>YesYesYesNo
<title>YesYesYesYes
<tr>YesYesYesYes
<tt>YesYesYesYes
<u>YesNoYesNo
<ul>YesYesYesYes
<var>YesYesYesYes

注释：“文档类型声明”的英文译文是 doctype declaration。

以上资料来自：http://www.w3school.com.cn/tags/html_ref_dtd.asp

另外提示：

  • <a>元素的target特性被去掉了
  • <iframe>元素被去掉了
  • 所有的文本,图片或者任何信息都必须包含在一个容器中,例如:”<p>这是示例</p>”这个是正确的
  • 这个是错误的示例<没有包含在任何元素内>
  • 写完代码去W3C的XHTML代码验证页面，验证一下就知道了。（地址）

在HTML5没有普及之前，用XHTML Strict是个不错的选择。

Adobe Dreamweaver CS6 简体中文正式版（附破解补丁）

虽然官方还没有正式提供Adobe Dreamweaver CS6试用版本的下载，但似乎无法逃过网友的法眼，找到Adobe Dreamweaver CS6 真实的下载地址。Adobe Dreamweaver CS6 的破解办法与前面介绍的Adobe Photoshop CS6 破解版一样，都是利用amtlib.dll替换法。

Adobe Dreamweaver CS6
image-1506

Adobe Dreamweaver CS6 对于网页设计人员来说还是不可少的。Adobe Dreamweaver CS6 的新增功能，让Dreamweaver变得更加强大。比如：

集成 CMS 支持，对 WordPress、Joomla! 和 Drupal 等内容管理系统框架的创作和测试支持。
CSS 检查，以可视方式显示详细的 CSS 框模型，轻松切换 CSS 属性并且无需读取代码或使用其他实用程序。
与 Adobe BrowserLab 集成 ，使用多个查看、诊断和比较工具预览动态，网页和本地内容。
PHP 自定义类代码提示，为自定义 PHP 函数显示适当的语法，帮助您更准确地编写代码。
CSS Starter 页增强功能，借助更新和简化的 CSS Starter 布局，快速启动基于标准的网站设计。
保持跨媒体一致性，将任何本机 Adobe Photoshop 或 Illustrator 文件插入 Dreamweaver 即可创建图像智能对象。更改源图像，然后快速、轻松地更新图像。
站点特定的代码提示，从 Dreamweaver 中的非标准文件和目录代码提示中受益。

更多Adobe Dreamweaver CS6 功能介绍，请访问Adobe官方。

Adobe Dreamweaver CS6
image-1507

Adobe Dreamweaver CS6 破解方法：

Step 1 – 下载Adobe Dreamweaver CS6 简体中文版（官方下载地址），选择试用版下载。

Step 2 – 下载Adobe Dreamweaver CS6 破解补丁amtlib.dll（百度网盘）覆盖原安装文件夹下的amtlib.dll，即可成功破解Adobe Dreamweaver CS6 。破解方法与PS的一样，而且它们的破解补丁amtlib.dll是通用的。

补充安装方法【我按照此方法已经破解成功了】：

  • 断网
  • 运行下载好的exe文件，解压安装包
  • 运行setup.exe（或者已经自动运行了），下一步，走到输入序列号这一步。
  • 在输入序列号界面，随便输入一串数字（比如全是1）,点下一步。
  • 安装程序开始检测序列号，发现无法联网，弹出窗口，选择“以后验证序列号”，然后就可以继续安装
  • 安装成功后，把破解补丁的那个dll文件覆盖程序根目录下的同名文件
  • 重新启动软件，不再提示输入序列号，安装+破解结束！

 

截图：

DW启动截图
image-1508
DW CS6启动界面截图

DW CS6主界面截图
image-1509

DW CS6主界面截图

DW CS6真的很霸气啊。。大家也试试。

这是一篇转载自网络的文章。（原文）

PS : 2013.3.19 更新

说说前端

关于前端

Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。

上面是对前端的一个比较正确的解释。

我喜欢的XHTML+CSS

在常用的三个XHTML版本（Strict，Transitional，Frameset）中，一开始我用过渡（Transitional），后来慢慢接触严格版(strict)，早期的一些页面都是过度版本的。相对于严格版本，过渡的会比较宽松。

以前曾经用过一次框架集，很麻烦。关于框架集的缺点：

  • 会产生很多页面，不容易管理
  • 不容易打印
  • 浏览器的后退按钮无效
  • 代码复杂,无法被一些搜索引擎索引到
  • 多数小型的移动设备（PDA 手机）无法完全显示框架
  • 多框架的页面会增加服务器的http请求
  • 由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃

关于框架集的优点：

  • 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
  • 方便制作导航栏

但是现在已经不推荐使用框架集了，前几天，百度联盟发布消息，禁止iframe调用广告，而早在2011年5月Google也开始禁止iframe调用其广告。

框架集曾经被很多网站用作会员中心，管理后台，但在网站首页，前台几乎没有网站用。而大多数网站则用iframe调用广告。事实证明iframe也不是那么好用，而目前大部分网站还在用iframe。（参考：为什么要少用iframe）

一些了解XHTML+CSS的建议：

  1. 买一本书《XHTML.CSS与JavaScript入门经典》很强大，非常详细（框架集那一张可以简单了解下就可以，在即将发布的HTML5中已经去掉了框架集）
  2. 或者去一个网站：http://www.w3school.com.cn/index.html
  3. 测试页面优先使用IE，然后是火狐，其余浏览器基本没问题（IE是个坑爹的货…）
  4. 初学用过渡版本，之后开始慢慢适应严格版
  5. 多写，多总结层次，多看别人的结构和代码
  6. 前端标配：Google Chrome 和 火狐 ，最新版本的IE（IE9仅支持Windows7）
  7. Dreamweaver 是前端必备的工具

关于HTML5

HTML5是XHTML的下一个版本，不过目前还未正式发布。据业内N多砖家预测，HTML5要普遍用起来的话，还要那么几年。在这几年里面，需要我们做的也就几件事：

  1. 先打好XHTML的基础（严格版最好）
  2. 然后等HTML5正式发布
  3. 开始去学把！

在HTML5里面有很多新特性，我前几天本来打算去买本书去学HTML5，但再三考虑还是过段时间再说（至少等正式版发布之后）。

目前一些主流的浏览器已经开始支持HTML5，但HTML5很多功能都可能会变化。

关注HTML5的最新进度，请点击此处:W3C中国

最新的一个文档

这是一个书本上的一个小作品，主要特征如下：

  1. 基于XHTML严格版本
  2. 导航栏样子发生了变化（实际的商城肯定不会用我这个导航栏的啦。。我比较懒）
  3. 其余问题，我也不记得了。。（我太懒…）
  4. 头部LOGO旁边的那个货是玩笑，世界上没有100%…别当真哦，亲

好了，上图：

HTML网页
image-1487

网页小作品

我只是热爱前端，说实话：搞前端真的很苦逼。特别是当一个浏览器可以正常显示，而另外一个浏览器又不能正常显示的时候。。。

最高兴的时候是：所有的浏览器页面都显示正常了！