html代码问题与解决,html代码使用方法

首页 > 实用技巧 > 作者:YD1662023-06-23 23:29:23

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

我们天天都会写html结构,然而,HTML本身存在一些个问题,在日常中,我们尤其需要注意这些问题,应该避开这么使用。下面我来列一下一些常见的点:

1、img标签

img元素标签可以不用写alt或title,也能正常显示。

<img src="//img.yd166.com/photo.jpg"/>

2、a标签

a元素标签可以不写href属性,不过这样容易出现问题,即使添加块级元素也不会报错,但是里面的内容在浏览器解析后会发生位置偏移,如果出了问题将很难定位。

<a><h2></h2></a>

3、语义化

并不是所有的标签都是带有语义化的,div,i就是比较典型的例子,所以尽量避免在这些标签里面直接添加文字。实际项目开发中,我们常常把<i>元素标签当作页面上的icon图标来使用。

<div></div>

<i></i>

4、用对元素标签

尽管HTML规范提供了有语义化的列表元素,但我们仍然可以用下面这种方式来定义列表,而且在页面上也可以正常显示。

<div>

<span class="list-item">1</span>

<span class="list-item">2</span>

<span class="list-item">3</span>

</div>

5、属性的随意性

先看一段代码:

<div style="width:100px;height:30px;top:10px;display:relative;"></div>

上面代码中,随意添加top属性也是可以的,只是不生效且不会报错,加入display:relative;也不会提示错误,但是relative并不是display的属性。

6、table的问题

<table>

<thead>table list</thead>

<tr>

<th>list1</th>

</tr>

......

</table>

html定义了table元素,但table是一次性渲染的,如果表格内容较长就比较慢了。

7、label可有无

Date:<input type="text" name="name" />

表单输入项内容不写label也是没问题的,<label>可以定义与表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

8、不合理的标签

这些个不合理的标签 ,新标准已经弃用了。

<blink></blink>

<marquee></marquee>

<stike></stike>

总结一下:

很显然,这些糟糕的设计不仅降低了页面可读性,拖慢了页面性能,不利于SEO。而且误导了初学者对HTML的理解使用,更有可能让我们在已经出错的情况下找不到错误的原因和方向 。所以,我们必须要避免这些问题的发生。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.