A brief introduction to Html_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:03
Original
2821 people have browsed it

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> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels:</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=html简单介绍" target="_blank">Html简单介绍</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source:php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/faq/274007.html" title="CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose"> <span>Previous article:CSS Journey--The Third Stop Powerful Pseudo-Selector_html/css_WEB-ITnose</span> </a> <a href="http://www.php.cn/faq/274009.html" title="html element forces no line breaks_html/css_WEB-ITnose"> <span>Next article:html element forces no line breaks_html/css_WEB-ITnose</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Statement of this Website</div> <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 class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Articles by Author</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796639331.html">What is a NullPointerException, and how do I fix it?</a> </div> <div>2024-10-22 09:46:29</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796629482.html">From Novice to Coder: Your Journey Begins with C Fundamentals</a> </div> <div>2024-10-13 13:53:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796628545.html">Unlocking Web Development with PHP: A Beginner's Guide</a> </div> <div>2024-10-12 12:15:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627928.html">Demystifying C: A Clear and Simple Path for New Programmers</a> </div> <div>2024-10-11 22:47:31</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627806.html">Unlock Your Coding Potential: C Programming for Absolute Beginners</a> </div> <div>2024-10-11 19:36:51</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627670.html">Unleash Your Inner Programmer: C for Absolute Beginners</a> </div> <div>2024-10-11 15:50:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627643.html">Automate Your Life with C: Scripts and Tools for Beginners</a> </div> <div>2024-10-11 15:07:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627620.html">PHP Made Easy: Your First Steps in Web Development</a> </div> <div>2024-10-11 14:21:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627574.html">Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity</a> </div> <div>2024-10-11 12:59:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/faq/1796627539.html">The Key to Coding: Unlocking the Power of Python for Beginners</a> </div> <div>2024-10-11 12:17:31</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Latest Issues</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176386.html" target="_blank" title="How to solve the mysterious white space at the bottom of the page in CSS" class="wdcdcTitle">How to solve the mysterious white space at the bottom of the page in CSS</a> <a href="http://www.php.cn/wenda/176386.html" class="wdcdcCons">I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 20:22:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>454</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176342.html" target="_blank" title="Open calculation documents using window.open() and data: scheme" class="wdcdcTitle">Open calculation documents using window.open() and data: scheme</a> <a href="http://www.php.cn/wenda/176342.html" class="wdcdcCons">I have a web page that runs in a browser that generates a calculated HTML document that I ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-06 15:06:34</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>378</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176209.html" target="_blank" title="Replace www in URL with wildcard subdomain" class="wdcdcTitle">Replace www in URL with wildcard subdomain</a> <a href="http://www.php.cn/wenda/176209.html" class="wdcdcCons">Is there a way to replace www.domain.com/new-mexico/albuquerque/businessname-513526.html w...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-04 19:28:30</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>344</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176200.html" target="_blank" title="Need a jquery script to move selected options from a select box based on the end user's current selection" class="wdcdcTitle">Need a jquery script to move selected options from a select box based on the end user's current selection</a> <a href="http://www.php.cn/wenda/176200.html" class="wdcdcCons">I have an HTML page where the end user can rank our items via a select box element. See th...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-04 18:40:04</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>3528</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/wenda/176135.html" target="_blank" title="Error in pasting clipboard data API functionality in javascript Uncaught TypeError: Cannot read properties of undefined (reading 'getData')" class="wdcdcTitle">Error in pasting clipboard data API functionality in javascript Uncaught TypeError: Cannot read properties of undefined (reading 'getData')</a> <a href="http://www.php.cn/wenda/176135.html" class="wdcdcCons">The Html button code is as follows, I tried the simple onclick function on the button and ...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> From 2024-04-04 10:23:52</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>335</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Related Topics</div> <a href="http://www.php.cn/faq/zt" target="_blank">More> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/laravelsydsjm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212120488227.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the design patterns used by laravel?" /> </a> <a target="_blank" href="http://www.php.cn/faq/laravelsydsjm" class="title-a-spanl" title="What are the design patterns used by laravel?"><span>What are the design patterns used by laravel?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/jthsypthsdqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213513091270.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between arrow functions and ordinary functions" /> </a> <a target="_blank" href="http://www.php.cn/faq/jthsypthsdqb" class="title-a-spanl" title="The difference between arrow functions and ordinary functions"><span>The difference between arrow functions and ordinary functions</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/yxdzssmzmt"><img src="https://img.php.cn/upload/subject/202407/22/2024072211500515702.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is the email address and how to fill it in?" /> </a> <a target="_blank" href="http://www.php.cn/faq/yxdzssmzmt" class="title-a-spanl" title="What is the email address and how to fill it in?"><span>What is the email address and how to fill it in?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/nvidiakzmbzmx"><img src="https://img.php.cn/upload/subject/202407/22/2024072212261621677.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to download nvidia control panel" /> </a> <a target="_blank" href="http://www.php.cn/faq/nvidiakzmbzmx" class="title-a-spanl" title="How to download nvidia control panel"><span>How to download nvidia control panel</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/ipvqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214294212690.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between ipv4 and ipv6" /> </a> <a target="_blank" href="http://www.php.cn/faq/ipvqb" class="title-a-spanl" title="The difference between ipv4 and ipv6"><span>The difference between ipv4 and ipv6</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/ljcrhxpython"><img src="https://img.php.cn/upload/subject/202407/22/2024072213551364803.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to learn python programming from scratch" /> </a> <a target="_blank" href="http://www.php.cn/faq/ljcrhxpython" class="title-a-spanl" title="How to learn python programming from scratch"><span>How to learn python programming from scratch</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/pythonhjblbz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214252616529.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Configuration of python environment variables" /> </a> <a target="_blank" href="http://www.php.cn/faq/pythonhjblbz" class="title-a-spanl" title="Configuration of python environment variables"><span>Configuration of python environment variables</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/faq/dnczxtff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213220024753.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to reinstall the computer system" /> </a> <a target="_blank" href="http://www.php.cn/faq/dnczxtff" class="title-a-spanl" title="How to reinstall the computer system"><span>How to reinstall the computer system</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Popular Recommendations</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does url mean?" href="http://www.php.cn/faq/418772.html">What does url mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What does DOM mean?" href="http://www.php.cn/faq/414303.html">What does DOM mean?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to change image size" href="http://www.php.cn/faq/414252.html">How to change image size</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to make font bold in HTML" href="http://www.php.cn/faq/414520.html">How to make font bold in HTML</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set the size of html images" href="http://www.php.cn/faq/475145.html">How to set the size of html images</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Popular Tutorials</div> <a target="_blank" href="http://www.php.cn/course.html">More> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div>1415755 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="http://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div>4254772 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div>2465017 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div>502840 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP zero-based introductory tutorial" href="http://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div>843173 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a> <div class="wzrthreerb"> <div >1415755 times of learning</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div >2465017 times of learning</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div >502840 times of learning</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Quick introduction to web front-end development" href="http://www.php.cn/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div >215191 times of learning</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Master PS video tutorials from scratch" href="http://www.php.cn/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div >874396 times of learning</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Node.js quick start" href="http://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div >6161 times of learning</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="http://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div >4722 times of learning</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go language practical GraphQL" href="http://www.php.cn/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div >4056 times of learning</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="http://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div >605 times of learning</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="http://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div >20637 times of learning</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Latest Downloads</div> <a href="http://www.php.cn/xiazai">More> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">Web Effects <div></div></div> <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div> <div class="swiper-slide" data-id="threef">Website Materials<div></div></div> <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery enterprise message form contact code" href="http://www.php.cn/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 music box playback effects" href="http://www.php.cn/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 cool particle animation navigation menu special effects" href="http://www.php.cn/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery visual form drag and drop editing code" href="http://www.php.cn/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS imitation Kugou music player code" href="http://www.php.cn/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Classic html5 pushing box game" href="http://www.php.cn/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery scrolling to add or reduce image effects" href="http://www.php.cn/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 personal album cover hover zoom effect" href="http://www.php.cn/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3078" target="_blank" title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3077" target="_blank" title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3076" target="_blank" title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3075" target="_blank" title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3074" target="_blank" title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3073" target="_blank" title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3072" target="_blank" title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/sucai/3071" target="_blank" title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8328" target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8327" target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8326" target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8325" target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8324" target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8323" target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8322" target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/xiazai/code/8321" target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项,自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/about/xieyi.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="http://www.php.cn/about/yinsi.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="http://www.php.cn/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">php.cn:Public welfare online PHP training,Help PHP learners grow quickly!</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1730411109"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>