찾다

집 >웹 프론트엔드 >HTML 튜토리얼 >프런트엔드 HTML 지식 포인트 편집

프런트엔드 HTML 지식 포인트 편집

WBOY
WBOY원래의
2016-08-22 10:13:58842검색

1. html 개요

　htyper 텍스트 마크업 언어는 하이퍼텍스트 마크업 언어입니다

하이퍼텍스트: 페이지에 사진, 링크는 물론 음악, 프로그램 등 텍스트가 아닌 요소까지 포함될 수 있음을 의미합니다.

마크업 언어: 태그로 구성된 언어 웹 페이지 == 브라우저에서 구문 분석되어 표시에 사용되는 HTML 문서

정적 웹페이지: xxx.html과 같은 정적 리소스

동적 웹 페이지: HTML 코드는 사용자 요청에 따라 특정 개발 언어에 의해 동적으로 생성됩니다.

다음은 html 파일의 트리 구조도입니다

　

　태그의 개념

:

은 꺾쇠괄호로 묶인 한 쌍의 단어로 구성됩니다. 예: *모든 태그의 단어는 숫자로 시작할 수 없습니다.

    태그는 대소문자를 구분하지 않습니다.
    • 태그는 시작 태그 와 종료 태그 의 두 부분으로 나뉩니다.
    • 일부 태그 기능은 하나의 태그만 사용하면 됩니다. 예를 들면
    img />
  • 태그는 중첩될 수 있지만
    • 　
  • 태그 속성:
　

은 일반적으로 키-값 쌍의 형태로 나타납니다(예: name="alex").

속성은 여는 태그나 자체 닫는 태그에만 나타날 수 있습니다.
  • 속성 이름은 모두 소문자입니다. *속성 값은 큰따옴표나 작은따옴표로 묶어야 합니다. 예: name="alex"
  • 속성 값과 속성 이름이 완전히 동일한 경우에는 속성 이름을 직접 작성하세요. 예를 들어 readonly
  • 2. head의 주요 태그 소개

　

메타 태그의 구성: 메타 태그에는 http-equiv 속성과 이름 속성이라는 두 가지 속성이 있습니다. 이러한 서로 다른 매개변수 값은 서로 다른 웹 기능을 실현합니다. .

    • 　1 name 속성은 주로 웹페이지를 설명하는 데 사용되며, 해당 속성 값은 content입니다. 콘텐츠의 콘텐츠는 주로 검색 엔진 로봇이 정보를 찾고 정보를 분류하는 데 사용됩니다.

　2 http-equiv는 이름에서 알 수 있듯이 http의 파일 헤더 기능과 동일하며 웹 페이지 콘텐츠를 정확하고 정확하게 표시하는 데 도움이 되는 몇 가지 유용한 정보를 반환할 수 있습니다. 내용 내용은 실제로 각 매개변수의 변수 값입니다.

//(끝, 초 앞, URL 뒤의 따옴표에 유의하세요. .)

올드보이

  • 3. 본문 태그

기본 태그:

　

　: n의 값 범위는 1~6이며 제목을 나타내는 데 사용됩니다.

　

: 단락 태그입니다. 위쪽과 아래쪽 내용 사이에도 빈 줄이 있습니다.

　 : 굵은 라벨

　: 텍스트에 중심선을 추가합니다.

　: 텍스트가 이탤릭체로 표시됩니다.

　 및 : 위 첨자 및 아래 첨자.

　
: 줄 바꿈.

　

:가로선

　

　　

　　块级标签和内联标签

　　块级标签：

：
　　

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素 百分比.（最好通过css来设置长宽）

　　

: table row

         　　

(不常用): 为表格进行分区

　　表单标签

　　

　　表单用于向服务器传输数据。

      表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label 元素。

　　1、表单的属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get 默认取值 就是 get（信封）

　　 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

　　post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　 get/post是常见的两种请求方式.

　　2.表单元素

　　

　　     type:     text 文本输入框

비밀번호 비밀번호 입력창

라디오 라디오 버튼

＜

제출 버튼

버튼 버튼 (js와 함께 사용해야 합니다.) 버튼과 제출의 차이점은 무엇인가요?

파일 파일 제출: 양식에 enctype="multipart/form-data" 속성을 추가해야 합니다

　

코드 보기
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">def</span><span style="color: #000000;"> index(request):
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.POST
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.GET
</span><span style="color: #008080;"> 4</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.FILES
</span><span style="color: #008080;"> 5</span>     <span style="color: #0000ff;">for</span> item <span style="color: #0000ff;">in</span><span style="color: #000000;"> request.FILES:
</span><span style="color: #008080;"> 6</span>         fileObj =<span style="color: #000000;"> request.FILES.get(item)
</span><span style="color: #008080;"> 7</span>         f = open(fileObj.name, <span style="color: #800000;">'</span><span style="color: #800000;">wb</span><span style="color: #800000;">'</span><span style="color: #000000;">)
</span><span style="color: #008080;"> 8</span>         iter_file =<span style="color: #000000;"> fileObj.chunks()
</span><span style="color: #008080;"> 9</span>         <span style="color: #0000ff;">for</span> line <span style="color: #0000ff;">in</span><span style="color: #000000;"> iter_file:
</span><span style="color: #008080;">10</span> <span style="color: #000000;">            f.write(line)
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        f.close()
</span><span style="color: #008080;">12</span>     <span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">'</span><span style="color: #800000;">ok</span><span style="color: #800000;">'</span>)
　
Name: 양식 제출 항목의 키입니다. id 속성과의 차이점에 유의하세요. name 속성은 서버와 통신할 때 사용되는 이름이고, id 속성은 주로 브라우저에서 사용되는 이름입니다. 클라이언트 프로그래밍의 편의를 위해
CSS와 자바스크립트에서 사용됩니다.

value: 양식 제출 항목의 값입니다. 입력 유형에 따라 value 속성의 사용법도 다릅니다.

　

type="button", "reset", "submit" - 버튼에 표시되는 텍스트를 정의합니다

Type="text", "password", "hidden" - 입력 필드의 초기 값을 정의합니다

type="checkbox", "radio", "image" - 입력과 관련된 값을 정의합니다.

선택됨: 라디오와 체크박스가 기본적으로 선택되어 있습니다.

읽기 전용: 텍스트 및 비밀번호

비활성화됨: 사용된 모든 입력에 대해 잘 작동합니다.

　
: table head cell

        　　 

: table data cell

　　rowspan: 单元格竖跨多少行

　　colspan:  单元格横跨多少列（即合并单元格）

　　

: table header