1. 了解HTML
HTML概念
HTML,超文本标记语言。它由一套标签组成用来描述网页,值得我们注意的是HTML并不是编程语言,它只是一种标记,我们通过HTML定义了网页的结构,然后再利用其他技术装饰这个结构,赋予这个结构活动的能力。
HTML的内容并不复杂,也很容易上手,但是要编写出符合标准而且语义良好的HTML代码却不是一件容易的事情,需要我们不断的练习和学习才可以。
混淆内容
1. htm、html
一般我们操作的HTML都是html格式的,但是在其他地方却可能遇到过htm的文件。其实这两种格式的文件没有什么不同,htm只是为了兼容过去DOS命名格式出现的,而且现在已经很少用了。
2. shtml、shtm
这两种格式的文件被看作一种编程语言,它们可以被服务器识别,类似于JSP、ASP、PHP之类的文件,所以它们和html、htm是不同的。
3. DHTML
在网上的可能会看到这种说法,它不是一种编程语言,只是网景和微软两大浏览器厂商提出的浏览器4.x时代应该具备的特点。它集合了HTML、CSS、JavaScript可以动态的显示网页内容,所以它是相对于静态网页而言的,只是一种销售的术语。
HTML的历史
1993年6月,互联网工程工作小组发布了关于 超文本标记语言的工作草案(并非标准);
1995年11月,HTML2.0 作为RFC 1866 发布(2000年6月发布之后被宣布过时);
1996年1月14日,HTML3.2 发布,W3C 推荐的标准;
1997年12月18日,HTML4.0 发布,W3C 推荐的标准;
1999年12月24日,HTML4.01发布,做了微小的的改进,W3C推荐的标准;
2000年1月26日,XHTML1.0发布,W3C 推荐的标准;
2001年5月31日,XHTML1.1 发布;
XHTML 2.0 是W3C的工作草案,不过因为改动太大,学习成本太大,所以现在依然使用的还是 XHTML1.0;
目前HTML5作为最新的版本,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性、规则的建立提供很多新的网页功能,常见的像网页可以实现动态渲染、不需要使用任何插件就可以直接播放视频。尽管如此,可以HTML5依然在尝试的阶段,大部分浏览器还不能完全支持HTML5;
注意XHTML
在XHTML中标签名必须小写,HTML中标签名大小写不限;
在XHTML、HTML中的属性名都必须是小写;
在XHTML中标签必须严格的嵌套,HTML中对嵌套没有严格的规定;
在XHTML中标签必须封闭,在HTML中标签是否封闭并没有严格要求;
在XHTMl中即使是自闭标签也必须封闭,HTML中没有严格规定(针对 <img/> 、<br/>等标签);
在XHTML中属性值必须使用双引号,HTML中属性可以不使用双引号;
在XHTML中属性值必须使用完整形式,HTML中一些属性可以使用简写形式,如 <input disabled=” disabled”/> 和 <input disabled/>只有在HTML中才都是正确的;
在XHTML中还要求区分清除 内容标签和结构标签。如<p>作为内容标签,<table>作为结构标签,所以不允许将<table>放在 <p>;
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body> </body>
</html>
一个完整的HTML结构包括了声明、网页头部、网页主体几部分组成。其中声明部分定义网页使用的HTML版本,网页的头部定义了网页的标题、引用的样式和脚本等内容,网页的主体部分包含在浏览器页面中展示的所有内容。
1. 特点
网页的声明必须定义在HTML的第一行,网页的标题和主体两大部分包括在<html>标签中。
在编写HTML时,没有哪一部分是必须的,但是在编码时尽量按照这个结构编写HTML,不要缺失某一部分。
2. 声明
声明必须在HTML的第一行,它约束HTML的文档结构,校验是否符合Web标准,同时告知浏览器应该采用哪个版本的规范来解析文档。
在HTML4.01中的声明引用了DTD文件,而HTML5则没有。DTD: 规定标记语言的规则,这样浏览器才可以正确显示内容。
最好始终在页面中定义声明,这样方便浏览器按照统一的标准来解析。
3. <meta>标签
这个标签描述网页的基本信息,包括文档内容类型、字符编码、搜索的关键字、网站功能和服务的详细描述。而且值得注意的是这个标签的内容并不会在页面中展示出来,使用这个标签可以方便搜索引擎的检索和浏览器解析。
注意:如果想要了解更多和这个标签相关的信息可以访问 W3C的官网查看。
HTML编码
所有的标签名、属性名都必须小写,属性值使用 双引号。虽然在HTML中不区分大小写,但是 W3C 规范建议是小写;
为所有的关键因素定义 id、class ,这样方便和JS、CSS交互,避免不必要的错误出现;
推荐 id、class的命名方式按照语义和DOM树的层级关系定义合适的名称,而且名称中应该全部使用小写。其中 id的名称关键词用下划线” _ “连接,class 的关键词用 “-” 连接,避免命名冲突;
在HTML的不同层次缩进使用四个空格,如果这个元素包括子元素,那么这个元素对应的起始标签和结束标签分别单独占用一行;
为HTML添加必要的注释,不过在HTML中的注释不宜过多。添加注释的原则要在保证代码维护性的基础上,尽量保证让HTML代码简洁。一般注释添加在页面的公共部分(页面头部、尾部、侧边栏等),在页面中经常变化的部分以及需要后端代码注入的部分添加注释,而且注释添加的位置应该单独占一行不要在代码的前后添加注释;

随机推荐
- SMBus Host Controller not enabled!
今天去官网下载最新的ubuntu ubuntukylin-16.10-desktop-amd64.iso,下载后vm 运行,安装后结果报了这个问题 之后google搜索得到答案: 1.复制 cp ...
- OLED中的Demura
OLED作为一种电流型发光器件已越来越多地被应用于高性能显示中.由于它自发光的特性,与LCD相比,AMOLED具有高对比度.超轻薄.可弯曲等诸多优点.但是,亮度均匀性和残像仍然是它目前面临的两个主要难 ...
- CentOS 附加软件包
本人初学 CentOS,安装软件与 windows 下区别很大,大部分得通过 yum install xxx .这有个问题,一方面 yum 资源有限,另一方面 yum 默认装的版本较低.比如 Cent ...
- Timeout occurred while waiting for latch: class 'COLUMNSTORE_ROWGROUP_COLLECTION'
今天发现线上数据库主从延迟严重: SELECT ag.name AS ag_name, ar.replica_server_name AS ag_replica_server, dr_state.da ...
- stream操作 z
常见并常用的stream一共有 文件流(FileStream), 内存流(MemoryStream), 压缩流(GZipStream), 加密流(CrypToStream), 网络流(NetworkS ...
- QA-IDEA中用maven配置项目无法加载JDBC
java.lang.ClassNotFoundException: com.mysql.jdbc.Driver Im building Maven Java Web application and w ...
- Java文件操作工具类
import com.foriseland.fjf.lang.DateUtil;import org.apache.commons.io.FileUtils;import org.slf4j.Logg ...
- FRP-Functional Reactive Programming-函数响应式编程
响应式编程是一种面向数据流和变化传播的编程范式: 响应式编程和函数式编程的融合: 响应式编程为内核:函数式编程为工具: 流的概念先天适合函数式编程. Some quotes from the arti ...
- 汇编试验一:查看CPU和内存,用机器码指令和汇编指令编程
预备知识: r命令查看,改变CPU寄存器的内容 2.D命令查看内存 3.E命令改写内存 两种方式: 1: 2: 内存中写入机器码 用T命令执行机器码(先将CS:IP指向要执行的内存处) 用a命令写汇编 ...
- Thread-Specific-Storage for C/C++
引用出处:https://www.cse.wustl.edu/~schmidt/PDF/TSS-pattern.pdf 摘要: 理论上多线程会提高程序性能,但实际上,由于在获取和释放锁的开销,多线程经 ...