HTML 입문 튜토리얼

巴扎黑원래의: 2017-06-26 15:17:551820검색

1. HTML 소개

HTML(Hypertext Markup Language)은 웹 페이지 문서를 설명하는 데 사용되는 마크업 언어입니다.

HTML 태그는 HTML 태그라고도 합니다. HTML은 단락 태그, 제목 태그, 하이퍼링크 태그, 그림 태그 등과 같은 많은 태그를 제공합니다. 웹 페이지에서 정의해야 하는 내용은 해당 HTML 태그로 설명할 수 있습니다.

2. HTML 구조

 1 <!DOCTYPE html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 --> 2 <html><!-- <html>表示文档标签 --> 3 <head><!-- <head>标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 --> 4     <meta charset="UTF-8"> 5     <!-- 这是注释，不会显示在网页上，注释的内容写在符号之间 --> 6     <title>第一个HTML文件</title><!-- <title>表示该文档的标题 --> 7 </head> 8  9 <body><!-- <body>标签为我们在浏览器中看到的内容 -->10     第一个HTML文件11 </body> 12 </html>

댓글 내용은 기호 사이에 작성되며, 브라우저에서 실행되는 효과는 다음과 같습니다

3 , HTML 헤드 태그

3.1, 태그

태그는 문서 앞에 위치하며 현재 HTML 또는 XHTML 표준 사양을 브라우저에 표시하는 데 사용됩니다. 문서 용도. 주로 브라우저가 문서 태그를 구문 분석하는 기반으로 사용됩니다.

태그는 브라우저 호환성과 관련이 있습니다. 을 삭제하면 브라우저에 HTML 페이지의 내용이 표시됩니다. 이때 페이지에는 IE6, IE7, IE8, Firefox2, Firefox3, Chrome 등의 브라우저 수 만큼의 표시 효과가 있을 수 있으나 이는 허용되지 않습니다.

3.2, 태그

태그는 루트 태그라고도 하며 브라우저에 HTML 문서임을 알리는 데 사용됩니다. 태그 HTML 문서의 시작을 표시하는 태그는 HTML 문서의 끝을 표시합니다. 모든 태그는 두 개의 닫는 태그 와 사이에 작성되어야 합니다. 검색 엔진이 문서를 구문 분석하는 데 도움이 되도록 lang 속성을 통해 현재 문서의 기본 언어를 설정할 수 있습니다. 예를 들어, .

3.3, 태그

태그는 태그 바로 뒤에 있는 head 태그라고도 하는 HTML 문서의 헤더 정보를 정의하는 데 사용됩니다. head 태그로 정의된 콘텐츠는 브라우저에만 제공되며 사용자 프레젠테이션에는 사용되지 않습니다. 제목, 작성자 및 관계를 설명하는 데 사용되는 , <meta>, <link> 및 <style> 등과 같이 문서 헤드에 있는 다른 태그를 캡슐화하는 데 주로 사용됩니다. 문서의 다른 문서 등. <span style="color: #ff00ff; font-size: 16px;">HTML 문서에는 <head> 태그 한 쌍만 포함될 수 있습니다</span>. 대부분의 문서 헤더에 포함된 데이터는 실제로 페이지에 콘텐츠로 표시되지 않습니다. <br><br></p> <h4>3.4, <meta> 태그 </h4> <p><meta> 태그는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공할 수 있습니다. </p> <p><meta> 태그는 문서의 머리 부분에 있으며 어떤 내용도 포함하지 않습니다. <meta> 태그의 속성은 문서와 관련된 이름/값 쌍을 정의합니다. 예: </p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta name="keywords" content="HTML,ASP,PHP,SQL"></pre></div> <p> "키워드"는 자주 사용되는 이름입니다. 문서의 키워드 세트를 정의합니다. 일부 검색 엔진에서는 이러한 키워드를 사용하여 문서가 발견될 때 문서를 분류합니다. <br><br></p> <h4>3.5, <title> 태그 </h4> <p><title> 태그는 HTML 페이지의 제목을 정의하는 데 사용됩니다. 즉, 웹 페이지에 이름을 지정하는 데 사용되며 <head> 꼬리표. HTML 문서에는 <title> 태그 쌍만 포함될 수 있습니다. 기본 문법 형식은 다음과 같습니다.

<title>网页标题名称</title>

제목 태그는 웹 사이트 SEO에 매우 중요하며, 제목의 품질은 웹 사이트의 SEO에 직접적인 영향을 미칩니다.

3.6, 태그

태그는 외부 CSS 파일을 링크하는 데 가장 일반적으로 사용됩니다.

<link rel="stylesheet" type="text/css" href="theme.css?1.1.11" />

또한 웹사이트 아이콘을 소개하는 데에도 사용할 수 있습니다

<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" />

4. HTML 콘텐츠 태그

4.1. 제목 태그

제목 태그는

-

로 표시되며, 여기서

은

부터

까지의 가장 작은 제목을 정의하며 현재 문서에 비해 중요도가 낮습니다. h1 태그는 전체 페이지에 최대 한 번만 표시하는 것이 좋습니다(물론 초과할 수 있지만 SEO 검색에 도움이 되지 않습니다). 제목 태그는 문서 내용의 중요성을 전달하는 데 사용됩니다. 단지 굵게 또는 큰 텍스트를 생성하기 위해 제목을 사용하지 마세요.

참고: 브라우저는 제목 앞뒤에 빈 줄을 자동으로 추가합니다.

4.2. 단락 태그

단락은

태그를 통해 정의됩니다. p 태그는 한 줄을 공유하지 않지만 한 줄 이상의 공간을 차지합니다.

4.3. 가로줄 표시

hr 태그는 페이지에 가로줄을 삽입하는 것을 의미합니다. hr 태그는 단일 태그이므로 닫을 필요가 없습니다.

4.4. 줄 바꿈 태그

는

단일 태그이기도 한 간단한 줄 바꿈을 삽입할 수 있으며 닫는 태그가 필요하지 않습니다.

4.5.span 태그

태그는 문서의 인라인 요소를 결합하는 데 사용됩니다. 일반적으로 범위 태그에는 스타일을 지정해야 합니다. 그렇지 않으면 페이지의 다른 텍스트와 구별할 수 없게 됩니다.

4.6, div 태그

요소는 스타일을 사용하여 형식을 지정할 수 있도록 블록 수준 요소를 결합합니다.

4.7, img 태그

기술적으로 말하면

태그는 웹 페이지에 이미지를 삽입하지 않습니다. 웹페이지 링크. 태그는 참조된 이미지를 위한 자리 표시자 공간을 만듭니다.

태그에는 src 속성과 alt 속성이라는 두 가지 필수 속성이 있습니다.

5, HTML 고급 태그

5.1, 목록 태그

5.1.1, 정렬되지 않은 목록

정렬되지 않은 목록은 ul 태그로 표시되고, 목록 항목은 li 태그로 표시되며,

Unordered 목록이 있습니다. 다양한 목록 항목 사이에는 순서 수준이 없으며 병렬입니다. 　

5.1.2 순서가 지정된 목록 순서가 있는 목록은 ol 태그로 표시되며 목록 항목도 li 태그로 표시됩니다. 각 목록 항목은 특정 순서로 정의됩니다

5.1.3. 사용자 정의 목록

사용자 정의 목록은 용어나 명사를 설명하고 설명하는 데 자주 사용됩니다.

5.2 테이블 태그

간단한 HTML 테이블은 테이블 요소와 하나 이상의 tr, th 또는 td 요소로 구성됩니다. tr 요소는 테이블 헤더를 정의하고, t 요소는 td를 정의합니다. 요소는 테이블 단위를 정의합니다.

5.3, 양식 라벨

5.3.1, 양식 라벨

전체 양식의 콘텐츠를 래핑하는 데 사용되는 양식의 필드 라벨입니다. 양식은 사용자가 백엔드에 데이터를 제출하기 위한 가상 목록입니다. 양식은 일반적으로 텍스트 상자, 드롭다운 목록, 라디오 선택, 다중 선택, 텍스트 필드 등으로 구성됩니다. Action 속성은 가리키는 주소를 지정하는 데 사용됩니다. 현재 양식이 제출되면 백엔드에 추가됩니다.
　　

5.3.2, 입력 태그

입력 태그는 텍스트 상자, 라디오 선택, 다중 선택, 버튼 등입니다. Type 속성의 다양한 값에 따라 입력 태그의 역할이 결정됩니다.

텍스트 상자: text
비밀번호 상자: 비밀번호
라디오 선택: radio
다중 선택: 체크박스
버튼: 버튼
제출 버튼: 제출
재설정 버튼: 재설정

입력 태그의 체크된 속성, value is only 체크된 속성 값은 생략 가능합니다. 즉, 라디오 버튼과 다중 선택 버튼에서 해당 버튼이 선택되었음을 의미합니다.

5.3.3. Select 태그

select 요소는 단일 선택 또는 다중 선택 메뉴를 생성할 수 있으며