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

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

目录
相关文章
|
4月前
|
JSON API 数据格式
小红书API接口文档:笔记详情数据开发手册
小红书笔记详情API可获取指定笔记的标题、正文、互动数据及多媒体资源,支持字段筛选与评论加载。通过note_id和access_token发起GET/POST请求,配合签名验证,广泛用于内容分析与营销优化。
|
4月前
|
JSON 监控 API
小红书笔记评论API:一键获取分层评论与用户互动数据
小红书笔记评论API可获取指定笔记的评论详情,包括内容、点赞数、评论者信息等,支持分页与身份认证,返回JSON格式数据,适用于舆情监控、用户行为分析等场景。
|
5月前
|
数据采集 缓存 API
小红书笔记详情 API 实战指南:从开发对接、场景落地到收益挖掘(附避坑技巧)
本文详解小红书笔记详情API的开发对接、实战场景与收益模式,涵盖注册避坑、签名生成、数据解析全流程,并分享品牌营销、内容创作、SAAS工具等落地应用,助力开发者高效掘金“种草经济”。
小红书笔记详情 API 实战指南:从开发对接、场景落地到收益挖掘(附避坑技巧)
|
5月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
287 19
|
6月前
|
JSON 搜索推荐 API
小红书笔记列表API数据解析(附代码)
本内容介绍如何利用小红书开放平台的笔记列表API,批量获取与关键词或用户相关的笔记数据,包括标题、封面图、互动数据等。接口支持按关键词分页查询及排序筛选,适用于内容聚合与用户分析。附Python示例代码,演示通过GET请求调用API的方法,并处理返回的JSON数据。
|
6月前
|
JSON API 数据格式
小红书笔记详情API数据解析(附代码)
本内容介绍了小红书开放平台的笔记详情API接口功能,涵盖笔记标题、内容、互动数据及多媒体资源的获取方式。提供接口概述、请求方式及Python调用示例,适用于内容分析与营销策略优化,帮助开发者高效集成与使用。
|
6月前
|
数据采集 监控 搜索推荐
小红书电商 API 助力,小红书平台电商笔记营销效果量化
在数字化营销时代,小红书凭借用户生成内容推动电商转化,但营销效果常因数据碎片化难以衡量。本文探讨如何借助小红书电商 API,精准量化曝光量、点击率、转化率等关键指标,提升营销效率与投资回报率。
208 1
|
6月前
|
JSON API 数据格式
小红书笔记详情API,json数据返回
以下是一个模拟的小红书笔记详情的JSON数据返回示例,包含了笔记的基本信息、作者信息、内容、图片、标签以及互动数据(点赞、评论、收藏)等关键字段:
|
6月前
|
JSON 数据挖掘 API
小红书笔记评论API数据解析(附代码)
本资源介绍如何通过小红书官方API获取笔记评论数据,包含评论内容、用户信息、点赞数等关键字段。支持分页请求,适用于舆情分析、用户研究及市场调研。提供完整Python调用示例,涵盖请求签名、响应解析等核心流程,助力高效获取结构化评论数据。
|
移动开发 JavaScript API
Html5 学习系列(四)文件操作API
引言     在之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用。
1070 0