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

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이며 제목을 나타내는 데 사용됩니다.

　

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

　 : 굵은 라벨

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

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

　 ^{및 _{: 위 첨자 및 아래 첨자.}}

　
: 줄 바꿈.

　

---

:가로선

　

　　

　　块级标签和内联标签

　　块级标签：

　　内联标签：_{^{><span></span>}}

　　block（块）元素的特点
　　① 总是在新行上开始；

　　
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

　　inline元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

　　对行内元素，需要注意如下 
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

 

　　特殊字符：

      < >；"；©®

　　图形标签：　　

　　src: 要显示图片的路径.

　　alt: 图片没有加载成功时的提示.

　　title: 鼠标悬浮时的提示信息.

　　width: 图片的宽

　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

　　超链接标签:　

　　href:要连接的资源路径 格式如下: href="http://www.baidu.com" 

 

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

 

　　name: 定义一个页面的书签.

 

　　用于跳转 href : #书签名称.

 

　　列表标签:　　

　　

: 无序列表

　　

:有序列表

     

1. :列表中的每一项.

   　　

   定义列表

        

   列表标题

        

   列表项

   　　表格标签

：
　　

　　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" - 입력과 관련된 값을 정의합니다.

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

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

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

　 드롭다운 선택 라벨 속성:

이름 : 양식 제출 항목의 키

크기: 옵션 개수

다중: 다중

& lt; option & gt; 드롭다운 선택의 각 속성: value: 양식 제출 항목의 값: selected: SELECTED 기본 선택

& lt; Optgroup & gt; 각 항목 추가

　

　 텍스트 영역 이름: 양식 제출 항목의 키. cols: 기본적으로 텍스트 영역에 포함되는 열 수 행: 기본적으로 텍스트 영역에 포함되는 행 수 <p> </p>　<p> </p> <p>                                                                                                             www" </p>type=<p class="p1">"text"<span class="s1">><span class="s2"><span class="s3"><span class="s1"><span class="s1"><br><span class="s2"><span class="s3"><span class="s2"><span class="s3"><span class="s1"></span> </span></span>　</span></span> </span></span> <fieldset>></fieldset></span> "텍스트"</span>></span></p>　<p class="p1">><span class="s1"></span></p> <p class="p1"><span class="s1"><span class="s1"><br><span class="s1"><span class="s1"> <br> <span class="s2"> <span class="s3">　<span class="s1"> <br> <span class="s1"></span></span></span> </span></span></span></span></span></p>

: table head cell	: table data cell 　　rowspan: 单元格竖跨多少行 　　colspan:  单元格横跨多少列（即合并单元格）	: table header