html5知识点梳理(2020-09-29)

input标签

<input> height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的<input> 标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<input> placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

HTML5 语义元素

https://www.runoob.com/html/html5-semantic-elements.html
语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素:
header, section, footer, aside, nav, main, article, figure

兼容方法

为了让这些块级元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
  {
      display: block;
  }

IE9 以下版本浏览器兼容HTML5的方法:

1、使用静态资源html5shiv包;

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

2、载入后,初始化新标签的CSS:

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

让一些较早的浏览器(不支持HTML5)支持 HTML5的方法:
https://www.runoob.com/html/html5-browsers.html

推荐阅读更多精彩内容