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 < and >, 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>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 style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058213177807.jpg">
<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 style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058217877808.jpg">
<br>Figure 4.14 Settings of other modification tags</plaintext></plaintext></plaintext></plaintext></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Beginners in web page production: learn to use HTML hyperlink A tag_HTML/Xhtml_web page production" href="http://m.php.cn/faq/12298.html">Beginners in web page production: learn to use HTML hyperlink A tag_HTML/Xhtml_web page production</a></span><span>Next article：<a class="dBlack" title="Beginners in web page production: learn to use HTML hyperlink A tag_HTML/Xhtml_web page production" href="http://m.php.cn/faq/12302.html">Beginners in web page production: learn to use HTML hyperlink A tag_HTML/Xhtml_web page production</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>]]></plaintext></div></div>