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

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

目录
相关文章
|
16天前
|
JSON 数据挖掘 API
小红书笔记评论API接口如何使用
小红书作为生活方式分享平台,评论是用户互动的核心形式。通过小红书笔记评论API接口,开发者可高效获取特定笔记下的评论数据(如内容、昵称、时间、点赞数等),用于舆情分析、用户反馈收集和市场调研。请求参数包括`note_id`、`page`、`page_size`、`timestamp`和`sign`,采用HTTP方式调用,返回JSON格式数据,为业务决策提供数据支持。
|
16天前
|
XML 数据挖掘 API
小红书笔记详情API接口如何使用
小红书作为社交媒体平台,拥有海量优质笔记内容。为方便开发者获取笔记详情(如标题、正文、图片、点赞数等),可假设存在一个合规的 API 接口。该接口通过 note_id、timestamp 和 sign 等参数进行调用,采用 HTTP 请求方式,返回 JSON 或 XML 格式的响应数据。尽管小红书官方未正式开放 API,但此假设有助于理解其潜在应用场景,如内容分析与数据挖掘等。
|
1月前
|
数据采集 JSON API
Python 实战:用 API 接口批量抓取小红书笔记评论,解锁数据采集新姿势
小红书作为社交电商的重要平台,其笔记评论蕴含丰富市场洞察与用户反馈。本文介绍的小红书笔记评论API,可获取指定笔记的评论详情(如内容、点赞数等),支持分页与身份认证。开发者可通过HTTP请求提取数据,以JSON格式返回。附Python调用示例代码,帮助快速上手分析用户互动数据,优化品牌策略与用户体验。
|
3月前
|
数据采集 搜索推荐 API
小红书笔记详情 API 接口的开发、应用与收益
小红书(RED)作为国内领先的生活方式分享平台,汇聚了大量用户生成内容(UGC),尤其是“种草”笔记。小红书笔记详情API接口为开发者提供了获取笔记详细信息的强大工具,包括标题、内容、图片、点赞数等。通过注册开放平台账号、申请API权限并调用接口,开发者可以构建内容分析工具、笔记推荐系统、数据爬虫等应用,提升用户体验和运营效率,创造新的商业模式。本文详细介绍API的开发流程、应用场景及潜在收益,并附上Python代码示例。
402 62
|
1月前
|
数据采集 JSON API
Python 实战!利用 API 接口获取小红书笔记详情的完整攻略
小红书笔记详情API接口帮助商家和数据分析人员获取笔记的详细信息,如标题、内容、作者信息、点赞数等,支持市场趋势与用户反馈分析。接口通过HTTP GET/POST方式请求,需提供`note_id`和`access_token`参数,返回JSON格式数据。以下是Python示例代码,展示如何调用该接口获取数据。使用时请遵守平台规范与法律法规。
|
2月前
|
数据采集 API 开发工具
从 0 到 1 掌握鸿蒙 AudioRenderer 音频渲染:我的自学笔记与踩坑实录(API 14)
本文详细介绍了在 HarmonyOS 中使用 AudioRenderer 开发音频播放功能的完整流程。从环境准备(SDK 5.0.3、DevEco Studio 5.0.7)到核心概念(状态机模型、异步回调),再到开发步骤(实例创建、数据回调、状态控制),结合代码示例与常见问题解决方法,帮助开发者掌握 AudioRenderer 的底层控制与定制化能力。同时,文章还提供了性能优化建议(多线程处理、缓冲管理)及学习路径,附带官方文档和示例代码资源,助你快速上手并避开常见坑点。
196 7
|
3月前
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件,并生成相应的图片链接,从而方便用户在网页、社交媒体或其他平台上分享图片。
123 2
单页图床HTML源码+本地API接口图床系统源码
|
3月前
|
存储 JSON API
小红书笔记评论数据接口(小红书 API 系列)
小红书凭借庞大的用户群体和丰富的内容生态,成为重要的数据来源。其笔记评论数据对企业了解市场需求、优化产品策略等具有极高价值。为高效、合法获取数据,可使用小红书笔记评论数据接口。该接口通过HTTP请求获取指定笔记的评论内容、时间、昵称等信息,返回JSON格式数据。开发者可利用Python的requests库发送GET请求并处理响应,实现批量收集评论数据,支持舆情监测、竞品分析等业务场景。
|
3月前
|
数据采集 JSON API
小红书笔记详情 API 接口(小红书 API 系列)
小红书作为热门生活方式平台,拥有海量用户生成内容。通过其笔记详情接口,开发者可获取指定笔记的完整内容、作者信息及互动数据(点赞、评论、收藏数等),助力内容分析与市场调研。接口采用HTTP GET请求,需提供笔记ID,响应数据为JSON格式。注意小红书有严格反爬虫机制,建议使用代理IP并控制请求频率。
|
3月前
|
数据采集 搜索推荐 API
小红书笔记详情 API 接口:获取、应用与收益全解析
小红书(RED)是国内领先的生活方式分享平台,汇聚大量用户生成内容(UGC),尤以“种草”笔记闻名。小红书笔记详情API接口为开发者提供了获取笔记详细信息的强大工具,包括标题、内容、图片、点赞数等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建内容分析工具、笔记推荐系统、数据爬虫等应用,提升用户体验和运营效率,创造新的商业模式。本文将详细介绍该API的获取、应用及潜在收益,并附上代码示例。
569 13