文章大纲来源:【Day 1】HTML & HTML 5标记语言XHTML/HTML/HTML 5异同了解doctypeHTMLHTML 5标记语言标记语言(ML)即 Markup Language,可以准确定义数据信息本身以及和数据相关的信息。其中标记(markup)这个词,来源于传统出版业的“标记”手稿,也就是在原稿边缘加注一些符号来指示打印上的要求(字体段落的要求)。在这个例子中,原稿本身就是数据信息,加注的指示就是和数据相关的信息。HTML/XHTML/HTML 5异同HTML 简述HTML 是超文本标记语言 (HyperType Markup Language) 的简称,HTML是用来描述网页的一种语言。XHTML 简述XHTML 是可扩展超文本标签语言 (EXtensible HyperText Markup Language)的简称, XHTML 的目标是用规范化语法结构来取代 HTML ,以 XML 为根本重构了 HTML 4.01 。HTML 5 简述HTML 5 的设计目的是为了在移动设备上支持多媒体。新的语法特性被引进以支持这一点,如video、audio和canvas标记 (tag) 。HTML 5 将会取代1999年制定的 HTML 4.01、XHTML 1.0 标准。三者异同点HTML 5 和 XHTML 是老版 HTML 的替代HTML 5 主要用来在移动设备上支持多媒体XHTML 为了用来严格规范语法结构HTML/XHTML/HTML 5 仅仅是版本不同目前 HTML 5 是主流原文引用:HTML、XML、XHTML和HTML 5的异同拓展阅读:英文原文: Jeremy Keith | The Design of HTML 5翻译:Web的真谛:HTML 5到底是什么意思?原演讲视频:Jeremy Keith | The Design of HTML 5 | Fronteers 2010doctype<!DOCTYPE> 声明帮助浏览器正确地显示网页。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。HTML 5 声明:<!DOCTYPE html>HTML 4.01 声明:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN"“http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 声明:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN"“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">内容引用:HTML <!DOCTYPE>HTML基本格式标准的HTML 5文档的格式:<!DOCTYPE html><!–文档类型声明,不区分大小写,主要是告诉浏览器当前的文档类型–><html><!– 表示html文档开始 –> <head> <!– 包含文档元数据开始 –> <meta charset=“UTF-8”> <!– 声明字符编码 –> <title>Title Tag</title> <!– 设置文档标题 –> </head> <!– 包含文档元数据接受 –> <body> <!– 表示html内容部分开始,也就是可见部分 –> </body> <!– 表示html内容部分结束 –></html><!– 表示html文档结束 –>内容引用:HTML 5的基本格式块级(block)元素块级元素最常使用的是div,其他的还有hX、p、nav、aside、header、footer、section、article、ul-li、address等等,也可以对任意元素进行display:block属性设置。块级元素特征:设置宽高属性有效margin、padding上下左右(水平垂直)均有效内容会自动进行换行多个块状元素标签写在一起,默认排序从上到下行内(inline)元素行内元素最常使用的是span,其他的还有a、code、i、img、input、textarea等等,也可以对任意元素进行display:inline属性设置。行内元素特征:设置宽高属性无效margin设置仅左右(水平)方向有效,上下(垂直)无效padding设置上下左右都有效内容不会自动进行换行行内块(inline-block)元素行内块元素综合了两者的特征,各有取舍,可以对任意元素进行display:inline-block属性设置。行内块元素特征:内容不会自动进行换行能够识别宽高多个行内块元素默认排列方式从左到右HTML tag也不用每个都详细说一下,后面有时间的话开一个专题挑几个常用的出来详细说一下。HTML 参考手册语义化语义化的含义就是用正确的标签做正确的事情。HTML语义化就是让页面的内容结构化,便于浏览器、搜索引擎(机器)理解解析,利于SEO。内容引用:前端工程师手册-HTML语义化script/style/link<script>标签用于在 HTML 页面中插入一段 JavaScript 。<script type=“text/javascript”>document.write(“Hello World!”)</script>script元素既可以包含脚本语句(如上),也可以通过src属性指向外部脚本文件:<script src=”…/filename.js”/></script><style>标签用于为HTML文档定义样式信息。在style中,可以规定浏览器如何呈现HTML文档,标签中type属性是必须的,定义style元素的内容,唯一可能值是text/css,style元素位于head部分中。<head> <style type=“text/css”> /* … */ </style></head><link>标签定义文档与外部资源的关系,常见的用途是连接样式表,在 HTML 中,<link> 标签没有结束标签。<head><link rel=“stylesheet” type=“text/css” href=“theme.css” /></head>HTML 5初期需要了解内容:新便签在各浏览器的兼容情况与媒体相关的标签HTML 5 APICanvas在后面涉及到的时候再开专题进行介绍。个人静态博客:气泡的前端日记: https://rheabubbles.github.io