기술나눔

HTML [실용 튜토리얼] (2024 최신 버전)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

핵심 아이디어——의미화

【面试题】如何理解 HTML 语义化 ?

  • 1

콘텐츠 유형은 태그, 특히 제목, 단락, 그림 및 표만으로 결정될 수 있습니다.

  • 코드 가독성을 높이고 사람들이 이해하기 쉽게 만듭니다.
  • SEO에 더 친숙해져서 검색 엔진이 더 쉽게 이해할 수 있습니다.

HTML 파일의 기본 구조

HTML 파일의 파일 접미사는 다음과 같습니다. .html, index.html 등

vscode에 영어를 입력하세요 ! 빠른 입력

<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
  <!-- 页面的头部【必要】 -->
  <head>
    <!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面的标题【必要】 -->
    <title>Document</title>
    <!-- 页面中的样式 -->
    <style>
      html,
      body {
        height: 100%;
      }
    </style>
  </head>
  <!-- 页面的身体【必要】 -->
  <body>
  <!-- 页面的内容 -->
  <div></div>
  <!-- 页面的脚本 ——  JS 代码 -->
  <script></script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
【面试题】为什么<style></style> 标签要写在<head></head> 中  ?

  • 1

브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. <style></style> 라벨은 다음과 같이 작성해야 합니다.<head></head> 스타일을 먼저 로드한 다음 요소를 로드할 수 있습니다.

당신이 원한다면 <style></style> 라벨은 다음과 같이 쓰여 있습니다.<body></body> 아래에서는 요소가 먼저 로드된 다음 스타일이 로드되어 사용자에게 스타일이 없는 페이지 구조가 표시됩니다.

【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部  ?

  • 1

브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. <style></style> 배치되지 않은 경우<body></body> 페이지 하단에서 JS가 먼저 로드되고 구문 분석된 다음 요소가 렌더링되므로 페이지 렌더링 시간이 길어집니다. JS에 DOM 작업이 포함된 경우 페이지 렌더링도 차단됩니다. .

HTML 태그 분류

라벨의 기본 표시 스타일 값에 따라 두 가지 범주로 나뉩니다.

【面试题】HTML有哪些内联元素和块状元素 ?

  • 1

인라인 요소

너비는 콘텐츠에 따라 결정됩니다.

  • display :inline 요소를 교체하지 않으면 너비와 높이를 설정할 수 없습니다.
img，span ,  a ,  b 等

  • 1
  • display :inline-block 너비와 높이를 설정할 수 있습니다
input， button 等

  • 1

블록 요소

너비는 컨테이너에 따라 결정되며(너비는 컨테이너 전체를 채웁니다.) 너비와 높이를 설정할 수 있습니다.

  • display: block
div，h1-h6，p，ul, ol ，form , hr 等

  • 1
  • display: table
table

  • 1
  • display: list-item
li

  • 1

HTML의 대체 요소

속성(주로 src 속성) 값을 수정하여 렌더링된 콘텐츠를 대체할 수 있는 요소를 "교체 요소"라고 합니다.

다음 태그는 모두 대체 요소입니다.

img、video、iframe、canvas、textarea、input、select、object

  • 1

교체된 요소의 특성

  • 모두 인라인 요소입니다.
  • 콘텐츠의 모양은 대체된 콘텐츠의 텍스트 등 다른 태그의 CSS에 영향을 받지 않습니다.
  • 대체된 콘텐츠 자체에는 크기가 있습니다.
    • img의 기본 크기는 로드되는 이미지의 크기입니다.
    • 비디오, iframe, 캔버스 등의 기본 크기(테두리 제외)는 300px * 150px입니다.
  • 대체된 요소의 기준선(vertical-align의 기본값은 기준선)은 문자 x의 하단 가장자리가 아닌 요소의 하단 가장자리입니다.
  • 대체 콘텐츠가 로드되지 않으면(예: src 속성이 설정되지 않은 경우) 대체 요소는 대체 요소의 특성을 잃고 일반 인라인 요소가 됩니다.

요소 크기 바꾸기

교체된 요소의 최종 크기는 다음 세 가지 방법을 조합하여 결정됩니다. 우선순위가 높은 것부터 낮은 것 순 다음은 다음과 같습니다.

  1. CSS 너비, 높이, 최대 너비/최소 너비, 최대 높이/최소 높이로 설정된 크기
  2. img의 width 및 height 속성, input의 size 속성, textarea의 cols 및row 속성 등과 같은 요소의 html 속성을 대체하여 크기를 설정할 수 있습니다.
  3. 대체된 콘텐츠 자체에는 크기가 있습니다.

HTML5 새 태그

【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)

  • 1

구조 태그

<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

멀티미디어 태그

<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

양식 태그

<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。

  • 1
  • 2

기타 태그

<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

일반적으로 사용되는 HTML 태그의 실무 핵심 포인트

링크 외부 링크 리소스

head 태그 내에서만 사용되며 외부 링크의 CSS 스타일, 외부 링크 페이지 제목 앞의 작은 아이콘 등과 같은 문서와 외부 리소스 간의 관계를 정의할 수 있습니다.

<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  • 1
  • 2
  • 3
  • 4

하이퍼링크

  • 하이퍼링크 a 태그의 4가지 주요 기능(페이지 점프, 페이지 내 스크롤[앵커], 페이지 새로 고침, 파일 다운로드)
    https://blog.csdn.net/weixin_41192489/article/details/140217094

  • 단락에 하이퍼링크 추가
    p를 a로 묶는 대신 a를 p로 감싸세요.

    <p><a href="">段落</a></p>

    • 1

일반 텍스트별 태그

br 단락 내에서 줄 바꿈

p 태그 내의 줄바꿈에만 적용됩니다. 문단 사이의 줄바꿈이나 요소 사이의 간격을 조정하려면 패딩, 여백 등의 스타일을 사용하세요.

<p>广东省<br/>广州市<br/>黄埔大道西601号</p>

  • 1

여기에 이미지 설명을 삽입하세요.

인라인 텍스트 확장

특별한 스타일을 추가하기 위해 한 줄 내에서 텍스트의 일부를 감싸는 데 사용됩니다.

<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>

  • 1

여기에 이미지 설명을 삽입하세요.

저녁을 먹다 위첨자

<p>m<sup>2</sup></p>

  • 1

여기에 이미지 설명을 삽입하세요.

아래 첨자

<p>m<sub>2</sub></p>

  • 1

여기에 이미지 설명을 삽입하세요.

미리 정의된 텍스트

블록 요소 display: block

모든 공백 문자(공백, 줄 바꿈)를 유지하고 결과를 그대로 출력할 수 있습니다. 컴퓨터 소스 코드를 표시하는 데 자주 사용됩니다.

<pre>
你好：
      我昨天给你打了个电话。
</pre>

  • 1
  • 2
  • 3
  • 4

여기에 이미지 설명을 삽입하세요.

코드 코드

인라인 요소 display: inline

컴퓨터 소스 코드 또는 기타 기계가 읽을 수 있는 텍스트 콘텐츠를 나타내는 데 사용됩니다. 코드의 들여쓰기 형식을 유지하기 위해 일반적으로 pre 태그와 함께 사용됩니다.

코드 태그 내의 텍스트는 고정 폭의 텔레타이프라이터 스타일 글꼴(Courier)로 표시됩니다.

<pre>
    <code>
        let a = 1;
    </code>
</pre>

  • 1
  • 2
  • 3
  • 4
  • 5

여기에 이미지 설명을 삽입하세요.

관련 태그 나열

ul 정렬되지 않은 목록

  • 유형 속성은 일련번호 유형을 수정할 수 있습니다.
    • 디스크 솔리드 원점 [기본값]
    • 정사각형 솔리드 정사각형 포인트
    • 원 속이 빈 원
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

여기에 이미지 설명을 삽입하세요.

ol 주문 목록

  • 유형 속성 - 일련 번호 유형(예: 1(아라비아 숫자[기본값]), a, A, i, I)
  • 시작 속성 - 계산 시작점
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

여기에 이미지 설명을 삽입하세요.

<ol type="a">   
    <li>嘿嘿</li>
    <li>嘿嘿</li>
    <li>呵呵</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

여기에 이미지 설명을 삽입하세요.

<ol type="1" start="4"> 
    <li>哈哈</li>
    <li>哈哈</li>
    <li>哈哈</li>
</ol>

  • 1
  • 2
  • 3
  • 4
  • 5

여기에 이미지 설명을 삽입하세요.

목록 중첩

li는 ul을 포함한 모든 것을 포함할 수 있는 컨테이너 수준 태그입니다.

<ul>
  <li>
    <b>北京市</b>
    <ul>
      <li>海淀区</li>
      <li>朝阳区</li>
      <li>东城区</li>
    </ul>
  </li>

  <li>
    <b>广州市</b>
    <ul>
      <li>天河区</li>
      <li>越秀区</li>
    </ul>
  </li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

여기에 이미지 설명을 삽입하세요.

테이블 테이블

https://blog.csdn.net/weixin_41192489/article/details/140217983

나 아이콘

i 태그는 원래 기울임꼴 텍스트를 나타내는 데 사용되었으며 기본적으로 기울임꼴 글꼴 효과가 있지만 이제는 CSS를 통해 기울임꼴이 균일하게 구현됩니다. i는 아이콘의 첫 글자이기 때문에 이제 i 태그를 사용하여 아이콘을 표시하는 것이 관례이므로 기본 기울기를 취소하려면 글꼴 스타일:일반 스타일을 추가해야 합니다.

<i style="font-style:normal">&#9742</i>

  • 1

여기에 이미지 설명을 삽입하세요.

img 사진

display :inline 인라인 요소

지원되는 이미지 형식: jpg(jpeg), gif, png, bmp, psd, ai 등 기타 형식은 지원되지 않습니다.

 <img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />

  • 1

여기에 이미지 설명을 삽입하세요.

  • src [필수]: 이미지의 주소

  • alt [중요]: 이미지를 표시할 수 없는 경우 검색 엔진은 이미지에 표시된 콘텐츠 대신 이 속성을 크롤링합니다. alt는 자원을 대체한다는 뜻의 "alternate"라는 단어에서 유래되었습니다. (일부 브라우저에서는 지원하지 않습니다)

  • 이미지의 가로 세로 비율을 유지하려면 일반적으로 너비와 높이 중 하나만 설정합니다.

  • [실무] 반응형 이미지
    https://blog.csdn.net/weixin_41192489/article/details/126038175

  • [실용 팁] 이미지 레이지 로딩(손글씨)
    https://blog.csdn.net/weixin_41192489/article/details/126263221

오디오 오디오

display :inline 인라인 요소
여기에 이미지 설명을 삽입하세요.

<audio controls>
  <source src="./test.mp3" type="audio/mp3" />
  您的浏览器不支持 audio 标签。
</audio>

  • 1
  • 2
  • 3
  • 4
  • src [필수]: 오디오 주소
  • 디스플레이 음악 플레이어 제어
  • 자동 재생 자동 재생
  • 루프 루프 재생
  • preload preload (이 속성은 자동 재생을 설정할 때 유효하지 않습니다)

다음은 vue3을 사용하여 구현한 간단한 음악 플레이어입니다. 관련 속성 및 메서드에 대한 설명을 참조하세요.

<script setup>
let bgMusic_ref = ref(null)

function printInfo() {
  let musicInfo = {
    //currentTime 当前播放进度（单位秒s）
    currentTime: bgMusic_ref.value.currentTime,
    //duration 音频总时长（单位秒s）
    duration: bgMusic_ref.value.duration
  }

  console.log(musicInfo)
}

function play() {
  // 播放音频
  bgMusic_ref.value.play()
}

function pause() {
  // 暂停播放音频
  bgMusic_ref.value.pause()
}

// 重新播放音频（从头开始播放）
function rePlay() {
  // 先将当前播放进度重置为 0
  bgMusic_ref.value.currentTime = 0
  // 再播放音频
  bgMusic_ref.value.play()
}
</script>

<template>
  <audio ref="bgMusic_ref" controls autoplay>
    <source src="./test.mp3" type="audio/mp3" />
    您的浏览器不支持 audio 标签。
  </audio>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="rePlay">重新播放</button>
  <button @click="printInfo">打印音频信息</button>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

비디오 비디오

display :inline 인라인 요소

MP4, WebM, Ogg의 세 가지 형식만 지원하며 flv, mkv 등의 다른 형식은 지원되지 않습니다.

여기에 이미지 설명을 삽입하세요.

  <video controls>
    <source src="./test.mp4" type="video/mp4" />
  </video>

  • 1
  • 2
  • 3

  • src [필수]: 영상의 주소

  • 디스플레이 비디오 플레이어 제어

  • 자동 재생 자동 재생

  • 루프 루프 재생

  • preload preload (이 속성은 자동 재생을 설정할 때 유효하지 않습니다)

  • [실용 팁] 로컬 컴퓨터에 비디오 다운로드-CSDN 블로그
    https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe 내장 프레임

display :inline 인라인 요소

페이지 내에 웹페이지 삽입

<iframe src="https://www.w3school.com.cn/index.html"></iframe>

  • 1
  • src [필수]: 다른 웹페이지의 주소
    여기에 이미지 설명을 삽입하세요.

양식 관련 태그

버튼 버튼

display :inline-block 인라인 요소

<button onclick="alert('你好!')">点击我！</button>

  • 1

여기에 이미지 설명을 삽입하세요.

HTML 렌더링 특수 문자

성격설명하다암호
공간끊지 않는 간격&nbsp;
<미만&lt;
>~보다 큰&gt;
©저작권©
&앰퍼샌드&

더 많은 특수문자에 대해서는 "html에 html, js, css 특수문자 쓰는 방법 요약"을 참고하세요.
https://www.cnblogs.com/starof/p/4718550.html

일반적인 HTML 태그의 실제 예

페이지 레이아웃

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편