1. Introduction to HTML
HTML (Hypertext Markup Language) is a markup language used to describe web page documents.
HTML markup tags are often called HTML tags (HTML tags). HTML provides many tags, such as paragraph tags, title tags, hyperlink tags, picture tags, etc. What content needs to be defined in the web page can be described with the corresponding HTML tags.
2. HTML structure
1 nbsp;html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 --> 2 <!-- <html>表示文档标签 --> 3 <!-- <head>标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 --> 4 <meta> 5 <!-- 这是注释，不会显示在网页上，注释的内容写在符号之间 --> 6 <title>第一个HTML文件</title><!-- <title>表示该文档的标题 --> 7 8 9 <!-- <body>标签为我们在浏览器中看到的内容 -->10 第一个HTML文件11 12
The content of the comment is written between the symbols , the running effect in the browser is as follows
3.1, tag
tag is located at the front of the document and is used to indicate to the browser which HTML or XHTML standard specification the current document uses. Mainly used as the basis for browsers to parse document tags.
The tag is related to browser compatibility. If you delete , it means that the browser will display the content of the HTML page. At this time, the page may have as many display effects as there are IE6, IE7, IE8, Firefox2, Firefox3, and Chrome, and this is not allowed.
3.2. tag
tag is located after the tag, also called the root tag, which is used to inform the browser It is an HTML document in itself. The tag marks the beginning of the HTML document, and the tag marks the end of the HTML document. Between them is the head and body content of the document. All tags must be written between the two closing tags and . You can set the main language of the current document through the lang attribute to help search engines parse the document. For example: indicates that the current document language is Chinese.
3.3. tag
tag is used to define the head information of the HTML document, also called the head tag, followed by After the tag. The content defined by the
head tag is only provided to the browser and is not used for user presentation. is mainly used to encapsulate other tags located at the head of the document, such as
, <meta>, <link> and <style>, etc., used to describe the title, author and other documents of the document. Relationships etc. <span style="color: #ff00ff; font-size: 16px;">An HTML document can only contain a pair of <head> tags, and the data contained in the header of most documents will not actually be displayed as content on the page. <br/><br/><h4>3.4. <meta> tag<p><meta> tag can provide meta-information about the page, such as for search engines and update frequency. Degree description and keywords. The <p><meta> tag is located at the head of the document and does not contain any content. The <meta> tag's properties define the name/value pairs associated with the document. For example: <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta name="keywords" content="HTML,ASP,PHP,SQL"><p>"keywords" is a frequently used name. It defines a set of keywords for the document. Some search engines use these keywords to classify documents when they encounter them. <br/><br/><h4>3.5. <title> tag <p><title> tag is used to define the title of the HTML page, that is, to give the web page a name and must be located in the <head> ; within the mark. An HTML document can only contain a pair of <title></style>
</title> tags. The content between <title></title> will be displayed in the title bar of the browser window. Its basic grammatical format is as follows: <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><title>网页标题名称</title></pre></div>
<p><span style="font-size: 16px; color: #ff00ff;">The title tag is crucial to the SEO of the website. The quality of the title directly affects the SEO of the website. </span><br><br></p>##3.6. <link> tag<h4></h4>The most commonly used usage of the<link> tag is to link external CSS files,<p></p>
<pre class="brush:php;toolbar:false"><link></pre>
<div class="cnblogs_code"></div>In addition, it can also be used to introduce the icon icon of the website<p></p>
<pre class="brush:php;toolbar:false"><link></pre>
<div class="cnblogs_code">
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7521b8227cc686766ee6725e3c937478-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p> </p>
<h3 id="HTML-content-tag">4. HTML content tag</h3>
<h4 id="Title-tag">4.1. Title tag</h4>
<p>The title tag uses </p>
<h1> - <h6 id="defines-the-largest-heading-h-defines-the-smallest-heading-from-h-h-with-decreasing-importance-relative-to-the-current-document-It-is-recommended-that-the-h-tag-appear-at-most-once-in-the-entire-page-of-course-it-can-be-more-but-it-is-not-conducive-to-search-SEO-span-style-font-size-px-color-ff-ff-Title-tags-are-used-to-reflect-the-importance-of-the-document-content-span-Do-not-use-titles-just-to-produce-bold-or-large-text"> defines the largest heading. <h6> defines the smallest heading, from <h1> - <h6>, with decreasing importance relative to the current document. It is recommended that the h1 tag appear at most once in the entire page (of course it can be more, but it is not conducive to search SEO). <span style="font-size: 16px; color: #ff00ff;">Title tags are used to reflect the importance of the document content</span>. Do not use titles just to produce bold or large text. </h6>
</h1>
</h6>
</h6>
</h1>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p><span style="color: #ff00ff; font-size: 16px;">Note: The browser will automatically add blank lines before and after the title. </span></p>
<h4 id="Paragraph-tags">4.2. Paragraph tags</h4>
<p>Paragraphs are defined through </p>
<p> tags. The p tags will not share a line with each other, but will occupy one or more lines of space. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-5.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p>
<h4 id="Horizontal-line-mark">4.3. Horizontal line mark </h4>
<p>hr tag means inserting a horizontal line in the page, <span style="color: #ff00ff; font-size: 16px;">hr tag is a single tag </span>, No closing tag is required. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-7.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p>
<h4 id="Line-break-tag">4.4. Line break tag</h4>
<p><br> A simple line break character can be inserted, which is also a <span style="font-size: 16px; color: #ff00ff;">single tag</span> , no closing tag is required. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-8.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h4 id="span-tag">4.5. span tag</h4>
<p><span> tag is used to combine inline elements in the document. The span tag can be combined with other span tags Labels share one line. Typically, span tags need to be styled, otherwise they will be indistinguishable from other text on the page. </span></p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-11.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h4 id="div-tag">4.6. div tag </h4>
<p></p>
<div> elements to combine block-level elements so that they can be formatted using styles. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-12.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-13.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h4 id="img-tag">4.7. img tag</h4>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML introductory tutorial" > tag embeds an image into a web page. Technically speaking, <span style="max-width:90%">< The ;img> tag does not insert an image into the web page, but links the image from the web page. The </span><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML introductory tutorial" > tag creates a placeholder space for the referenced image. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML introductory tutorial" > The tag has two required attributes: the src attribute and the alt attribute. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8c3ae83c5f1506f33dad53805cf414a0-15.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h3 id="HTML-advanced-tags">5. HTML advanced tags</h3>
<h4 id="List-tags">5.1. List tags</h4>
<h5 id="Unordered-list">5.1.1.Unordered list</h5>
<p>The unordered list is represented by the ul tag, and the list items are represented by the li tag. <span style="font-size: 16px; color: #ff00ff;">There is no order level between the various list items in the unordered list, they are parallel<span style="color: #ff00ff; font-size: 16px;"></span> </span></p>
<p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8c3ae83c5f1506f33dad53805cf414a0-16.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7f6e465cd7303cd559a16db04ea3d3e0-17.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>5.1.2. Ordered list<h5></h5>The ordered list is represented by the ol tag, and the list items are also represented by the li tag. Each list item<p> is defined in a certain order<span style="max-width:90%"></span></p>
<p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7f6e465cd7303cd559a16db04ea3d3e0-18.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7f6e465cd7303cd559a16db04ea3d3e0-19.png?x-oss-process=image/resize,p_40" class="lazy" alt="">##5.1.3. Customized list</p>
<h5 id="Customized-list-Often-used-to-explain-and-describe-terms-or-nouns-There-are-no-bullets">Customized list Often used to explain and describe terms or nouns. There are no bullets </h5> before the list items of the definition list.<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-20.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-21.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h4 id="Table-tag">5.2. Table tag</h4>
<p>A simple HTML table consists of a table element and one or more tr, th or td elements. The tr element defines the table rows , the th element defines the table header, and the td element defines the table unit. A simple example is as follows: </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-22.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-23.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<h4 id="Form-tag">5.3. Form tag</h4>
<h5 id="Form-tag">5.3.1 , Form tag</h5>
<p>Field tag of the form, used to wrap the content of the entire form. A form is a virtual list for users to submit data to the backend. The form generally consists of text boxes, drop-down lists, radio selections, multi-selects, text fields, etc. The Action attribute is used to specify the address pointed to the backend when the current form is submitted. <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-24.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-25.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p>
<h5 id="Input-tag">5.3.2. Input tag</h5>
<p>The Input tag is a text box, radio selection, multi-selection, button, etc. <span style="font-size: 16px; color: #ff00ff;">Different values of the Type attribute determine the role of the input tag. </span></p>
<p>Text box: text<br>Password box: password<br>Single selection: radio<br>Multiple selection: checkbox<br>Button: button<br>Submit button: submit<br> Reset button: reset<br><br></p>
<p>The checked attribute of the Input tag has only one checked attribute value, and the attribute value can be omitted. In radio buttons and multi-select buttons, it means that this button is selected. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/556c2f5f17f10703365154b3eba3b38d-26.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/556c2f5f17f10703365154b3eba3b38d-27.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p> </p>
<h5 id="Select-tag">5.3.3. Select tag</h5>
<p> The select element can create a single-select or multi-select menu, <select the> tag in the ; element defines the options available in the list. </select></p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-28.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-29.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p>Multipe: It is also a single attribute. There is only one multiple value. Setting this attribute means that the select tag behaves as a list tag. Otherwise, it represents the drop-down list label. </p>
<p> </p>
<h5 id="Text-area-label">5.3.4. Text area label </h5>
<p>Textarea text area label is a label used to enter a large amount of text. The cols of the text field label indicates how many columns of characters can be accommodated. How many rows of data Rows holds. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-30.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-31.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p> </p>
<h5 id="Lable-label">5.3.5, Lable label </h5>
<p>Lable label allows the label to point to when the label text is clicked. The form label gets focus. </p>
<p>Two ways: 1. Use the for attribute to point to the form label; 2. Use the label label to wrap the form label. </p>
<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-32.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-33.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p> </p>
</div>
</div><p>The above is the detailed content of HTML introductory tutorial. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Statement</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><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Related Article<img class="lazy"
data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796800099.html" title="HTML as a Markup Language: Its Function and Purpose" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174525137146935.jpg?x-oss-process=image/resize,p_40" alt="HTML as a Markup Language: Its Function and Purpose" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796800099.html" title="HTML as a Markup Language: Its Function and Purpose" class="phphistorical_Version2_mids_title">HTML as a Markup Language: Its Function and Purpose</a><span class="Articlelist_txts_time">Apr 22, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174499214213783.jpg?x-oss-process=image/resize,p_40" alt="The Future of HTML, CSS, and JavaScript: Web Development Trends" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798320.html" title="The Future of HTML, CSS, and JavaScript: Web Development Trends" class="phphistorical_Version2_mids_title">The Future of HTML, CSS, and JavaScript: Web Development Trends</a><span class="Articlelist_txts_time">Apr 19, 2025 am 12:02 AM</span><p class="Articlelist_txts_p">The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174490615241003.jpg?x-oss-process=image/resize,p_40" alt="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797816.html" title="HTML: The Structure, CSS: The Style, JavaScript: The Behavior" class="phphistorical_Version2_mids_title">HTML: The Structure, CSS: The Style, JavaScript: The Behavior</a><span class="Articlelist_txts_time">Apr 18, 2025 am 12:09 AM</span><p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174481993285664.jpg?x-oss-process=image/resize,p_40" alt="The Future of HTML: Evolution and Trends in Web Design" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797300.html" title="The Future of HTML: Evolution and Trends in Web Design" class="phphistorical_Version2_mids_title">The Future of HTML: Evolution and Trends in Web Design</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174473305338023.jpg?x-oss-process=image/resize,p_40" alt="HTML vs. CSS vs. JavaScript: A Comparative Overview" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796827.html" title="HTML vs. CSS vs. JavaScript: A Comparative Overview" class="phphistorical_Version2_mids_title">HTML vs. CSS vs. JavaScript: A Comparative Overview</a><span class="Articlelist_txts_time">Apr 16, 2025 am 12:04 AM</span><p class="Articlelist_txts_p">The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174464723172609.jpg?x-oss-process=image/resize,p_40" alt="HTML: Is It a Programming Language or Something Else?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796249.html" title="HTML: Is It a Programming Language or Something Else?" class="phphistorical_Version2_mids_title">HTML: Is It a Programming Language or Something Else?</a><span class="Articlelist_txts_time">Apr 15, 2025 am 12:13 AM</span><p class="Articlelist_txts_p">HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174456085285529.jpg?x-oss-process=image/resize,p_40" alt="HTML: Building the Structure of Web Pages" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795665.html" title="HTML: Building the Structure of Web Pages" class="phphistorical_Version2_mids_title">HTML: Building the Structure of Web Pages</a><span class="Articlelist_txts_time">Apr 14, 2025 am 12:14 AM</span><p class="Articlelist_txts_p">HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796795191.html" title="From Text to Websites: The Power of HTML" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/article/001/253/068/174447404295304.jpg?x-oss-process=image/resize,p_40" alt="From Text to Websites: The Power of HTML" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796795191.html" title="From Text to Websites: The Power of HTML" class="phphistorical_Version2_mids_title">From Text to Websites: The Power of HTML</a><span class="Articlelist_txts_time">Apr 13, 2025 am 12:07 AM</span><p class="Articlelist_txts_p">HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.</p></div></div><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></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><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot AI Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>AI-powered app for creating realistic nude photos</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Online AI tool for removing clothes from photos.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Undress images for free</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI clothes remover</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Article</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796783009.html" title="Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/article.html">Show More</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"><h3>Dreamweaver CS6</h3></a><p>Visual web development tools</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1545" title="SAP NetWeaver Server Adapter for Eclipse" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/007/169165990824460.png" src="/static/imghw/default1.png" alt="SAP NetWeaver Server Adapter for Eclipse" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1545" title="SAP NetWeaver Server Adapter for Eclipse" class="phpmain_tab2_mids_title"><h3>SAP NetWeaver Server Adapter for Eclipse</h3></a><p>Integrate Eclipse with SAP NetWeaver application server.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/004/169206588591843.png" src="/static/imghw/default1.png" alt="MantisBT" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1556" title="MantisBT" class="phpmain_tab2_mids_title"><h3>MantisBT</h3></a><p>Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"><h3>Zend Studio 13.0.1</h3></a><p>Powerful PHP integrated development environment</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/510" title="PhpStorm Mac version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="https://img.php.cn/upload/manual/000/000/001/58d377b7b49ae828.jpg" src="/static/imghw/default1.png" alt="PhpStorm Mac version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/510" title="PhpStorm Mac version" class="phpmain_tab2_mids_title"><h3>PhpStorm Mac version</h3></a><p>The latest (2018.2.1) professional PHP integrated development tool</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'"
onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy"
data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Topics</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>7628</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>1389</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/steamdzhmcssmgs" title="What is the format of the account name of steam" class="phpgenera_Details_mainR4_bottom_title">What is the format of the account name of steam</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>89</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>11</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/winactivationkeyper" title="win11 activation key permanent" class="phpgenera_Details_mainR4_bottom_title">win11 activation key permanent</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>70</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>19</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/newyorktimesdailybrief" title="nyt connections hints and answers" class="phpgenera_Details_mainR4_bottom_title">nyt connections hints and answers</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png"
alt="" /><span>31</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png"
alt="" /><span>141</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/faq/zt">Show More</a></div></div></div></div></main><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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><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><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> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</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><script>// 通用函数，用于显示或隐藏元素
function toggleElementsDisplay(className, show) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = show ? "block" : "none";
}
}
// 页面加载完成后执行的主函数
document.addEventListener("DOMContentLoaded", () => {
// 1. 绑定菜单按钮事件
const bindMenuEvents = () => {
const toggleDisplay = (className, show, eventId) => {
const element = document.getElementById(eventId);
if (element) {
element.addEventListener("click", (event) => {
event.preventDefault();
toggleElementsDisplay(className, show);
});
}
};
toggleDisplay("m_editormain12main", true, "fixed_tab_img");
toggleDisplay("m_editormain12main", false, "fixed_tab_topi");
toggleDisplay("m_editormain12main", false, "fixed_tab_close");
toggleDisplay("m_menu", true, "lan1sp");
toggleDisplay("m_menu", false, "m_editormain12main_topi_sp");
toggleDisplay("m_menu_lang", true, "lan1");
toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan");
};
// 2. 绑定滚动链接事件
const bindScrollLinks = () => {
const titleList = document.getElementById("fixed_tab_titlelist");
const menuMain = document.getElementsByClassName("m_editormain12main")[0];
const links = document.querySelectorAll('.fixed_tab_a');
links.forEach(linkElement => {
if (linkElement) {
linkElement.addEventListener("click", async (e) => {
e.preventDefault();
e.stopPropagation();
// 先隐藏菜单
if (menuMain) menuMain.style.display = "none";
if (titleList) titleList.style.display = "none";
// 获取目标元素的 ID
const targetId = linkElement.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
// 等待 DOM 更新
await new Promise(resolve => requestAnimationFrame(resolve));
// 滚动到目标位置
if (targetElement) {
targetElement.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
}
});
};
// 3. 绑定关闭按钮事件
const bindCloseButton = () => {
const closeButton = document.querySelector(".phpgenera_Details_mainR1_close");
const container = document.querySelector(".phpgenera_Details_mainR1");
if (closeButton && container) {
closeButton.addEventListener("click", (event) => {
event.preventDefault();
container.style.display = "none";
});
}
};
// 4. 初始化菜单交互功能
const initMenuInteraction = () => {
const menuGroupElements = document.querySelectorAll('.layui-menu-item-group');
menuGroupElements.forEach(menuItem => {
menuItem.addEventListener('click', function(event) {
if (event.target.closest('.m_menusnames')) {
return;
}
this.classList.toggle('layui-menu-item-down');
this.classList.toggle('layui-menu-item-up');
const subMenuContainer = this.querySelector('.m_menusnames');
const icon = this.querySelector('.layui-icon');
if (subMenuContainer && icon) {
if (this.classList.contains('layui-menu-item-down')) {
subMenuContainer.style.display = 'block';
icon.classList.remove('layui-icon-down');
icon.classList.add('layui-icon-up');
} else {
subMenuContainer.style.display = 'none';
icon.classList.remove('layui-icon-up');
icon.classList.add('layui-icon-down');
}
}
});
});
};
// 5. 初始化 layui 功能
const initLayui = () => {
if (typeof layui !== 'undefined') {
layui.use(function () {
var util = layui.util;
if (util && util.fixbar) {
util.fixbar({
on: {
mouseenter: function (type) {
if (layer && layer.tips) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
}
},
mouseleave: function (type) {
if (layer && layer.closeAll) {
layer.closeAll("tips");
}
},
},
});
}
});
}
};
// 执行所有初始化函数
bindMenuEvents();
bindScrollLinks();
bindCloseButton();
initMenuInteraction();
initLayui();
});
</script></body></html>
