HTML을 작성하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML을 작성하는 방법

May 21, 2023 am 09:51 AM

HTML(Hypertext Markup Language)은 웹 페이지를 구축하는 데 사용되는 마크업 언어입니다. 이 기사에서는 HTML을 작성하고 웹 사이트에 스타일과 기능을 추가하는 방법을 다룹니다.

HTML 문서 작성

HTML 문서는 태그로 구성되며 태그는 중첩될 수 있습니다. 각 태그에는 여는 태그와 닫는 태그가 있습니다. 예:

&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 예에는 HTML의 루트 태그, 웹 페이지 제목이 포함된 <head> 웹페이지 콘텐츠가 포함된 태그입니다. <body> 태그에는 제목에 대한 <h1> 태그가 있고 단락에 대한 <p> 태그가 있습니다.

태그 및 속성

HTML 태그에는 태그의 특성을 지정하는 속성이 있을 수 있습니다. 예를 들어, <img> 태그는 아래와 같이 src 속성을 통해 이미지의 URL을 지정할 수 있습니다.

&lt;img src=&quot;https://example.com/image.jpg&quot; alt=&quot;这是图像的描述&quot;&gt;

로그인 후 복사

이 예에서는 src 속성을 사용하여 이미지의 URL을 지정했으며 alt 속성은 다음을 제공합니다. 이미지에 대한 설명입니다.

링크

웹 페이지에서 다른 웹 페이지나 로컬 파일에 대한 링크를 추가할 수 있습니다. 태그를 사용하여 링크를 만듭니다. 예:

&lt;a href=&quot;https://example.com/&quot;&gt;这是一个链接&lt;/a&gt;

로그인 후 복사

이 예에서는 href 속성을 사용하여 링크 대상의 URL을 지정합니다.

목록을 사용하여 정보를 정리할 수 있습니다. HTML에는 순서가 있는 목록과 순서가 없는 목록이라는 두 가지 유형의 목록이 있습니다. 순서가 있는 목록은 <ol> 태그를 사용하고, 순서가 없는 목록은 <ul> 태그를 사용합니다. 예:

&lt;ol&gt;
    &lt;li&gt;第一项&lt;/li&gt;
    &lt;li&gt;第二项&lt;/li&gt;
    &lt;li&gt;第三项&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
    &lt;li&gt;第一项&lt;/li&gt;
    &lt;li&gt;第二项&lt;/li&gt;
    &lt;li&gt;第三项&lt;/li&gt;
&lt;/ul&gt;

로그인 후 복사

이 예에서는 <ol> 태그를 사용하여 순서가 지정된 목록을 만들고 <ul> 태그를 사용하여 순서가 지정되지 않은 목록을 만듭니다.

스타일

CSS(Cascading Style Sheets)를 사용하여 웹사이트에 스타일을 추가할 수 있습니다. CSS는 웹 페이지의 모양과 레이아웃을 설명하는 데 사용되는 스타일 시트 언어입니다. 예:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
    &lt;style&gt;
        h1 {
            color: red;
            font-size: 48px;
        }
        p {
            font-size: 24px;
            line-height: 1.5;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;p&gt;这是一个段落&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 예에서는 <head> 태그 안에 <style> 태그를 삽입하여 스타일을 추가합니다. h1 선택기를 사용하여 페이지 제목을 선택하고 색상과 글꼴 크기를 지정합니다. p 선택기를 사용하여 단락을 선택하고 글꼴 크기와 줄 높이를 지정합니다.

JavaScript

JavaScript를 사용하여 웹사이트에 대화형 및 동적 기능을 추가할 수 있습니다. JavaScript는 HTML, CSS와 함께 사용할 수 있는 스크립팅 언어입니다. 예:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;这是网页标题&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;button onclick=&quot;alert('你点击了按钮')&quot;&gt;点击我&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 예에서는 <button> 태그를 사용하여 버튼을 만들고 onclick 속성에 JavaScript 코드를 추가하여 버튼을 클릭할 때 경고 상자를 표시합니다.

요약

이 글에서는 HTML 문서 작성, 태그 및 속성, 링크, 목록, 스타일, JavaScript 작성을 포함한 HTML의 기본 사항을 소개했습니다. 이러한 기본 사항을 통해 간단한 웹사이트와 애플리케이션 구축을 시작할 수 있습니다. 그러나 유지 관리가 가능한 고품질 웹 사이트를 구축하려면 이러한 기본 사항을 깊이 배우고 객체 지향 프로그래밍, 프레임워크, 라이브러리와 같은 고급 주제로 넘어가야 한다는 점을 명심하세요.

위 내용은 HTML을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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