search

Home >Web Front-end >HTML Tutorial >Compilation of front-end HTML knowledge points

Compilation of front-end HTML knowledge points

WBOY
WBOYOriginal
2016-08-22 10:13:58838browse

1. html overview

　htyper text markup language is hypertext markup language

　Hypertext: It means that the page can contain pictures, links, and even non-text elements such as music and programs.

　Markup language: A language composed of marks (labels).　　

Web page == HTML document, parsed by the browser and used for display

Static web pages: static resources, such as xxx.html

Dynamic web pages: HTML code is dynamically generated by a certain development language based on user requests

The following is the tree structure diagram of the html file

　

　The concept of tags:

  • is composed of a pair of words wrapped in angle brackets. For example: *The words in all tags cannot start with a number.
  • Tags are not case-sensitive. and . Lowercase is recommended.
  • The tag is divided into two parts: the start tag and the end tag . The part between the two tags is called the tag body.
  • Some tag functions are relatively simple. Just use one tag. This kind of tag is called a self-closing tag. For example:
  • Tags can be nested. But they cannot be cross-nested.

　 Tag attributes: 　

  • Usually appears in the form of key-value pairs. For example, name="alex"
  • Attributes can only appear in opening tags or self-closing tags.
  • Attribute names are all lowercase. *Attribute values ​​must be wrapped in double quotes or single quotes, for example name="alex"
  • If the attribute value and attribute name are exactly the same, just write the attribute name directly. For example, readonly

2. Introduction to the main tags of head

　

  • The composition of the meta tag: The meta tag has two attributes, which are the http-equiv attribute and the name attribute. Different attributes have different parameter values. These different parameter values ​​realize different web page functions. .

　1 The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used by search engine robots to find information and classify information.

　2 http-equiv, as the name suggests, is equivalent to the file header function of http. It can return some useful information to the browser to help display the web page content correctly and accurately. The corresponding attribute value is content, and the content in content In fact, it is the variable value of each parameter.

//(note the quotation marks at the end, in front of the seconds and after the URL)

  • Oldboy

3. Body tag

Basic tags:

　

　: The value range of n is 1~6; from large to small. Used to represent the title.

　

: Paragraph tag. The wrapped content is wrapped. There is also a blank line between the upper and lower content.

　 : bold label.

　: Add a center line to the text.

　: The text becomes italic.

　 and : superscript and subscript.

　
: Line break.

　

: Horizontal line

　

　　

　　块级标签和内联标签

　　块级标签：

：
　　

　　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 password input box

                                              radio radio button

O Checkbox multi -choice box

                                                                                                                                                                                                                                                                  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

             Button button (needs to be used with js.) What is the difference between button and submit?

件 File submit file: Form forms need to add attribute enable = "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>)
View Code
　
　Name: The key of the form submission item. Note the difference with the id attribute: the name attribute is the name used when communicating with the server; and the id attribute is the name used by the browser. This attribute is mainly for the convenience of client programming, and in
　Used in css and javascript.

value: The value of the form submission item. For different input types, the usage of the value attribute is also different:

　

type="button", "reset", "submit" - Define the text displayed on the button

　 type="text", "password", "hidden" - Define the initial value of the input field

　 type="checkbox", "radio", "image" - defines the value associated with the input

checked: radio and checkbox are checked by default

readonly: read-only. text and password

disabled: works well for all inputs used.

　
: table head cell

        　　 

: table data cell

　　rowspan: 单元格竖跨多少行

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

　　

: table header