HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)

简介: HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)

之前接触过一些前端内容,但是时间长了早就忘记了,最近开始系统的学习,做一下总结,方便日后使用。


我把总结内容展示在了自己的服务器上,欢迎大家查看网址:功能简单演示(暂时不可访问,19年8月26日更新),进入后按下F12键或者右击鼠标查看源码,如下图:(下篇我会总结关于服务器购买、以及连接Tomcat的详细过程)


20190224123906495.png对于初学者来说,建议使用记事本或者Notepad++来写


以下列出的常用元素以及属性,都在我的总结中有所展示


1.基本元素:


<!--....-->:注释;


<html>:根元素;


<head>:页面头部分;


<body>:页面主体部分;


<title>:页面标题;


<h1>到<h6>:标题;


</br>:换行;


</hr>:水平线;


<div>:文档中的节;


<span>:与div基本相似,表示一段一般性文本,且默认不会换行。


2.文本格式相关元素:


<b>:粗体文本;


<i>:斜体文本;


<em>:强调文本;


<strong>:粗体文本;


<sup>:上标文本;


<sub>:下标文本;


<bdo>:定义文本显示方向。


3.使用a元素添加超链接:


href:指定超链接的另一个资源。


target:指定使用框架集中的哪个框架来装载另一个资源(属性值:_self自身来装载新资源、_blank新窗口装载新资源、_top顶层框架装载新资源、_parent父框架装载新资)


4.锚点:


这是我在总结中写的锚点,指定链接在当前页面,name的值要和#后面的值一样

<!--下面代码会生成一个命名锚点-->
<a name="blog" ><p>锚点定位客</p></a>
<a href="#blog" ">定位到博客锚点</a>

5.列表相关元素:


<ul>:定义无序列表;


<ol>:定义有序列表;


<reversed>:该属性指定是否将排序反转;


<li>:定义列表项。


6.使用img元素添加图片:


src:指定图片文件所在位置;


alt:指定一段文本,作为该图片的提示信息;


width、height:指定图片的宽、高,该属性可以是百分百,也可以是像素值;


<map>:用于图片映射;


<area>:用于定义图片映射的内部区域;


7.表格相关元素比较简单就不赘述了


8.HTML5增强的iframe元素:该元素用于在普通HTML页面中生成一个行内框架。


包含的属性:src:指定一个URL,指定该iframe将装载哪个页面;


                     name:设置该iframe的名字;


                     scrolling:设置是否在iframe中显示滚动条;


                     height、width:设置iframe的宽、高;


                     frameborder:设置是否显示iframe的边框;


9.使用link元素定义页面图标:把想定义的图标后缀名改为.ico  


1. <!--引入outer.css样式单文件-->
2. <link href="hang.ico" rel="shoutcut icon" type="image/x-icon"/>


这是我显示的页面图标2018122021115994.png

但是我尝试了QQ浏览器,360浏览器和谷歌浏览器,只有谷歌浏览器会显示,相信不久,其他浏览器也可以显示了。


10.HTML5新增的拖放API:


设置draggable="true"表示该元素可以拖动,目前在我本地可以拖动,我放到服务器中的就只能通过谷歌浏览器进去我的网址才可以拖动,应该是其他浏览器还没有这个功能,若要携带数据则需要一些js,下面是需要的js代码:

<script type="text/javascript">
  var source = document.getElementById("source");
  source.ondragstart = function(evt)
  {
    //拖动数据
    evt.dataTransfer.getData("text","巴啦啦能量");
    console.log(evt);
  }
  document.ondragover = function(evt){
    //取消事件的默认行为
    return false;
  }
  document.ondrop = function(evt){
    console.log(evt);
    //取消事件的默认行为
    source.style.position = "absolute";
    source.style.left = evt.pageX + "px";
    source.style.top = evt.pageY + "px";
    return false;
  }
</script

这是目前的大概总结,应该算是最简单入门的,一定要掌握了,后续学习我会继续把总结写入博客。

目录
相关文章
|
8月前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
|
3月前
|
移动开发 HTML5
HTML5 拖放(Drag 和 Drop)2
为了实现元素的可拖放功能,首先需将元素的 `draggable` 属性设为 `true`。接着,使用 `ondragstart` 事件指定拖动开始时的动作,通过 `dataTransfer.setData()` 设置拖动数据的类型和值。`ondragover` 事件用于确定放置位置,并通过 `event.preventDefault()` 允许放置。最后,`ondrop` 事件触发时执行放置操作,使用 `dataTransfer.getData()` 获取拖动数据并将其追加到目标元素中。
|
3月前
|
Web App开发 移动开发 iOS开发
HTML5 拖放(Drag 和 Drop)1
HTML5拖放功能是标准的一部分,允许用户将任何元素从一个位置拖放到另一个位置。此功能在主流浏览器如IE、Firefox、Chrome和Safari中得到支持(注意Safari 5.1.2除外)。通过拖放,可以实现更直观的交互体验,例如将RUNOOB.COM图标拖入指定矩形框内。
|
4月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
189 1
|
4月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
81 2
|
5月前
|
移动开发 JavaScript API
HTML5 拖放详解
HTML5 的拖放功能增强了网页的互动性和用户友好性,允许用户通过拖动操作移动网页元素。其核心包括拖动源和放置目标,并提供了 `draggable` 属性及多个事件(如 `dragstart`、`dragover` 和 `drop`)来实现这一功能。示例代码展示了如何使用这些 API 创建一个简单的拖放组件,通过设置样式和监听事件来提升用户体验。在实际应用中,需注意样式提示和浏览器兼容性测试。
|
5月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
85 13
|
5月前
HTML的超链接
HTML的超链接。
63 6
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
6月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
105 1

热门文章

最新文章