> 웹 프론트엔드 > HTML 튜토리얼 > [프론트엔드] HTML 사용법

[프론트엔드] HTML 사용법

高洛峰
풀어 주다: 2017-03-23 09:54:49
원래의
1399명이 탐색했습니다.

编程语言:解释型和编译型

WEB前端:HTML+CSS+JavaScript

一、 HTML介绍:

---------------------------------------

1. 什么是HTML?

   超文本标记语言,  <标签名>--标记(标签、节点)

2. HTML是由:标签和内容构成

3. 程序语言有两种:解释性语言(HTML、PHP、Javascript)和编译型语言(C、C++、Java

4. HTML的标签组成部分、属性、实体

    HTML的实体: <:< >:>  空格:

5. HTML中注释

注释的目的:1. 辅助说明  2.代码调试

6. HTML标签(标记)的语法: 标签是由"<"和">"括起来

双标签:<标签名>....

单标签:<标签名/>

7. HTML中的颜色:可以是颜色单词:red/blue/green/yellow...

还可以是:#000000 --- #ffffff

            十六进制:0123456789abcdef

其中前两位表示红色,中间两位绿色,后两位表示蓝色。

二、 HTML中HEAD头部设置

----------------------------------------

设置网页编码:

    关键字:

    描述:  

    网页标题:本网页标题

    导入CSS文件:

    CSS代码:

    JS文件或代码:

    ... ...

三、 HTML中的文本标签、格式化标签

----------------------------------------

    文本标签:

1. *
换行

2. *

...

换段

3. ... 斜体

4. ... 强调斜体

5. ... 加粗

6. *... 强调加粗

7. *... 其中n为1--6的值。 标题标签(加粗、独立行)

8. 引用

  9. ...  ...

10.* 删除线 

....

    格式化标签:

1. *
换行

2. *

...

换段

    3. 列表:

                                                                                                                 항목

                                                                                          > -------- ----- *HTML에서 --------

*< ;a href=""> ; 하이퍼링크 태그

속성: href가 필요하며 링크 점프 주소를 참조합니다. 대상: 링크가 열리는 방법을 나타냅니다.

_blank 새 창

_parent 상위 창

_self 이 창(기본값)

_

top

최상위 창

프레임 이름 창 이름

제목: 텍스트 프롬프트 속성(세부 사항)

앵커 링크:

앵커 정의: < /a> 이전에 사용됨

앵커 포인트 사용: a1로 이동>

5. *

이미지 태그

img---------------------------- ------ --------

웹페이지에 사진 삽입

속성: src: 사진 이름 및 URL 주소

alt: 이미지 로딩 실패 시 프롬프트 메시지

title: 텍스트 프롬프트 속성

width

: 이미지 너비

height

: 이미지 높이

border: 테두리 선 두께

6. 멀티미디어 태그(익숙함)

--------------- ----------- ---

귀하 브라우저는


브라우저가 재생을 지원하지 않습니다



< ;source src="./images/fun.mp4" type="video/mp4" />

귀하의 브라우저는 비디오 재생을 지원하지 않습니다

< ;source src="movie.webm" type="video/webm">

< ;source src="movie.mp4" type="video/mp4">

이제 깨진 브라우저를 버릴 시간입니다. 비디오 태그를 지원하지 않습니다.



7. *테이블태그

--------------- -- ------

*테이블 테이블 라벨

캡션 테이블 제목

*tr 행 라벨

*번째 열 헤더 라벨

*td 열 레이블

프린터와 관련되어 있습니다. 표 본문 앞에 머리글과 바닥글을 쓰면 코드를 보는 데 도움이 됩니다.

*thead 머리글

* tbody 테이블 본문

tfoot 테이블 바닥글

8. **form 폼 태그

----------------- - -----------

1. <양식> --양식 태그

양식 태그의 공통 속성:

*action 속성: 제출된 대상 주소(URL)

* 메소드 속성: 제출 메소드: get(기본값) 및 post

get 메소드는 URL 주소 표시줄이 표시되고 길이가 제한되어 있으며(IE2k Firefox 8k) 상대적으로 안전하지 않습니다

post 메소드는 다음과 같습니다. URL 주소는 보이지 않으며 길이에 제한이 없으며 비교적 안전합니다.

enctype: 제출 유형

target: 대상 URL을 열 위치입니다.

이름: 속성은 양식에 이름을 지정합니다. HTML5는 지원되지 않습니다. 대신 ID를 사용하세요.

2. 양식 항목 라벨 입력은 사용자가 데이터를 입력할 수 있는 입력 필드를 정의합니다. HTML 5에서는 type 속성에 많은 새로운 값이 있습니다.

자세한 내용은 다음과 같습니다.

예:

3. 태그에 삽입하는 데 사용되는 드롭다운 항목;

값 *선택한 속성: 기본 드롭다운 지정 항목

4. *