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

 

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

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

 

对于初学者来说,建议使用记事本或者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   

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

这是我显示的页面图标

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

但是我尝试了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>

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