Home Web Front-end HTML Tutorial Five common HTML mistakes in web design

Five common HTML mistakes in web design

Dec 16, 2016 pm 02:28 PM

1.网页背景色的设置

  犯错机率:很大

  普遍性:较广

  犯错可能性:懒/不知道

  约2年前我曾发现21cn上出现过一次没有设置背景色的情况,当时我用Email通知了他们,自此之后这个问题我从没犯过。

  绝大部分人的窗口背景颜色都是白色,但如果象我这样个性的人,就会把windows窗口的背景颜色改成灰色或其他色,这样一来,如果你没有设置网页的背景颜色的话,你以为正常的网页在我的电脑上看起来会是一团糟。

  2.Align center(自动居中)的滥用

  犯错机率:非常大

  普遍性:非常广

  犯错可能性:以为方便/以为好用

  工作中,修改、维护别人的网页是家常便饭,发现不少人有一个陋习:

  在表格中的文字或图片,你是这样来令它居中、靠左或靠右过?

  

大家好啊!!
 
  

  当有些表格很多、文字很多、内容分得很细的时候,爱用这种方法(它在DW里的快捷键是Ctrl+Alt+C,FP不知道是什么)的人往往会狂用,惨了,我一碰到这样的网页就头痛,为什么要用那么多

来居中呢?tell me why?难道表格没有居中属性吗?为什么要加入这些垃圾代码?特别修改的时候也不能把文字或图片删除了就能自动清除

建议使用来居中,当需要多重定位的时候,才考虑

,因为这个代码并不好处理,所以能用表格代替就用表格替代。

  3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 
  
  犯错机率:非常普遍

  普遍性:非常普遍

  犯错可能性:复杂多样

  大家先来看一看下面的代码: 
  

标 题 

你觉得这样的代码看起来感觉怎么样呢?

  我不知道读者有什么感觉,压根我一看到这样的代码就会先自我麻木十来秒,这十来秒目的是为了找一个能表达我的思想感情的词(我?你想反问我吗?sorry~~,我一般不犯,因为我做网页至少有一半以上的时间在浏览代码,代码中多了不该多的东西我一眼就能看出来。)。

  看看上面的代码,使用了2个class,4个font来定义2个文本,其实这样的问题很多时候是在大家不断的修改中产生的,对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重,当然,事实上别人浏览这个网页的时候,是没有任何问题的,但维护的人就…………。 
这些多余的垃圾代码完全是可以省略掉的,其实上面的例子不够严重,更恐怖的我都见过。

  另外还有一个问题也要提提的,就是

...

...
,为什么要用它们呢?tell me why~~,有甚者是这样的:

  

 
  
 
  

 
  

标 题 

你觉得这样的代码看起来感觉怎么样呢?

  I will be very helpless when I see such code (even more helpless is that I often see it and must read it), let me simplify it:
 
 title
 What do you think this code looks like? ?

 Does it seem like the world is a lot quieter? The text after the "title" can be defined in the class of . Even if no css is used, it is no problem to use an additional <.font>, it is still very refreshing.

  4. The tables are not nested correctly

 Probability of error: General

 Prevalence: Common

 Possibility of error: Don’t know about this

In fact, this is a well-known problem, but people still make it , incorrect nesting of tables may cause you to be called to the office by your boss to give you a scolding, and may make you think that a normal web page cannot be opened even if you use ADSL for 2 or 3 minutes. Let’s talk about the first problem first, which is that continuously nesting tables in a large table will slow down the speed of opening web pages (although the current IE has improved this problem, it is still not recommended to do this). In addition, On the one hand, it is extremely inconvenient to maintain and modify. Generally speaking, there is no problem with simple application, even 3 or 4 layers, but do not put everything into a table. The second problem is to put everything in a big table, including a free counter code, hehe, guess what might happen? In fact, it's not a big deal. The most serious thing is that your IE seems to have crashed and nothing is displayed. The solution is to put the counter in a separate table, not in the same table with other content.

  5. When writing code indentation, use spaces instead of tabs

  Chance of making mistakes: average

 Universality: less

 Possibility of making mistakes: I don’t know that Tab is better to use

 This question is for js , vbs, asp, php, etc. HTML cannot use Tab. Anyone who knows how to write some programs knows what indentation is. How to indent? Some people use spaces, some use Tab. If you use spaces, then from now on, use Tab instead.

天极yesky

The above are the contents of five common HTML errors in web design. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Revealing the unique advantages of absolute positioning in web design Revealing the unique advantages of absolute positioning in web design Jan 23, 2024 am 08:16 AM

Explore the unique advantages of absolute positioning in web design. In web design, absolute positioning is a commonly used layout method. By using absolute positioning, elements can be placed precisely at specified locations on the web page, and some special layout effects can be easily achieved. This article explores these advantages and illustrates them with specific code examples. Precise positioning of elements Absolute positioning allows precise control of the position of elements on a web page. By specifying the top, right, bottom, and left attributes of the element, the element can be

Web design skills and practical experience sharing based on CSS3 Web design skills and practical experience sharing based on CSS3 Sep 08, 2023 pm 07:07 PM

Sharing of web design skills and practical experience based on CSS3 In today's Internet era, web design is becoming more and more important. With the advent of CSS3, designers can now use a variety of stunning effects to engage users. This article will share some web design skills and practical experience based on CSS3, aiming to help readers improve their web design level. 1. Use transition effects. Transition effects can produce smooth animation effects for elements from one state to another. By using the CSS3 transition property, we can

CSS3 animation brings creative inspiration and unlimited possibilities to web designers CSS3 animation brings creative inspiration and unlimited possibilities to web designers Sep 09, 2023 pm 08:45 PM

Overview of the creative inspiration and unlimited possibilities that CSS3 animation brings to web designers: In modern web design, animation effects have become an important factor in improving user experience and increasing website attractiveness. The emergence of CSS3 animation technology has brought more flexible, rich and creative design options to web designers. This article will explore the creative inspiration and unlimited possibilities that CSS3 animation brings to web designers, and provide some code examples. 1. Basic concepts and syntax of CSS3 animation. Before introducing CSS3 animation, we first need to

Study the impact of introducing CSS third-party frameworks on web design Study the impact of introducing CSS third-party frameworks on web design Jan 16, 2024 am 10:32 AM

Exploring the impact of the introduction of third-party frameworks into CSS on web design Introduction: With the rapid development of the Internet, web design has become increasingly important. In order to improve user experience and provide richer functions, developers often need to use third-party frameworks to assist design and development. This article will explore the impact of introducing CSS third-party frameworks on web design and give specific code examples. 1. What is CSS third-party framework? CSS third-party framework is a set of predefined CSS styles and components that can be called directly when building a web page. These frameworks are rich in content,

Application fields of element selectors in web design Application fields of element selectors in web design Jan 13, 2024 am 10:35 AM

The application of element selectors in web design requires specific code examples. In web design, element selectors are a very important CSS selector, which can help us control and adjust the styles of elements in web pages. By flexibly using element selectors, various exquisite web design effects can be achieved. 1. Basic syntax and usage of element selectors The element selector is the simplest type of CSS selector. It selects the corresponding element by specifying the tag name of the HTML element. The basic syntax of the element selector is: tag name {

How to use CSS Positions layout to design card layout for web pages How to use CSS Positions layout to design card layout for web pages Sep 28, 2023 am 08:17 AM

How to use CSSPositions layout to design card layout for web pages. In web design, card layout is a common and popular design method. It divides the content into independent cards, each card contains certain information, and can easily create a neat and layered page effect. In this article, we will introduce how to use CSSPositions layout to design the card layout of a web page, and attach specific code examples. Create the HTML structure First, we need to create the HTML structure to represent the card layout.

What does h5 look like? What does h5 look like? Apr 01, 2025 pm 05:29 PM

HTML5 (h5) is the fifth version of HTML, designed to enhance the flexibility and functionality of web development. The main features of h5 include: 1) new semantic tags, such as, et al.; 2) embedded audio and video support, such as, et al.; 3) Canvas drawing API; 4) Geolocation API. These features are implemented through the browser's JavaScript engine, making web pages more dynamic and interactive.

How to use CSS3 technology to create cool web page effects How to use CSS3 technology to create cool web page effects Sep 11, 2023 pm 12:54 PM

How to use CSS3 technology to create cool web page effects. With the development of the Internet, web design is becoming more and more important. The emergence of CSS3 technology has brought more inspiration and creative space to web designers. CSS3 has rich features and effects, which can easily achieve cool web page effects. This article will introduce some commonly used CSS3 features, and use examples to show how to use these features to create cool web page effects. Border effect Border is a common element in web design. Through the border feature of CSS3, you can add more effects to the border.

See all articles