table of Contents
Basics, some of the labels
h tag
<body>
<h>h标签是标题</h>
h$*3>{标题$} <!--$代表数字，*3代表h标签出现三次-->
</body>
<!--然后加tap键，结果如下-->
<body>
<h>h标签是标题</h>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
operation result
Common (p, hr, br, etc.) and change the font tag
<body>
<u>u标签是下划线的意思</u>
<sup>sup:上标</sup>
<sub>sub:下标</sub>
<strong>strong:粗体</strong>
<big>big:变大</big>
<small>small:变小</small>
<p>p标签自动形成段落，下面段落为小于号</p>
<p><</p>
<font face="黑体" size="10" color="red">font标签用来设置字体样式</font>
<br><!--br标签自动换行-->
<font face="黑体" size="10" color="red">font标签用<br>来设置字体样式</font>
<hr><!--hr标签产生水平线，可以进行设置-->
<hr size="3" color="blue" width="400px" align="left">
<!--align的意思是左对齐-->
</body>
operation result:
Special characters label
ol, ul, dl tag
<body>
<!--ol是有序列表，默认数字1234，type代表类型，start代表从哪个开始-->
<ol type="A" start="3">
<li>吃</li>
<li>喝</li>
<li>睡</li>
</ol>
<!--ul为无序列表，用的比较多，也可以用type设置类型-->
<ul>
<li>吃吃吃</li>
<li>睡睡睡</li>
<li>喝喝喝</li>
</ul>
<!--dl为定义列表 dt为标题，dd为内容-->
<dl>
<dt>标题一</dt>
<dd>描述一</dd>
<dt>标题二</dt>
<dd>描述一</dd>
<dd>描述二</dd>
<dd>描述三</dd>
</dl>
</body>
operation result
div and span tags
<body>
<!--div属于一个容器差不多style="块元素的样式" class="类选择器名称" align="对齐方式"-->
<!--span也和div差不多，相对应，他属于行内块，多半选择特定的文本-->
<div style="border:2px #f00 solid;">
div总内容部分，框框颜色为红色实线，<span style="color: #30F;font-weight:bold;font-style:italic;">span内容部分：颜色是蓝色，字体加粗倾斜</span>
</div>
</body>
operation result
img tag
<body>
<!--图像标签，src是路径，这个一定要注意别弄错了，alt对图像文本的描述，height和width，还有align和border常用属性，title是指到图片时会出现的字-->
<img src="images/heisehunsha.jpg" title="他好帅"alt="这图好好看" width="60%" >
<!--这个路径是对的，所以alt属性不会显示-->
<img src="heisehunsha.jpg" alt="第二个图路径错了"width="60%">
<!--路径是错的，所以会显示alt标签-->
</body>
Operating results
My Documents directory
a label
<body>
<!--a标签，链接标签 href是要跳转的页面，有个target属性，如果没写，则默认=_self,直接本页面变成要跳转的页面，如果加了target="_blank"则会生成一个新的页面-->
<a href="index.html"><img src="images/heisehunsha.jpg" title="点击进去index页面"alt="这图好好看" width="60%" ></a>
<a href="http://www.baidu.com">百度</a>
</body>
No target before the tag jump:
dot pictures after the jump:
point Baidu after the jump:
Added target = "_ blank" attribute after
<a href="http://www.baidu.com" target="_blank">百度</a>
After the jump:
<!--空连接-->
<a href="#"></a>
map label (picture hotspots links)
(I did not too well here, I put the mouse seems to be the position of the tap will be out graphics)
<body>
<!--图片热区链接,myMap是前后呼应的name，确定形状后，再确定位置，
形状是circle时，coords的前两个数是原点坐标，后面是半径大小，
rect是矩形，两个坐标分别是斜对角坐标，poly是多边形，自己想要几个点就写几个坐标。-->
<map name="myMap">
<area shape="circle" coords="32,35,31" href="#" alt=""/>
<area shape="rect" coords="62,8,103,66" href="#" alt=""/>
<area shape="poly" coords="114,73,133,11,107,11" color="#30F" href="#" alt=""/>
</map>
<img src="images/kuaibenhuijia.jpg" usemap="#myMap" width="60%" />
</body>
Back to top Set
<!--锚点设置，就是当滑页面滑到最低端的时候，可以直接回到顶端-->
<a id="myAncher">top</a>
br*100 <!--此时还没按tab键，按完就可以了-->
<a href="#myAncher"><img src="images/huidingbu.png" alt=""></a>
</body>
Operating results, while not point icon
jump directly to the top of the rear end point icon
