HTML 及 HTML 5
-
HTML 全称 Hypertext Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。
-
HTML5是HTML最新的修订版本，前身名为 Web Applications 1.0，2004 年被 WHATWG 提出，2007 年被 W3C 接受，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。
<!--
<!DOCTYPE html> HTML5 ====> 标准网页声明
全称为 Document Type HyperText Mark-up Language，支持 HTML5 标准的主流浏览器都认识这个声明
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 可以在头部区域的元素标签为<meta> <title> <style> <base> <link> <script> <noscript> -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
main page
</body>
</html>
HTML 5 语法
- 内容类型（ContentType）：HTML5的文件扩展符与内容类型保持不变，仍然为
.html或.htm - DOCTYPE 声明：不区分大小写
- 指定字符集编码：meta charset="utf-8"
- 可省略标记的元素
- 不允许写结束标记的元素：br hr img input link meta col embed
- 可以省略结束标记的元素：li dt dd p option thead tbody tfoot tr td th colgroup
- 可以省略全部标记的元素（不用写也生效）：html head body colgroup tbody
- 引号要求：属性值可以使用双引号，也可以使用单引号
语义化标签
| 语义化标签 | 说明 |
|---|---|
| header | 页面中一个内容区或整个页面的标题/头部 |
| footer | 页面中一个内容区或整个页面的脚注/底部 |
| nav | 页面中导航链接部分 |
| article | 与上下文无关的独立内容 |
| aside | 在article之外，与article内容相关的辅助信息 |
| section | 独立的内容区块 |
| figure | 表示一段独立的流内容，使用figcaption元素为其添加标题（第一或最后一个子元素的位置） |
| main | 页面主要内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
overflow: auto;
}
html,body{
height: 100%;
}
.page_header,.page_footer{
height: 120px;
text-align: center;
background-color: orangered;
font: normal bolder 50px/120px Aria;
}
.page_section{
height: calc(100% - 240px);
}
.section_nav,.section_main,.section_aside{
float: left;
}
.section_nav,.section_aside{
width: 200px;
height: 100%;
background-color: orange;
text-align: center;
}
.section_main{
width: calc(100% - 440px);
height: 100%;
padding: 0 20px;
}
.section_nav>span{
color: white;
font: normal bolder 20px/50px Aria;
}
.section_nav>ul{
text-align: left;
}
.section_nav li{
text-indent: 2em;
height: 60px;
list-style-type: none;
border-bottom: 1px solid white;
font: normal bold 18px/60px Aria;
}
.section_nav li:nth-of-type(1){
border-top: 1px solid #ffffff;
}
.article_header,.article_footer{
height: 60px;
margin: 5px 0;
text-align: center;
font: normal bold 20px/60px Aria;
background-color: tomato;
}
.article_section{
height: calc((100% - 275px) / 2);
font: normal lighter 20px/35px Aria;
text-indent: 2em;
display: flex;
align-items: center;
}
.section_aside>span:nth-of-type(1){
display: block;
font: normal bolder 20px/50px Aria;
color: white;
}
.section_aside>span:nth-of-type(2){
display: block;
text-indent: 2em;
text-align: left;
padding: 0 15px;
font: normal lighter 15px/40px Aria;
border-top: 1px solid white;
}
</style>
</head>
<body>
<header class="page_header">Page Header</header>
<section class="page_section">
<nav class="section_nav">
<span>Nav</span>
<ul>
<li>lorem list</li>
<li>lorem list</li>
<li>lorem list</li>
</ul>
</nav>
<main class="section_main">
<header class="article_header">Article Header</header>
<section class="article_section">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit animi hic, aspernatur ad quas dignissimos, quis id vel magnam, dicta fugiat. Deserunt vitae perferendis quidem tempora saepe iusto minus ipsum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto eveniet quaerat, quibusdam laudantium illum laboriosam ratione pariatur facilis neque voluptatum consequatur tenetur sunt nostrum placeat, autem magnam unde cum porro!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt voluptatibus eaque adipisci, veritatis rerum vel nam ab dolorem iste voluptatem, incidunt at obcaecati dicta. Cumque blanditiis ea eius deserunt assumenda?
</section>
<footer class="article_footer">Article Footer</footer>
<header class="article_header">Article Header</header>
<section class="article_section">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, illo! Unde doloremque sapiente rerum impedit excepturi ad velit, dolores dolore laborum tenetur nesciunt quibusdam iure nulla. In error doloribus porro.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia, eveniet sit in voluptatibus deserunt asperiores corporis ipsum reiciendis at tempore libero saepe illum error quis iure suscipit, molestiae nobis explicabo!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt sunt totam aliquid, illum consequatur ullam repellendus nulla laudantium libero eveniet soluta nemo vero omnis molestiae, veritatis inventore facere nam. Consequuntur!
</section>
<footer class="article_footer">Article Footer</footer>
</main>
<aside class="section_aside">
<span>Aside</span>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, eveniet sequi quo modi minus, asperiores dignissimos explicabo ratione repudiandae quisquam voluptatum libero doloremque. Optio vel amet nobis beatae blanditiis dicta?</span>
</aside>
</section>
<footer class="page_footer">Page Footer</footer>
</body>
</html>
DHTML
DHTML是Dynamic HTML的简称，就是动态的html，是相对传统的静态的html而言的一种制作网页的概念，并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。
DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者当你点击一个超链接后会自动生成一个下拉式的子超链目录。
XHTML
XHTML（EXtensible HyperText Markup Language）是可扩展超文本标记语言，是一种置标语言，表现方式与 HTML 类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言，而XHTML则基于XML，可扩展标记语言是标准通用置标语言的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
- XHTML 是作为一种 XML 应用被重新定义的 HTML
- 建立XHTML的目的就是实现HTML向XML的过渡，取代 HTML
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
XHTML 与 HTML 对比
1.XHTML所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<li>而不一定写对应的</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭。
2.XHTML所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。
3.所有的XHML标记都必须合理嵌套 <p><b></p></b> 必须修改为：<p><b></b></p>
4.属性引号不可省略
5.属性赋值才生效 <input type="checkbox" checked="checked" />
6.不要在注释内容中使“--” <!--注释----注释--> 是无效的，用等号或者空格替换内部的虚线 <!--这里是注释============这里是注释-->
7.图片必须有ALT说明文字
可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
XML
XML（可扩展标记语言）可以对文档和数据进行结构化处理，从而能够在部门、客户和供应商之间进行交换，实现动态内容生成，企业集成和应用开发，例如，电子商务交易等。
- XML 被设计用来传输和存储数据，单独的XML不能显示，而且没有预定义的标签，需要结合CSS等技术显示
- HTML 被设计用来显示数据
XML 与 HTML 对比
- XML不是替代HTML，是对HTML的补充
- XML用于传输和存储数据，其焦点是数据的内容；HMTL用于显示数据，其焦点是数据的外观
- XML没有预定义标签，需要完全自定义；HTML有预定义标签，也可自定义
- XML所有的标记都必须成对出现，而HTML不是所有的都需要成对出现
- XML大小写敏感，HTML标记不区分
XML示例：
<?xml version="1.0" encoding="utf-8" standalone="yes"?>\
<hello>\
<num1>1</num1>\
<num2>2</num2>\
</hello>
