疯狂HTML-01
来源:互联网 发布:sem与seo的区别 编辑:程序博客网 时间:2024/06/06 07:33
HTML5文档结构:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=”Content-Type”content=”text/html;charset=utf-8”/> </head> <body> </body> </html>
W3C提供了一个在线验证HTML规范页面——http://validator.w3.org/。
可以省略结束标签的元素:colgroup、dt、dd、li、optgroup、option、p、rt、rp、thead、tbody、tfoot、tr、td、th。
可以省略全部标签的元素:html、head、body、tbody。
HTML5中允许省略属性值的属性:checked、readonly、disabled、selected、defer、ismap、nohref、noshade、nowrap、multiple、noresize。它们的默认属性都为它们本身,如checked=”checked”。
HTML5基本元素:
<!---->
<html>
<head>
<title>
<body>
<style>
<h1>~<h6>
<p>
<br>
<hr>
<div>
<span>
三种容器在默认情况下,<span>元素不会导致换行,<div>元素会导致换行,<p>元素会生成一个段落段间距会更大。<p>可以包含<span>,反之不行。
文本格式化元素:
<b>
<i>
<em>
<strong>
<small>
<sup>
<sub>
<bdo>
语义相关元素:
<abbr>
<address>
<blockquote>
<q>
<cite>
<code>
<dfn>
<del>
<ins>
<pre>
<samp>
<kbd>
<var>
超链接<a>
href:指定超链接所关联的另一个资源.
target:指定使用框架集中的哪个来装载另一个资源——_self _blank _top _parent分别代表使用自身、新窗口、顶层框架、父框架来装载。
media:指定目标URL所引用的媒体类型.默认值为all.
name:属性值就是该命名锚点的名称,定位到锚点则在另一个<a>中指定href=”当前页.html#name”>. 锚点名称和URL资源之间以#隔开。
URL(Uniform Resource Locator, 统一资源定位器)遵循以下语法规则:
scheme://host.domain:port/path/filename
( scheme:指定因特网服务的类型, 最流行的类型是HTTP.
file 访问本地磁盘上的文件
ftp 访问远程FTP服务器上的文件
http 访问WWW服务器上的文件
news 访问新闻组上的文件
telnet 访问Telnet连接
gopher 访问远程Gopher服务器上的文件
host:指定此域中的主机. 如果被省略, HTTP的默认主机是www.
domain:指定因特网域名.
port:指定主机的端口号. 端口号通常可以被省略, HTTP服务的默认端口是80.
path:指定远程服务器上的路径, 该路径也可被省略, 省略该路径则默认被定位到网站的根目录.
filename:指定远程文档的名称. 如果省略该文件名, 通常会定位到index.html文件, 或定位到Web服务器设置的其他文件.
)
列表元素:
<ul>
<ol>
<li>
<dl>
<dt>
<dd>
图像元素:
<imgsrc=图片所在位置 alt=提示文本 height=高 width=宽>
<map>图片映射
<area shape=区域形状coords=指定多个坐标值确定区域位置href=该区域链接的资源 alt=提示文本 target=使用框架 media=URL所引用的媒体类型>定义图片映射的内部区域
表格元素:
<table>
<captain>
<colgroup>
<col>
<thead>
<tbody>
<tr>
<td>
<th>
<tfoot>
HTML5不再推荐在页面中使用框架集,但仍保留了一个<iframe>元素.
HTML5新增的通用属性:
contentEditable 文本可否被编辑
designMode 全页面的contentEditable
hidden 是否显示元素内容
spellcheck 拼写检查
HTML5新增的常用元素:
文档结构元素:
<article>
<section>
<nav>
<aside>
<header>
<footer>
<hgroup>
<figure>
<figcaption>
语义相关元素:
<mark>
<time>
特殊功能元素
<meter>计数仪表
<progress>进度条
HTML5头部和元信息:
<script>
<style>
<link>
<title>
<base> 指定所有链接的基准链接
<meta> 定义页面元信息
http-equiv:指定元信息的名称,该属性指定的名称具有特殊意义.
Expires:指定网页的过期时间. 一旦过期,必须重新从服务器上下载.
Pragma:指定禁止浏览器从本地磁盘缓存中调阅页面内容.
Refresh:指定浏览器多长时间后自动刷新指定页面.
Set-Cookie: 设置Cookie. 如果网页过期, 那么客户端上的Cookie也将被删 除.
Content-Type: 设置该页面的内容类型和所用的字符集.
name: 指定元信息的名称,该名称值可随意指定.
content:指定元信息的值.
对于普通元素,如果希望把它变成可拖动的,只要将元素的draggable属性设为true即可. 而让拖动操作能携带数据, 应为被拖动元素的ondragstart事件指定监听器.
<divid=”a” draggable=”true”>xxx</div> <scripttype=”text/javascript”> vara=document.getElementById(“a”);a.ondragstart=function(evt){ evt.dataTransfer.setData(“text/plain”,www.xxx.com);} </script>
为了让document可以接受”放”, 应该为document的ondragover事件指定监听器, 在监听器中取消document对拖动事件的默认行为.
document.ondragover=function(evt) { returnfalse; }
事件 事件源 描述
ondragstart 被拖动的html元素 开始拖动操作时触发
ondrag -- 拖动过程不断触发
ondragend -- 拖动结束时触发
ondragenter 拖动时鼠标经过的元素 被拖动的元素进入本元素范围内时触发该事件
ondragover -- 被拖动的元素进入本元素范围内拖动时会不断触发该事件
ondragleave -- 被拖动的元素离开本元素时触发该事件
ondrop -- 其他元素被放到了本元素中时触发
拖动触发的拖放事件有一个dataTransfer属性, 该属性值是一个DataTransfer对象, 该对象包含如
下属性和方法.
dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为.
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为.
dataTransfer.items:该属性返回DataTransferItems对象, 该对象代表了拖动数据.
dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标.
dataTransfer.types: 该属性返回一个DOMStringList对象, 该对象包括了存入dataTransfer中数据的所有类型.
dataTransfer.getData(format):获取DataTransfer对象中format格式的数据.
dataTransfer.setData(format,data):向DataTransfer对象中设置format格式的数据.
dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据.
开发者可以在拖放开始时(ondragstart事件)将拖放源的数据存入DataTranfer对象中, 然后在拖放结束时从DataTransfer对象中读取数据, 这样就可以完成更复杂的拖放操作了.
- 疯狂HTML-01
- 疯狂Html之 checkbox
- 疯狂HTML-02
- 疯狂HTML 5/CSS 3/JavaScript讲义
- 疯狂HTML讲义—笔记1
- 疯狂Html+CSS+JS 中JS总结
- 疯狂Html+CSS+JS 中JS总结
- 疯狂
- 疯狂
- 疯狂
- 疯狂!!!
- WEB高性能开发(10) - 疯狂的HTML压缩
- [NOIP2017模拟]疯狂的01串
- Html-01初识html
- GDUT 初赛 01串也疯狂之光棍也有伴
- zzulioj--1708--01串也疯狂之光棍也有伴(dp)
- 通读《疯狂Android讲义》笔记 01___Android基础篇
- 疯狂购物
- 【OpenCV】角点检测
- Linux内存
- C#中Math.Round()实现中国式四舍五入
- codeforces 593 D. Happy Tree Party (LCA + 并查集)
- intellij idea下搭建android环境遇到的rendering problem问题及部分解决方式
- 疯狂HTML-01
- request body stream exhausted错误解决方案
- MyBatis使用Collection查询多对多或一对多结果集bug
- hibernate与mybatis异同与比较(涵盖网上各个版本,清晰明了)
- 漫谈CSS transform动画技术
- iOS JPush极光推送
- leetcode15 3sum
- leetcode 4 Median of Two Sorted Arrays
- linux kernel内存碎片防治技术