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

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

目录
相关文章
|
9月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
386 19
|
12月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
626 74
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
524 2
|
8月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
9月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。
|
8月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
8月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
9月前
|
JSON 前端开发 API
如何调用体育数据足篮接口API
本文介绍如何调用体育数据API:首先选择可靠服务商并注册获取密钥,接着阅读文档了解基础URL、端点、参数及请求头,然后使用Python等语言发送请求、解析JSON数据,最后将数据应用于Web、App或分析场景,同时注意密钥安全、速率限制与错误处理。
927 152
|
9月前
|
JSON API 数据安全/隐私保护
Python采集淘宝评论API接口及JSON数据返回全流程指南
Python采集淘宝评论API接口及JSON数据返回全流程指南