美文网首页
02.HTML基础标签

02.HTML基础标签

作者: Lv_0 | 来源:发表于2017-04-07 23:40 被阅读0次
    • HTML标题:

      1. 标题在body内,是以标签<h1>-<h6>构成(依次减小)
      2. 默认情况,HTML会自动在块级元素下加一个空行,比如标题,段落等
      3. 标题不只是简单的字体加粗,搜索引擎通过标题编制索引,用户通过标题快速浏览网页,标题的重要度自H1到H6依次降低
      <!DOCTYPE html>
      <html>
        <head>
            <meta charset="UTF-8">
            <title>heading</title>
        </head>
        <body>
            <h1>h1标题</h1>
            <h2>h2标题</h2>
            <h3>h3标题</h3>
            <h4>h4标题</h4>
            <h5>h5标题</h5>
            <h6>h6标题</h6>
        </body>
      </html>
      
      image.png

    • HTML段落:

      1. 段落是以标签<p>构成
      2. <p>为块元素,在元素结束后,会默认添加一列空行
      <!DOCTYPE html>
      <html>
        <head>
            <meta charset="UTF-8">
            <title>paragraph</title>
        </head>
        <body>
            <p>段落p</p>
        </body>
      </html>
      
      image.png

    • HTML链接:

      1. 链接是通过标签<a>构成,href="xxx"是属性,属性值的表达方式
      2. 属性在网页中是非展示的内容,标签中间内容为网页展示内容
      3. a与img嵌套,可实现点击图片跳转
      4. a标签常用属性:
        href:设置链接跳转的路径(可以是超链接,也可以时网址)
        target:设置链接点击后,新网页的打开方式(_blank即新窗口打开)
        name:设置锚点,id有同样作用
      5. 通过name或id属性设置锚点,通过#name或#id直接调账到锚点所在目录或文档位置

      超链接 超文本 (hyper text)
      ▶ 超文本的基本特征就是可以超链接文档
      ▶ 通过设置锚点将链接与存于某处的文档关联起来
      ▶ 实现当点击链接时跳转到相应文档的功能
      ▶ 此文档可存于网络或本地,但和链接锚点有相同的锚点存在于文档中
      ▶ 通常称提供热点和超链接的锚点为链接,而标记文档部分的锚为

      <!DOCTYPE html>
      <html>
        <head>
            <meta charset="UTF-8">
            <title>paragraph</title>
        </head>
      
        <body>
            <a href="http://www.jianshu.com/" target="_blank">
                <img src="img/jianshu.png" />
            </a>
            <br /><br />
            <a href="#dest">跳转</a>
            <p id="dest">跳转到这里</p>
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
            <br /><br /><br /><br /><br /><br />
        </body>
      </html>
      
      test07.gif

    • HTML图片:

      1. 图片是以标签<img>构成
      2. 和<body background="图片地址">使用,可用作背景图片
      3. img标签常用属性:
        ▷ src:指定获取图片的位置
        ▷ alt:当图片无法显示时,需要展示的内容(推荐使用)
        ▷ title:当鼠标放在图片上时,弹出要显示的内容(说明)
        ▷ width:图片的显示宽度
        ▷ height:图片的显示高度
      <!DOCTYPE html>
      <html>
        <head>
            <meta charset="UTF-8">
            <title>paragraph</title>
        </head>
      
        <body>
            <img src="img/big.png" alt="笑脸" title="原图片" />
            <img src="img/big.png" width="100px" height="100px" title="自定义尺寸" />
        </body>
      </html>
      
      test08.gif

    相关文章

      网友评论

          本文标题:02.HTML基础标签

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