HTML 지식 포인트 요약

다음 편집기는 프런트엔드 HTML 지식 포인트에 대한 요약을 제공합니다(권장). 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 에디터와 함께 구경해보세요

1. html 개요

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

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

마크업 언어: 태그(tags)로 구성된 언어

웹 페이지 == HTML 문서, 브라우저에서 구문 분석되어 표시에 사용됨

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

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

다음은 리소스의 트리 구조 다이어그램입니다. html 파일

태그의 개념:

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

• 태그는 대소문자를 구분하지 않습니다.

• 태그는 시작 태그 와 종료 태그 두 부분으로 나누어집니다. 두 태그 사이의 부분을 태그 본문이라고 합니다.

• 일부 태그 기능은 상대적입니다. 간단합니다. 이러한 종류의 태그를 self Closure 및 label이라고 합니다. 예:

---

• 라벨은 중첩될 수 있지만 교차 중첩될 수는 없습니다.

• 일반적으로 키-값 쌍의 형태로 나타납니다. 예를 들어 name="alex"

•속성은 여는 태그나 닫는 태그에만 나타날 수 있습니다.

• 속성 이름은 모두 소문자입니다. *속성 값은 큰따옴표나 작은따옴표로 묶어야 합니다. 예를 들어 name="alex"

•속성 값이 속성 이름과 완전히 동일하면 그냥 씁니다. 예를 들어 readonly

2. 메인 헤드 태그 소개• 메타 태그: 메타 태그에는 http-equiv 속성과 이름 속성이라는 두 가지 속성이 있습니다. 속성마다 매개변수 값이 다릅니다. 매개변수 값은 서로 다른 웹페이지 기능을 구현합니다.

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

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

//(끝 부분에 따옴표가 있습니다. 초 및 URL 뒤)

•

•

3. 본문 태그

기본 태그:

: n의 값 범위는 1~6입니다.

: 단락을 나타내는 데 사용됩니다. 라벨. 상단과 하단 내용 사이에도 공백이 있습니다.

: 굵은 라벨입니다. ;strike>: 텍스트에 중앙선을 추가합니다.

: 텍스트가 기울임꼴로 표시됩니다.

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

: 줄 바꿈.

---

: 가로줄

블록 수준 태그 및 인라인 태그

블록 수준 태그:

인라인 태그: < ;a>_{^{<span></span>}}

블록 요소의 특성

① 항상 새 줄에서 시작합니다. ② 높이, 줄 높이, 여백 및 패딩을 모두 제어할 수 있습니다.

③ 기본 너비는 컨테이너 %의 100입니다. 너비가 지정되지 않은 경우.

④ 它可以容纳内联元素和其他块元素

inline元素的特点

① 和其他元素都在一行上；

② 高，行高及外边距和内边距不可改变；

③ 宽度就是它的文字或图片的宽度，不可改变

④ 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

特殊字符：

< >；"；©®

图形标签：

src: 要显示图片的路径.

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

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

width: 图片的宽

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

超链接标签:　

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

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 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框 

submit 提交按钮           

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

XML/HTML Code复制内容到剪贴板

1. def index(request):   

2.     print request.POST   

3.     print request.GET   

4.     print request.FILES   

5.     for item in request.FILES:   

6.         fileObj = request.FILES.get(item)   

7.  f = 열기(fileObj.name, 'wb')

8.  iter_file = fileObj.chunks()

9. for line in iter_file:

10. f.write(line)

11. f.close()

12. return HttpResponse('ok')

이름: form 제출된 항목의 키입니다. id 속성과의 차이점에 유의하세요. name 속성은 서버와 통신할 때 사용되는 이름이고, id 속성은 주로 클라이언트 프로그래밍의 편의를 위한 것입니다. , 그리고

CSS와 자바스크립트에서 사용됩니다.

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

type="button", "reset", "submit" - 버튼에 정의됨 표시된 텍스트

type="text", "password", "hidden" - 입력 필드의 초기 값 정의

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

선택됨: 라디오 및 확인란이 기본적으로 선택되어 있습니다.

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

비활성화 : 사용된 모든 입력에 적용됩니다.

드롭다운 선택 레이블 속성:

이름: 양식 제출 항목의 키

크기: 옵션 수

multiple: multiple

드롭다운에서 선택한 각 항목의 속성: value: 양식 제출 항목의 값: selected 드롭다운 선택은 다음에 의해 선택됩니다. default

각 항목에 대한 그룹 추가

텍스트 영역 이름: 양식 제출 항목의 키 cols: 기본 행 수 : 기본적으로 텍스트 영역에 포함된 행 수

  Name
 

로그인

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

위 내용은 HTML 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!