JP-Destiny
JP-Destiny

前端的修行之路-html

前端的修行之路-html

  • html
    • meta标签
    • link标签
    • 段落标签
    • 文本修饰标签
    • 文本修饰标签
    • 引用标签
    • 图片标签
    • 链接标签
    • 列表标签
    • 表格标签
    • 表单标签
    • 框架标签
    • 代码标签
    • 图像映射标签
    • 多媒体标签
    • html5语义化标签
    • html5新控件
    • 块标签
    • 内联标签

html

meta标签

  • 标签（单标签），提供有关页面的元信息，位于文档的头部，不包含任何内容。它的属性定义了与文档相关联的名称/值对。
<meta name="description" content="">  
<meta name="keywords" content="">  
<meta name="renderer" content="webkit">  
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">  
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00">

link标签

  • 标签（单标签），定义文档与外部资源的关系。
<link rel="stylesheet" href="./css/bootstrap.css">  
<link rel="icon" type="image/x-icon" href="./img/logo.ico">  
<link rel="dns-prefetch" href="xx.com">

段落标签

  • ~

    标签（双标签），定义标题的标签。

    标签定义最大的标题，
    标签定义最小的标题。

  • 标签（双标签），定义段落的标签。

文本修饰标签

  • 标签（双标签），表示强调，会对文本进行加粗。
  • 标签（双标签），对文本进行加粗。根据html5规范，在没有其他合适标签更合适时，才应该把b标签作为最后的选项。
  • 标签（双标签），表示强调，会对文本进行斜体。
  • 标签（双标签），对文本进行斜体。
  • 标签（双标签），定义下标文本。在数学等式、科学符号和化学公式中都非常有用。
  • 标签（双标签），定义上标文本。在向文档添加脚注以及表示方程式中的指数值时非常有用。
  • 标签（双标签），定义文档中已被删除的文本。
  • 标签（双标签），定义已经被插入文档中的文本。

文本修饰标签


  • 标签（单标签），插入换行符。
  • 标签（单标签），创建一条水平线。
  • 标签（双标签），定义键盘文本。

引用标签

  • 标签（双标签），引用大段的段落解释。
  • 标签（双标签），引用小段的短语解释。
  • 标签（双标签），缩写或首字母缩略词。常与title属性一起使用，显示简称/缩写的完整本。
  • 标签（双标签），引用文档地址信息。通常连同其他信息被包含在
    标签中。它不应该用于描述通讯地址，除非它是联系信息的一部分。
  • 标签（双标签），引用著作的标题。

图片标签

  • 标签（单标签），向网页中嵌入一幅图像。

    属性 值 描述
    alt（必须） text 图片的替代文本
    src（必须） url 显示图片的url
    height px/% 设置图片的高度
    width px/% 设置图片的宽度

链接标签

属性 值 描述
href（必须） url 链接指向的页面的url
target _self/_blank 如何打开链接文档
rel text 当前文档与被链接文档之间的关系
download filename 被下载的超链接目标
media media_query 被链接文档是何种设备优化
type MIME type 被链接文档的MIME类型
  • 标签（单标签），为页面上的所有链接规定默认地址或默认目标。一般写在标签里。

列表标签

    • 标签（双标签），定义无序列表。常与
    • 一起使用。
      • 标签（双标签），定义有序列表。常与
      1. 标签一起使用。
      2. 标签（双标签），定义定义列表。
      3. 标签（双标签），定义专业术语或名词。
      4. 标签（双标签），对名词进行解释和描述。

    表格标签

    • 标签（双标签），定义html表格，是表格的最外层容器。
      属性 值 描述
      align left、center、right 水平对齐方式
      valign left、center、right 垂直对齐方式
      cellpadding px/% 单元格沿与其内容之间的空白
      cellspacing px/% 单元格之间的空白
      border px 表格的边框
      • 标签（双标签），定义表格标题。
      • 标签（双标签），定义html表格中的行。
      • 标签（双标签），定义表格内的表头单元格，可选的属性有rowspan和colspan。
      • 标签（双标签），定义html表格中的标准单元格。
      • 标签（双标签），定义表格的表头。表格的语义化标签。
      • 标签（双标签），定义表格的正文。表格的语义化标签。
      • 标签（双标签），定义表格的页脚。表格的语义化标签。

      表单标签

      • 标签（双标签），定义html表单，是表单的最外层容器。
      属性 值 描述
      action（必须） url 当提交表单时向何处发送表单数据
      method（必须） get/post 发送表单数据的http方法
      autocomplete on/off 是否启用表单的自动完成
      enctype 在发送表单数据之前如何对其进行编码
      target _self/_blank 如何打开action url
      • 标签（双标签），将表单内元素进行分组。标签为
        标签定义标题。
      • 标签（双标签），用于搜集用户信息，根据不同的type属性值，展示不同的控件。
      属性 值 描述
      type（必须） button/file/hidden/password/reset/submit/text等 input元素的类型
      checked checked 加载时被选中
      disabled disabled 加载时禁用此元素
      height px/% input字段的高度
      width px/% input字段的宽度
      list datalist-id 引用包含输入字段的预定义选项的datalist
      max number/date 输入字段的最大值
      min number/date 输入字段的最小值
      maxlength number 输入字段中的字符的最大长度
      multiple multiple 允许一个以上的值
      name field_name input元素的名称
      pattern regexp_pattern 输入字段的值的模式或格式
      placeholder text 帮助用户填写输入字段的提示
      readonly readonly 输入字段为只读
      required required 指示输入字段的值是必需的
      size number_of_char 定义输入字段的宽度
      step number 输入字的合法数字间隔
      value value input元素的值