> 웹 프론트엔드 > HTML 튜토리얼 > HTML을 배우는 방법을 알려주는 기사

HTML을 배우는 방법을 알려주는 기사

迷茫
풀어 주다: 2017-01-23 14:01:08
원래의
1223명이 탐색했습니다.

html은 웹 페이지 만들기 학습의 기초입니다. 아름다운 웹 페이지와 레이아웃은 몇 가지 HTML 코드로 구성됩니다. 이 글을 읽고 나면 HTML을 더 많이 이해하고 더 많이 연습할 수 있습니다. 아티스트가 된다면 개발자로서 HTML을 읽고 필요할 때 간단한 수정을 할 수 있습니다. 이 기사가 HTML을 이해하는 데 도움이 되도록 아래 내 아이디어를 따르세요. 물론, 읽는 과정에서 직접 시도해 보는 것이 가장 좋습니다. 자, 시작해 보겠습니다. (다음 기호는 모두 영어로 입력됩니다.)

1. 기본 HTML 규칙

<html>
<head>
<title>我的网页</title>
………………………..
</head>
<body>
………………….
</body>
</html>
로그인 후 복사

거의 모든 웹페이지는 다음을 따릅니다. 이 형식은 웹페이지에 반드시 있어야 하는 표시인 여기서 비롯됩니다. 각 표시는 <

위 코드를 메모장에 복사한 후 .html 파일로 저장하면 웹페이지가 됩니다.

그런 다음 앞에 홈페이지로 변경한 후 저장하고 다시 효과를 확인하시겠습니까?

우리가 흔히 온라인에서 보는 하이퍼링크인가요? 여기서 "홈"을 클릭해도 아무런 변화가 없습니다. 왜냐하면 우리가 추가한 빈 연결은 철이 뜨거울 때 치는 것이기 때문입니다. 우리는 이전 방법에 따라 페이지를 만들고 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개 조각으로 나눌 수 있습니다. 하하, 각 블록에 원하는 내용을 넣으세요.

물론, 많은

add . 이러한 스타일 설정이 유사하면 일반적으로 스타일을 다른 .css 파일에 넣는 것이 너무 번거롭습니다. 웹 페이지에서 각 태그의 표시 스타일 제어)를 호출한 다음 호출해야 하는 위치에 호출해 보겠습니다.

새 메모장을 만들고 이름을 c.css로 바꾼 다음 열어서 작성해 보세요. :

#header{width:200px;height:100px;border-style:solid;}
로그인 후 복사

a.html

에서 삭제한 다음

앞에 추가하세요. css" />

즉, c.css 파일이 소개됩니다. CSS를 별도의 파일에 넣는 것의 장점은 이 스타일이 여러 곳에서 참조되는 경우 이 한 곳만 수정하면 모든 것이 변경된다는 것입니다. 그렇지 않으면 각 곳을 수동으로 수정해야 하므로 나중에 도움이 되지 않습니다. 유지.

마지막으로 a.html의

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿