This section starts with the detailed modification of text, so that readers can grasp the changes in various font formats of HTML and create more professional web pages.
4.2 Diverse modifications of text
In the previous section, we learned various settings for large paragraphs, and it seems more attractive to modify the text itself. This section starts with the detailed modification of text, so that readers can grasp the changes in various font formats of HTML and create more professional web pages.
4.2.1 Basic tags for text style setting—
The basic tag for setting font styles is
, and the text included in it is the style scope. In beginners' HTML code writing,
is easily nested multiple times, such as
text . Another situation is misaligned label nesting, such as
text
. In order to standardize the writing of code and avoid unnecessary errors, readers must be cautious when learning.
4.2.2 Set text color
color is one of the attributes of the
tag, which is used to set the text color. Create a web page file in the D:web directory, name it font_color.htm, and write the code as shown in Code 4.7.
Code 4.7 Font color setting: font_color.htm
Font color setting
Light red text:
The essence of HTML learning is to use whatever it is supposed to be
Dark red text:
The essence of HTML learning is to use whatever it is supposed to be
Light green text:
The essence of HTML learning is to use whatever it is supposed to be
Dark green text:
The essence of HTML learning is to use whatever it is supposed to be
Light blue text:
The essence of HTML learning is to use whatever it is supposed to be
Dark blue text:
The essence of HTML learning is to use whatever it is supposed to be
Light yellow text:
The essence of HTML learning is to use whatever it is supposed to be
Dark yellow text:
The essence of HTML learning is to use whatever it is supposed to be
Light cyan text:
The essence of HTML learning is to use whatever it is supposed to be
Dark cyan text:
The essence of HTML learning is to use whatever it is supposed to be
Light purple text:
The essence of HTML learning is to use whatever it is supposed to be
Dark purple text:
The essence of HTML learning is to use whatever it is supposed to be
Enter http://localhost/font_color.htm in the browser address bar, and the browsing effect is as shown in Figure 4.7.
Figure 4.7 Font color setting
Readers can not only learn the usage of the color attribute in the font tag from Code 4.7, but also become familiar with the representation methods of various colors.
4.2.3 Set text size
size is also an attribute of the
tag, used to set the text size. The value of size is 1-7, and the default is 3. We can add "+" or "-" characters before the size attribute value to specify the increment or decrement relative to the initial value of the font size. Create a web page file in the D:web directory, name it font_size.htm, and write the code as shown in Code 4.8.
Code 4.8 Font size setting: font_size.htm
Font size setting
size is 1:
HTML learning
size is 2:
HTML learning
size is 3:
HTML learning
size is 4:
HTML learning
size is 5:
HTML learning
size is 6:
HTML learning
size is 7:
HTML learning
Enter http://localhost/font_size.htm in the browser address bar, and the browsing effect is as shown in Figure 4.8.
Figure 4.8 Font size setting
Readers can try adding "+" or "-" characters in front of the size value to set the text size more flexibly.
4.2.4 Set text font
face is also an attribute of the
tag, which is used to set the text font (font style). The fonts displayed in HTML web pages are called from the browser system, so in order to keep the fonts consistent, it is recommended to use Song font, and HTML pages also use Song font by default. Create a web page file in the D:web directory, name it font_face.htm, and write the code as shown in Code 4.9.
Code 4.9 Font setting: font_face.htm
Font and font settings
The font is Song style:
Qinyuanchun·Changsha-Mao Zedong
The font is in regular script:
Qinyuanchun·Changsha-Mao Zedong
The font is bold:
Qinyuanchun·Changsha-Mao Zedong
The font is official script:
Qinyuanchun·Changsha-Mao Zedong
Enter http://localhost/font_face.htm in the browser address bar, and the browsing effect is as shown in Figure 4.9.
Figure 4.9 Font setting
The author sets the text size of the modified font part to size 5 for the convenience of readers.
4.2.5 Make text tilt
Use double tags
to tilt the text to achieve special effects, such as the date of an article.
is called an emphasis tag and is also italicized. It is currently used more frequently than the
tag. Its writing method is as follows:
This is italicized text
This is also italicized text
4.2.6 Make text bold
Use double tags
to bold the text to make it more eye-catching, such as the title of an article.
is called a special emphasis tag, and the text is also bold. It is currently used more frequently than the
tag. The writing method is as follows:
This is bold text
This is also bold text
4.2.7 Underline text
Use the double tag
to add an underline to the affected text. Here's a comprehensive example of italicized, bolded, and underlined text. Create a web page file in the D:web directory, name it font_style.htm, and write the code as shown in Code 4.10.
Code 4.10 Text modification settings: font_style.htm
Font modification settings
Italic: Qinyuanchun·Changsha-Mao Zedong
Bold: Qinyuanchun·Changsha-Mao Zedong
Underline: Qinyuanchun·Changsha-Mao Zedong
Italics Bold Underline: Qinyuanchun·Changsha-Mao Zedong
Enter http://localhost/font_style.htm in the browser address bar, and the browsing effect is as shown in Figure 4.10.
Figure 4.10 Font modification settings
The author sets the size of all text within to size 5 for the convenience of readers.
— Note: When multiple tags contain the same text, their inclusion order cannot be misplaced.
4.2.8 Use of multiple title styles
In web articles, in order to highlight the importance of the title, the style of the title is relatively special. HTML technology protects a set of style tags for titles, which are double tags
to . The text size from large to small represents different levels of titles. The title tag has a characteristic: it occupies an exclusive line, the text is bold, and the text is centered. In this way, it is very easy to set the title, and multi-level titles can be set. Create a web page file in the D:web directory, name it font_h.htm, and write the code as shown in code 4.11.
Code 4.11 Title setting: font_h.htm
Title settings
Title No. 1
Title No. 2
Title No. 3
Title No. 4
Title No. 5
Title No. 6
Fortune Magazine: Why Google won’t prosper and then decline
Encountering potential problems
Some people in the industry believe that Google, which has monopolized the Internet search and advertising market for a long time, may prosper and then decline. ...At the same time, many new plans launched by Google recently, such as the Open Mobile Alliance, the general platform for social networking sites OpenSocial, and the possible investment of billions of dollars in bidding for wireless spectrum bands, have also been widely questioned.
will continue to monopolize search
There are some articles recently saying that if a better search engine appears, people will abandon Google without hesitation. But even if a better search engine does come along, Google will still be around for a while. ...In this case, site speed often becomes the difference between victory and defeat.
Enter http://localhost/font_h.htm in the browser address bar, and the browsing effect is as shown in Figure 4.11.
Figure 4.11 Title settings
4.2.9 Learn to handle special characters in web pages
In HTML, some characters have special meanings. For example, "" is the left and right brackets of the tag, and the tag controls the display of HTML. The tag itself can only be parsed by the browser and cannot be used on the page. displayed in. So, how to display "" in HTML? HTML specifies how to write some special characters so that they can be displayed in web pages, as shown in Table 4.1.
Table 4.1 Special characters in HTML
Special symbols
HTML code
Special symbols
HTML code
™ (trademark symbol)
™
>
>
® (registration symbol)
®
"" (English half-width)
"
×
×
§
§
© (copyright symbol)
©
Create a web page file in the D:web directory, name it string.htm, and write the string.htm code as shown in code 4.12.
Code 4.12 Special character settings: string.htm
Special character settings
How to display the
tag:
How to display quotation marks: "English half-width double quotation marks"
How to display the trademark: ™
Display method of registration symbol: ®
How to display the copyright symbol: ©
Show§
Show ×
Enter http://localhost/string.htm in the browser address bar, and the browsing effect is as shown in Figure 4.12.
Figure 4.12 Special character settings
— Note: To display the symbol & separately, the code & must be used.
4.2.10 How to more conveniently ignore the browser’s parsing of part of HTML
If you make an HTML code example similar to the one in this book on a web page, I'm afraid you have to convert all into , which seems troublesome.
<![CDATA[ and <xmp></xmp> in HTML code can easily solve this problem.
<br><plaintext> is a single tag. When it is inserted into HTML code, all HTML tags following it will be invalid. That is, the browser will not parse all HTML tags following <plaintext> and display them directly on the page.
<br><xmp></xmp> is a double tag, which only invalidates the tags in the content it contains. <xmp></xmp> is more commonly used. Create a web page file in the D:web directory, name it html.htm, and write the code as shown in Code 4.13.
<br>Code 4.13 Ignore the setting of the tag: html.htm
<br>
<br>
<br> <title>Ignore tag settings</title>
<br>
<br>
<br><h2 id="Qinyuanchun-Changsha">Qinyuanchun·Changsha</h2>
<br><xmp>In the cold autumn of independence, <strong>Go north of the Xiangjiang River</strong>, at the head of Orange Island. <br>Look at the mountains covered with red, and the forests all dyed; <br>The river is full of green, and <u>hundreds of boats are vying for the current. </u> <br></xmp>
<br>The eagle strikes the sky, <strong>The fish flies to the shallow bottom, </strong> <br>All kinds of frosty sky compete for freedom. <br>Sad for the small outline, <u>Ask the boundless earth </u>, who is responsible for the ups and downs? <br>
<br><plaintext>
<br>Bring hundreds of couples on a trip, <br>Reminiscing about the glorious past. <br> The young boy who is just my classmate is in his prime; <br> The scholar is angry and scolds Fang Qiu. <br> Point out the country and inspire words, <br> The dung soil was like ten thousand households. <br> Have you ever remembered that <strong> hit the water in the middle of the current </strong> and the waves stopped the boat!
<br>
<br>
<br>Enter http://localhost/string.htm in the browser address bar, and the browsing effect is as shown in Figure 4.13.
<br><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/web/2009422058213177807.jpg?x-oss-process=image/resize,p_40" class="lazy" style="max-width:90%" alt="" style="max-width:90%">
<br>Figure 4.13 Ignore label settings
<br><strong>4.2.11 Other text modification methods</strong>
<br>In order to meet the needs of different fields, HTML also has other tags that modify text. The more commonly used ones are superscript format tags and subscript format tags. In some cases, the deletion effect is even needed, that is, the HTML underline tag can be used.
<br>—The superscript format label is the double label <sup></sup>, which is mostly used to represent mathematical exponents, such as the square or cube of a certain number.
<br>—The subscript format tag is the double tag <sub></sub>, which is mostly used for comments and mathematical base representation.
<br>—The underline tag is a double tag <strike></strike>, which is mostly used for deletion effects.
<br>Create a web page file in the D:web directory, name it other.htm, and write the code as shown in Code 4.14.
<br>Code 4.14 Settings of other modification tags: other.htm
<br>
<br>
<br> <title>Settings for other modification tags</title>
<br>
<br>
<br><font size="5">
<br>Qinyuanchun<sup>Changsha</sup>! <br>
<br>Representation of mathematical exponents: 2<sup>3</sup>=8, 100<sup>2</sup>=10000<br><hr>
<br>Qinyuanchun<sub>Changsha</sub>! <br>
<br>Representation of mathematical base: log<sub>3</sub>81=4, log<sub>5</sub>125=3<br><hr>
<br>Deletion effect: <strike>I was deleted</strike>
<br></font>
<br>
<br>
<br>Enter http://localhost/other.htm in the browser address bar, and the browsing effect is as shown in Figure 4.14.
<br><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/web/2009422058217877808.jpg?x-oss-process=image/resize,p_40" class="lazy" style="max-width:90%" alt="" style="max-width:90%">
<br>Figure 4.14 Settings of other modification tags</plaintext></plaintext></plaintext></plaintext></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="" title="如何在苹果笔记中使用块引号" 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/000/000/164/169712574720411.jpg" alt="如何在苹果笔记中使用块引号" src="/static/imghw/default1.png" /></a><a href="" title="如何在苹果笔记中使用块引号" class="phphistorical_Version2_mids_title">如何在苹果笔记中使用块引号</a><span class="Articlelist_txts_time">Oct 12, 2023 pm 11:49 PM</span><p class="Articlelist_txts_p">在iOS17和macOSSonoma中，Apple为AppleNotes添加了新的格式选项，包括块引号和新的Monostyle样式。以下是使用它们的方法。借助AppleNotes中的其他格式选项，您现在可以在笔记中添加块引用。块引用格式可以轻松地使用文本左侧的引用栏直观地偏移部分的写作。只需点击/单击“Aa”格式按钮，然后在键入之前或当您在要转换为块引用的行上时选择块引用选项。该选项适用于所有文本类型、样式选项和列表，包括清单。在同一“格式”菜单中，您可以找到新的“单样式”选项。这是对先前“等宽</p></div><div class="phphistorical_Version2_mids"><a href="" title="pptm是什么格式" 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/202101/11/2021011114395392372.jpg" alt="pptm是什么格式" src="/static/imghw/default1.png" /></a><a href="" title="pptm是什么格式" class="phphistorical_Version2_mids_title">pptm是什么格式</a><span class="Articlelist_txts_time">Jan 11, 2021 pm 02:46 PM</span><p class="Articlelist_txts_p">pptm是office办公套件中powerpoint的一种文件格式，全名是“启用宏的PowerPoint演示文稿”。pptm文件只能用2007及以上版本的office软件打开，如果用其他版本软件打开会出现无法编辑、图片不完整等问题。</p></div><div class="phphistorical_Version2_mids"><a href="" title="m3u8是什么格式" 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/202302/20/2023022013372154129.jpg" alt="m3u8是什么格式" src="/static/imghw/default1.png" /></a><a href="" title="m3u8是什么格式" class="phphistorical_Version2_mids_title">m3u8是什么格式</a><span class="Articlelist_txts_time">Feb 20, 2023 pm 01:38 PM</span><p class="Articlelist_txts_p">m3u8是UTF-8编码格式。M3U8是指UTF-8编码的M3U文件，而M3U文件是记录了一个索引纯文本文件，打开它时播放软件并不是播放它，而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。M3U8是一种常见的流媒体格式，主要以文件列表的形式存在，既支持直播又支持点播，尤其在Android、iOS等平台最为常用。</p></div><div class="phphistorical_Version2_mids"><a href="" title="ink是什么文件格式" 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/202302/03/2023020314292091183.jpg" alt="ink是什么文件格式" src="/static/imghw/default1.png" /></a><a href="" title="ink是什么文件格式" class="phphistorical_Version2_mids_title">ink是什么文件格式</a><span class="Articlelist_txts_time">Feb 03, 2023 pm 02:32 PM</span><p class="Articlelist_txts_p">ink是快捷方式的文件格式；快捷方式是一种功能上类似符号链接的文件对象，但与符号链接有本质的不同；快捷方式是普通的文件，而非符号，其扩展名是“.lnk”，因此快捷方式可以被复制、移动、更改或删除；快捷方式可以指向文件、文件夹或其他任何系统中合法的位置。</p></div><div class="phphistorical_Version2_mids"><a href="" title="cr3是什么格式文件" 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/202106/23/2021062315180746798.jpg" alt="cr3是什么格式文件" src="/static/imghw/default1.png" /></a><a href="" title="cr3是什么格式文件" class="phphistorical_Version2_mids_title">cr3是什么格式文件</a><span class="Articlelist_txts_time">Jun 23, 2021 pm 03:22 PM</span><p class="Articlelist_txts_p">CR3文件是佳能采用Digic8图像处理器的新型相机记录的原始raw文件。cr3的文件可以通过佳能ddp打开，是对RAW图像进行“RAW显像”等图像调节的软件。</p></div><div class="phphistorical_Version2_mids"><a href="" title="exb是什么格式文件" 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/202103/10/2021031014555821055.jpg" alt="exb是什么格式文件" src="/static/imghw/default1.png" /></a><a href="" title="exb是什么格式文件" class="phphistorical_Version2_mids_title">exb是什么格式文件</a><span class="Articlelist_txts_time">Mar 10, 2021 pm 03:02 PM</span><p class="Articlelist_txts_p">exb文件是CAXA制图软件所生成的专用格式，CAXA是中国最大的制造业软件提供商，exb文件就是CAXA二维绘图软件电子图板的数据文件。</p></div><div class="phphistorical_Version2_mids"><a href="" title="rtf是什么格式" 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/202301/30/2023013014282723112.jpg" alt="rtf是什么格式" src="/static/imghw/default1.png" /></a><a href="" title="rtf是什么格式" class="phphistorical_Version2_mids_title">rtf是什么格式</a><span class="Articlelist_txts_time">Jan 30, 2023 pm 02:35 PM</span><p class="Articlelist_txts_p">rtf全称“Rich Text Format”，中文意思为“富文本格式”或“多文本格式”，是由微软公司开发的跨平台文档格式；RTF是word为了与其他字处理软件兼容而能够保存的文档格式，是一种类似DOC格式（Word文档）的文件，有很好的兼容性。对普通用户而言，RTF格式是一个很好的文件格式转换工具，用于在不同应用程序之间进行格式化文本文档的传送。</p></div><div class="phphistorical_Version2_mids"><a href="" title="png是矢量图格式吗" 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/202209/15/2022091514465484276.jpg" alt="png是矢量图格式吗" src="/static/imghw/default1.png" /></a><a href="" title="png是矢量图格式吗" class="phphistorical_Version2_mids_title">png是矢量图格式吗</a><span class="Articlelist_txts_time">Sep 15, 2022 pm 03:14 PM</span><p class="Articlelist_txts_p">png不是矢量图格式；png格式指的是便携式网络图形，是一种采用无损压缩算法的位图格式，而矢量图片一般是指用制图软件或矢量工具绘制出的图片文件，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。</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/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator"class="phpmain_tab2_mids_title"><h3>AI Hentai Generator</h3></a><p>Generate AI Hentai for free.</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/1796780570.html" title="R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796775427.html" title="How Long Does It Take To Beat Split Fiction?" class="phpgenera_Details_mainR4_bottom_title">How Long Does It Take To Beat Split Fiction?</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/1796780641.html" title="R.E.P.O. Best Graphic Settings" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Best Graphic Settings</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</span></div></div><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>1 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796780520.html" title="R.E.P.O. How to Fix Audio if You Can't Hear Anyone" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. How to Fix Audio if You Can't Hear Anyone</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>2 weeks ago</span><span>By尊渡假赌尊渡假赌尊渡假赌</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/1575" title="DVWA" 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/005/169233952150073.png" src="/static/imghw/default1.png" alt="DVWA" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1579" title="SecLists" 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/008/169442209227215.jpg" src="/static/imghw/default1.png" alt="SecLists" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_title"><h3>SecLists</h3></a><p>SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.</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/1544" title="MinGW - Minimalist GNU for Windows" 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="" src="/static/imghw/default1.png" alt="MinGW - Minimalist GNU for Windows" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1544" title="MinGW - Minimalist GNU for Windows" class="phpmain_tab2_mids_title"><h3>MinGW - Minimalist GNU for Windows</h3></a><p>This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.</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>7405</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/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java 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>1630</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>14</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>1358</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/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel 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>1268</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>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP 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>1218</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>29</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');});}});
// 通用函数，用于显示或隐藏元素
function toggleElementsDisplay(className, show) {
const elements = document.getElementsByClassName(className);
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = show ? "block" : "none";
}
}
// 绑定事件监听器
function bindEventListeners() {
const toggleDisplay = (className, show, eventId) => {
document.getElementById(eventId).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");
// 控制 m_menu 的显示和隐藏
toggleDisplay("m_menu", true, "lan1sp");
toggleDisplay("m_menu", false, "m_editormain12main_topi_sp");
// 控制 m_menu_lang 的显示和隐藏
toggleDisplay("m_menu_lang", true, "lan1");
toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan");
}
// 在页面加载完成后绑定事件监听器
window.onload = bindEventListeners;
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
// 获取关闭按钮
const closeButton = document.querySelector(".phpgenera_Details_mainR1_close");
// 获取容器元素
const container = document.querySelector(".phpgenera_Details_mainR1");
// 添加点击事件监听器
closeButton.addEventListener("click", (event) => {
event.preventDefault(); // 阻止默认的<a>点击行为
container.style.display = "none"; // 隐藏容器
});
document.addEventListener("DOMContentLoaded", () => {
// 动态获取所有滚动链接及隐藏目标元素
const links = [{
linkId: "fixed_tab_a1",
targetId: "article_main_title1",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a2",
targetId: "article_main_title2",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a3",
targetId: "article_main_title3",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
{
linkId: "fixed_tab_a4",
targetId: "article_main_title4",
hideElementId: "fixed_tab_titlelist", // 要隐藏的元素 ID
},
];
links.forEach(({
linkId,
targetId,
hideElementId
}) => {
const linkElement = document.getElementById(linkId);
const targetElement = document.getElementById(targetId);
const hideElement = document.getElementById(hideElementId);
if (linkElement && targetElement) {
linkElement.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认行为
// 隐藏指定元素
if (hideElement) {
hideElement.style.display =
"none"; // 也可以用其他方法隐藏，如 `visibility: hidden`
}
// 平滑滚动到目标元素
targetElement.scrollIntoView({
behavior: "smooth"
});
});
} else {
console.warn(
`Link, target, or hide element not found: ${linkId}, ${targetId}, ${hideElementId}`
);
}
});
});
// 初始化菜单交互功能
document.addEventListener('DOMContentLoaded', function () {
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');
// 切换子菜单显示状态
if (subMenuContainer) {
if (this.classList.contains('layui-menu-item-down')) {
subMenuContainer.style.display = 'block';
this.querySelector('.layui-icon').classList.remove(
'layui-icon-down');
this.querySelector('.layui-icon').classList.add('layui-icon-up');
} else {
subMenuContainer.style.display = 'none';
this.querySelector('.layui-icon').classList.remove('layui-icon-up');
this.querySelector('.layui-icon').classList.add('layui-icon-down');
}
}
});
});
});
</script></body></html>]]></plaintext></div></div>
Web Front-end
Web Front-end
