HTML5-基础标签

基础标签学习

H系列标签(Header 1~Header 6)

• 作用:

  • 用于给文本添加标题语义

• 格式:

  • <h1>xxxxxx</h1>

• 注意点:

  • H标签是用来给文本添加标题语义的, 而不是用来修改文本的样式的
  • H标签一共有6个, 从H1~H6, 最多就只能到6, 超过6则无效
  • 被H系列标签包裹的内容会独占一行
  • 在H系列的标签中, H1最大, H6最小
  • 在企业开发中, 一定要慎用H系列的标签, 特别是H1标签. 在企业开发中一般情况下一个界面中只能出现一个H1标签(和SEO有关)
  • 超过标题6  就无效  变为普通文本

P标签(Paragraph)

• 作用:

  • 告诉浏览器哪些文字是一个段落

• 格式:

  • <p>xxxxxxxx</p>

• 注意点:

  • 在浏览器中会单独占一行

Hr标签(Horizontal Rule)

• 作用:

  • 在浏览器上显示一条分割线

• 格式:

  • <hr />

• 注意点:

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

• HTML注释(Annotation)

  • 什么是注释?

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

  • 为什么要使用注释?

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

  • 注释格式

    <!--被注释的内容-->

  • 注意点:

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

      <!--<!--被注释的内容-->-->

  • 快捷键: ctrl + /

  img标签(image)

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

  • 格式: <img src="图片路径" />

  • 标签的属性

    • 写在标签中K=”V”这种格式的文本我们称之为标签属性
  属性名称作用src(source)告诉浏览器需要插入的图片路径, 以便于浏览器到该路径下找到需要插入的图片alt(alternate)规定图像的替代文本, 只有在src指定的路径下找不到图片,才会显示alt指定的文本title悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)height设置图片显示的高度width设置图片显示的宽度

  • 注意点:

    • img标签添加的图片默认不是占一整行空间
    • 如果想让图片等比拉伸, 只写高度或者宽度即可

  br标签(Break)

  • 作用:

    • 让内容换行

  • 格式:

    • <br/>

  • 注意点:

    • br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

  相对路径和绝对路径

  • 图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径

  • 绝对路径

    • 从电脑的具体盘符开始寻找我们需要的资源
    • <img src="F:/lnj/girl.png" />
    • 以上代码表示在F盘下查找lnj文件夹, 然后在lnj文件夹下查找girl.png图片

  • 相对路径

    • 一个文件相对于另外一个文件的位置寻找我们需要的资源
    • <img src="girl.png" />
    • 假设html文件和girl.png都在lnj文件夹下, 以上代码表示在lnj文件夹下查找girl.png图片

  • 为什么没人使用绝对路径?

    • 可以移植性太差.

  • 什么是可移植性?

    • 可以简单的理解为把写到的代码拷贝到另外一台电脑上是否能够正常运行

  • 为什么绝对路径可移植性差?

    • 假如我编写的html文件放在我电脑的 F:/lnj 目录下, html文件中用到的图片放在F:/lnj/images目录下, 我给src指定的绝对路为F:/lnj/images/girl.png. 那么将来我将整个lnj文件夹拷贝给你, 如果你将lnj文件夹放在非F盘下, 那么将无法显示图片
    • 例如你存放在C盘根目录, 那么图片的绝对路径会变为C:/lnj/images/girl.png, 而src会去F盘找, 所以不会显示
    • 你只有将lnj文件夹存放在F盘根目录下时图片才会正常运行, 这就叫做可移植性不好

  • 为什么相对路径可移植性好?

    • 同上, 如果src指定的路径为images/girl.png, 那么无论你拷贝到那个盘, 哪个文件夹. 系统都只会在当前文件夹中的images下去查找图片, 不会受到盘符和存储位置的影响, 只要保证页面和图片位置的相对关系不变就不会影响到图片的显示

  • 相对路径几种查找方式

    • 同级
      • 直接编写, 例如: girl.png
      • 加上./ 编写, 例如./girl.png
      • ./代表当前目录, ./girl.png代表在当前目录下查找
    • 下级
      • 直接编写, 例如abc/girl.png
      • 加上./ 编写, 例如./abc/girl.png
      • 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
    • 上级
      • ../代表访问上级目录
      • 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
      • 因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
  • 注意事项:
    • 相对路径不会出现这种格式aaa/../bbb/girl.png
    • 虽然可以显示, 但是企业开发中千万不要这么写

  a标签(anchor)

  • 格式: <a href="http://www.it666.com">江哥博客</a>
  • 作用: 用于从一个页面链接到另一个页面

  • 注意事项:

    • 在a标签之间一定要写上文字或者图片, 如果没有, 那么在页面上找不到这个标签
    • a标签也叫做超级链接或超链接

  • a标签的属性

  属性名称作用href(hypertext reference)指定跳转的目标地址target告诉浏览器是否保留原始界面, _blank保留, _self不保留title悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)

a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转a标签中还有一个属性, 叫做title. a标签中的title和img标签中的title一样, 都是用来控制鼠标悬停时显示的提示文本的注意点:1.a标签不仅可以让文字可以点击, 还可以让图片也能够被点击2.一个a标签必须有一个href属性, 否则a标签不知道要跳转到什么地方3.如果通过a标签的href属性指定一个URL地址, 那么必须在地址前面加上http://或https://4.a标签的href属性除了可以指定一个网络地址以外, 还可以指定一个本地地址

base标签和a标签结合使用

如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
格式: <base target="_blank" />
注意事项:
base必须嵌套在head标签里面
如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
a标签其它用法
假链接(本质是跳转到当前页面)
格式<a href="#">江哥博客</a>
格式<a href="javascript:">江哥博客</a>
跳转到当前页面指定位置(锚点链接)
2.1.格式<a href="#location">跳转到指定位置</a>
2.2.在页面的指定位置给任意标签添加一个id属性
例如 <p id="location">这个是目标</p>
跳转到指定页面的指定位置
格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
只需要在01-锚点链接.html页面添加一个id位置即可
下载(极力不推荐使用)
例如<a href="girl.zip">下载福利资源<a/>