常用标签进阶版及超链接

 常用标签进阶版

1.布局标签

html搭建网页的结构,都有头部 主体 底部 导航 文章等等

         header 网页的头部

         main 网页的主体部分(一般就一个)

         footer  网页的底部

         nav 网页的导航

         aside 和主体相关的内容 ,侧边栏

         article 文章之类的

         section 独立的区块,上面的标签都不合适,就用这个代替div

    <header></header>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <section></section>

2.元素分类

    块元素(block element)用来布局

    特点:

        1.会独占一行

        2.默认情况下,块元素的宽度是整个视口的100%

        3.默认情况下,块元素的高度是内容的高度(被内容撑开的)

    常用块元素 div; p ;h1-h6 ;header ;main; footer ;nav

    行内元素(inline element)用来包裹文字

    特点

       1.不会独占一行

       2.宽高是被内容撑开的,内容有多宽,它就有多宽

    常用行内元素 span  ;strong ;em  ;del

    行内块元素

    特点:

        兼具块元素和行元素特点

        常用行内块元素 img

    注意:

       1.块元素主要是用来布局的,里面可以放任何元素(块元素,行内元素等)

       2.行内元素主要用来包裹文字的,一般情况下,不能放块元素

       3.p标签是一个特殊的块元素,它里面不能放块元素

       4.a标签(超链接)是个特殊的行内元素,它里面什么都能放

超链接

html 超文本语言 

超链接:2个功能, 2个属性,1个补充

超链接:可以是一个字,可以是一个块元素,可以是图片,可以是任何内容,特殊的行内元素,可以包裹任何元素,除了它自己

        默认样式:字体有一定颜色,有下划线

        功能:1.从一个页面跳另一个页面

                 2.在当前页面进行跳转(楼梯导航/描点功能)

                3.下载

        属性:

            href属性 指向跳转的地址

                绝对地址:不管你的html文件在哪里,我去的地方是确定的,是绝对的

                相对地址:它的地址值跟超链接的html文件的位置相关

                         ./当前目录下跳转  ./ 可省略 默认./

                         ../ 跳出当前目录,来到上一个目录

                         注意:很多路径规则都是一样的,包括图片,音视频。

            target属性  指定超链接页面的打开方式

                        可选值:

                        _self  在当前页面打开超链接  一般情况下,默认值,国外常用

                        _blank  新开页面打开超链接,国内常用

                        具体用那种方式,根据题目要求

    描点功能实现:

               1.去顶部  href属性值设为#

               2.去任意的位置,先给要去的位置打个标记  id属性="id属性值"

                              在href里填写标记   href="id属性值"

                              id属性值 :

                                一般不以数字开头

                                一般不用汉字

                                不能重复使用

                 3.空连接的写法

<a href="#">空连接1</a>
<a href="javaScript:;">空连接2</a>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值