乐趣区

html部分知识点学习

一、什么是空标签
没有闭合的标签称为空标签。

一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的 element。

<area>
<base>
<br>
<col>
<colgroup> 
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

二、什么是可替换标签
可替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容

MDN 解释 可替换元素(replaced element)的展现效果不是由 CSS
来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。

某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。

举例说明:浏览器会根据 img 标签的 src 属性的值来读取图片信息并显示出来,而如果查看 HTML 代码,却看不到图片的实际内容;又例如根据 input 标签的 type 属性来决定是显示输入框,还是单选按钮等。这些元素往往没有实际的内容,即是一个空元素。

典型的可替换元素有:

<iframe>
<video>
<embed>
<img>

有些元素仅在特定情况下被作为可替换元素处理,例如:

<option>
<audio>
<canvas>
<object>
<applet>

三、全局属性

MDN 是所有 HTML 元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用。

我们可以在所有的 HTML 元素上指定全局属性,甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性,即使使用这些元素意味着文档不再是 html5 兼容的。

四、display 属性
这个太多了,贴个 MDN 链接大家有兴趣看看吧!!!

MDN
属性指定了元素的显示类型,它包含两类基础特征,用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理,内部显示类型定义了元素内子元素的布局方式。
display 的一些取值已经在其单独的规范中给出了完整的定义;在文末的表格中可以找到所有规范的链接。全部的取值如下:
MDN 关于 display 属性解释

五、iframe 元素
作用:将另一个 HTML 页面嵌入到当前页面中
知识点:
iframe 标签目前已经很少用到。
frameborder:iframe 默认有边框,frameborder 为 1 有边框为 0 无边框。
iframe 的 src 属性可以写相对路径

示例解释:
iframe 默认打开链接为空,有 2 个 a 标签,target 属性值和 iframe 的 name 属性值设置为相同,则点击 a 标签,会在 iframe 打开
<body>

<iframe name="name" src="#" width="100%" height="300px" frameborder="0" ></iframe>
<a target="name" href="./index.html"> 相对路径打开 </a>
<a target="name" href="https://www.baidu.com"> 打开百度 </a>

</body>

六、a 标签知识点
6.1target 属性
_blank: 浏览器新标签打开
_self: 当前页面(自己)打开
_parent: 父级页面打开
_top 最顶端页面打开
示例说明:
页面 1iframe 通过相对路径引入 test1.html,页面 2 通过相对路径引入 test2.html,页

      面 3 的 a 标签 target 属性分四种。

_blank:浏览器新标签打开页面
_self:在 test2 页面自身打开
_parent:在 test1 页面打开
_top:在 test 页面打开
test 页面通过 iframe 嵌入 test1,test1 通过 iframe 嵌入 test2。

页面 1
<body>
<iframe src="./test1.html" frameborder="1"></iframe>
</body>

页面 2
<body>
    <p>test1</p>
    <iframe src="./test2.html" frameborder="1"></iframe>
</body>

页面 3
<body>
    <p>test2</p>
    <a target="_blank" href="https://www.baidu.com">_blank</a>
    <a target="_self" href="https://www.baidu.com">_self</a>
    <a target="_parent" href="https://www.baidu.com">_parent</a>
    <a target="_top" href="https://www.baidu.com">_top</a>
</body>

6.2href 属性取值:
空值:刷新并返回顶部
# 锚点: 不会刷新页面,不发起请求,点了没反应。
http 协议:根据 target 属性,点击后当或新标签打开链接
下载: a 标签下载属性须通过服务器方式,本地 file 路径是打开新标签不是下载。
**//baidu.com 无协议绝对地址:浏览器根据当前协议,补全无协议链接的协议。
file 协议:
如果用 file:// 协议浏览页面,就会访问到 file://qq.com,这是一个不存在的路径
应该尽量不使用 file:// 协议预览网页,以免无协议链接出错

伪协议:

<a href=""> 空值 </a>
<a href="#"> 锚点 </a>
<a href="https://www.baidu.com">http 协议 </a>
<a href="xdml.png" download='我的 xdml'> 下载 </a>
<a href="//baidu.com"> 无协议(遵从当前页面协议)</a>
<a href="./test1.html"> 相对路径 </a>
<a href="?name=test">?name=test</a> 放查询参数
<a href="JavaScript:;">?name=test</a> 伪协议
  --- 伪协议可以在用户点击 a 时执行一段 javascript 代码
 --- 伪协议可以在当前页面执行一段代码
 --- 伪协议可以实现「点击之后没有任何动作的 a 标签」,满足一些奇葩需求

七、forme 标签知识点:
7.1a 标签和 forme 标签请求区别
都是发起请求,唯一区别是 a 标签发起 get 请求,from 发起 post 请求。
from 标签必须要有提交按钮,否则无法提交
7.2action 参数
get 请求默认将 action 参数放到查询参数
post 默认将 action 参数放到请求第四部分 form data
可以通过给 action 加参数让 post 也有查询参数,但没办法让 get 请求有第四部分,比如(users?zzz=3)

八、input 标签知识点:
1、复选框:通过 label 标签包裹 input 可以自动关联,点击 me 和复选框,都可选中

2、单选框:多个单选框(input 的 type 为 radio 时),设置每个 input 的 name 属性为相同
值,即可做到只能选一个
3、 如果一个 form 标签内只有一个 button 且没写 type 属性,浏览器会自动升级为提交按
钮(submit)如果写了 type 属性,则按属性执行
不写 type 属性和 type 属性为 button,点击效果不同,有属性的不提交,无属性的浏
览器自动升级

<body>
    <form action="users?zzz=3" method="POST" target="_blank">
        <input type="text">
        <input type="text">
        <!-- <button > 提交 </button> -->
        <!-- button 的 type 为 button 时点击没反应,删掉后点击会发送请求 -->
        <button type="button"> 提交 </button>
    </form>
</body>

退出移动版