HTML5

HTML

  • 组成

    DTD（文档类型声明）、HTML命名空间两部分

    HTML命名空间包括文档头<head>和文档主体<body>

    文档头用来提供网页的媒体标签<mata>，标题标签<title>，以及加载的各种外部性文档<style>或者脚本语言<script>,而文档的主体用于储存各种用语显示网页的数据

  • 基本结构

    <!DOCTYPE html>
<html>                文件开始的标记
    <head>            文件头部开始的标记
        .......       文件头部内容
    </head>           文件头部结束
    <body>            文件主体开始的标记
         .....        文件主体内容
    </body>           文件主体结束
</html>               文件结束的标记

  • 文档类型

    存在三种XHTML文档类型：

    • STRICT（严格类型）

    • TRANSITIONAL（过渡类型）

    • FRAMESET（框架类型）

      XHTML 1.0 规定了三种 XML 文档类型，以对应上述三种 DTD。

      XHTML 1.0 Strict
      <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      在此情况下使用：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。

      XHTML 1.0 Transitional
      <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      在此情况下使用：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。

      XHTML 1.0 Frameset
      <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

      在此的情况下使用：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

  • 页面构成

    https://blog.csdn.net/z983002710/article/details/76300327

  • 主要优点

    • 多设备跨平台
    • 自适应网页设计
    • 即时更新
    • 提高可用性
    • 改进用户体验
    • 新增标签有助于开发定义重要内容
    • 可以在站点放置更多多媒体视频
    • 可以很好的代替Flash和Silverlight
    • 可移植性好

  • HTML5特性

    1. 语义特性（Class：Semantic）：HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的。

    2. 本地存储特性（Class: OFFLINE & STORAGE）：HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI

    3. 设备访问特性 (Class: DEVICE ACCESS)：为移动开发而生。重力感应、全球地理定位、麦克风、摄像头

    4. 连接特性（Class: CONNECTIVITY）：WebSocket、Server-Sent Events实现双向连接，消息推送

    5. 网页多媒体特性( Class: MULTIMEDIA）：支持网页端的Audio、Video等多媒体功能。

    6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）：图形增强，SVG，Canvas，WebGL，2D/3D游戏和页面视觉特效。

    7. 性能与集成特性（Class: Performance & Integration）：没有用户会永远等待你的Loading，HTML5增加WebWorker、XMLHttpRequest2

    8. 呈现：（CSS3/styling)

HTML5主体结构

  • 结构性标签体系

    1.简化DOCTYPE

    <!doctype html>可以忽略大小写，引号，最后一个尖括号前的反斜杠线

    https://www.douban.com/note/699662873/

    • 制作表格，列表，选择表，时间管理器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>唐诗三百首</title>
<style type="text/css">
body {
    background-color: #B4ECF1;
}
</style>
</head>
<body>
<table width='200' border='1' callspacing='2' cellpadding='2'>
	<caption>
	特定表格
	</caption>
	<tbody>
	<tr>
		<th scope='col'></th>
		<th scope='col'></th>
		<th scope='col'></th>
		<th scope='col'></th>
		</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		</tr>
	</tbody>
	</table>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>唐诗三百首</title>
<style type="text/css">
body {
    background-color: #B4ECF1;
}
</style>
</head>
<body>
<ul>
	学历
	<ol>1.ddd</ol>
	<ol>2.xxx</ol>
	<ol>3.fff</ol>
	<ol>4.scsc</ol>
	</ul>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>唐诗三百首</title>
<style type="text/css">
body {
    background-color: #B4ECF1;
}
</style>
</head>
<body>
<form id='form1' name='form1' method='post'>
	<laber for='select'>学历
	</laber>
	<select name='select' id='select'>
		<option>博士</option>
		<option>研究生</option>
		<option>本科</option>
		<option>大专</option>
		<option>高中</option>
	</select>
	
	</form>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>唐诗三百首</title>
<style type="text/css">
body {
    background-color: #B4ECF1;
}
</style>
</head>
<body>
<form id='form1' name='form1' method='post'>
	<laber for='date'>日期选择器<br>
	</laber>
	<input type='date' name='date'id="date">
	</form>
</body>
</html>
posted @ 2020-09-20 13:16  life_if_forever  阅读(247)  评论(0)    收藏  举报