HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting

黄舟

Mar 16, 2017 pm 03:33 PM

elementAttributesformat

HTML element

## The element refers to all code from the start tag to the end tag .

Start (open) tagElement contentEnd (close) tag

this is my web page## An HTML element without content is called is an empty element. Empty elements are closed in the opening tag.

is an empty element without a closing tag (
tag definition wraps).

In XHTML,

XML

, and future versions of HTML, all elements must be closed. Adding a slash in the opening tag, such as
, is the correct way to close an empty element, and is accepted by HTML, XHTML, and XML.

Even though
is valid in all browsers, using
is actually a longer-term guarantee.

HTML element syntax

## The content of element

is the content between the start tag and the end tag

Empty elements are closed in the opening tag

Most HTML elements can have

attributes

Nested HTML elements

Most HTML elements can be nested

<p>Hello world, <a>找度娘</a></p>

HTML attributes 1. Tags can have attributes to provide more information for elements

2. Attributes appear in the form of key-value pairs, such as: href = "www.cnblogs. www/winsoncheung"

3. Commonly used tag attributes:

#　　:target specifies where to open the connection

4. Common attributes:

class

Specifies the class name of the element

Specifies the unique ID of the element

style Specify the style of the element

title Specify the additional information of the element

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <!--id规定元素唯一ID-->
    <title id="1223">基础</title>
    <!--style规定元素的样式-->
    <style type="text/css"></style></head><body bgcolor="#5f9ea0">
    <h1 id="标题">标题1</h1>
    <a href="index02.html" target="_blank">打开本地</a>
    <!--class规定元素类名-->
    <h2 id="标题">标题2</h2></body></html>

HTML格式化

文本格式化标签:

标签	描述
	定义粗体文本。
	定义大号字。
	定义着重文字。
	定义斜体字。
all>	定义小号字。
	定义加重语气。
	定义下标字。
	定义上标字。
	定义插入字。
	定义删除字。
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用样式（style）代替。

“计算机输出”标签:

标签	描述
	定义计算机代码。
	定义键盘码。
	定义计算机代码样本。
	定义打字机代码。
	定义变量。
	定义预格式文本。
listing>	不赞成使用。使用代替。
</plaintext></td> <td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</pre> </td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><xmp></xmp></td> <td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</pre> </td> </tr> </tbody></table> <p style="margin-left: 30px; text-align: left;"><a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a>、引用和术语定义</p> <table style="margin-left: 30px; height: 261px; width: 331px"><tbody style="margin-left: 30px"> <tr style="margin-left: 30px" class="firstRow"> <th style="margin-left: 30px">标签</th> <th style="margin-left: 30px">描述</th> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><abbr></abbr></td> <td style="margin-left: 30px">定义缩写。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><acronym></acronym></td> <td style="margin-left: 30px">定义首字母缩写。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><address></address></td> <td style="margin-left: 30px">定义地址。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><bdo></bdo></td> <td style="margin-left: 30px">定义文字方向。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><blockquote></blockquote></td> <td style="margin-left: 30px">定义长的引用。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><q></q></td> <td style="margin-left: 30px">定义短的引用语。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><cite></cite></td> <td style="margin-left: 30px">定义引用、引证。</td> </tr> <tr style="margin-left: 30px"> <td style="margin-left: 30px"><dfn></dfn></td> <td style="margin-left: 30px">定义一个定义项目。</td> </tr> </tbody></table> <p style="margin-left: 30px; text-align: left;"> 代码示例:</p><pre class='brush:php;toolbar:false;'><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title id="1223">格式化</title></head><body> <b>My name is Winson</b> <br/> <big>Welcome to my blog~</big> <br/> <i>Hello, visitor!</i> <br/> <small>我很小, 你看不见看不见</small> <br/> <strong>太显眼了</strong> <br/> 大家好<sub>欢迎</sub>来到 <br/> 大家好<sup>欢迎</sup>来到 <br/> <ins>Come on! girls!</ins> <br/> <del>Hei! girl!</del></body></html></pre><p style="text-align: left;"><br></p> </td></tr> </tbody></table><p>The above is the detailed content of HTML5 study notes (2) - detailed introduction to elements, attributes, and formatting. 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/1796800095.html" title="HTML5 and H5: Understanding the Common Usage" 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/174525130290661.jpg?x-oss-process=image/resize,p_40" alt="HTML5 and H5: Understanding the Common Usage" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796800095.html" title="HTML5 and H5: Understanding the Common Usage" class="phphistorical_Version2_mids_title">HTML5 and H5: Understanding the Common Usage</a><span class="Articlelist_txts_time">Apr 22, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796799447.html" title="HTML5: The Building Blocks of the Modern Web (H5)" 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/174516510279313.jpg?x-oss-process=image/resize,p_40" alt="HTML5: The Building Blocks of the Modern Web (H5)" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796799447.html" title="HTML5: The Building Blocks of the Modern Web (H5)" class="phphistorical_Version2_mids_title">HTML5: The Building Blocks of the Modern Web (H5)</a><span class="Articlelist_txts_time">Apr 21, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798868.html" title="H5 Code: Writing Clean and Efficient HTML5" 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/174507877285589.jpg?x-oss-process=image/resize,p_40" alt="H5 Code: Writing Clean and Efficient HTML5" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798868.html" title="H5 Code: Writing Clean and Efficient HTML5" class="phphistorical_Version2_mids_title">H5 Code: Writing Clean and Efficient HTML5</a><span class="Articlelist_txts_time">Apr 20, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798343.html" title="H5: How It Enhances User Experience on the Web" 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/174499251279316.jpg?x-oss-process=image/resize,p_40" alt="H5: How It Enhances User Experience on the Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798343.html" title="H5: How It Enhances User Experience on the Web" class="phphistorical_Version2_mids_title">H5: How It Enhances User Experience on the Web</a><span class="Articlelist_txts_time">Apr 19, 2025 am 12:08 AM</span><p class="Articlelist_txts_p">H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797806.html" title="Deconstructing H5 Code: Tags, Elements, and Attributes" 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/174490596269472.jpg?x-oss-process=image/resize,p_40" alt="Deconstructing H5 Code: Tags, Elements, and Attributes" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797806.html" title="Deconstructing H5 Code: Tags, Elements, and Attributes" class="phphistorical_Version2_mids_title">Deconstructing H5 Code: Tags, Elements, and Attributes</a><span class="Articlelist_txts_time">Apr 18, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797288.html" title="Understanding H5 Code: The Fundamentals of HTML5" 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/174481968244816.jpg?x-oss-process=image/resize,p_40" alt="Understanding H5 Code: The Fundamentals of HTML5" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797288.html" title="Understanding H5 Code: The Fundamentals of HTML5" class="phphistorical_Version2_mids_title">Understanding H5 Code: The Fundamentals of HTML5</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:08 AM</span><p class="Articlelist_txts_p">HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796859.html" title="H5 Code: Best Practices for Web Developers" 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/174473367234243.jpg?x-oss-process=image/resize,p_40" alt="H5 Code: Best Practices for Web Developers" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796859.html" title="H5 Code: Best Practices for Web Developers" class="phphistorical_Version2_mids_title">H5 Code: Best Practices for Web Developers</a><span class="Articlelist_txts_time">Apr 16, 2025 am 12:14 AM</span><p class="Articlelist_txts_p">Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796796246.html" title="H5: The Evolution of Web Standards and Technologies" 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/174464717269380.jpg?x-oss-process=image/resize,p_40" alt="H5: The Evolution of Web Standards and Technologies" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796796246.html" title="H5: The Evolution of Web Standards and Technologies" class="phphistorical_Version2_mids_title">H5: The Evolution of Web Standards and Technologies</a><span class="Articlelist_txts_time">Apr 15, 2025 am 12:12 AM</span><p class="Articlelist_txts_p">Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.</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/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/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/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/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 class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" 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/58d3631514435840.png" src="/static/imghw/default1.png" alt="ZendStudio 13.5.1 Mac" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/502" title="ZendStudio 13.5.1 Mac" class="phpmain_tab2_mids_title"><h3>ZendStudio 13.5.1 Mac</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/506" title="WebStorm 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/58d36e6254963493.png" src="/static/imghw/default1.png" alt="WebStorm Mac version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/506" title="WebStorm Mac version" class="phpmain_tab2_mids_title"><h3>WebStorm Mac version</h3></a><p>Useful JavaScript development tools</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1574" title="Safe Exam Browser" 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/017/169233952169011.png" src="/static/imghw/default1.png" alt="Safe Exam Browser" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1574" title="Safe Exam Browser" class="phpmain_tab2_mids_title"><h3>Safe Exam Browser</h3></a><p>Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/92" title="Notepad++7.3.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/58ab96f0f39f7357.jpg" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"><h3>Notepad++7.3.1</h3></a><p>Easy-to-use and free code editor</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>7647</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>1392</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>91</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>73</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/nytminicrosswordanswe" title="nyt mini crossword answers" class="phpgenera_Details_mainR4_bottom_title">nyt mini crossword 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>36</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>110</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>