欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML常用标签及属性整理

程序员文章站 2022-04-27 23:42:52
...

常见的文本修饰标签

  • <h1>–<h6> 放大字体
  • <b></b>定义粗体字
  • <strong> 强调文本
  • <i> 斜体字
  • <em>斜体强调文本
  • <s> 删除线 (不建议使用)
  • <del> 删除的文本,删除线

区块标签

  • <p>
  • <div>

单标签

  • <hr/> 水平线
  • <br/> 换行符
  • <pre></pre> 格式化 使空格和回车等生效

锚记链接

  • <a href="#a">
  • <a name=“a”>
  • target="_blank" 另一个页面打开

图片标签:
<img src=“图片路径” alt=“图片代替文本”(图片描述,用于搜索引擎搜索关键字,另图片无法加载时会显示该文本) title=“提示文字”(鼠标hover上去显示的文字) width=“宽度” height=“高度”/>
图片热点地图:
热点地图语法格式:

 <img src="图片地址" usemap="#Map"/>
          <map name="Map">
                 <area shape="rect" coords="10,10,50,50" href="#">矩形,矩形的位置是x1,y1,x2,y2,两个顶点坐标确定一个矩形
                 <area shape="circle" coords="10,10,50,50" href="#">圆形 圆形位置是x,y,radius
                 <area shape="poly" coords="100,20,100,50" href="#">多边形 多个点的坐标位置
         </map>

表格:
标签的属性:

  • width表格宽度
  • border 围绕表格的边框宽度
  • cellspacing 单元格之间的距离
  • cellpadding 单元格边沿与其内容之间的空白

tr属性:

  • align 表格行的内容水平对齐方式 left、center、right
  • valign表格行中内容的垂直对齐方式 top(顶)、middle(中)、bottom(下)、baseline(基线)

td 属性:

  • colspan 合并行单元格
  • rowspan 合并列单元格

其他标签:

  • <th> 标签定义表格中的表头单元格
  • <caption> 定义表格的标题
  • <thead> 组合表格的表头内容
  • <tbody> 组合表格的主体内容
  • <tfoot>组合表格的页脚内容

列表标签

  • ul 无序,可以设置前面小圆点的形状
  • ol有序,指定type,从1开始还是从a,A,罗马字符 开始
  • dt 主标题
  • dd

多种input标签

  • <input type=“text”/> 文本输入框
  • <input type=“password”/>密码
  • <input type=“radio”/>单选按钮
  • <input type=“checkbox”/>复选框
  • <input type=“file”/>文件上传
  • <input type=“hidden”/>隐藏域
  • <input type=“submit”/>提交按钮
  • <input type=“reset”/>重置
  • <input type=“button”/>按钮
  • <input type=“image”/>图像按钮

下拉框

  • <select name=""> name size(可见选项的数目) multiple(多选)
  • <option value="">
    • selected(默认选中项)
    • disable(规定此选项在首次加载时被禁用)
    • optgroup (把相关的选项组合在一起 )
    • lable(描述)

lable标签 可以提供很好的用户体验,点击<lable>标签,对应的控件会被选择 用for属性关联需要关联的id值或将关联部分放在一个lable标签中

frameset标签

  • frameboder 是否显示框架周围的边框,值只有0(不显示边框)和1(显示边框)
  • boder 设置框架边框的粗细
  • bodercolor 设置边框颜色
  • cols 纵向分割页面 可以是数字,百分比和“”,“”表示剩余的全部
  • rows 横向分割

frame

  • name 设置名称
  • src 网页名称活路径
  • scrolling 是否显示滚动条 auto yes,no
  • noresize 设置框架大小是否能手动调节
  • marginheight 框架上下方边距
  • marginwidth 框架左右边距

iframe

  • src 显示文档的URL
  • width iframe宽度
  • height iframe高度
  • name ifram名称
  • frameborder 是否显示框架周围边框
  • scrolling 是否显示滚动条
  • marginheight iframe顶部和底部的边距
  • marginwidth 左右边距