养乐多__
养乐多__

HTML 常用标签

一、常用标签

1. iframe 标签

嵌套页面。
需要新开一个窗口，速度比较慢。

  • iframe 直接使用

直接打开新页面，内容为百度。

  • iframe 与 a 标签配合使用（name属性）

腾讯
百度

此 a 标签会在 name 为"xxx"的窗口打开。

  • 不写frameborder="0"的话，iframe 会出现一个默认的 border 为 1，所以是为了消除 border。

2. a 标签

跳转页面（HTTP GET 请求）

  • target 属性
blank-QQ
self-QQ
parent-QQ
top-QQ

_blank----在空页面打开
_self----在当前窗口打开
_parent----在上级窗口打开（父页面）
_top----在最顶级窗口打开（祖宗页面）

  • download 属性
下载

关于下载：
（1） 由 http 响应决定，若响应的的 content-type 写为content-type: application/octet-stream，浏览器会以下载的形式接受这个请求，而不是在页面上展示。
（2） 若写为content-type: text/html，只能在 a 标签上写个 download，强制下载。

  • href 属性
    href 属性的几种写法：
1. QQ
   QQ 
2. QQ              //无协议的绝对地址
3. xxx             //相对路径
   xxx      //?name=qqq直接加在当前页面后面
   xxx             //同上，但不发起请求
4. xxx    //伪协议（看似与http同等的协议）
   xxx          //点击后什么都不做的a链接

（1）写代码时一般指定为 http 协议，不用 file 协议。
（2）QQ 表示“无协议绝对路径”，即当前文件是什么协议，它就是什么协议（一般为 file 协议）
（3）QQ 打不开，因为qq.com是一个相对地址，相当于一个文件
（4）xxx 直接跳转到 xxx.html/#ssss，但因为是锚点，所以不发起请求（只有锚点不发起请求，锚点作用是实现页面内跳转）
（5）xxx 伪协议的应用：点击之后不需要任何动作的 a 标签
（6）link 当前页面刷新
（7）link 页面锚点变成“#”或页面滚动到顶部（“#” 包含了一个位置信息，默认的锚点是 #top）

  • a 标签属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

3. form 标签

跳转页面（HTTP POST 请求）

  • form 标签的作用是用于将其他表单标签“包”起来，以便作为一个整体，可以提交数据到服务器。
  • form 发起的是 post 请求。
  • name：给该表单命名，用于JS技术使用；
    （1）name 最终会被带到 post 请求的第四部分，成为它的 key；
    （2）如果 form 标签里的 input 不加 name 属性，那么在表单提交时，input 的值就不会出现在请求里。
  • action="URL" ：指定 form 表单向何处发送数据
  • method="get / post"：以何种方式向服务器发送数据
    method 取 get 会把参数默认放到查询参数里面，则不会出现第四部分；取 post 会把参数默认放在第四部分，不会出现查询参数。我们可以通过给 action 加参数，让 post 也有查询参数，但没有任何方法让 get 请求拥有第四部分。
  • enctype="string"：规定表单数据以什么形式进行编码。
  • form 标签也有 target，且规则和 a 标签一样。
  • form 属性见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

4. input / button 标签

区别：是否为“ 空标签”；
input 没有子元素，button 有 span 等子元素。

  • 写 button 按钮时若不写 type，它会自动升级为提交按钮；
    若写了 type，按钮则按 type 指定类型显示。

                     // 自动升级为提交按钮
              // 普通button按钮
  • 写 input 时，type 指定为什么类型，就是什么类型。
    input 标签有很多种 type。

           // 普通button按钮
           // 提交按钮

（1）submit 是唯一能确定 form 表单能不能点击提交的按钮。
（2）有提交键时按回车即可跳转。

  • checkbox：（多选框）
    可以同时勾选多个框；name 相同，表明这是同一个事物的选项。

（1）label 的 for 和 input 的 id 是对应的，要成对出现


    爱我              //点“爱我”无反应
      //点“爱我”也可勾选

（2）也可用 label 标签包裹住 input（简单，比较常用）


    喜欢的水果
    
    
    //点“橘子”和“香蕉”也可勾选选框
  • radio：（单选框）
    name 相同时，只能勾选其中一个框。

   爱我

  • password：密码输入框
    虽然输入时看不到密码，但实际还是明文传输的。

  • input 属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

  • button 属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button

5. select 标签

下拉选择框。
  • select 加 multiple 属性，可按着 shift 或 ctrl 实现多选。
  • 文本框可以随意拉动大小，防止出现 bug，常用 css 固定大小（宽、高也可以用行、列替代）。

7. table 标签

以表格的形式展示数据。

    //表格加边框
    //colgroup里面有col属性才有意义
        //第一列宽度（px)
        //bgcolor已不常用，现一般用css控制
        
                   
        
    
    
        

            项目姓名班级分数
        

    
    
        

            1小明一班94
        

        

            2小红二班96
        

    
    
        

            平均分95
        

        

            总分190
  • thead：table head 、tbody：table body 、tfoot：table foot
    tr：table row（行）、td：table data（数据）、th：table header（标题）
  • thead、tbody、tfoot 的内容与三个标签排放顺序无关，不影响内容显示。
  • 不写 tbody，系统会自动补上；
    不写 thead 和 tfoot，就没有表头和表尾，内容统统放在 tbody 里。
  • table 的 border 默认是有空间的，可以在css里把它合并起来：
  • table 属性见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table

8. 表单元素总结

单行文本框：，默认值是type="text"
密码框：
单选按钮：
多选按钮：
隐藏框：
文件上传：
下拉框：
多行文本：
标签：
元素集：


提交按钮：
普通按钮：
重置按钮：

9. noscript 标签

如果用户浏览器不支持 script，则会显示 noscript 中的内容。

二、空标签

空标签：即空元素，是指有内容的元素，即没有子元素（包括文本）的元素。

  • 空标签是不闭合的标签，不成对出现
  • 在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， 的闭标签是无效的。
  • 常见空标签：





 when the span is present.

三、替换元素

1. 可替换元素

可替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。替换元素一般没有实际内容。

  • 比如，type="text" 时是一个文本输入框；取作其他的时候，浏览器显示就不一样了。
  • 可替换元素的展现不是由 CSS 来控制的。这些元素是一类外观渲染独立于 CSS 的外部对象。典型的可替换元素有、、和表单元素，如