HTML 사용법에 대해 간단히 이야기하기

HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 언어 중 하나입니다. 이는 웹 페이지의 내용과 모양을 설명하는 구조화된 방법을 제공하며 CSS 및 JavaScript와 같은 다른 기술과 결합하여 더욱 풍부한 효과를 얻을 수 있습니다.

HTML 기본

HTML은 실제로 텍스트의 구조와 스타일을 지정하는 데 사용되는 태그 모음입니다. 다음은 가장 기본적인 HTML 태그를 포함하는 기본 HTML 템플릿입니다.

nbsp;html>


    <title>My Website</title>


    <h1 id="Hello-World">Hello, World!</h1>
    <p>Welcome to my website.</p>

위 코드에서 는 문서 유형을 정의하고 브라우저에 HTML5를 사용하여 문서를 구문 분석하도록 지시합니다. . <code> 태그는 문서의 루트 요소를 나타내며 전체 문서를 포함합니다. 태그에는 제목 및 스타일 시트와 같은 문서의 메타데이터가 포함됩니다. <title></title> 태그는 브라우저 창의 제목 표시줄에 표시될 문서 제목을 설정하는 데 사용됩니다. 태그에는 문서의 주요 내용이 포함됩니다. <h1></h1> 및 <p></p> 태그는 제목과 단락을 나타내는 데 사용되며 각각 텍스트의 제목과 본문을 만드는 데 사용됩니다. 定义了文档类型，并告诉浏览器使用HTML5来解析文档。<code>标记表示文档的根元素，包含了整个文档。标记包含了文档的元数据，如标题和样式表。<title></title>标记用于设置文档标题，会显示在浏览器窗口的标题栏上。标记包含了文档的主要内容。<h1></h1>和<p></p>标记用于表示标题和段落，分别用于创建文本的大标题和正文。

HTML标记

上面仅仅是一个最基本的HTML文档结构，实际上HTML标记无数，下面介绍一些比较常用的HTML标记：

文字标记

<li> <h1></h1>~<h6></h6>：设置标题 <li> <p></p>：段落 <li> <strong></strong>或<b></b>：加粗文字 <li> <em></em>或<i></i>：斜体文字 <li> <u></u>：下划线文字 <li> <strike></strike>或<del></del>：删除线文字 <li> <sup></sup>：上标 <li> <sub></sub>：下标

链接标记

<li> <a></a>：链接 <li> <img alt="HTML 사용법에 대해 간단히 이야기하기" >：图片

列表标记

<li> <ul></ul>：无序列表 <li> <ol></ol>：有序列表 <li> <li>：列表项

表格标记

<li>：表格<li>：表头<li>：表身<li>：表行<li>

：表头单元格<li>

：表格单元格

以上只是列举了一部分HTML标记，实际上HTML标记种类非常多，通过这些标记我们可以轻松的实现网页中的各种元素。(该纯属个人认为一些比较常用的标记，并不是所有标记)

CSS样式

HTML标记可以设置网页内容的结构，但是要让网页更漂亮，更有吸引力，CSS就显得尤为重要。

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页样式的语言。它可以让我们更灵活地控制文本、图像、背景等元素的外观，以及布局等方面的细节。

CSS基础

实际上CSS也是由一组规则(rule)集合而成，如下：

selector {
    property: value;
    property: value;
}

<li> selector：选择器，用于指定要应用样式的HTML元素。 <li> property：属性，用于指定要设置的样式属性。 <li> value：值，用于设置属性的值。

例如，要将所有<h1></h1>元素的文本颜色设置为红色：

h1 {
    color: red;
}

此时，CSS会将HTML中所有<h1></h1>元素的文本颜色都设置成红色。

CSS选择器

在CSS中，选择器是用于确定应该应用样式的HTML元素的标识符。下面是一些常用的CSS选择器：

<li>元素选择器：用于指定要应用样式的HTML元素，例如h1, p, a。 <li>类选择器：用于指定要应用样式的具有相同类的HTML元素，例如.header。 <li>ID选择器：用于指定要应用样式的具有相同ID的HTML元素，例如#header。 <li>后代选择器：用于指定要应用样式的后代元素，例如ul li。 <li>子元素选择器：用于指定要应用样式的直接子元素，例如ul > li。 <li>伪类选择器：用于指定要应用样式的特定状态的元素，例如:hover HTML 태그

위는 가장 기본적인 HTML 문서 구조입니다. 실제로 셀 수 없이 많은 HTML 태그가 있습니다. 다음은 더 일반적으로 사용되는 HTML 태그입니다.

텍스트 태그

<li> <h1></h1>~<h6></h6>: 제목 설정 <p></p> <li> <p></p>: 단락 <li> 또는 <b></b>: 굵은 텍스트 <p></p> <li> <em></em> 또는 <i></i>: 기울임꼴 텍스트 <li> <u></u>: 밑줄 텍스트 🎜 <li> <strike></strike> 또는 <del></del>: 취소선 텍스트 🎜 <li> <sup></sup>: 위 첨자 🎜 <li> <sub></sub>: 아래 첨자 🎜🎜

링크 태그

<li> <a></a>: 링크 🎜 <li> <img alt="HTML 사용법에 대해 간단히 이야기하기" >: 이미지 🎜🎜

목록 표시

<li> <ul></ul>: 순서가 없는 목록🎜 <li> <ol></ol>: 순서가 있는 목록🎜 <li> <li>: 목록 항목 🎜🎜

테이블 표시

<li>: 테이블🎜<li>: 테이블 헤드 🎜: 테이블 본문 🎜<li>: 테이블 행 🎜<li>

code>: 헤더 셀🎜<li>

: 테이블 셀🎜🎜🎜위에는 일부 HTML 태그만 나열되어 있습니다. 실제로 이러한 태그를 통해 다양한 유형의 HTML 태그를 쉽게 구현할 수 있습니다. 웹페이지의 요소. (모든 태그가 아닌 일반적으로 사용되는 일부 태그에 대한 순전히 개인적인 의견입니다.) 🎜🎜CSS 스타일🎜🎜HTML 태그는 웹 콘텐츠의 구조를 설정할 수 있지만 웹 페이지를 더욱 아름답고 매력적으로 만들기 위해서는 CSS가 특히 중요합니다. . 🎜🎜CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 설명하는 데 사용되는 언어입니다. 이를 통해 텍스트, 이미지, 배경 및 기타 요소의 모양은 물론 레이아웃과 같은 세부 사항을 보다 유연하게 제어할 수 있습니다. 🎜🎜CSS 기본🎜🎜실제로 CSS도 다음과 같은 일련의 규칙으로 구성됩니다. 🎜rrreee <li> selector: HTML에 적용할 스타일을 지정하는 데 사용되는 선택자 요소. 🎜 <li> property: 설정할 스타일 속성을 지정하는 데 사용되는 속성입니다. 🎜 <li> 값: 속성 값을 설정하는 데 사용되는 값입니다. 🎜🎜🎜예를 들어 모든 <h1></h1> 요소의 텍스트 색상을 빨간색으로 설정하려면: 🎜rrreee🎜 이때 CSS는 모든 <h1></h1>를 변경합니다. HTML에서는 요소의 텍스트 색상이 모두 빨간색으로 설정되어 있습니다. 🎜🎜CSS 선택기🎜🎜CSS에서 선택기는 스타일을 적용해야 하는 HTML 요소를 결정하는 데 사용되는 식별자입니다. 다음은 일반적으로 사용되는 CSS 선택기입니다. 🎜 <li>요소 선택기: h1, p, a와 같이 스타일을 적용할 HTML 요소를 지정하는 데 사용됩니다. 🎜 <li>클래스 선택기: .header와 같이 스타일을 적용할 동일한 클래스로 HTML 요소를 지정하는 데 사용됩니다. 🎜 <li>ID 선택기: #header와 같이 스타일을 적용할 동일한 ID를 가진 HTML 요소를 지정하는 데 사용됩니다. 🎜 <li>하위 항목 선택기: ul li와 같이 스타일을 적용할 하위 요소를 지정하는 데 사용됩니다. 🎜 <li>하위 요소 선택기: ul > li와 같이 스타일을 적용할 직접 하위 요소를 지정하는 데 사용됩니다. 🎜 <li>의사 클래스 선택기: :hover와 같이 스타일을 적용할 특정 상태의 요소를 지정하는 데 사용됩니다. 🎜🎜🎜위 내용은 일반적으로 사용되는 CSS 선택자 중 일부를 나열한 것입니다. 실제로 다양한 종류의 CSS 선택자가 있으며 이를 조합하여 사용하면 더욱 복잡한 선택 효과를 얻을 수 있습니다. 🎜🎜요약🎜🎜HTML과 CSS는 프론트엔드 개발을 위해 반드시 배워야 하는 두 가지 기술입니다. 이 두 가지 기술을 배우면 웹페이지를 쉽게 구축하고 아름답게 만들 수 있습니다. 물론 JavaScript는 웹 페이지에서 더 복잡한 상호 작용 효과를 달성하는 데 도움이 될 수 있으며 세 가지 기술을 결합하면 더 강력한 웹 페이지를 달성할 수 있습니다. 🎜

위 내용은 HTML 사용법에 대해 간단히 이야기하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!