찾다
웹 프론트엔드HTML 튜토리얼웹 디자인에서 흔히 발생하는 HTML 실수 5가지

1.网页背景色的设置

  犯错机率:很大

  普遍性:较广

  犯错可能性:懒/不知道

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

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

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

  犯错机率:非常大

  普遍性:非常广

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

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

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

  

大家好啊!!
 
  
웹 디자인에서 흔히 발생하는 HTML 실수 5가지

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

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

建议使用

来居中,当需要多重定位的时候,才考虑
,因为这个代码并不好处理,所以能用表格代替就用表格替代。

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

  普遍性:非常普遍

  犯错可能性:复杂多样

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

标 题 

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

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

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

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

...

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

  

 
  
 
  

 
  

标 题 

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

이런 코드를 보면 정말 무기력해질 것입니다. (더욱 무기력한 것은 자주 보고 읽어야 한다는 것입니다.) 단순화시켜 보겠습니다.
 


 제목 이 코드가 어떻게 보이고 느껴지나요?
세상이 훨씬 더 조용해진 것 같나요? "제목" 뒤의 텍스트는 클래스에서 정의할 수 있습니다. CSS를 사용하지 않더라도 추가로 <.font>를 사용해도 문제가 없으며 여전히 매우 상쾌합니다.

4. 잘못 중첩된 테이블

오류 가능성: 일반

보편성: 일반적

오류 가능성: 이에 대해 모른다

사실 흔한 문제인데, 테이블을 잘못 배치하면 상사가 사무실로 불러들여 혼내는 일이 생기고, 웹페이지가 정상적이지 못하다는 생각이 들 수도 있습니다. ADSL을 사용해 2~3분 뒤에도 열렸습니다. 먼저 큰 테이블에 테이블을 계속 중첩하면 웹 페이지를 여는 속도가 느려진다는 첫 번째 문제에 대해 이야기해 보겠습니다. (현재 IE에서는 이 문제가 개선되었지만 여전히 권장되지 않습니다.) 한편으로는 유지 관리와 수정이 매우 불편합니다. 일반적으로 3~4개 레이어라도 간단한 적용에는 문제가 없지만 모든 것을 테이블에 담지는 않습니다. 두 번째 문제는 무료 카운터 코드를 포함하여 모든 것을 큰 테이블에 넣는 것입니다. 헤헤, 무슨 일이 일어날지 추측해 보세요. 사실, 가장 심각한 것은 IE가 충돌한 것 같고 아무것도 표시되지 않는다는 것입니다. 해결 방법은 카운터를 다른 콘텐츠와 동일한 테이블이 아닌 별도의 테이블에 배치하는 것입니다.

5. 코드 들여쓰기 작성 시 탭 대신 공백을 사용하세요

오류 확률: 일반

보편성: 적음

오류 가능성: 그렇지 않음 Tab을 사용하는 것이 더 나은지 모르겠습니다

이 질문은 js, vbs, asp, php 등에 대한 것입니다. HTML은 Tab을 사용할 수 없습니다. 프로그램을 작성할 수 있는 사람은 들여쓰기가 무엇인지, 들여쓰기 방법을 알고 있습니까? 공백을 사용하는 사람도 있고 Tab을 사용하는 사람도 있습니다. 공백을 사용하는 경우에는 이제 대신 Tab을 사용하세요.

天极yesky

위 내용은 웹 디자인에서 흔히 발생하는 HTML 오류 5가지입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!



성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
揭示网页设计中绝对定位的独特优势揭示网页设计中绝对定位的独特优势Jan 23, 2024 am 08:16 AM

探索绝对定位在网页设计中的独特优势在网页设计中,绝对定位是一种常用的布局方式。通过使用绝对定位,可以将元素精确地放置在网页的指定位置,同时还可以轻松实现一些特殊的布局效果。本文将就这些优势进行探索,并通过具体的代码示例来说明。精确定位元素位置绝对定位可以精确地控制元素在网页中的位置。通过指定元素的top、right、bottom、left四个属性,可以将元素

基于CSS3的网页设计技巧及实践经验分享基于CSS3的网页设计技巧及实践经验分享Sep 08, 2023 pm 07:07 PM

基于CSS3的网页设计技巧及实践经验分享在当今互联网时代,网页设计越来越重要。随着CSS3出现,设计师们现在可以使用各种令人惊叹的效果来吸引用户。本文将分享一些基于CSS3的网页设计技巧和实践经验,旨在帮助读者提升网页设计水平。一、使用过渡效果过渡效果可以使元素在一种状态到另一种状态之间产生平滑的动画效果。通过使用CSS3的transition属性,我们可以

Dreamweaver是什么Dreamweaver是什么Jun 13, 2023 pm 02:53 PM

Dreamweaver是Adobe公司推出的一款网页设计软件,它提供了一个可视化的页面编辑器,同时也支持手动编辑HTML、CSS和JavaScript代码。它拥有许多功能和工具,可以帮助用户轻松创建响应式网页、应用程序和移动应用程序。

简易指南:创建出色的CSS框架,提升网页设计的专业度和美观度简易指南:创建出色的CSS框架,提升网页设计的专业度和美观度Jan 16, 2024 am 09:02 AM

五步教你打造完美的CSS框架:让你的网页设计更加专业与美观维持一个专业和美观的网页设计是每个网页设计师的梦想。而建立一个完美的CSS框架是实现这个目标的关键。CSS框架是一套预定的样式表和规则集合,用于帮助设计师快速搭建网页布局和样式。今天,我将向你介绍一个五步骤的方法,来帮助你创建一个完美的CSS框架。以下是具体的步骤:第一步:分析需求并确定框架结构在开始

研究引入CSS第三方框架对网页设计的影响研究引入CSS第三方框架对网页设计的影响Jan 16, 2024 am 10:32 AM

探究CSS引入第三方框架对网页设计的影响引言:随着互联网的快速发展,网页设计也愈发重要。为了提升用户体验和提供更丰富的功能,开发人员常常需要使用第三方框架来辅助设计和开发。本文将探究引入CSS第三方框架对网页设计的影响,并给出具体的代码示例。一、什么是CSS第三方框架CSS第三方框架是一套预定义的CSS样式和组件,可以在构建网页时直接调用。这些框架内容丰富、

如何使用CSS Positions布局设计网页的卡片布局如何使用CSS Positions布局设计网页的卡片布局Sep 28, 2023 am 08:17 AM

如何使用CSSPositions布局设计网页的卡片布局在网页设计中,卡片布局是一种常见且流行的设计方式。它将内容分割成独立的卡片,每个卡片包含一定的信息,可以轻松地创造出整洁、有层次感的页面效果。在本文中,我们将介绍如何使用CSSPositions布局设计网页的卡片布局,并附上具体的代码示例。创建HTML结构首先,我们需要创建HTML结构来表示卡片布局。

如何运用CSS3技术打造炫酷的网页效果如何运用CSS3技术打造炫酷的网页效果Sep 11, 2023 pm 12:54 PM

如何运用CSS3技术打造炫酷的网页效果随着互联网的发展,网页设计也越来越重要。而CSS3技术的出现给网页设计师带来了更多的灵感和创意空间。CSS3拥有丰富的特性和效果,可以轻松实现炫酷的网页效果。本文将介绍一些常用的CSS3特性,并结合实例展示如何运用这些特性打造炫酷的网页效果。边框效果边框是网页设计中常见的元素,通过CSS3的边框特性,可以给边框增加更多的

元素选择器在网页设计的应用领域元素选择器在网页设计的应用领域Jan 13, 2024 am 10:35 AM

元素选择器在网页设计中的应用,需要具体代码示例在网页设计中,元素选择器是一种非常重要的CSS选择器,它能够帮助我们对网页中的元素进行样式的控制和调整。通过灵活运用元素选择器,可以实现各种精美的网页设计效果。一、元素选择器的基本语法和用法元素选择器是CSS选择器中最简单的一种,它通过指定HTML元素的标签名来选择对应的元素。元素选择器的基本语法为:标签名{

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.