html部分知识点学习

libxd 发布于2019-08-02 16:17 / 3596人阅读

摘要：全部的取值如下关于属性解释五元素作用将另一个页面嵌入到当前页面中知识点标签目前已经很少用到。页面页面页面属性取值空值刷新并返回顶部锚点不会刷新页面，不发起请求，点了没反应。

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

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

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

MDN解释 可替换元素（replaced element）的展现效果不是由 CSS
来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
某些可替换元素，例如  元素，可能具有自己的样式表，但它们不会继承父文档的样式。</p>
<p>CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。</p>
</pre>
<p><strong>举例说明：</strong>浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看HTML代码，却看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。这些元素往往没有实际的内容，即是一个空元素。</p>
<p>典型的可替换元素有：</p>
<pre><iframe>
<video>
<embed>
<img>
</pre>
<p>有些元素仅在特定情况下被作为可替换元素处理，例如：</p>
<pre><option>
<audio>
<canvas>
<object>
<applet>

</pre>
<p><strong>三、全局属性</strong></p>
<pre>MDN 是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。<p>我们可以在所有的HTML元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是html5兼容的。</p>
</pre>
<p><strong>四、display属性</strong><br>这个太多了，贴个MDN链接大家有兴趣看看吧！！！</p>
<pre>
<strong>MDN</strong><br>属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。<br>display 的一些取值已经在其多带带的规范中给出了完整的定义；在文末的表格中可以找到所有规范的链接。全部的取值如下：<br>MDN关于display属性解释
</pre>
<p><strong>五、iframe元素</strong><br><strong>作用：</strong>将另一个HTML页面嵌入到当前页面中<br><strong>知识点：</strong><br>iframe标签目前已经很少用到。<br>frameborder：iframe默认有边框，frameborder为1有边框为0无边框。<br>iframe的src属性可以写相对路径</p>
<p><strong>示例解释：</strong><br>iframe默认打开链接为空，有2个a标签，target属性值和iframe的name属性值设置为相同，则点击a标签，会在iframe打开<br><body></p>
<pre><iframe name="name" src="#" width="100%" height="300px" frameborder="0" >
相对路径打开
打开百度

六、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 页面2

test1

页面3

test2

_blank _self _parent _top

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

伪协议：

空值
锚点
http协议
下载
无协议（遵从当前页面协议）
相对路径
?name=test放查询参数
?name=test伪协议
  ---伪协议可以在用户点击 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，点击效果不同，有属性的不提交，无属性的浏
览器自动升级

GPU云服务器云服务器深度学习部分和 javascript应该学习哪部分 html部分页 html部分圆环

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55032.html

前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
坚持：学习Java后台的第一阶段，我学习了那些知识

摘要：最近的计划是业余时间学习后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉很遥远。为了快速进入后台的开发，我也要加快脚步了 showImg(https://segmentfault.com/img/remote/1460000016070790?w=899&h=499); 最近的计划是业余时间学习Java后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉...

instein 2019-08-26 12:18 评论0 收藏0
坚持：学习Java后台的第一阶段，我学习了那些知识

摘要：最近的计划是业余时间学习后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉很遥远。为了快速进入后台的开发，我也要加快脚步了 showImg(https://segmentfault.com/img/remote/1460000016070790?w=899&h=499); 最近的计划是业余时间学习Java后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉...

khs1994 2019-08-26 12:16 评论0 收藏0
坚持：学习Java后台的第一阶段，我学习了那些知识

摘要：最近的计划是业余时间学习后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉很遥远。为了快速进入后台的开发，我也要加快脚步了 showImg(https://segmentfault.com/img/remote/1460000016070790?w=899&h=499); 最近的计划是业余时间学习Java后台方面的知识，发现学习的过程中，要学的东西真多啊，让我一下子感觉...

April 2019-08-19 11:00 评论0 收藏0