H系列标签(H1 ~ H6)

  • 作用:

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


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="./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位置即可

HTML基础【2】:基础标签的更多相关文章

  1. iOS系列 基础篇 06 标签和按钮 (Label & Button)

    iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...

  2. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  3. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  4. HTML基础:<a>标签 编写个人收藏夹

    编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  5. [.net 面向对象编程基础] (7) 基础中的基础——流程控制语句

    [.net 面向对象编程基础] (7) 基础中的基础——流程控制语句 本来没有这一节的内容,后来考虑到既然是一个系列文章,那么就尽可能写的详细一些,本节参考了网上朋友所写的例子,为的是让更多小伙伴学习 ...

  6. Java基础技术基础面试【笔记】

    Java基础技术基础面试[笔记] String.StringBuilder以及StringBuffer三者之间的区别? 三者的区别可以从可变性,线程安全性,性能这三个部分进行说明 可变性 从可变性来说 ...

  7. [.net 面向对象编程基础] (3) 基础中的基础——数据类型

    [.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...

  8. [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换

    [.net面向对象编程基础] (4)基础中的基础——数据类型转换 1.为什么要进行数据转换? 首先,为什么要进行数据转换,拿值类型例子说明一下, 比如:我们要把23角零钱,换成2.30元,就需要把整形 ...

  9. [.net 面向对象编程基础] (5) 基础中的基础——变量和常量

    [.net面向对象编程基础]  (5) 基础中的基础——变量和常量 1.常量:在编译时其值能够确定,并且程序运行过程中值不发生变化的量. 通俗来说,就是定义一个不能改变值的量.既然不能变动值,那就必须 ...

  10. [.net 面向对象编程基础] (6) 基础中的基础——运算符和表达式

    [.net 面向对象编程基础] (6) 基础中的基础——运算符和表达式 说起C#运算符和表达式,小伙伴们肯定以为很简单,其实要用好表达式,不是一件容易的事.一个好的表达式可以让你做事半功倍的效果,比如 ...

随机推荐

  1. 10 windows server 2012R2 发布MVC框架网站注意事项

    1:网站编译完成之后,需要发布,网站中应包括的文件有:文件夹(bin,Views,Content等其他网站中涉及到的文件夹)文件(favicon.ico.Web.config.Global.asax) ...

  2. docker 打卡

    create 2019/01/01 mod 2019/02/02 安装没得技术含量,看过菜鸟教程和纯洁写的博客,感觉so easy 命令: yum install docker 启动 设置开机启动 s ...

  3. C# 封装winio.dll 驱动级按键鼠标操作模拟

    using System;using System.Collections.Generic;using System.Text;using System.Runtime.InteropServices ...

  4. redash学习记录

    一.简介 一款开源的 BI 工具Redash 二.参考资料 一款开源的 BI 工具Redash 浅析数据查询与可视化工具--Redash

  5. day5_不能循环删除list-深拷贝、浅拷贝(import copy)

    一.循环删list里面的元素,会导致下标错位,结果是不对的举例:想删除奇数 l = [1,1,1,2,3,4,5] for i in l: if i%2 !=0: l.remove(i) #删除后,导 ...

  6. C++中vector使用详细说明 (转)

    转自:http://blog.chinaunix.net/uid-26000296-id-3785610.html http://www.cnblogs.com/mr-wid/archive/2013 ...

  7. java+tomcat开发环境搭建

    java+tomcat开发环境搭建 一.jdk环境变量设置 ...........这里省略n个字............. 二.tomcat环境变量设置 安装好tomcat后 1.新建环境变量: CA ...

  8. caffe中的卷积

    https://www.zhihu.com/question/28385679 如上,将三维的操作转换到二维上面去做,然后调用GEMM库进行矩阵间的运算得到最后结果. 两个矩阵相乘,需要中间的那个维度 ...

  9. spring拦截器-过滤器的区别

    1.  理解 拦截器 :是在面向切面编程的时候,在你的 service 或者一个方法前调用一个方法,或者在方法后调用一个方法:比如动态代理就是拦截器的简单实现,在你调用方法前打印出字符串(或者做其它业 ...

  10. java框架之SpringBoot(7)-异常处理

    前言 在 SpringBoot 项目中,默认情况下,使用浏览器访问一个不存在的地址会返回如下错误页面: 而当客户端未非浏览器时,错误信息则会以 json 数据返回,如下: 会出现如上效果的原因是 Sp ...