Home  >  Article  >  Web Front-end  >  A brief introduction to Html_html/css_WEB-ITnose

A brief introduction to Html_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:032820browse

1. Html --- the abbreviation of hypertext markup language --- hypertext markup language.

What is this technology

What can this technology do

How to use technology well

2. Html is used to make web pages.

  • html refers to hypertext markup language, but it is not a programming language but a markup language
  • A markup language is a set of markup tags
  • html uses markup tags to describe web pages
  • 3. Some html specifications

    Html files have their own specific extensions of: .html, .htm

    Html tags are divided into the following two types:

    Single tags: Single tags are generally used for special meanings, for example:
    means line break,


    horizontal line

    Double labels: Double labels are generally used to encapsulate data and display specific styles, for example: Welcome


    Rules for writing tags

    In HTML, whether it is a single tag or a double tag, it must be closed correctly,

    For any html page, there will be a fixed content:

    Html must use html as the root tag, and then there are head and body tags below. Generally, the title tag and meta tag are written in the head. , where title sets the title content of

    Html page. Meta is used to specify specific attribute information of html page.


    Comments in Html:


    4. Common tags

    HTML tag list
    Mark Type Translation or meaning Function Remarks
    File tags
    File declaration Let the browser know that this is an HTML file
    Start Provide overall information of the file
    </td> <td>●</td> <td>Title</td> <td>Define the file title, which will be displayed at the top of the browser</td> <td> </td> </tr> <tr> <td><BODY></td> <td>●</td> <td>This article</td> <td>Design file format and content location</td> <td> </td> </tr> <tr> <td colspan="5">Typesetting mark</td> </tr> <tr> <td><!--Annotation--></td> <td>○</td> <td> The description tag </td> <td> adds a description to the file but is not displayed </td> <td> </td> </tr> <tr> <td><P></td> <td>○</td> <td>Paragraph mark</td> <td>Leave a blank line between words, pictures, tables, etc.</td> <td> </td> </tr> <tr> <td><BR></td> <td>○</td> <td>Line break mark</td> <td>To display words, pictures, tables, etc. on the next line</td> <td> </td> </tr> <tr> <td><HR> </td> <td>○</td> <td>Horizontal line </td> <td>Insert a horizontal line </td> <td> </td> </tr> <tr> <td><CENTER></td> <td>●</td> <td>Center</td> <td>Let words, pictures, tables, etc. be displayed in the middle</td> <td>Object </td> </tr> <tr> <td><PRE></td> <td>●</td> <td>Default format</td> <td>Display the files according to the source code arrangement</td> <td> </td> </tr> <tr> <td><DIV> ;</td> <td>●</td> <td>Separation mark</td> <td>Set the placement of words, pictures, tables, etc.</td> <td> </td> </tr> <tr> <td> <NOBR> </td> <td><WBR></td> <td>●</td> <td>Recommended fold</td> <td>Default fold location</td> </tr> <tr> <td> </td> <td>Font tag</td> <td> </td> <td><STRONG></td> <td>●</td> </tr>Emphasis <tr> <td colspan="5">Produces font bold Bold Effect</td> </tr> <tr> <td> </td> <td><B></td> <td>●</td> <td>Bold mark</td> <td> produces a bold font Effect</td> </tr> <tr> <td> </td> <td><EM></td> <td>●</td> <td>Emphasis mark</td> <td>The font appears with italic effect</td> </tr> <tr> <td> </td> <td><I></td> <td>●</td> <td>Italic mark</td> <td>The font has an italic effect</td> </tr> <tr> <td> </td> <td><TT></td> <td>●</td> <td>Typing font</td> <td>Courier font, same letter width</td> </tr> <tr> <td> </td> <td><U></td> <td>●</td> <td>Add bottom line</td> <td>Add bottom line</td> </tr>Objection<tr> <td> </td> <td><H1></td> <td>●</td> <td>Level 1 title tag</td> <td>Get thicker, bigger and wider, the degree is inversely proportional to the series</td> </tr> <tr> <td> </td> <td><H2></td> <td>●</td> <td>Secondary title tag</td> <td>Make the font bolder and larger Widen </td> </tr> <tr> <td> </td> <td><H3></td> <td>●</td> <td>Third-level title tag</td> <td>Change the font Thick to large and widened</td> </tr> <tr> <td> </td> <td><H4></td> <td>●</td> <td>Level 4 title tag</td> <td> Make the font thicker, larger and wider </td> </tr> <tr> <td> </td> <td><H5></td> <td>●</td> <td>Level 5 title tag</td> <td>Make the font thicker, larger and wider</td> </tr> <tr> <td> </td> <td><H6></td> <td>●</td> <td>Level 6 title tag </td> <td>Make the font thicker, larger and wider</td> </tr> <tr> <td> </td> <td><FONT></td> <td>●</td> <td>glyph Mark </td> <td>Set font, size, color</td> </tr>Object <tr> <td> </td> <td><BASEFONT></td> <td>○</td> <td> Base glyph tags </td> <td> Set all glyphs, sizes, colors </td> </tr> Oppose <tr> <td> </td> <td><BIG></td> <td>●</td> <td>Enlarge the font size</td> <td>Make the font size slightly larger</td> </tr> <tr> <td> </td> <td><SMALL></td> <td>●</td> <td>Shrink the font size</td> <td>Make the font slightly thinner</td> </tr> <tr> <td> </td> <td><STRIKE></td> <td>●</td> <td>Draw strikethrough</td> <td>Add a strikethrough to the font</td> </tr>Oppose<tr> <td> </td> <td><CODE></td> <td>●</td> <td>Program code</td> <td>The font is slightly wider, such as <TT></td> </tr> <tr> <td></td> </tr> <tr> <td><KBD></td> <td>●</td> <td>Keyboard words</td> <td>The font is slightly wider, single space</td> <td> </td> </tr> <tr> <td><SAMP></td> <td>●</td> <td>Example</td> <td>The font is slightly wider, such as <TT></td> <td> </td> </tr> <tr> <td><VAR></td> <td>●</td> <td>Variable</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><CITE></td> <td>●</td> <td>Biography Quote</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><BLOCKQUOTE> </td> <td>●</td> <td>Quote text block</td> <td>Indented font</td> <td> </td> </tr> <tr> <td><DFN></td> <td>●</td> <td>Predicate definition</td> <td>Italic effect</td> <td> </td> </tr> <tr> <td><ADDRESS></td> <td> ●</td> <td>Address tag</td> <td>italic effect</td> <td> </td> </tr> <tr> <td><SUB></td> <td>●</td> <td>Subscript</td> <td>Index</td> <td> </td> </tr> <tr> <td><SUP></td> <td>●</td> <td>Subscript </td> <td>Subscript </td> <td> </td> </tr> <tr> <td colspan="5">List tag</td> </tr> <tr> <td><OL></td> <td>●</td> <td>Sequential list</td> <td>The list items will be arranged in numerical and alphabetical order</td> <td> </td> </tr> <tr> <td><UL></td> <td>●</td> <td>Unordered list</td> <td>List items will be arranged in dots</td> <td> </td> </tr> <tr> <td><LI></td> <td>○</td> <td>Checklist items</td> <td>Each tag identifies a checklist item</td> <td> </td> </tr> <tr> <td><MENU></td> <td>●</td> <td>Menu list</td> <td>The list items will be arranged in dots, such as <UL></td> <td>Objection</td> </tr> <tr> <td> <DIR> </td> <td> </td><DL><td> </td>●<td> </td>Definition list<td> </td>The list appears in two levels</tr> <tr> <td> </td> <td> </td><DT><td> </td>○<td> </td>Definition entry<td> </td>Title indicating the definition</tr> <tr> <td> </td> <td> </td><DD><td> </td>○<td> </td>Definition content<td> </td>Mark definition content</tr> <tr> <td> </td> <td> </td>Table mark<td> </td> <td> </td><TABLE><td> </td>●</tr> <tr>Table mark<td colspan="5"> </td>Set the parameters of the table</tr> <tr> <td> </td> <td> </td><CAPTION><td> </td>●<td> </td>Table title<td> </td>Make a dozen columns to fill in Table title </tr> <tr> <td> </td> <td> </td><TR><td> </td>●<td> </td>Table columns<td> </td>Set the table Column</tr> <tr> <td> </td> <td> </td><TD><td> </td>●<td> </td>Table Column<td> </td>Set the columns of the table </tr> <tr> <td> </td> <td> </td><TH><td> </td>●<td> </td>Table header<td> </td>equal to <TD> , but the font inside will become bold</tr> <tr> <td> </td> <td> </td>Form mark<td> </td> <td> </td><FORM><td> </td>●</tr> <tr>Form tags<td colspan="5"> </td>Determine the operation mode of a single form</tr> <tr> <td> </td> <td> </td><TEXTAREA><td> </td> ●<td> </td>Text block<td> </td>Provide text boxes for inputting larger amounts of text</tr> <tr> <td> </td> <td> </td><INPUT><td> </td>○<td> </td>Input mark<td> </td>Determine the input form</tr> <tr> <td> </td> <td> </td><SELECT><td> </td>● <td> </td>Select mark<td> </td>Create pop-up scrolling list</tr> <tr> <td> </td> <td> </td><OPTION><td> </td>○ <td> </td>Options<td> </td>Each mark indicates an option </tr> <tr> <td> </td> <td> </td>Graphic mark<td> </td> <td> </td><IMG><td> </td>○</tr> <tr>Graphic mark<td colspan="5"> </td> is used to insert graphics and set graphic properties</tr> <tr> <td> </td> <td> </td>Link tag<td> </td> <td> </td><A><td> </td>●</tr> <tr>Link tag<td colspan="5"> </td>Add link</tr> <tr> <td> </td> <td> </td><BASE><td> </td>○<td> </td>Benchmark tag<td> </td>Can convert relative URL to absolute and specify the link target</tr> <tr> <td> </td> <td> </td>Frame tag<td> </td> <td> </td><FRAMESET><td> </td>●</tr> <tr>Frame Set<td colspan="5"> </td>Set the frame</tr> <tr> <td> </td> </tr> <tr> <td><FRAME></td> <td>○</td> <td>框窗设定</td> <td>设定框窗</td> <td> </td> </tr> <tr> <td><IFRAME></td> <td>○</td> <td>页内框架</td> <td>于网页中间插入框架</td> <td>IE</td> </tr> <tr> <td><NOFRAMES></td> <td>●</td> <td>不支援框架</td> <td>设定当浏览器不支援框架时的提示</td> <td> </td> </tr> <tr> <td colspan="5">影像地图</td> </tr> <tr> <td><MAP></td> <td>●</td> <td>影像地图名称</td> <td>设定影像地图名称</td> <td> </td> </tr> <tr> <td><AREA></td> <td>○</td> <td>连结区域</td> <td>设定各连结区域</td> <td> </td> </tr> <tr> <td colspan="5">多媒体</td> </tr> <tr> <td><BGSOUND></td> <td>○</td> <td>背景声音</td> <td>于背景播放声音或音乐</td> <td>IE</td> </tr> <tr> <td><EMBED></td> <td>○</td> <td>多媒体</td> <td>加入声音、音乐或影像</td> <td> </td> </tr> <tr> <td colspan="5">其他标记</td> </tr> <tr> <td><MARQUEE></td> <td>●</td> <td>走动文字</td> <td>令文字左右走动</td> <td>IE</td> </tr> <tr> <td><BLINK></td> <td>●</td> <td>闪烁文字</td> <td>闪烁文字</td> <td>NC</td> </tr> <tr> <td><ISINDEX></td> <td>○</td> <td>页内寻找器</td> <td>可输入关键字寻找于该一页</td> <td>反对</td> </tr> <tr> <td><META></td> <td>○</td> <td>开头定义</td> <td>让浏览器知道这是 HTML 文件</td> <td> </td> </tr> <tr> <td><LINK></td> <td>○</td> <td>关系定义</td> <td>定义该文件与其他 URL 的关系</td> <td> </td> </tr> <tr> <td colspan="5">StyleSheet</td> </tr> <tr> <td><STYLE></td> <td>●</td> <td>样式表</td> <td>控制网页版面</td> <td> </td> </tr> <tr> <td><span></td> <td>●</td> <td>自订标记</td> <td>独立使用或与样式表同用</td> <td> </td> </tr> </table> <p>注: </p> <li>● 表示该标记属围堵标记,即需要关闭标记如 </标记>。 </li> <li>○ 表示该标记属空标记,即不需要关闭标记。 </li> <li>IE 表示该标记只适用于 Internet Explorer。 </li> <li>NC 表示该标记只适用于 Netscape Communicator。 </li> <li>反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。 </li> <li>弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。 </li> <li>新 表示该标记是 HTML 4.0 中新增的。 </li> <br> <p><strong>5、html的一些特殊符号</strong></p> <p><strong></strong></p> <p>只要你认识了 HTML 标记,你便会知道特殊字符的用处。 </p> <table> <tr> <td>HTML 原始码</td> <td>显示结果</td> <td>描述</td> </tr> <tr> <td><</td> <td><</td> <td>小於号或显示标记</td> </tr> <tr> <td>></td> <td>></td> <td>大於号或显示标记</td> </tr> <tr> <td>&</td> <td>&</td> <td>可用於显示其它特殊字符</td> </tr> <tr> <td>"</td> <td>"</td> <td>引号</td> </tr> <tr> <td>®</td> <td>?</td> <td>己注册</td> </tr> <tr> <td>©</td> <td>?</td> <td>版权</td> </tr> <tr> <td>™</td> <td>?</td> <td>商标</td> </tr> <tr> <td> </td> <td> </td> <td>半方大的空白</td> </tr> <tr> <td> </td> <td> </td> <td>全方大的空白</td> </tr> <tr> <td> </td> <td> </td> <td>不断行的空白</td> </tr> </table> <p></p> <p><br> </p> <p><strong>6. Introduction to commonly used tags</strong></p> <p></p> <p>1), font tag: </p> <p><FONT> is applied to the content part of the file, that is, the position between <BODY> and </BODY>. It only affects the marked words and sentences, and is a containment mark. </p> <p></p> <p><FONT> Parameter settings: Example: <font face="Arial" size=" 2" color="#008000">Creation of Webpage</font> ; face="Arial" sets the font style of the text. Arial is a commonly used one. Please do not use glyphs other than Window’s built-in glyphs. For Chinese web pages that are not set to Gb2312 Encoding, Netscape Net vigator will not display any Chinese glyphs specified by this tag. size=" 2" sets the size of the text. The value can be absolute or relative. Absolute means that the mark determines the size of the text by itself and is not affected by <BASEFONT>. </p> <p>For example, size="5" means that the size is 5, and html The default value is 3, that is, size="3" is the same as not being set. Relative means to increase or decrease the size series based on the default value of 3. For example, size=" 2" is equivalent to size="5" in absolute representation, but if <BASEFONT size="n" has been set > Then its actual size is n 2 and is no longer 3 2. <BASEFONT>Absolute notation only. color="#008000" sets the color of the text. #008000 means green </p> <p><br> </p> <p>2), img tag </p> <p><img> is mainly used to insert pictures into web pages </p> <p><br> </p> <p>General parameter settings for<IMG>: </p> <p>For example, <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align ="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> </p> <li>src="logo.gif" <br> Image source, accepts .gif, .jpg and .png formats , the former two have been popular for a long time, and the latter began to develop in 1996 and will replace the former two in the future. If the image file is in the same directory as the html file, only the file name must be written. Otherwise, the correct path must be added, either relative or absolute. </li> <li>width=100 height=100 <br> Set the image size. The width and height are generally in pixels. Usually only set to the actual size of the picture to avoid distortion. If you want to change the size of the picture, it is best to use an image editing tool in advance. </li> <li>hspace=5 vspace=5 <br> Set the edge of the image to be blank to prevent text or other images from being too close. hspace is to set the space around the image, vspace is to set the space above and below the image, and the height is in pixels. </li> <li>border=2 <br> Image border thickness. </li> <li>align="top" <br> Adjust the position of the text next to the picture. You can control the text to appear at the top, middle, bottom, left and right of the picture, etc. Optional values: top, middle, bottom, left, right, default is bottom. Netscape also supports texttop, baseline, absmiddle, absbottom. <br> texttop means that the picture and text are paired according to the top line. <br> baseline means that the picture is paired to the bottom line of the current text line. <br> absmiddle means that the picture is paired to the current text line. In the center, <br> absbottom indicates the absolute bottom of the image to the current line of text (the absolute bottom means that it takes into account the lower edge of words such as y, g, q, etc.). </li> <li>alt="Logo of PenPal Garden" <br> This is the text used to describe the graphic. If the user uses a text browser, since images are not supported, these texts will be displayed instead of the image. If the browser supports image display, the text will also be displayed when the mouse is moved over the image. </li> <li>lowsrc="pre_logo.gif" <br> Set to display the low-resolution image first. If a large image is added and the download time is very long, the low-resolution image will be displayed first. To avoid losing interest in browsing, it is usually a grayscale version of the original image. </li> <p class="sycode"> <br> </p> <p class="sycode"> 3), table tag </p> <p class="sycode"> <br> </p> <p class="sycode"> <TABLE> is a container tag, which means it is used to Declares that this is a table and that other table tags are only applicable within its scope. There are other container tags. <br> <TR> Used to mark table columns (rows) <br> <TD> Used to mark cells (cells) </p> <p><TABLE> Parameter settings (commonly used): <br> For example: <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="# FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> </p> <p></p> <li>width="400" <br> Table width, accept absolute value (such as 80 ) and relative values ​​(such as 80%). <p></p> </li> <li>border="1" <br> Table border thickness. Different browsers have different default values, so please specify. <p></p> </li> <li>cellspacing="2" <br> Table grid thickness, please see example 3, that is a grid thickened to 5. <p></p> </li> <li>cellpadding="2" <br> For the distance between the text and the grid, please see Example 4, that is the padding added to 10. <p></p> </li> <li>align="CENTER" <br> The placement position of the table (horizontal), the optional values ​​are: left, right, center, please see example 5 or 6, the table is It is placed in the middle because some browsers do not support it, so the center mark <CENTER> is added. It is just a multi-layered guarantee. Of course, only <CENTER> can also be used. <p></p> </li> <li>valign="TOP". <br> The position (vertical) of the placement of calligraphy and painting in the table. Optional values ​​are: top, middle, bottom. <p></p> </li> <li>background="myweb.gif" <br> Form paper, do not use it with bgcolor. <p></p> </li> <li>bgcolor="#0000FF" <br> Table background color, do not use it with background. Please see Example 6. <p></p> </li> <li>bordercolor="#FF00FF" <br> Table border color, NC and IE have different effects, please see Example 6. <p></p> </li> <li>bordercolorlight="#00FF00" <br> The color of the light facing part of the table border, please see example 2. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#00FFFF" <br> The color of the backlight part of the table border, please see example 2. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 <p></p> </li> <li>cols="2" <br> The number of table fields just allows the browser to draw the entire table before downloading the table. </li> <p><TR> Parameter settings (commonly used): <br> For example: <tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight= "#808080" bordercolordark="#FF0000"> </p> <li>align="RIGHT" <br> The position (horizontal) of placing calligraphy and painting in this column. Optional values ​​are: left, center, right . <p></p> </li> <li>valign="MIDDLE" <br> The position (vertical) of the placement of calligraphy and painting in this column. Optional values ​​are: top, middle, bottom. <p></p> </li> <li>bgcolor="#0000FF" <br> For the background color of this column, please see Example 5. <p></p> </li> <li>bordercolor="#FF00FF" <br> For the border color of this column, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolorlight="#808080" <br> For the color of the light-facing part of the border in this column, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#FF0000" <br> The color of the backlight part of the border of this column, please see example 3. When using bordercolorlight or bordercolordark, bordercolor will be invalid. 『Only applicable to IE』 </li> <p><TD> Parameter settings (commonly used): <br> For example: <td width="48%" height="400" colspan="5" rowspan= "4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> </p> <li>width="48%" <br> This cell width accepts absolute values ​​(such as 80) and relative values ​​(such as 80%). <p></p> </li> <li>height="400" <br> The height of the cell. <p></p> </li> <li>colspan="5" <br> The number of columns that this cell opens to the right. Please see Example 6 <p></p> </li> <li>rowspan="4" <br> The number of columns that this cell opens downwards. Please see Example 6 <p></p> </li> <li>align="RIGHT" <br> The position (horizontal) of the placement of calligraphy and painting in this cell. The optional values ​​are: left, center, right . <p></p> </li> <li>valign="BOTTOM" <br> The position (vertical) of the placement of calligraphy and painting in this cell. Optional values ​​are: top, middle, bottom. <p></p> </li> <li>bgcolor="#FF00FF" <br> For the background color of this cell, please see Example 4. <p></p> </li> <li>bordercolor="#808080" <br> For the cell border color, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolorlight="#FF0000" <br> The color of the light-facing part of the cell border, please see Example 3. 『Only applicable to IE』 <p></p> </li> <li>bordercolordark="#00FF00" <br> The color of the backlight part of the cell border. Please see Example 3. When using bordercolorlight or bordercolordark, bordercolor will Invalid. 『Only applicable to IE』 <p></p> </li> <li>background="myweb.gif" <br> This grid paper can be used with either bgcolor. </li> <br> <p class="sycode"> 4), hyperlink </p> <p class="sycode"> <br> </p> <p class="sycode"> <A> is called a link tag, consisting of <A> and </A> ; The surrounding text, pictures, etc. can become a link. General parameter settings for </p> <p><A>: </p> <p>For example <a href="index.html" name="hello" target="_top"> </p> <li>href="index.html" <br> This parameter cannot be used together with another parameter name. Use this parameter to create a clickable link. </li> <li> <strong>When used as an external link: </strong> href is set to the file name to which the link is to be linked. If the file is not in the same directory as the html file, please add the appropriate The path can be relative or absolute. </li> <li> <strong> When used as an internal link: </strong> href is set to the reference point in the same document or the reference point of the specified document to which the link is to be connected, and do not surround any calligraphy and painting and only add Just add the closing tag </a>, such as <a href="#there"></a> , <a href="index.html#there"></a> and < ;a href="http://www.school.net.hk/~chris55/index.html#there"></a> where there is the reference point, and the symbol # is added in front of it. Identification, the reference point is pre-buried in the file by the next parameter name. </li> <p></p> <li>name="hello" <br> This parameter is used to bury the reference point for the file. It will be linked and will not be displayed. So to create an internal link, use the <A> link tag twice. One uses the parameter name to bury a reference point in the file in advance, and the other uses the parameter href to connect to this reference point. <p></p> </li> <li>target="_top" <br> Set the window to be displayed when the link is clicked. Optional values ​​are: _blank, _parent, _self, _top, frame window name. <p></p> </li> <li>target="frame name" <br> This only applies to the frame. If set, the link result will be displayed in the frame window of the "frame name". The frame window name is pre-named by the frame tag. </li> <li>target="_blank" or target="new" <br> Open the linked screen content in a new browsing window. </li> <li>target="_parent" <br> Treat the linked screen content as the previous screen of the document. </li> <li>target="_self" <br> Display the linked screen content in the current window. (Default) </li> <li>target="_top" <br> Display the content of the screen linked in the frame in a window without a frame. (That is, the frame is removed) </li> 5), form tag <p class="sycode"> <br> </p> <p class="sycode"> <FORM> is called a form tag, which is used to declare that this is a form mode and belongs to a container tag , indicating that other form tags need to be surrounded by it to be effective, <INPUT> is one of them, used to set various methods of inputting data. It is an empty tag. </p> <p><FORM> Parameter settings (commonly used): <br> For example: <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> ; </p> <li>action="http://your.isp.com/cgi-local/example.cgi" <br> The form is usually used with CGI, and the parameter action is used to specify the CGI program position so that the information filled in this form can be correctly transmitted to CGI for processing. If there is no CGI for testing, you can set this parameter to ACTION="mailto:your@email.com" so that the information filled in the form will be sent to this email address (red part). </li> <li>method="POST" <br> The method of transmitting data to CGI. The optional values ​​are POST and GET. You just need to remember that POST allows the transmission of large amounts of data, but GET only accepts data less than 1K, so if you have seen other people's form source code, you will find that the application form uses POST and the search engine uses GET . </li> <p><INPUT> Parameter settings (commonly used): <br> Because its first parameter type has many choices, and different choices represent different input methods, and other parameters also accordingly Different input methods and other parameter settings will be introduced separately below. </p> <li>type="Text" <br> Optional values ​​are Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, Button. </li> <br> <p class="sycode"> <br> </p> </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose" href="http://m.php.cn/faq/274007.html">CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose</a></span><span>Next article:<a class="dBlack" title="CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose" href="http://m.php.cn/faq/274009.html">CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><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>