HTML은 "Hypertext Markup Language"를 의미하며 웹 페이지를 만드는 데 사용되는 표준 언어입니다. 마크업(HTML 태그)을 이용하여 텍스트, 이미지, 링크, 표 등 다양한 요소를 정의하고, 이러한 요소를 구성하여 웹페이지를 구성합니다. 이 기사에서는 HTML의 기본 구문, 태그, 요소, 속성 및 기타 관련 지식을 소개하고 이러한 지식을 사용하여 웹 페이지를 만드는 방법을 소개합니다.
- HTML의 기본 구문
HTML은 일련의 태그와 텍스트로 구성됩니다. 기본 구문은 다음과 같습니다.
<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 定义文档头部 -->
<title>网页标题</title> <!-- 定义网页标题 -->
</head>
<body> <!-- 定义文档主体 -->
<!-- 此处可以插入文本、图像、链接等各种元素 -->
</body>
</html>
로그인 후 복사
그 중 ""은 문서 유형을 HTML5 표준으로 선언하고, ""은 HTML 문서의 루트 요소이며, "< head>"는 문서 헤더를 정의합니다. 일반적으로 웹 페이지의 제목, 스타일, 스크립트 및 기타 정보를 정의하는 데 사용되며 "
"은 웹 페이지의 제목을 정의합니다. "<body>"는 문서의 본문이며 텍스트, 이미지, 링크 등과 같은 다양한 요소를 정의하는 데 사용됩니다. <ol start="2"><li>HTML 태그 및 요소 </li></ol>
<p> HTML의 태그는 꺾쇠 괄호(< >)로 묶이고 일반적으로 각각 시작 태그와 종료 태그가 있는 쌍으로 나타납니다. 예를 들어, "<p>"는 단락을 정의하는 시작 태그이고, "</p>"는 닫는 태그입니다. </p>
<p>HTML에는 태그가 하나만 있지만 닫는 태그가 필요하지 않은 일부 단일 태그도 있습니다. 예를 들어 "<img>"는 이미지를 삽입하는 데 사용되며 구문은 다음과 같습니다. </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><img src="图片地址" alt="图片描述"></pre><div class="contentsignin">로그인 후 복사</div></div>
<p> 그 중 "src" 속성은 이미지의 URL 주소를 지정하고 "alt" 속성은 이미지의 설명 정보입니다. </p>
<ol start="3"><li>HTML</li></ol>
<p>HTML 태그의 속성에는 요소를 설명하는 데 사용되는 추가 정보인 속성도 포함될 수 있습니다. 예를 들어 "<a>" 태그는 링크를 생성하는 데 사용되며 구문은 다음과 같습니다. </a></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><a href="链接地址">链接文本</a></pre><div class="contentsignin">로그인 후 복사</div></div>
<p> 그 중 "href" 속성은 링크의 URL 주소를 지정하고 "링크 텍스트"는 사용자가 페이지에서 보는 텍스트입니다. </p>
<p>"href" 속성 외에도 일반적으로 사용되는 속성이 많이 있습니다. 예를 들어, "class" 및 "id" 속성은 스타일 시트 및 JavaScript 스크립트를 통해 쉽게 액세스하고 조작할 수 있도록 요소를 식별하고 분류하는 데 사용됩니다. 구문은 다음과 같습니다. </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div class="class名称" id="id名称">元素内容</div></pre><div class="contentsignin">로그인 후 복사</div></div>
<ol start="4"><li>간단한 웹페이지 만들기 예</li></ol>
<p>다음은 HTML을 사용하여 만든 간단한 웹페이지 예입니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
body {
background-color: #E6E6FA;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>欢迎访问我的第一个网页！</h1>
<p>这是一个由HTML制作的简单网页示例。</p>
<h2>利用HTML制作网页的步骤：</h2>
<ol>
<li>学习HTML基本语法、标签和属性。</li>
<li>创建HTML文件，用文本编辑器编辑文件代码。</li>
<li>保存HTML文件，用浏览器打开并查看网页效果。</li>
</ol>
<p>祝大家学习愉快，制作美丽的网页！</p>
</body>
</html></pre><div class="contentsignin">로그인 후 복사</div></div>
<p>이 웹페이지에서는 제목, 단락, 스타일, 목록 등 다양한 요소를 사용합니다. , HTML 등. 그 중 "<style>" 태그는 웹페이지의 스타일을 정의하는 데 사용되며, "Background-color" 속성은 배경색을 지정하고, "font-family" 속성은 글꼴 계열을 지정하며, "< ;ol>" 태그는 순서가 지정된 목록을 만드는 데 사용됩니다. </p>
<ol start="5"><li>요약</li></ol>
<p>HTML은 웹페이지를 만드는 기본 언어 중 하나입니다. HTML의 기본 구문, 태그, 요소 및 속성을 익히면 아름답고 효과적인 웹페이지를 만드는 데 도움이 됩니다. 이 기사가 HTML을 배우는 데 도움이 되기를 바라며, 아름다운 웹 페이지를 작성하시길 바랍니다! </p>
위 내용은 HTML을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
