HTML总结 | 易学教程

HTML（结构）+CSS（样式）+JavaScipt（行为）=网页

HTML（HyperText Markup Language）:超文本标记语言，使用一些标记标签来描述页面（页面结构）

!DOCTYPE html <!--html5文档标准的声明-->
<html>
<head>
<!--头部-->
<title>标题</title>
<link><!--外部资源-->
<style></style><!--内部样式-->
<meta name="keyword" content="内容"><!--为搜索引擎定义关键词-->
<meta name="description" content="内容"><!--为网页定义描述内容-->
<meta name="author" content="内容"><!--定义网页作者-->
<meta http-equiv="refresh" content="10"><!--10秒刷新当前页面-->
<meta charset="utf-8"><!--定义网页编码格式为utf-8-->
<script></script><!--脚本文件-->
</head>
<body>
<!--主体-->
<h1></h1><!--标题-->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<p></p><!--段落-->
<a href="url" target="_blank"><!--链接，target：在什么地方打开url（_blank;_parent;_self;_top;framename）-->
<img src="url" alt="图片不显示时的替换文本"><!--图片-->

<table><!--表格-->
	<th></th><!--表头-->
	<tr><!--行-->
		<td></td>
		<td></td>
	</tr>
</table>

<ul><!--无序列表-->
	<li></li>
</ul>

<ol><!--有序列表-->
	<li></li>
</ol>

<dl><!--自定义列表-->
	<dt></dt>
	<dd></dd>
</dl>

<div></div><!--块级元素，换行开始结束-->
<span></span><!--内联元素，不换行开始结束-->

<form><!--表单-->
<input type='text' name='' value=''><!--文本域-->
<input type='password' name='' value=''><!--密码输入框-->
<input type='radio' name='' value=''><!--单选按钮-->
<input type='checkbox' name='' value=''><!--复选按钮-->
<input type='submit' value=''><!--提交按钮-->
</form>

<iframe src='url' width='' height=''><!--框架，显示链接内容-->

</body>
</html>

**HTML5是HTML的新标准，总的来说它提供了以下新特性：*

新元素，新属性，完全支持 CSS3 ，Video 和 Audio ，2D/3D 制图，本地存储，本地 SQL 数据，Web 应用

!DOCTYPE html
<html>
<head>
<meta charset='utf-8'>
<style>

</style>
<script>
var img=doucument.getElementById('img');
img.ondragenter=function(){}//拖动元素进入触发
img.ondragleave=function(){}//拖动元素离开触发
img.ondragstart=function(){}//拖动开始触发
img.ondragend=function(){}//拖动结束触发
img.ondrop=function(){}//拖动元素在目标上鼠标松开触发
img.ondragover=funciton(e){ //拖动元素在目标上时触发
	e.preventDefault();//默认无法将其它元素放到元素上，加此句取消默认
}

</script>
</head>
<body>
<canvas id='' width='' height=''></canvas><!--图形容器，一般通过脚本语言javascript进行图形绘制>
<math></math><!--数学标记语言-->
<video><!--视频-->
<source src='url' type='video/mp4'>
</video>
<audio><!--音频-->
<source src='url' type='audio/mp3'>
</audio>
<img src='url' draggable id='img'><!--可拖动-->

<header></header><!--语义化标签-->
<nav></nav>
<article>
<section></section>
</article>
<aside></asiede>
<footer></footer>

<input type='color'><!--input新类型-->
<input type='date'>
<input type='email'>
<input type='number'>
<input type='range'>
<input type='search'>
<input type='tel'>
<input type='url'>
<input type='month'>
<input type='week'>
<input type='time'>

<input list='food'><!--输入域选项列表-->
<datalist id='food'>
	<option value='egg'>
	<option value='banana'>
</datalist>
</body>
</html>

Web存储

1.localStorage（本地存储）：除非清除，否则一直保存在本地，可多窗口共享（在相同的协议、相同的主机名、相同的端口下），仅存储在浏览器中，不与服务器通信。

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

2.sessionStorage（会话存储）：当页面关闭或浏览器关闭时被清除，仅存储在浏览器中，在相同的协议、相同的主机名、相同的端口下，相同窗口才可操作，不与服务器通信。

保存数据：sessionStorage.setItem(key,value);
读取数据：sessionStorage.getItem(key);
删除单个数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();
得到某个索引的key：sessionStorage.key(index);

应用缓存（没有网络时可以访问）

1、可配置需要缓存的资源；

2、网络无连接应用仍可用；

3、本地读取缓存资源，提升访问速度，增强用户体验；

4、减少请求，缓解服务器负担。

！DOCTYPE html
<html manifest='test.appcache'><!--引入缓存清单-->
<head>
<meta charset='utf-8'>
</head>
<body></body>
</html>

test.appcache:

CACHE MANIFEST

#要缓存的文件
CACHE:
    images/img1.jpg
    images/img2.jpg


#指定必须联网才能访问的文件
NETWORK:
     images/img3.jpg
     images/img4.jpg


#当前页面无法访问时回退的页面
FALLBACK:
    404.html

来源：CSDN

作者：我每天都在学习

链接：https://blog.csdn.net/ljh5920/article/details/103839188

标签

html语言

html文件