집 > 기사 > 웹 프론트엔드 > [프론트엔드] HTML 사용법

[프론트엔드] HTML 사용법

高洛峰원래의: 2017-03-23 09:54:491378검색

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

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. *

여러 줄 텍스트 입력 영역 <p style="text-align: left;"></p> *name: name for 텍스트 영역에 값을 저장합니다. <p style="text-align: left;"></p> *cols: 텍스트 영역에 표시되는 열 수를 지정합니다. <p style="text-align: left;"></p> *rows: 텍스트 영역에 표시되는 줄 수를 지정합니다. <p style="text-align: left;"></p> 비활성화됨: 비활성화 여부 <p style="text-align: left;"></p> 읽기 전용: 읽기 전용 <p style="text-align: left;"></p> ...<p style="text-align: left;"></p> 기본값은 두 태그 사이입니다. <p style="text-align: left;"></p> 5. *<button> 태그는 <p style="text-align: left;">버튼</p>을 정의합니다. <p style="text-align: left;"><a href="http://www.php.cn/code/5991.html" target="_blank"> 버튼 요소 안에 문서나 이미지 등의 콘텐츠를 배치할 수 있습니다. 이것이 이 요소가 입력 요소에서 생성된 버튼과 다른 점입니다. </a></p> 6. <fieldset> html5 태그 --fieldset 요소는 양식의 관련 요소를 <p style="text-align: left;"> 그룹 </p>할 수 있습니다. <p style="text-align: left;"><a href="http://www.php.cn/code/10425.html" target="_blank"> 비활성화된 속성: 필드 세트가 표시되는지 여부를 정의합니다. </a></p> 양식 속성: 이 필드 세트가 속하는 하나 이상의 양식을 정의합니다. <p style="text-align: left;"></p> 7. <legend> html5 태그-<legend> 태그는 <fieldset> 및 <details> 요소에 대한 제목을 정의합니다. <p style="text-align: left;"></p> <form><p style="text-align: left;"></p> ="text" /><br/><p style="text-align: left;"></p> 가중치: <input type="text" />< br/><p style="text-align: left;"></p> </fieldset><p style="text-align: left;"></p>
<p style="text-align: left;"> </form></p>
<p style="text-align: left;"> 8. <optgroup> html5 태그--<optgroup> 태그는 옵션 그룹을 정의합니다. 이 요소를 사용하면 옵션을 결합할 수 있습니다. </p>
<p style="text-align: left;"> 예: </p>
<p style="text-align: left;"> <select></p>
<p style="text-align: left;"> <optgroup label="Swedish Cars"></p>
<p style="text-align: left;"> < 옵션 값="volvo">볼보</option></p>
<p style="text-align: left;"> <옵션 값="saab">사브</option></p>
<p style="text-align: left;"> </optgroup></p>
<p style="text-align: left;"> <optgroup label="German Cars"></p>
<p style="text-align: left;"> <option value="mercedes">Mercedes</option></p>
<p style="text-align: left;"> <option value="audi">Audi< ;/option></p>
<p style="text-align: left;"> </optgroup></p>
<p style="text-align: left;"> </select></p>
<p style="text-align: left;"> 9. <datalist> html5 태그--<datalist> 데이터. 입력 요소와 함께 사용하면 입력 값의 드롭다운 목록을 생성할 수 있습니다. </p>
<p style="text-align: left;"> 예: </p>
<p style="text-align: left;"> <form action="demo_form.php" method="get"></p>
<p style="text-align: left;"> <input list="browsers" name="browser " ></p>
<p style="text-align: left;"> <datalist id="browsers"></p>
<p style="text-align: left;"> <option value="Internet Explorer"></p>
<p style="text-align: left;"> <option value="Firefox" > ;</p><p style="text-align: left;"> <option value="Chrome"></p>
<p style="text-align: left;"> <option value="Opera"></p>
<p style="text-align: left;"> <option value="Safari"> 🎜></p> </datalist><p style="text-align: left;"></p> <input type="submit"><p style="text-align: left;"></p> </form><p style="text-align: left;"></p> 10. **< /> 양식 항목의 속성은 <p style="text-align: left;"></p>을 제공할 수 있습니다. *type 속성: 양식 항목의 유형을 나타냅니다. 값은 다음과 같습니다. <p style="text-align: left;"></p> 텍스트: 한 줄 텍스트 상자 <p style="text-align: left;"></p> 비밀번호: 비밀번호 입력 상자 <p style="text-align: left;"></p> 체크박스: 다중 선택 상자, 값을 입력하세요 <p style="text-align: left;"></p> 라디오: 라디오 버튼, 값을 입력하세요 <p style="text-align: left;"></p> <p style="text-align: left;">파일<a href="http://www.php.cn/wiki/1313.html" target="_blank">:</a>파일 업로드<a href="http://www.php.cn/code/8549.html" target="_blank">상자 선택</a></p> 버튼: 일반 버튼 <p style="text-align: left;"></p> 제출: 제출 버튼 <p style="text-align: left;"></p> 이미지: 이미지 제출 버튼 <p style="text-align: left;"></p> <p style="text-align: left;">reset <a href="http://www.php.cn/wiki/1081.html" target="_blank">: 재설정 버튼, 효과를 처음으로 복원(처음 열었을 때) </a></p> Hidden: 기본 양식 숨겨진 필드, 정보가 양식과 함께 제출되지만 사용자가 필요하지 않은 경우 수정<p style="text-align: left;"></p> *name 속성: 폼 항목 이름, 콘텐츠 값을 저장하는 데 사용 <p style="text-align: left;"></p> *value 속성: 입력 값(기본 지정 값) <p style="text-align: left;"></p> size 속성: 너비 값 입력 상자 <p style="text-align: left;"></p> maxlength 속성: 입력 상자의 입력 내용의 최대 길이 <p style="text-align: left;"></p> readonly 속성: 입력 상자의 읽기 전용 속성 <p style="text-align: left;"></p> *disabled 속성: 비활성화됨 attribute <p style="text-align: left;"></p> *checked 속성: 선택 상자에 대한 기본 옵션 지정 <p style="text-align: left;"></p> Accesskey 속성: 단축키 지정(일반적으로 사용되지 않음) (IE: alt+ 키 Firefox: alt+shift+ 키) <p style="text-align: left;"></p> Tabindex 속성: 숫자를 통해 탭 키 지정 전환 순서(일반적으로 사용되지 않음) <p style="text-align: left;"></p> 그림 버튼에 src 및 alt가 설정됨 <p style="text-align: left;"></p> 참고: 재설정 재설정 버튼은 복원 양식 데이터를 <p style="text-align: left;"> 처음 열었을 때의 상태로 <a href="http://www.php.cn/code/8243.html" target="_blank"> 하면 기본적으로 양식 제출 기능이 있는 </a></p> 이미지 버튼이 지워지지 않습니다. <p style="text-align: left;"></p><p>위 내용은 [프론트엔드] HTML 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML을 구문 분석하는 방법" href="https://m.php.cn/ko/faq/358137.html">HTML을 구문 분석하는 방법</a></span><span>다음 기사：<a class="dBlack" title="HTML을 구문 분석하는 방법" href="https://m.php.cn/ko/faq/358141.html">HTML을 구문 분석하는 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>