之前接触过一些前端内容，但是时间长了早就忘记了，最近开始系统的学习，做一下总结，方便日后使用。
我把总结内容展示在了自己的服务器上，欢迎大家查看网址:功能简单演示(暂时不可访问，19年8月26日更新)，进入后按下F12键或者右击鼠标查看源码,如下图:（下篇我会总结关于服务器购买、以及连接Tomcat的详细过程）
对于初学者来说,建议使用记事本或者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"/>
这是我显示的页面图标
但是我尝试了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
这是目前的大概总结，应该算是最简单入门的，一定要掌握了,后续学习我会继续把总结写入博客。
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)