前端作業02

weixin_37178278

已于 2022-03-04 17:11:32 修改

阅读量110

点赞数

文章标签：前端

于 2022-03-04 16:44:46 首次发布

本文链接：https://blog.csdn.net/weixin_37178278/article/details/123279370

版权

1.html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

1.1、新特性

语义化标签：article、footer、section、header、nav
视频和音频：video、audio
canvas画布：图形容器、必须使用js脚本来绘制图形

1.2、移除的元素

1.3、处理html5新标签与浏览器兼容性问题：

（1）、使用document创建标签
（2）、a）使用html5shim：在中调用以下代码：

    1.<!--[if lt IE 9]>
    2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    3.<![endif]-->

display与元素的隐藏:

display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

visibility与元素的隐藏:

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化

一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单栏，又如弹出提示框居中显示

单位	描述
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	rem 是（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	viewpoint height，视窗高度，1vh=视窗高度的1%
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%

优先级如下:

！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后面的会覆盖前面的。

input是单行文本框，不会换行。通过size属性指定显示字符的长度，注意：当使用css限定了宽高，那么size属性就不再起作用。value属性指定初始值，Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高，但是也不会增加行数。

textarea 是多行文本输入框，文本区中可容纳无限数量的文本，无value属性，其中的文本的默认字体是等宽字体（通常是 Courier），可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响

i内容展示为斜体，em表示强调的文本

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；

而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

overflow:hidden；

white-space:nowrap；

text-overflow:ellipsis。

属性	描述
accesskey	设置访问元素的键盘快捷键。
class	规定元素的类名（classname）
contenteditableNew	规定是否可编辑元素的内容。
contextmenuNew	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*New	用于存储页面的自定义数据
dir	设置元素中内容的文本方向。
draggableNew	指定某个元素是否可以拖动
dropzoneNew	指定是否将数据复制，移动，或链接，或删除
hiddenNew	hidden 属性规定对元素进行隐藏。
id	规定元素的唯一 id
lang	设置元素中内容的语言代码。
spellcheckNew	检测元素是否拼写错误
style	规定元素的行内样式（inline style）
tabindex	设置元素的 Tab 键控制次序。
title	规定元素的额外信息（可在工具提示中显示）
translateNew	指定是否一个元素的值在页面载入时是否需要翻译