<!DOCTYPE HTML> <!--声明这个是html文件-->
<html><!--html-->
<head><!--head:帮助页面正常工作的非可视化标签-->
<title></title><!--title:标题标签-->
<meta charset="UTF-8"><!--声明字符集(默认才用UTF-8)-->
</head>
<body><!--body:放置网页内容的标签-->
<p></p><!--p:字段标签(块) -->
<br/><!--br:换行标签-->
<!--字体效果标签-->
<b></b><!--b:加粗字体标签-->
<big></big><!--big:大字体标签-->
<i></i><!--i:斜体-->
<small></small><!--small:小字体标签-->
<strong></strong><!--strong:强调字体标签-->
<sub></sub><!--下标字体-->
<sup></sup><!--上标字体-->
<ins></ins><!--下划线字体-->
<del></del><!--删除线字体-->
<!--标题字号(逐渐变小)-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<hr/><!--水平线-->
<!--属性-->
<p align=""></p>
<!--
align:水平位置属性
right 靠右
center居中
left 靠左(默认)
width:宽度属性
单位
px 像素
% 百分比
height:高度属性(单位同width)
-->
<img src="" alt="" border=""/><!--img:图片标签-->
<!--
src:图片位置
本地文件夹
远端链接
alt:图片加载不出来的文本信息
border:边框(单位同width)
-->
<a href="" target="_blank"></a><!--a:链接标签(行)-->
<!--
href:链接地址
target:
_blank:新的窗口打开链接
-->
<ol><!--ol:有序列表标签-->
<li></li><!--li:列表标签-->
</ol>
<ul><!--ul:无序列表标签-->
<li></li>
</ul>
<span></span><!--span:组合文档中的行内元素-->
<table border="">
<!--table:表格标签
border:边框
-->
<thead><!--thead:表头标签-->
<tr><!--tr:表列-->
<th></th><!--th:表头-->
</tr>
</thead>
<tbody><!--tbody:表格内容标签-->
<tr>
<td colspan="" bgcolor=""></td>
<!--td:表行(数据)
colspan:这个表行占几格
bgcolor:背景颜色
-->
</tr>
</tbody>
</table>
<div id="">
<!--div:块级元素 通常用于容纳其他元素
id:用于js查询
-->
</div>
<form action="" method="" autocomplete>
<!--form:表单标签 用于从用户收集信息。表单是使用
action:动作 指定用户提交表单后加载的页面
methon:方法
get:表单数据将显示在页面地址中。
post:提供了更好的安全性，因为提交的数据在页面地址中不可见。
autocomplete:填写完毕自动完成
-->
<label></label>
<input type="text" name="" value="" list="colors" autofocus required/>
<!--input:输入标签
type:类型
radio:单选
checkbox:多选
submit:提交
email:邮箱
search:搜索
tal:电话
url:网址
value:值
name:用于识别
placeholder:提示信息
autofocus:自动对焦
required:未填写不提交，且有提示信息
list:下拉提示框(id)
-->
<datalist id="colors"><!--datalist:数据列表-->
<option value="Red"><!--option:选项-->
<option value="Green">
<option value="Yellow">
</datalist>
<textarea></textarea><!--textarea:文本区-->
<!--html:color 16进制 000000->FFFFFF RGB -->
<font></font><!--文字-->
</form>
<frameset rows="" cols=""></frameset>
<!--frameset:框架
rows:按高度分
cols:按宽度分
*:比例
%:百分比
(默认是像素);
-->
<iframe src="" width="" height=""></iframe><!--iframe:嵌入一个网页-->
<!--HTML5 新标签-->
<header></header><!--header:头标签-->
<nav></nav><!--nav:导航栏标签-->
<article><!--article:文章标签-->
<section></section><!--section:节标签,是页面或文章的逻辑容器-->
</article>
<aside></aside> <!--aside:旁白标签,放置次要内容-->
<footer></footer><!--footer:页脚标签-->
<!--两种声音的播放-->
<audio src="http://www.sololearn.com/uploads/audio.mp3" controls>
<!--audio:声音标签
controls:控制器(没有不显示控制页面)
autoplay:自动播放
loop:循环播放
-->
</audio>
<audio controls autoplay loop>
<source src="http://www.ytmp3.cn/?down/48756.mp3" type="audio/mp3"></source><!--source:放置来源,默认点击播放只播放第一个-->
<source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mp3"></source>
你的浏览器不支持音频元素
</audio>
<video width="800" height="" controls><!--video:视频标签,跟audio使用相似-->
<source src="http://www.sololearn.com/uploads/video.mp4" type="video/mp4"></source>
当前浏览器不支持 video直接播放
</video>
<progress max="100" value="35"></progress>
<!--progress:进度条标签
min:最小值
max:最大值
value:当前值
-->
<script>
//存储
localStorage.setItem("key1", "value1");//设置本地存储key1的value
localStorage.getItem("key1");//获取本地存储key1的value
localStorage.removeItem("key1");//删除本地存储key1的值
localStorage.clear();//清空本地存储
//位置
navigator.geolocation.getCurrentPosition();
showLocation (mandatory);//定义检索位置信息的回调方法
ErrorHandler(optional);//定义在处理异步调用时发生错误时调用的回调方法。
Options (optional);//定义一组用于检索位置信息的选项。
//拖拽
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.DataTransfer.setData("text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.DataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px;width: 200px;height: 200px;"></div>
<img id="image" src="http://n.sinaimg.cn/translate/86/w550h336/20180710/AW82-hezpzwu4285865.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" />
<!--draggable:拖动
ondragstart:用户开始拖动元素时触发
ondragover:当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondrop:在一个拖动过程中，释放鼠标键时触发此事件
-->
<svg width="1000" height="1000">
<circle cx="50" cy="100" r="100" fill="yellow"></circle>
<!--circle:圆形,右上角为0,0
cx:横向点坐
cy:纵向坐标
r:半径
fill:填充颜色
-->
<rect width="30" height="60" x="90" y="150" fill="green">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
<!--animate:动画标签
attributeName: 指定动画将影响哪个属性
from: 指定属性的起始值
to: 指定属性的结束值
dur: 指定动画运行的时间（持续时间）
fill: 指定动画结束时属性的值是否应返回其初始值（值：“remove”重置值;“freeze”保持“to value”）
repeatCount: 指定动画的重复计数
-->
</rect>
<!--rect:矩形,右上角为0,0
x:横向点坐
y:纵向坐标
fill:填充颜色
-->
<line x1="10" y1="10" x2="200" y2="100" style="stroke:#000000; stroke-linecap:round; stroke-width:20" />
<!--line:线条,右上角为0,0
x1:
y1:
x2:
y2:
两个点组成一条直线
-->
<polyline style="stroke-linejoin:miter; stroke:black; stroke-width:12; fill: none;" points="100 100, 150 150, 200 100,300 500" />
<!--polyline:折线,右上角为0,0
points:
多个点组成一条直线
-->
<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
<!--ellipse:椭圆,右上角为0,0-->
<polygon points="100 100, 200 200, 300 0" style="fill: green; stroke:black;" />
<!--polygon:多边形,右上角为0,0-->
<path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" />
<!--Paths:路径
M: 开始点
L: 直线
H: 水平线
V: 垂直线
C: 曲线
S: 平滑曲线
Q: 二次Bézier曲线
T: 平滑的二次Bézier曲线
A: 椭圆弧
Z: 关闭路径
-->
</svg>
<canvas id="canvas1" width="1000" height="1000"></canvas>
<!--
Canvas
- Elements are drawn programmatically 元素以编程方式绘制
- Drawing is done with pixels 绘图是用像素完成的
- Animations are not built in 动画不是内置的
- High performance for pixels-based drawing operations 基于像素的绘图操作的高性能
- Resolution dependent 决议依赖
- No support for event handlers 不支持事件处理程序
- You can save the resulting image as .png or .jpg 您可以将生成的图像保存为.png或.jpg
- Well suited for graphic-intensive games 非常适合图形密集型游戏
SVG
- Elements are part of the page's DOM (Document object model) 元素是页面的DOM（文档对象模型）的一部分
- Drawing is done with vectors 绘图是用矢量完成的
- Effects, such as animations are built in 内置动画等效果
- Based on standard XML syntax, which provides better accessibility 基于标准XML语法，提供更好的可访问性
- Resolution independent 决议独立
- Support for event handlers 支持事件处理程序
- Not suited for game applications 不适合游戏应用
- Best suited for applications with large rendering areas (for example, Google Maps) 最适合具有大渲染区域的应用程序（例如，Google Maps）
-->
<script type="text/javascript">
//画布
var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
//ctx.fillStyle="black";
//ctx.fillStyle="rgba(0,243,152,1)"
//绘制矩形
//ctx.fillRect(100,120,100,100);
//绘制一条线
//ctx.beginPath();
//ctx.moveTo(0,0);
//ctx.lineTo(300,150);
//ctx.stroke();
//绘制一个园
//ctx.beginPath();
//ctx.arc(50,100,80,1,9);
//ctx.stroke();
//创建文本
//ctx.font="bold 22px Tahoma";
//ctx.textAlign="start";
//ctx.fillText("start", 10, 30);
//转化成文本
//ctx.translate(100, 150);
//ctx.fillText("after translate", 10, 30);
//旋转
//ctx.rotate( (Math.PI / 180) * 25);
//缩放
//ctx.scale(1.5, 4);
</script>
</body>
</html>HTML_标签
猜你喜欢
转载自blog.csdn.net/linyisonger/article/details/80983331
今日推荐
周排行