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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML5 中的新特性应该是基于 H...
    漫若浮光z阅读 2,271评论 0 0
  • HTNL5内容: 表单:用于搜集用户输入 表单元素表单包含: 输入框、 下拉选项框、 多行文本输入框、 、 -in...
    _往后_阅读 3,741评论 0 1
  • HTML5 第一章 HTML5概述 H5是下一代的web开发的基础. 1.1 web技术发展时间线 1991 HT...
    whitsats阅读 4,780评论 0 0
  • 选择器 ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。类名的第一个字...
    落崖惊风yxy阅读 3,728评论 0 0
  • HTML5语义元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义元素实例: 和 ...
    罗_c857阅读 2,761评论 0 0

友情链接更多精彩内容