HTML常用标签

HTML最常用标签

1.排版标签

  • 1.1标题标签
    • h 即 head 的简写
    • 有

      、

      、

      、

      、

      、
       6种，从左到右字号依次变小。
    • 基本格式

    • 像这种错误的标签在展示时不起作用
  • 1.2段落标签
    • p 即 paragraph 的简写
    • 基本格式

      段落内容

    • 段落中的文本内容超出浏览器宽度之后会执行自动换行
  • 1.3水平线标签
    • hr 即 horizontal 的缩写
    • 其作用是在页面中插入一条水平线
    • 基本格式
    • 这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
  • 1.4容器标签 
     和 
    • div 即 division 的缩写，分割、区分的意思
    • span 即 span ，跨度、范围的意思
    • 这俩本质上是一个容器，类似于 Android 中的ViewGroup
    • 基本格式
      这是div标签中的内容
       这是span标签中的内容

  • 2.文本格式化标签

标签	                        效果

、	加粗，XHTML推荐使用
、	        斜体，XHTML推荐使用
、	    删除线，XHTML推荐使用
、	    下划线，XHTML推荐使用

  • 3.图像标签

  • 3.1 
    • 基本格式
    • 属性值
      • 属性 属性值 属性含义
      • src URI/URL 图像的路径
      • alt 文本 图像无法正常显示时的提示文本
      • title 文本 鼠标悬停于图像时显示的文本
      • width 像素（XHTML 不支持按页面百分比显示） 图像的宽度
      • height 像素（XHTML 不支持按页面百分比显示） 图像的高度
      • border 数字 设置图像边框的宽度
    • 设置图像的宽高时，如果想等比缩放，则只设置其中一个即可

  • 4.超链接标签

  • 4.1超链接标签
    • anchor 的缩写
    • 基本格式 超链接文本或图像
      • href 即 HyperText Reference , 指定要跳转的URL地址
      • target , 指定目标窗口的打开方式。取值为 self / blank , self 为默认值，blank 表示新窗口打开
    • 外链需要添加 http:// 或 https:// 前缀
    • 内部链接 直接链接内部页面名称即可，如首页
    • 如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
  • 4.2锚点
    • 通过创建锚点，可以快速定位到目标内容区域
    • 创建锚点分为两步
      • 为目标内容（即锚点）创建id 并赋值
      • 将超链接文本与锚点的id 关联， 超链接文本

  • 5.列表标签

  • 5.1 无序列表
      • 所谓无序列表就是以小圆点或者小方块作为行首标志的列表 *无序列表的各项之间是并列的，没有顺序级别的区分
    • 5.2 有序列表 
        • 内部也是嵌套
        • 默认以 1、2、3...作为行首排序标志
      1. 5.3 自定义列表
        • 为外层标签、
          为内层标签、
           下还可以嵌套 
        • 自定义列表项前不具有任何项目符号，既没有小圆点也没有1234
      2. 5.4 自定义列表 
        • 为外层标签、
          为内层标签、
           下还可以嵌套 
        • 自定义列表项前不具有任何项目符号，既没有小圆点也没有1234

      3. 6.表格标签table

        •  用来定义表格
        •  用来定义头部。必须位于 
           中，一般包含网页的logo和导航等头部信息
        •  用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容
        •  用来定义行，嵌套在 
           中
        •  用来定义行中的单元格，嵌套在  中
        •  中只能嵌套 , 但  相当于一个容器，可以嵌套任意元素
        • 属性
          • 属性名称 含义 属性取值
          • border 表格的边框。默认 border="0",即无边框 像素值
          • cellspacing 单元格与单元格边框之间的间距。 默认 cellspacing="2" 像素值
          • cellpadding 单元格内容与单元格边框的间距。 默认 cellpadding="1" 像素值
          • width 表格的宽度 像素值
          • height 表格的高度 像素值
          • align 表格在页面中的水平对齐方式 left 、center 、right
          • caption 标题 文本
          • colspan 从当前列向后 横跨几列, 应用于td、th 数字
          • rowspan 从当前行向下 竖跨几行, 应用于td、th 数字
        • 表头标签
          • 表头一般位于表格的第一行或者第一列
          • 表头标签为 ，在显示的时候默认会显示为加粗的效果
          • 增加表头时，使用  替代对应位置的 即可

      4. 7.表单标签

        • html 中一个完整的表单通常由 表单元素、提示信息、表单域（即多个表单的父容器）三部分组成
      5. 7.1 input 输入标签
        •  为单标签（自闭合标签）
        • type 是其基本属性，用来控制输入的类型
        • 属性--------取值-----------含义
        • type-------text 单行文本输入框（不换行的）
        • type-------password 密码输入框
        • type-------radio 单选框（配合name 可以实现单选效果）
        • type-------checkbox 复选框
        • type-------button 普通按钮
        • type-------submit 提交按钮
        • type-------reset 重置按钮
        • type-------image 图像形式的提交按钮
        • type-------file 文件域, 点击之后打开文件选择器
        • name-------任意文本 控件名称 , name 相同则表示是同一组数据
        • value------任意文本 默认文本值
        • size-------正整数 显示大小
        • checked----checked 默认是否被选中
        • maxlength--正整数----------控制输入的最大字符数量
      6. 7.2 label 标签
        • label 标签为 input 标签定义标注/标签
        • 用来绑定一个表单元素，当点击 label 标签的时候，被绑定的 表单元素就会获取焦点
        • 通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来
      7. 7.3 textarea 文本域标签
        • 用来做大量文本的输入，支持多行
        • 有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）
      8. 7.4 下拉菜单 
        •  用来定义下拉菜单
        •  用来定义下拉菜单选项
        •  中至少包含一对 
        • 在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中
    前端技术

    相关

    百度前端技术学院-基础-day22-24

    百度前端技术学院-基础-day17-18

    前端技术概况

    标签

    一品网 冀ICP备14022925号-6