HTML 웹 페이지 태그 코드 기본 교육

57267 단어 HTML html

HTML 전체 이름 하이퍼텍스트 태그 언어(Hyper Text Markup Language)로 웹 페이지를 만들 수 있습니다.그것은 이러한 문법 규칙을 통해 풍부하고 다채로운 웹 페이지를 설계할 수 있는 문법 규칙이 있다.먼저 HTML 태그 정의 형식은 다음과 같습니다.

<   >       >

로 시작하고 로 서명 > 로 끝냅니다.그리고 HTML 코드는 두 개의 빈칸을 가장 많이 사용해서 축소할 수 있다. 물론 4칸, 3칸, 심지어 축소하지 않아도 된다.그러나 웹 페이지 후기 개발 때의 수정에 이롭기 때문에 코드를 축소하는 것을 권장합니다.오늘의 공부를 시작합시다!

HTML 학습 디렉토리

html라벨

헤드 레이블

meta 태그

타이틀 레이블

바디 레이블

h1-h6 라벨

i 태그 기울임꼴 작성

b 태그 굵은 텍스트 만들기

p 탭 생성 단락

ul 탭 무질서 목록 만들기

ol 태그 순서 목록 만들기

table 탭 만들기 표

a 태그 링크 웹 주소

div 라벨 구분판

span 레이블

br 라벨 줄 바꾸기

script 탭에서 js 코드를 불러오거나 작성

img 레이블

스타일 설정

클래스 선택기

ID 선택기

링크 태그 링크 리소스

html 태그

웹 코드의 시작 위치와 끝 위치를 식별하는 데 사용됩니다. 예를 들어,


<html>
      
html>

참고: 첫 번째 행의 코드는 이 파일에 사용되는 HTML 사양을 식별하는 데 사용됩니다.

head 태그

웹 페이지의 헤더 정보를 정의하는 데 사용되는 형식:


<html>
  <head>    head>
html>

이 라벨은 html 라벨에 박혀 있다.

meta 태그

작성자, 작성 날짜 등 HTML 문서의 속성을 설명할 수 있습니다.외부 스크립트 파일에서 HTML 문서에 사용되는 문자 인코딩을 선언하는 데 자주 사용됩니다.외부 파일의 문자 인코딩이 주 파일의 인코딩 방식과 다르면charset 속성을 사용해야 합니다.


<html>
  <head>
    <meta charset="UTF-8">
        
  head>
html>

주: 헤드 탭에 끼워 넣으세요.

title 태그

다음과 같은 형식으로 웹 페이지의 제목을 표시할 수 있습니다.


<html>
  <head>
    <title>    title>
        
  head>
html>

주:헤드 탭에도 끼워주세요.

body 태그

웹 페이지의 바디를 정의합니다. 일반적으로 HTML 코드는 Head 태그 뒤에 작성됩니다.


<html>
  <head>
        
  head>
  <body>
    HTML    
  body>
html>

h1-h6 태그

이러한 레이블은 일반적으로 바디 레이블에서 중첩된 문자의 크기를 변경할 수 있습니다. h1이 가장 크고 h6이 가장 작습니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <h1>  h1h1>
    <h2>  h2h2>
    <h3>  h3h3>
    <h4>  h4h4>
    <h5>  h5h5>
    <h6>  h6h6>
  body>
html>

브라우저로 이 페이지를 열면 큰 텍스트에서 작은 텍스트로 보일 것입니다.

i 태그 기울임꼴 문자 만들기


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <i>    i>
  body>
html>

i 라벨은 주로 라벨 안의 문자를 사체로 바꿉니다.

b 태그로 굵은 텍스트 만들기


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <b>    b>
  body>
html>

b 라벨은 주로 라벨 안의 문자를 굵은 글씨체로 만든다.

p 태그 작성 단락


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <p>       。    。p>
    <p>       。    。p>
  body>
html>

p 탭은 탭 안의 텍스트를 새로운 단락으로 보여 줍니다.

ul 태그 무질서 목록 만들기

다음 형식의 무질서 목록을 표시할 수 있습니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <ul>
      <li>   li>
      <li>   li>
      <li>   li>
    ul>
  body>
html>

안에 리 라벨을 끼워 넣을 것입니다. 각 리 라벨은 목록의 하나입니다.

ol 태그 순서 목록 만들기

다음 형식으로 정렬된 목록을 표시할 수 있습니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <ol>
      <li>   li>
      <li>   li>
      <li>   li>
    ol>
  body>
html>

안에도 리 라벨을 끼워야 한다. 각 리 라벨은 목록의 한 항목이다.

테이블 탭 만들기

테이블 레이블은 다음과 같은 테이블을 만드는 데 사용됩니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <table>
      <tr>
        <td>  1td>
        <td>  2td>
      tr>
      <tr>
        <td>  1td>
        <td>  2td>
      tr>
    table>
  body>
html>

이 탭 안에는tr탭을 끼워 넣어야 합니다.tr탭은 표의 한 줄이고, 내부의 td탭은 이 줄의 각 열에 표시되는 내용을 정의합니다.

a 태그 링크 사이트 주소

이 탭은 웹 사이트에 연결하는 데 사용됩니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <a href="https://blog.csdn.net/">CSDN    a>
  body>
html>

a 탭의 속성 href 정의는 웹 사이트로 이동하는 주소를 정의하고, 텍스트 내용은 이 탭이 어떤 텍스트에 링크를 만드는지 정의합니다.

div 탭 구분 섹션

페이지를 독립된 섹션으로 나누는 데 사용합니다. 섹션이나 섹션을 나누는 데 사용합니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <div>
      <ul>
        <li>   li>
        <li>   li>
        <li>   li>
      ul>
    div>
    <div>
      <ol>
        <li>   li>
        <li>   li>
        <li>   li>
      ol>
    div>
  body>
html>

span 태그

HTML의 인라인 레이블을 사용하면 인라인 요소에 별도의 스타일을 설정할 수 있습니다.

```html

<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <span>    span>
  body>
html>

br 태그 줄 바꿈

이 태그는 엔딩이 없으며 줄 바꿈과 마찬가지로 텍스트에 삽입할 수 있습니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <p>     <br>     p>
  body>
html>

script 탭에서 js 코드를 불러오거나 작성합니다

이 탭은 웹 페이지에서javascript 파일 코드를 작성하거나 불러오는 데 사용됩니다: 불러오기: (보통head에서 불러오기, body도 가능)


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
    <script src="js    .js">script>
  head>
  <body>
    <p>    p>
  body>
html>

작성: (일반적으로 바디 내에서 작성됨)


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <script type="text/javascript">
       var a = 1;
       var b = 2;
       alert(a + b);
    script>
  body>
html>

위와 같이, 우리는script 탭에 간단한 js 코드를 억 개 썼는데, 이 코드들은 브라우저가 조회할 때 실행될 것이다.

img 태그

img 태그는 주로 그림을 불러오고 코드를 불러오는 데 사용됩니다.


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
  head>
  <body>
    <img src="test.png" />
  body>
html>

속성 src에서 그림 경로를 지정합니다. 여기는test입니다.png, 물론 인터넷 사진도 디스플레이를 불러올 수 있습니다.(주:img 라벨은 끝 라벨이 없습니다. ">"앞에 하나 쓰기 "/"만 하면 됩니다)

스타일 스타일 설정

CSS는 Cascading Style Sheets라고도 하며, 주로 HTML 웹 페이지의 스타일을 설정하는 데 사용됩니다.CSS에서는 HTML 태그를 선택하여 해당 스타일을 설정할 수 있는 선택기를 제공합니다. 일반적인 선택기는 클래스 선택기와 ID 선택기입니다.

클래스 선택기


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
    <style type="text/css">
    .test1{
      
            width:300px;
            height:50px;
            background:red;
    }
    .test2{
      
            width:100px;
            height:50px;
            background:green;
    }
    style>
  head>
  <body>
    <div class="test1">style  1div>
    <div class="test2">style  2div>
  body>
html>

우선, 우리는 스타일 라벨을 정의했다. 내부에 두 개의 클래스 선택기, 하나는 테스트 1, 다른 하나는 테스트 2라고 정의했다. 각 선택기에서 우리는 width,height,background 속성을 정의했다. 그리고 바디에 두 개의 div 라벨을 정의했다. 모두 속성class(클래스)가 있다. 여기에 클래스 선택기 이름을 쓰면 대응하는 스타일을 불러올 수 있다.

ID 선택기


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
    <style type="text/css">
    #test1{
      
            width:300px;
            height:50px;
            background:red;
    }
    #test2{
      
            width:100px;
            height:50px;
            background:green;
    }
    style>
  head>
  <body>
    <div id="test1">style  1div>
    <div id="test2">style  2div>
  body>
html>

우선, 우리는 스타일 라벨을 정의했다. 내부에 두 개의 ID 선택기, 하나는test1이고 다른 하나는test2라고 한다. 각 선택기에서 우리는 width,height,background 속성을 정의했다. 그리고body에 두 개의div 라벨을 정의했다. 모두 속성 id가 있다. 여기에 우리가 ID 선택기 이름을 쓰면 대응하는 스타일을 불러올 수 있다(사실div의class를 id로 바꾸고 스타일 라벨에 있는'."#로 바꾼 것뿐.

링크 태그 링크 리소스


<html>
  <head>
    <meta charset="UTF-8">
    <title>    title>
    <link rel="stylesheet" href="test.css" />
  head>
  <body>
    <p>    p>
  body>
html>

링크 태그는 HTML 문서와 외부 리소스의 관계를 정의하는 데 사용되며 CSS 스타일시트 파일, 외부 리소스 등을 연결하는 데 자주 사용됩니다.링크 탭에 있는 코드가test를 불러왔습니다.css 파일, 즉 CSS 파일입니다.(참고: 링크 레이블은 끝 레이블이 없으며 ">"앞에 하나"/"만 입력하면 됩니다.)
수업은 여기까지입니다. 모르는 부분은 평론 구역에 올릴 수 있으니 모두 함께 토론합시다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

XSS 사용해보기

이 검증은 자신이 관리하는 가상 머신의 웹 서버에서 수행됩니다. 크로스 사이트 스크립팅 (이하 XSS)을 실제로 시도하고 철저히 이해하는 목적. 이 기사에서는 서버에서 수행하는 처리 내용과 XSS 방법에 대해 설명합...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Emissary를 이용한 Envoy의 JWT SVID 기반 액세스 제어

다중 루틴 시리즈 -volatile 키워드 깊이 분석(7)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다