疯狂HTML-01

最新推荐文章于 2024-10-28 11:01:46 发布

原创最新推荐文章于 2024-10-28 11:01:46 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #疯狂Java

Web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5的基本文档结构，探讨了HTML5中可以省略的标签与属性值，并详细列举了各种基本元素及其用途。此外，还讨论了如何通过特定属性实现文本样式化、语义化标记以及多媒体元素的使用。

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>

<p>

<br>

<hr>

<div>

<span>

三种容器在默认情况下，<span>元素不会导致换行，<div>元素会导致换行，<p>元素会生成一个段落段间距会更大。<p>可以包含<span>，反之不行。

文本格式化元素：

<b>

<i>

<em>

<small>

<sup>

<sub>

<bdo>

语义相关元素：

<abbr>

<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>

<col>

<thead>

<tbody>

<tr>

<td>

<th>

<tfoot>

HTML5不再推荐在页面中使用框架集,但仍保留了一个<iframe>元素.

HTML5新增的通用属性:

contentEditable 文本可否被编辑

designMode 全页面的contentEditable

hidden 是否显示元素内容

spellcheck 拼写检查

HTML5新增的常用元素:

文档结构元素:

<nav>

<aside>

语义相关元素:

<mark>

<time>

特殊功能元素

<meter>计数仪表

<progress>进度条

HTML5头部和元信息:

<style>

<link>

<title>

<base> 指定所有链接的基准链接

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对象中读取数据, 这样就可以完成更复杂的拖放操作了.