美文网首页
基础标签--h、p、a、hr、br、img、base

基础标签--h、p、a、hr、br、img、base

作者: Mae_grace | 来源:发表于2020-09-21 15:53 被阅读0次

    H系列标签(header1-header6)

    作用:用于给文本添加标题语义
    注意:
    1、一个网页中,只有一个h1标签
    2、h标签独占一行
    3、end键------光标放到最后
    home键----光标放到最前面
    alt键+左键---选中多行,同时编辑

    P标签

    作用:告诉浏览器,哪些是一个段落
    注意:在浏览器中,p标签单独占一行

    Hr标签

    <hr>
    <hr />
    作用:告诉浏览器这是一条分割线
    注意:
    1、在浏览器中,hr标签单独占一行
    2、可以加“/”,也可以不写"/"

    img标签

    <img src="">
    src=source
    作用:告诉浏览器这里显示图片
    注意:
    1、img不会独占一行
    2、可以指定宽高
    3、title当鼠标悬停到图像上时,显示的文字
    4、alt:alternate,用于告诉浏览器placehold

    br标签

    作用:换行
    注意:
    1、可以连续使用br,几个br就是换几行

    路径

    img中的src的值是路径

    1、通过相对路径赋值

    相对路径:每次都从html当前所在的文件夹开始查找

    1.1同级

    图片和html文件在同一个文件夹中,
    格式:src="图片名"
    含义:在html所在文件夹中的图片

    1.2下级

    图片所在的文件夹images和html是同一级
    格式scr="images/图片名"
    含义:在html所在的文件夹中,找到images文件夹,再找到图片

    1.3上级

    图片所在的位置=和=html所在文件夹同级
    格式:scr="../图片名"

    2、通过绝对路径赋值【一般不用,可移植性不好】

    格式:src="C://User/desk/images/图片名"

    注意:
    1、路径中不要带中文、
    2、如果通过相对路径指定文件,但是不能跨盘。不能在C盘通过../找到D盘
    3、使用反斜杠“/”、不要正斜杠“\”

    a标签

    作用:用于控制页面与页面之间的跳转
    格式:<a href="目标地址">用户看到的文字提示</a>
    <a href="https://www.baidu.com">百度一下</a>

    <a href="https://www.baidu.com"><img src="图片"></a>
    注意点:
    1、a标签可以让图片和文字都可以点击
    2、href必填项,才能跳转到目的地
    3、href的目标地址中一定要有http或者https等网络协议,否则报如404的错误
    4、target控制是在当前选项卡跳转target="_self"还是新的选项卡中跳转"target="_blank"
    5、title属性,鼠标悬停时显示的文字

    base标签

    <head>
    <base target="_blank">
    </head>
    作用:用来统一指定当前网页中所有的超链接如何打开,是blank还是self
    注意:
    1、写在head中。
    2、如果在base中指定了self,但是a标签中指定了blank,就近。

    假链接

    点击后不会跳转,相当于是真链接的placehold
    <a href="#">这是个假链接1,点击该链接后跳转到顶部</a>
    <a href="javaScript">这是个假链接2,点击后无任何反应</a>

    锚点

    要想通过a标签跳转到指定的位置,必须告诉a标签一个独一无二的id
    <h1>顶部</h1>
    <a href="#center">跳转到中部</a>
    <h1 id="center">中部</h1>
    <h1>尾部</h1>

    通过a标签跳转到指定位置的时候,没有过渡动画

    <h1>顶部</h1>
    <a href="新页面.html#center">跳转到中部</a>
    <h1 id="center">中部</h1>
    <h1>尾部</h1>

    相关文章

      网友评论

          本文标题:基础标签--h、p、a、hr、br、img、base

          本文链接:https://www.haomeiwen.com/subject/sqodyktx.html