• 基础标签


    H系列标签(H1 ~ H6)

    • 作用:
      • 用于给文本添加标题语义
    • 格式:
      • <h1>xxxxxx</h1>
    • 注意点
      • H 标签是用来给文本添加标题语义的,而不是用来修改文本的样式的
      • H标签一共有6个,从 H1 ~ H6,最多就只能到 6,超过 6 则无效
      • 被 H 系列标签包裹的内容会独占一行
      • 在 H 系列的标签中,H1 最大,H6 最小
      • 在企业开发中,一定要慎用 H 系列的标签,特别是 H1 标签。在企业开发中一般情况下一个界面中只能出现一个 H1 标签

    1545043555727


    p标签(Paragraph)

    • 作用:
      • 告诉浏览器哪些文字是一个段落
    • 格式:
      • <p>xxxxxxxx</p>
    • 注意点:
      • 在浏览器中会单独占一行

    1545046766444

    hr标签(Horizontal Rule)

    • 作用:
      • 在浏览器上显示一条分割线
    • 格式:
      • <hr />
    • 注意点:
      • 在浏览器中会单独占一行
      • 通过观察发现 HR 标签可以写 / 也可以不写 /, 如果不写 / 那么就是按照 HTML 的规范来编写,如果写上 / 那么就是按照 XHTML 的规范来编写。但是在 HTML5 中,由于 HTML5 兼容 HTML 和 XHTML,所以写不写都可以。那么以后在做前端开发时到底写还是不写呢?按照高级开发工具的提示来写即可
      • 由于 hr 标签是用来修改样式的,所以不推荐使用。今后开发中添加水平线一般都使用 CSS 盒子来做

    1545047052237

    HTML注释(Annotation)

    • 什么是注释?

      • 注释是在所有计算机语言中都非常重要的一个概念,从字面上看,就是注解、解释的意思
      • 注释可以用来解释某一段程序或者某一行代码是什么意思,方便直接或程序员之间的交流
    • 为什么要使用注释?

      • 适当的注释,能够让我们的程序更加可读,所以用中文提示自己,这里的程序是干什么的
    • 注释格式

      <!--被注释的内容-->
      
    • 注意点:

      • 被注释的内容不会在浏览器中显示,注释是写给我们自己看的
      • 注释不能嵌套使用
    • 快捷键:ctrl + /

    img标签(image)

    • 作用:在网页上插入一张图片

    • 格式:

      <img src="./xxx.jpg" alt="这是图片标签" title="这是一张图片" width="200px" >
      
    • 标签的属性:

      • 写在标签中 key = "value" 这种格式的文本称之为标签属性

        属性名称 作用
        src 告诉浏览器需要插入的图片路径,以便于浏览器到该路径下找到需要插入的图片
        alt 规定图像的替代文本,只有在src指定的路径下找不到图片,才会显示alt指定的文本
        title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
        height 设置图片显示的高度
        width 设置图片显示的宽度
    • 注意点:

      • alt 必须存在
      • 建议图片的宽度和高度只设置一个,另一个会等比例放缩
      • img标签添加的图片默认不是占一整行空间,多个图片可以同行显示

    br标签

    • 作用:让内容换行
    • 格式:<br/>
    • 注意点:
      • br 的意思是不另起一个段落进行换行,而网页中99.99%需要换行时都是因为另起了一个段落,所以应该用 p 来做

    a标签(anchor)

    • 格式:<a href="http://www.cnblogs.com/qiuxirufeng/">湫兮如风</a>
    • 作用:用于从一个页面链接到另一个页面
    • 注意事项:
      • 在a标签之间一定要写上文字,如果没有,那么在页面上找不到这个标签
      • a标签也叫做超级链接超链接
    • a标签的属性
    属性名称 作用
    href 指定跳转的目标地址
    target 告诉浏览器是否保留原始界面, _blank保留, _self不保留
    title 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
    • base标签和a标签结合使用
      • 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦,这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
      • 格式:<base target="_blank" />
    • 注意事项:
      • base必须嵌套在head标签里面
      • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
    • a标签其它用法
      • 假链接(本质是跳转到当前页面)
        • 格式:<a href="#">湫兮如风</a>
        • 格式:<a href="javascript:">湫兮如风</a>
      • 跳转到当前页面指定位置(锚点链接)
        • 格式:<a href="#location">跳转到指定位置</a>
        • 在页面的指定位置给任意标签添加一个id属性
          • 例如 <p id="location">这个是目标</p>
        • 跳转到指定页面的指定位置
          • 格式:<a href="01-锚点链接.html#location">跳转到指定位置</a>
          • 只需要在01-锚点链接.html页面添加一个id位置即可
  • 相关阅读:
    201671030123叶虹 实验十四 团队项目评审&课程学习总结
    201671030123叶虹《英文文本统计分析》结对项目报告
    201671030123 叶虹 实验三作业互评与改进报告
    《构建之法》——三个问题
    201671030129 周婷 实验十四 团队项目评审&课程学习总结
    201671030129 周婷 《英文文本统计分析》结对项目报告
    201671030129 词频统计项目报告
    201671030129 周婷 实验三:作业互评与改进
    快速通读《现代软件工程——构建之法》
    201673020127 郁文曦 课程学习总结
  • 原文地址:https://www.cnblogs.com/qiuxirufeng/p/10133647.html
Copyright © 2020-2023  润新知