HTML의 기본 규칙과 웹 페이지의 구조를 이해하는 데 도움이 되는 문서-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML의 기본 규칙과 웹 페이지의 구조를 이해하는 데 도움이 되는 문서

yulia

Sep 11, 2018 pm 03:18 PM

html

아티스트가 되기로 결심하지 않았다면 개발자로서 HTML을 읽고 필요할 때 간단한 수정을 할 수 있습니다. 이 기사가 HTML을 이해하는 데 도움이 되도록 아래 내 아이디어를 따르세요. 물론, 읽는 과정에서 직접 시도해 보는 것이 가장 좋습니다.

1. html의 기본 규칙

<html>
<head>
<title>我的网页</title>
………………………..
</head>
<body>
………………….
</body>
</html>

로그인 후 복사

거의 모든 웹 페이지가 이 형식을 따릅니다. , 각 태그는 < >에 배치되고 로 끝나지만, 우리가 보는 바와 같이 타원 안에 지저분한 내용이 많이 추가되어 있습니다. 위 코드를 메모장에 복사한 후, .html 파일로 저장해 보세요. 웹페이지가 됩니다. 그런 다음 메모장 모드로 열고 사이에 "Homepage"라는 단어를 추가한 후 저장한 후 다시 열어서 살펴보세요.

다음으로 홈페이지 전후에 표시를 추가하여 홈페이지로 저장한 뒤, 효과를 다시 확인해볼까요?

우리가 온라인에서 흔히 보는 하이퍼링크인가요? 여기서 "홈"을 클릭해도 아무런 변화가 없습니다. 왜냐하면 우리가 추가한 빈 연결은 철이 뜨거울 때 치는 것이기 때문입니다. 우리는 이전 방법에 따라 페이지를 만들고 b.html로 저장한 다음 교체합니다. 위의 "#"을 b.html로 열고 홈 페이지를 클릭하면 b 페이지로 이동합니다. (물론 페이지 a와 b는 같은 디렉토리에 있어야 합니다.) 이제 웹 페이지의 모든 기능은 를 수행해야 할 때와 유사한 서로 다른 태그로 구현된다는 점을 이해해야 합니다. 이 태그의 기능을 기억하세요.

2. 웹페이지 구조

인터넷 서핑할 때 주의하면 웹페이지가 실제로 블록으로 나누어져 있습니다. 물론 이것은 대략적인 구조일 뿐이며 필요에 따라 여러 블록으로 나눌 수 있습니다. 블록을 나누는 주요 목적은 측면을 수정하고 각각의 연주 스타일을 결정하는 것입니다. 이는 주로

태그를 "홈 페이지"에 추가해 보겠습니다.

<div>
<a href=”b.html”>首页</a>
</div>

로그인 후 복사

저장하고 열 때 사용해 보세요. 모직물은 어떤 효과가 있나요? 여전히 수정 전과 동일합니까? 몇 가지 수정 사항을 추가해 보겠습니다.

<div style=”width:200px;height:100px;border-style:solid;” >

로그인 후 복사

이 실행 중이고 우리가 표시한 블록이 파란색 배경으로 표시됩니다! 많은

블록을 추가하면 웹페이지를 8개 조각으로 나눌 수 있습니다. 하하, 그런 다음 각 블록에 원하는 내용을 넣을 수 있습니다. 물론, 많은

가 로 추가됩니다. 이러한 스타일 설정이 유사하다면, 우리는 일반적으로 스타일을 다른 .css 파일에 넣습니다(각 요소를 제어). 표시 스타일)을 표시한 다음 호출해야 하는 위치를 호출합니다.

새 메모장을 만들고 이름을 c.css로 바꾼 다음 열고 다음을 작성합니다.
# 🎜🎜#

#header{width:200px;height:100px;border-style:solid;}

로그인 후 복사

a.html에서 삭제하세요. 그런 다음 앞에 를 추가합니다. 이는 c.css 파일을 도입한다는 의미입니다. CSS를 별도의 파일에 넣는 것의 장점은 이 스타일이 여러 곳에서 참조되는 경우 이 한 곳만 수정하면 모든 것이 변경된다는 것입니다. 그렇지 않으면 각 곳을 수동으로 수정해야 하므로 나중에 도움이 되지 않습니다. 유지.

마지막으로 a.html의

를

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7503

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

HTML의 기본 규칙과 웹 페이지의 구조를 이해하는 데 도움이 되는 문서