Html常用标签的应用

      开班已经三天了,从一开始的什么都不懂,一脸懵逼的状态/(ㄒoㄒ)/~~,到现在对基础的掌握,内心感到非常的高兴,这不今天开始了新的内容.

      首先从<a></a>标签开始,它包含超级链接<a href="URL"></a>,然后就是锚点的应用了,首先建立个a标签,也就是<a name=''top''>2</a>,然后在下面建立个内容用P标签,也就是<p>1</P><p>1</P><p>1</P><p>1</P><p>1</P><p>1</P><p>1</P>,然后为了实现锚点的作用就在<P></P>标签下面用a标签实现,如果想返回到2,那么就建立<a href="#top">返回</a>的标签,如果想返回到顶部就用<a href="#">返回顶部</a>,标签来实现就可以了.

      那么a标签还具有下载的功能,比如像下载个压缩包,首先先建立一个download的文件夹,然后在download下面建立123的压缩包形式的文件,然后就可以操作下载压缩包的代码了,首先编写代码<a href="download/123.rar">点击下载</a>,能下载压缩包,那么就可以下载图片,所以代码可以这么写<a href="img/123.jpg">点击下载 图片</a>,说到图片不得不说,有的时候网速不好,图片会有不能观看的情况,那么为了防止这种情况发生可以弄alt标签来给他添加备注,而且有的时候有人想在图片上显示字,那么可以用title标签来实现.

      比如我想弄一个宽200,高100,并且让他在网速不好的时候显示他是个图片,和鼠标移到图片上会显示你很帅的字样,那么你可以这么编码来实现这个功能<img src="img/123.jpg" width="200" height="100" alt="这是图片" title="你很帅" />,学完a标签那么自然会用到文章,那么文章就会有序号,和内容,那么自然会用到有序标签,和无序标签,所以接下来将来学有序和无序的标签。

         说到有序标签那么就会用到ol标签,那么先建立ol标签,在ol标签中又li标签,所以如下<ol><li>第一行</li></ol>,其中在ol标签中可以添加功能,比如像是type功能他可以实现前号的表示,比如type=''a'',那么你的内容面前就会出现有序的adcde等.

         既然有有序标签,那自然少不了无序标签,无序标签用ul来表示,那么在ul标签中自然也有type功能,在无序标签里面有disc空心圆,square方形,circle空心圆的应用,自然可以在段落面前加空心圆等标签那么就可以将他们删掉,删掉的时候就要用到style=''list-style:none''编码了,用这个可以将段落面前的序号删掉,除了这些,还学了一些小标签,比如,<hr/>标签起到分隔符的作用,不得不说空格这个标签和有意思,&nbsp,为了好记可以说是牛比sp,换行标签用<br/>来表示. 将今天学的编码整理如下:

<body>

   <a href="Htmljichu.html">超级链接</a>

   <br />

   <a name="top">2</a>

   <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p><p>1</p>1</p>

   <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

   <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

   <a href="#top">返回</a><a href="#">返回顶部</a><br />

   <a href="download/123.rar">点击下载</a><br />

   <a href="img/123.jpg">点击下载 图片</a><br />

   <img src="img/123.jpg" width="200" height="100" alt="这是图片" title="无形之刃最为致命" />

   <ul type="square" style="list-style:none">

     <li>第一行</li>

     <li>第二行</li>

     <li>第三行</li>

    </ul>

    <ol type="a">

     <li>第一行</li>

     <li>第二行</li>

     <li>第三行</li> <!-- &nbsp;代表空格-->

    </ol>

         <hr /> <!--分隔符-->

</body>

          

  

posted @ 2017-05-07 13:19  零语言  阅读(238)  评论(0编辑  收藏  举报