第二章 基础标签

2020-08-29  本文已影响0人  扶光_

一,基础标签

1.单标签和双标签

这时候就会有人问什么是单标签和双标签呢? 说白了就是 单一出现的就是单标签 成对出现的就是双标签 看一下下面的例子

例图

2.一些简单的基本标签

1.<div></div>    可以说是一个箱子或一个容器,可以放任何东西 


2.<p></p> 用来包裹一段文字的 


3.<h1>---<h6> 标题  是网页的1级--6级标题 注意!!!  (一个网页中只能有一个1级标题 其他的可以随便加) 如下图

因为h1标题一般用作于logo 提高索引能力的

4.<span></span>    包裹文字的 (可设置个别文字样式)

5.<i></i>  使文字倾斜样式 


6.<b></b>   使文字加粗样式


7.<img>  是用来引入图片的标签 格式是<img src="" alt="" title="" width="" height="">

img里面有四个基本属性 

src="":是用来引入图片路径的 (路径分为两种 相对路径和绝对路径)

        相对路径:是从网页创建文件夹出发寻找.(建议使用相对路径)

        相对路径:从盘开始找起(文件路径容易改变,使无法找到其内容)

./属于打开本层文件夹       ../打开更上层文件夹  加一个点是一层 依次递增 


alt="":给开放人员看的 一种描述 ,(描述图片的大小等等...)


title="":提示文字(每一个标签都有的 ) 

鼠标长时间放上面会有文字提示,或网速较慢时图片加载不出来会优先显示的文字 


8.<a></a>  超链接(就是跳转其他页面)

 属性 href="目标地址"     #是空链接

  target  打开新网页      _blank  每点击一下就打开一个新的网页

  _new  (乱写也是一样)     打开一新的网页 不会打开多个

  _self    默认 打开自身网页

9.ul>li 无序列表(ul是li的父级)

在ul里添加行内css可以改变前面所带的默认样式 

 style="list-style:none"  去掉默认样式 

                             disc 黑圆点 

                            circle 空心圆 

                            square 正方块  如下图

10.有序列表 ol>li 

在ol里面添加 行内 type="1 a A I" 跟前面的无序列表相似,也可以改变前面的默认样式 

11.对话列表 dl>dd dt

      <dl>

           <dt>我说</dt>                  <!--可以理解成说话的人--> 

           <dd>你真帅气</dd>        <!--说话的内容-->

       </dl>                      看下方例图 


3.  一些特殊标签

          <br/>       换行标签 

           <hr/>       换行加下划线

           &nbsp;     空格

           &lt ;小于号                 &gt;大于号  

           &copy 版权 


4.注释

html的注释:           <!-- 注释的内容-->    

css的注释:              /*注释的内容*/

上一篇 下一篇

猜你喜欢

热点阅读