目录:
1.html是什么
2.使用方法
3.第一个程序
4.html的各个类型
5.实例:代码雨
1.html是什么
超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML(HyperText Mark-up Language)是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。
它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML文件的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
HTML文件是可以被多种网页浏览器读取,产生网页传递各类资讯的文件。从本质上来说,Internet( 互联网)是一个由一系列传输协议和各类文档所组成的集合,html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上,通过传输协议用户可以远程获取这些文件所传达的资讯和信息。
网络浏览器,例如Netscape Navigator或Microsoft Internet explorer,能够解释HTML文件来显示网页,这是网络浏览器的主要作用。当你使用浏览器在互联网上浏览网页时,浏览器软件就自动完成HTML文件到网页的转换。
2.使用方法
1.新建一个文本文档
2.输入HTML语言
3.点击另存为
4.文件名后缀改为.html,保存类型改为所有文件
5.桌面就会有个html图标(不一定长这样)
3.第一个程序
4.html的类型
1.HTML 文档类型
所有 HTML 文档必须以 <!DOCTYPE>
声明开头。
该声明并非一个 HTML 标签。它是一条“信息”,告知浏览器期望的文档类型。
在 HTML5 中,<!DOCTYPE> 声明非常简单:
<!DOCTYPE html>
但在HTML 4.01里……
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2.格式(不全)
<!DOCTYPE html> | </html> |
<title> | </title> |
<style> | </style> |
<body> | </body> |
<head> | </head> |
<script> | </script> |
<h1> | </h1> |
3.不同 DOCTYPE 中的有效 HTML 元素
标签 | HTML 5 | HTML 4 | XHTML |
---|---|---|---|
<a> | Yes | Yes | Yes |
<abbr> | Yes | Yes | Yes |
<acronym> | No | Yes | Yes |
<address> | Yes | Yes | Yes |
<applet> | No | Yes | No |
<area> | Yes | Yes | No |
<article> | Yes | No | No |
<aside> | Yes | No | No |
<audio> | Yes | No | No |
<b> | Yes | Yes | Yes |
<base> | Yes | Yes | Yes |
<basefont> | No | Yes | No |
<bdi> | Yes | No | No |
<bdo> | Yes | Yes | No |
<big> | No | Yes | Yes |
<blockquote> | Yes | Yes | Yes |
<body> | Yes | Yes | Yes |
<br> | Yes | Yes | Yes |
<button> | Yes | Yes | Yes |
<canvas> | Yes | No | No |
<caption> | Yes | Yes | Yes |
<center> | No | Yes | No |
<cite> | Yes | Yes | Yes |
<code> | Yes | Yes | Yes |
<col> | Yes | Yes | No |
<colgroup> | Yes | Yes | No |
<datalist> | Yes | No | No |
<dd> | Yes | Yes | Yes |
<del> | Yes | Yes | No |
<details> | Yes | No | No |
<dfn> | Yes | Yes | Yes |
<dialog> | Yes | No | No |
<dir> | No | Yes | No |
<div> | Yes | Yes | Yes |
<dl> | Yes | Yes | Yes |
<dt> | Yes | Yes | Yes |
<em> | Yes | Yes | Yes |
<embed> | Yes | No | No |
<fieldset> | Yes | Yes | Yes |
<figcaption> | Yes | No | No |
<figure> | Yes | No | No |
<font> | No | Yes | No |
<footer> | Yes | No | No |
<form> | Yes | Yes | Yes |
<frame> | No | No | No |
<frameset> | No | Yes | No |
<h1> to <h6> | Yes | Yes | Yes |
<head> | Yes | Yes | Yes |
<header> | Yes | No | No |
<hr> | Yes | Yes | Yes |
<html> | Yes | Yes | Yes |
<i> | Yes | Yes | Yes |
<iframe> | Yes | Yes | No |
<img> | Yes | Yes | Yes |
<input> | Yes | Yes | Yes |
<ins> | Yes | Yes | No |
<kbd> | Yes | Yes | Yes |
<label> | Yes | Yes | Yes |
<legend> | Yes | Yes | Yes |
<li> | Yes | Yes | Yes |
<link> | Yes | Yes | Yes |
<main> | Yes | No | No |
<map> | Yes | Yes | No |
<mark> | Yes | No | No |
<meta> | Yes | Yes | Yes |
<meter> | Yes | No | No |
<nav> | Yes | No | No |
<noframes> | No | Yes | No |
<noscript> | Yes | Yes | Yes |
<object> | Yes | Yes | Yes |
<ol> | Yes | Yes | Yes |
<optgroup> | Yes | Yes | Yes |
<option> | Yes | Yes | Yes |
<output> | Yes | No | No |
<p> | Yes | Yes | Yes |
<param> | Yes | Yes | Yes |
<pre> | Yes | Yes | Yes |
<progress> | Yes | No | No |
<q> | Yes | Yes | Yes |
<rp> | Yes | No | No |
<rt> | Yes | No | No |
<ruby> | Yes | No | No |
<s> | Yes | Yes | No |
<samp> | Yes | Yes | Yes |
<script> | Yes | Yes | Yes |
<section> | Yes | No | No |
<select> | Yes | Yes | Yes |
<small> | Yes | Yes | Yes |
<source> | Yes | No | No |
<span> | Yes | Yes | Yes |
<strike> | No | Yes | No |
<strong> | Yes | Yes | Yes |
<style> | Yes | Yes | Yes |
<sub> | Yes | Yes | Yes |
<summary> | Yes | No | No |
<sup> | Yes | Yes | Yes |
<table> | Yes | Yes | Yes |
<tbody> | Yes | Yes | No |
<td> | Yes | Yes | Yes |
<textarea> | Yes | Yes | Yes |
<tfoot> | Yes | Yes | No |
<th> | Yes | Yes | Yes |
<thead> | Yes | Yes | No |
<time> | Yes | No | No |
<title> | Yes | Yes | Yes |
<tr> | Yes | Yes | Yes |
<track> | Yes | No | No |
<tt> | No | Yes | Yes |
<u> | Yes | Yes | No |
<ul> | Yes | Yes | Yes |
<var> | Yes | Yes | Yes |
<video> | Yes | No | No |
<wbr> | Yes | No | No |
3.第一个程序(可复制)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--设置字体-->
<title>第一个html程序</title><!--设置标题-->
</head>
<body>
<h1>hello world</h1><!--设置文字-->
</body>
</html>
4.实例:代码雨
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>流星雨</title>
<meta name="keywords" content="关键词,关键字">
<meta name="description" content="描述信息">
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!--
<canvas>画布 画板 画画的本子
-->
<canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>
<!--
javascript
画笔
-->
<script>
//获取画板
//doccument 当前文档
//getElement 获取一个标签
//ById 通过Id名称的方式
//var 声明一片空间
//var canvas 声明一片空间的名字叫做canvas
var canvas = document.getElementById("canvas");
//获取画板权限 上下文
var ctx = canvas.getContext("2d");
//让画板的大小等于屏幕的大小
/*
思路:
1.获取屏幕对象
2.获取屏幕的尺寸
3.屏幕的尺寸赋值给画板
*/
//获取屏幕对象
var s = window.screen;
//获取屏幕的宽度和高度
var w = s.width;
var h = s.height;
//设置画板的大小
canvas.width = w;
canvas.height = h;
//设置文字大小
var fontSize = 14;
//计算一行有多少个文字 取整数 向下取整
var clos = Math.floor(w/fontSize);
//思考每一个字的坐标
//创建数组把clos 个 0 (y坐标存储起来)
var drops = [];
var str = "qwertyuiopasdfghjklzxcvbnm";
//往数组里面添加 clos 个 0
for(var i = 0;i<clos;i++) {
drops.push(0);
}
//绘制文字
function drawString() {
//给矩形设置填充色
ctx.fillStyle="rgba(0,0,0,0.05)"
//绘制一个矩形
ctx.fillRect(0,0,w,h);
//添加文字样式
ctx.font = "600 "+fontSize+"px 微软雅黑";
//设置文字颜色
ctx.fillStyle = "#00ff00";
for(var i = 0;i<clos;i++) {
//x坐标
var x = i*fontSize;
//y坐标
var y = drops[i]*fontSize;
//设置绘制文字
ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
if(y>h&&Math.random()>0.99){
drops[i] = 0;
}
drops[i]++;
}
}
//定义一个定时器,每隔30毫秒执行一次
setInterval(drawString,30);
</script>
</body>
</html>