HTML常用标签

HTML最常用标签

1.排版标签

  • 1.1标题标签<h1></h1>
    • h 即 head 的简写
    • 有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
    • 基本格式<h1></h1>
    • 像<h7>这种错误的标签在展示时不起作用
  • 1.2段落标签<p></p>
    • p 即 paragraph 的简写
    • 基本格式<p>段落内容</p>
    • 段落中的文本内容超出浏览器宽度之后会执行自动换行
  • 1.3水平线标签<hr/>
    • hr 即 horizontal 的缩写
    • 其作用是在页面中插入一条水平线
    • 基本格式<hr />
    • 这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
  • 1.4容器标签 <div></div> 和 <span></span>
    • div 即 division 的缩写，分割、区分的意思
    • span 即 span ，跨度、范围的意思
    • 这俩本质上是一个容器，类似于 Android 中的ViewGroup
    • 基本格式<div>这是div标签中的内容</div> <span>这是span标签中的内容</span>

  • 2.文本格式化标签

标签	                        效果

<b></b>、<strong></strong>	加粗，XHTML推荐使用<strong>
<i></i>、<em></em>	        斜体，XHTML推荐使用<em>
<s></s>、<del></del>	    删除线，XHTML推荐使用<del>
<u></u>、<ins></ins>	    下划线，XHTML推荐使用<ins>

  • 3.图像标签

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

  • 4.超链接标签

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

  • 5.列表标签

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

  • 6.表格标签table

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

  • 7.表单标签

    • html 中一个完整的表单通常由 表单元素、提示信息、表单域（即多个表单的父容器）三部分组成
  • 7.1 input 输入标签
    • <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--正整数----------控制输入的最大字符数量
  • 7.2 label 标签
    • label 标签为 input 标签定义标注/标签
    • 用来绑定一个表单元素，当点击 label 标签的时候，被绑定的 表单元素就会获取焦点
    • 通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来
  • 7.3 textarea 文本域标签
    • <textarea></textarea>用来做大量文本的输入，支持多行
    • 有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）
  • 7.4 下拉菜单 <select></select>
    • <select></select> 用来定义下拉菜单
    • <option></option> 用来定义下拉菜单选项
    • <select></select> 中至少包含一对 <option></option>
    • 在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中
posted @ 2020-03-28 18:22  ZYFF  阅读(278)  评论(0)    收藏  举报