'In-depth Understanding of Bootstrap' Reading Notes: Chapter 3 CSS Layout-HTML Tutorial-php.cn

<h2 id="Outline-the-concept">1. Outline the concept</h2> <div>bootstrap is developed based on H5. It advocates mobile first (media inquiry statement is required), and does not support a wide range of browsers. </div> <div>Responsive images: max-width:100% height:auto;</div> <div>You can add: .img-responsive class</div> <div>The basic style of typography is: </div> <div>The margin of the body is 0, the background color is white, and the line spacing is 20/14 times</div> <div>Use the Normalize.css library to minimize differences between browsers</div> <div>Centered container container has a maximum range. (The maximum left and right margins are auto, related to the device) </div> <div> </div> <h2 id="Basic-text-typesetting-global-settings">2. Basic text typesetting (global settings)</h2> <div> <h2>1.<span style="line-height: 1.6;">Title (h mark and small mark)</span> </h2> <div> <div id="highlighter_795477" class="syntaxhighlighter html" style="width: 1276.8px;"> <div id="highlighter_361744" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" style="width: 1275px;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> </td> <td class="code" style="width: 1173px;"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h1</code><code class="html plain">>header1<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h1</code><code class="html plain">> </code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h2</code><code class="html plain">>header2<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h2</code><code class="html plain">> </code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h3</code><code class="html plain">>header3<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h3</code><code class="html plain">> </code></div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h4</code><code class="html plain">>header4<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h4</code><code class="html plain">> </code></div> <div class="line number5 index4 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h5</code><code class="html plain">>header5<</code><code class="html keyword">small</code><code class="html plain">>subtitle of small tag</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h5</code><code class="html plain">> </code></div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">h6</code><code class="html plain">>header6<</code><code class="html keyword">small</code><code class="html plain">>small tag subtitle</</code><code class="html keyword">small</code><code class="html plain">></</code><code class="html keyword">h6</code><code class="html plain">> </code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142739102-1895601554.png" class="lazy" alt="" border="0"><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740055-2109177660.jpg" class="lazy" alt="" border="0"> </div> </div> <div> <p>The font color of the <small> content in all title elements is gray<span style="line-height: 1.6;"> (#999999), and the line spacing is 1. </span></p> The text font in <p><small> is 65% of the font size corresponding to the current element in h1, h2, and h3; while in h4, h5, and h6, it is 75%. <span style="line-height: 1.6;"></span> </p> </div> <p> </p> <p>A. The font size is 14px and the spacing is 20px. The margin-bottom of the p element is half the line spacing (10px). <span style="line-height: 1.6;"></span> </p> <p>B. Highlight<span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;">When you have a piece of text that you want to highlight but don’t want to get the same weight as the h mark, you can class="lead"<span></span><br></span> </p> <p> </p> <div id="highlighter_393077" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter">1<div class="line number1 index0 alt2" style="height: 16px;"> </div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><<code class="html plain"></code>span<code class="html keyword"> </code>class<code class="html color1"></code>=<code class="html plain"></code>"lead"<code class="html string"></code>>email me</<code class="html plain"></code>span<code class="html keyword"></code>><code class="html plain"></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p>As shown in the picture, the comparison effect between lead and h1: <span style="line-height: 1.6;"></span> </p> <p><span style="line-height: 1.6;"><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142740539-2045389970.png" class="lazy" alt="" border="0"><br></span> </p>2. Emphasize text<h2> </h2> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table style="width: 100%;" border="1" bgcolor="#FFFFFF"> <tbody> <tr>Accent elements<td style="width: 50%;"> </td>Performance<td style="width: 50%;"> </td> </tr> <tr> <td style="width: 50%;">small<p> </p>(You can directly apply the .small class)<p> </p> </td>Small text<td style="width: 50%;"> </td> </tr> <tr>strong<td style="width: 50%;"> </td>Emphasis (bold)<td style="width: 50%;"> </td> </tr> <tr>em<td style="width: 50%;"> </td>italic<td style="width: 50%;"> </td> </tr> <tr>cite<td style="width: 50%;"> </td>Cite sources, font size is 85%<td style="width: 50%;"> </td> </tr> </tbody> <div> </div> <h2 id="Abbreviations-abbr-and-initialism">3. Abbreviations abbr and .initialism</h2> <p>Both can achieve the underline dotted hover hand effect, which needs to be used with the title attribute. </p> <h2 id="address-address">4. address address</h2> <p>Used to package information related to contact information. The style difference is that the spacing and bottom style are slightly different. </p> <div id="highlighter_86830" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">>Twitter, Inc.</</code><code class="html keyword">strong</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain">795 Folsom Ave, Suite 600<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces"></code><code class="html plain">San Francisco, CA 94107<</code><code class="html keyword">br</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">abbr</code> <code class="html color1">title</code><code class="html plain">=</code><code class="html string">"Phone"</code><code class="html plain">>P:</</code><code class="html keyword">abbr</code><code class="html plain">>(123) 456-7890</code> </div> <div class="line number6 index5 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number7 index6 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">address</code><code class="html plain">></code></div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">strong</code><code class="html plain">> Uncle Tom </</code><code class="html keyword">strong</code><code class="html plain">> </code><code class="html keyword"> </code><code class="html plain"><</code></div>a<div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces">href</code><code class="html plain">=</code><code class="html keyword">"mailto:#"</code><code class="html color1">>tomxu@outlook.com</</code><code class="html plain">a</code><code class="html string">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">address</code></div>><div class="line number10 index9 alt1" style="height: 16px;"> <code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </code> </div> </div> <p>The effect is as shown in the picture</p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741086-1251850225.png" class="lazy" alt="" border="0"></p> <h2 id="span-style-line-height-Quote-blockquote-span"><span style="line-height: 1.6;">5. Quote blockquote</span></h2> <p>The general format for citations is</p> <div id="highlighter_518004" class="syntaxhighlighter as3"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="as3 plain"><blockquote></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="as3 spaces"> </code><code class="as3 plain"><p>Love is not something you can just buy if you want</p></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="as3 spaces"> </code><code class="as3 plain"><small>From<cite>Love Sales</cite></small></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"><code class="as3 plain"></blockquote></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741430-49428234.png" class="lazy" alt="" border="0"></p> <p><span style="line-height: 1.6;">Of course, replacing small with footer will have the same effect. </span></p> <p><span style="line-height: 1.6;">The default is left-aligned. If you want to right-align, you can use the .pull-right class for blockquote. The whole thing floated to the right. </span></p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142741774-1723319592.png" class="lazy" alt="" border="0"></p> <h2 id="List">6. List</h2> <h3 id="ul-li-unordered-list">(1)ul-li unordered list</h3> <p>Under bootstrap, the ul-li framework of ordinary lists is basically the same as the default. </p> <p>A. The style of the ul-li list is determined by list-style. Use the .list-unstyle class in the bootstrap framework. The source code style is nothing more than padding-left:0;list-style:none. </p> <p>Note: If it is a list nested list, if the <span>.</span><span>list-unstyle class is applied to the grandparent ul, the grandchild li will not inherit it. </span></p> <p><span>B. Inline list: Normal ul-li is displayed vertically. In many situations, the most typical one is navigation, which requires li to be arranged horizontally. At this time, you can use the <span>.list-inline class of the inline list</span></span></p> <p> </p> <div id="highlighter_385611" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">ul</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"list-inline"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> </code><code class="html keyword"> </code><code class="html plain"> </code> <code class="html keyword"> </code> <code class="html plain"> </code> </div> </div> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742258-1575759483.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="ordered-list-ol-li">(2) ordered list ol-li</h3> <p>Changed the font to make the display softer</p> <h3 id="dl-dt-dd-definition-list">(3) dl-dt-dd definition list</h3> <p>The definition list includes description information. The <span>dl-dt-dd definition list</span>under bootstrap is usually arranged vertically. </p> <div id="highlighter_598113" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">dl</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 1</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 1</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 2</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 2</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dt</code><code class="html plain">>Title 3</</code><code class="html keyword">dt</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">dd</code><code class="html plain">>Description 3</</code><code class="html keyword">dd</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"><code class="html plain"></</code><code class="html keyword">dl</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142742743-1319120599.png" class="lazy" alt="" border="0"></p> <p>我想在横向展示一个商品列表，包括描述信息。如果给dl加上<span>class="dl-horizontal"</span></p> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142743258-1006507091.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="代码">7. 代码</h2> <p>包括code单行代码，kbd用户输入代码和pre多行代码块。</p> <p>代码样式的用法示例如下：</p> <div id="highlighter_826630" class="syntaxhighlighter html"> <div id="highlighter_296927" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">code</code><code class="html plain">><body></body></</code><code class="html keyword">code</code><code class="html plain">><</code><code class="html keyword">br</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">kbd</code><code class="html plain">><body></body></</code><code class="html keyword">kbd</code><code class="html plain">></code></div> <div class="line number3 index2 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">pre</code><code class="html plain">><body></body></</code><code class="html keyword">pre</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744352-1730720578.png" class="lazy" alt="" border="0"> </div> <h3 id="code">（1）code</h3> <p><span>code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色</span></p> <h2 id="span-kbd-span"><span>（2）kbd</span></h2> <p>kbd表示需要用户输入，可以配合input元素使用。</p> <div id="highlighter_709029" class="syntaxhighlighter js"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="js plain">请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744649-2052810696.png" class="lazy" alt="" border="0"></p> <h2 id="多行代码块pre">（3）多行代码块pre</h2> <p>pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。</p> <p>粘贴进去会有空格。</p> <p>类似还有<samp>可以格式化代码。用较为标准的字体和行间距显示</p> <h2 id="其它H-标记补充">8.其它H5标记补充</h2> <p><span>（1）<mark>,也可以使用.mark</span></p> <p> </p> <div id="highlighter_283527" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"mark"</code><code class="html plain">>this is mark text</</code><code class="html keyword">p</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142744930-1750370126.png" class="lazy" alt="" border="0"><br></span></p> <h3 id="span-span-del-mark-and-s-mark-span-span"><span><span> (2) del mark and s mark </span></span></h3> <div id="highlighter_100404" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">del</code><code class="html plain">>I am delated.</</code><code class="html keyword">del</code><code class="html plain">></code></div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142746164-1214610770.png" class="lazy" alt="" border="0"></p> <h3 id="ins-tag-and-u-tag"> (3) ins tag and u tag </h3> <div>Underscore, ins defines text that has been inserted into the document. The u mark <span style="line-height: 1.6;"> has different semantics from ins. If the text is not a hyperlink, don’t use the u mark </span> </div> <h3 id="Alignment-related">(4) Alignment related</h3> <div>——text-left</div> <div>——text-center</div> <div>——text-right</div> <div>Text is centered left, center and right. </div> <div>——text-justify: judge for yourself—Qi Xing defines the spacing between words, which is similar to the head and tail avoidance rule. Note that there are also corresponding properties in css3. </div> <div>——text-nowrap: Always keep 1 line when the browser is zoomed out</div> <h3 id="Case-related"> (5) Case related: </h3> <div>text-lowercase</div> <div>text-uppercase </div> <div>text-capitalize initial letter size</div> <h3 id="Example-Text-formatting-practice">【Example 3.1】Text formatting practice</h3> <div id="highlighter_620203" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 32px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 32px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-justify"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">h3</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-center"</code><code class="html plain">>I am afraid <</code><code class="html keyword">small</code><code class="html plain">>William Shakespeare</</code><code class="html keyword"> small</code><code class="html plain">>< ;/</code><code class="html keyword">h3</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 32px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"text-capitalize"</code><code class="html plain">>you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows.</</code><code class="html keyword">p</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">p</code><code class="html plain">><mark>This is why I am afraid, you say that u love me too.</mark></</code><code class="html keyword">p</code><code class="html plain">></code> </div>> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">ins</code><code class="html plain">><</code><code class="html keyword">em</code><code class="html plain">>Translation</</code><code class="html keyword">em</code><code class="html plain">></</code><code class="html keyword">ins</code><code class="html plain">&g t;</code> </div>& & Lt; <div class="line number6 index5 alt1" style="height: 32px;"> <code class="html spaces">P</code><code class="html plain"> & gt; You say that the rain and rain are slightly mang, Lanting looks away; You said that spring was brilliant, green sleeves were red and fragrant; later, the west building was hidden inside, and I stood quietly beside you. You said that the soft breeze blows gently, and I lie down drunk and think; later, the doors and windows are tightly closed, and the tents are filled with sorrow. </</code><code class="html keyword">p</code><code class="html plain">></code><code class="html keyword"> </code><code class="html plain"> </</code></div>p<div class="line number7 index6 alt2" style="height: 16px;"><code class="html spaces">></code><code class="html plain"> </code><code class="html keyword"></</code><code class="html plain">div</code><code class="html keyword">></code><code class="html plain"> </code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html plain"> </code> </div> </div> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142747946-1261753550.png" class="lazy" alt="" border="0"></p> <p> </p> <h2 id="Table-related-css">3. Table related css</h2> <p>The table is implemented by adding the .table class to the table</p> <h3>【Example 3.2】<span style="line-height: 1.6;">Make a table with 5 rows and 5 columns to record information</span> </h3> <p> </p> <div id="highlighter_341065" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> Since<div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces"> </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>西游记</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>吴承恩</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number15 index14 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> </code><code class="html keyword"> </code><code class="html plain"> ~ </code><code class="html keyword"> </code><code class="html plain"> </code> </div> <div class="line number16 index15 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> </code><code class="html keyword"> <div class="line number26 index25 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number27 index26 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>水浒传</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number28 index27 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>施耐庵</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number29 index28 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>30.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number30 index29 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-3</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number31 index30 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number32 index31 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number33 index32 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number34 index33 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>红楼梦</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number35 index34 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>曹雪芹</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number36 index35 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>40.99</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number37 index36 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-4</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number38 index37 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number39 index38 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number40 index39 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">table</code><code class="html plain">></code> </div> </code> </div> </code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> </p> <div>Displayed when there is no class style: </div> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748961-1101927088.png" class="lazy" alt="" border="0"></p> <h2 id="table-basic-style">1.table basic style</h2> <h3 id="Add-class-table-to-the-table-tag-the-effect-becomes">(1) Add class="table" to the table tag, the effect becomes: </h3> </div> <div> <img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142748571-675461791.gif" class="lazy" style="max-width:90%"282e148f-361a-409f-bbb0-2931f04935c9_files/localimage.png') no-repeat center center; border: 1px solid #ddd;" alt="" border="0"> <p><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142749539-745591421.png" class="lazy" alt="" border="0"></p> <p> Is it possible to become rich, handsome and rich in seconds? </p> </div> <h3>(2) Alternate row color change.<span>table-striped</span> </h3> <p><span><span>table-striped: zebra crossing</span><br></span></p> <p><span>Using CSS3’s :nth-child implementation. </span></p> <h3 id="Add-border">(3) Add border</h3> <p>Use .table-bordered to add a 1px border to all cells. </p> <h3 id="Hover-Highlight">(4)Hover Highlight</h3> <p>Use .table:hover to highlight the current row on hover</p> <h3 id="Compact-Tables">(5) Compact Tables</h3> <p><span><span>table-condensed: Condensed, slightly smaller - reduces cell padding. This is what it looks like after applying everything. </span><br></span></p> <p><span><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1011161/201610/1011161-20161010142750039-106969313.png" class="lazy" alt="" border="0"><br></span></p> <p>Code List</p> <div id="highlighter_419714" class="syntaxhighlighter html"> <div class="wiz-table-container" style="position: relative; padding: 15px 0px 5px;"> <div class="wiz-table-body"> <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2" style="height: 16px;">1</div> <div class="line number2 index1 alt1" style="height: 16px;">2</div> <div class="line number3 index2 alt2" style="height: 16px;">3</div> <div class="line number4 index3 alt1" style="height: 16px;">4</div> <div class="line number5 index4 alt2" style="height: 16px;">5</div> <div class="line number6 index5 alt1" style="height: 16px;">6</div> <div class="line number7 index6 alt2" style="height: 16px;">7</div> <div class="line number8 index7 alt1" style="height: 16px;">8</div> <div class="line number9 index8 alt2" style="height: 16px;">9</div> <div class="line number10 index9 alt1" style="height: 16px;">10</div> <div class="line number11 index10 alt2" style="height: 16px;">11</div> <div class="line number12 index11 alt1" style="height: 16px;">12</div> <div class="line number13 index12 alt2" style="height: 16px;">13</div> <div class="line number14 index13 alt1" style="height: 16px;">14</div> <div class="line number15 index14 alt2" style="height: 16px;">15</div> <div class="line number16 index15 alt1" style="height: 16px;">16</div> <div class="line number17 index16 alt2" style="height: 16px;">17</div> <div class="line number18 index17 alt1" style="height: 16px;">18</div> <div class="line number19 index18 alt2" style="height: 16px;">19</div> <div class="line number20 index19 alt1" style="height: 16px;">20</div> <div class="line number21 index20 alt2" style="height: 16px;">21</div> <div class="line number22 index21 alt1" style="height: 16px;">22</div> <div class="line number23 index22 alt2" style="height: 16px;">23</div> <div class="line number24 index23 alt1" style="height: 16px;">24</div> <div class="line number25 index24 alt2" style="height: 16px;">25</div> <div class="line number26 index25 alt1" style="height: 16px;">26</div> <div class="line number27 index26 alt2" style="height: 16px;">27</div> <div class="line number28 index27 alt1" style="height: 16px;">28</div> <div class="line number29 index28 alt2" style="height: 16px;">29</div> <div class="line number30 index29 alt1" style="height: 16px;">30</div> <div class="line number31 index30 alt2" style="height: 16px;">31</div> <div class="line number32 index31 alt1" style="height: 16px;">32</div> <div class="line number33 index32 alt2" style="height: 16px;">33</div> <div class="line number34 index33 alt1" style="height: 16px;">34</div> <div class="line number35 index34 alt2" style="height: 16px;">35</div> <div class="line number36 index35 alt1" style="height: 16px;">36</div> <div class="line number37 index36 alt2" style="height: 16px;">37</div> <div class="line number38 index37 alt1" style="height: 16px;">38</div> <div class="line number39 index38 alt2" style="height: 16px;">39</div> <div class="line number40 index39 alt1" style="height: 16px;">40</div> </td> <td class="code"> <div class="container"> <div class="line number1 index0 alt2" style="height: 16px;"><code class="html plain"><</code><code class="html keyword">table</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"table table-bordered table-striped table-hover table-condensed"</code><code class="html plain">></code></div> <div class="line number2 index1 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">thead</code><code class="html plain">><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number3 index2 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>ID</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number4 index3 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>TITLE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number5 index4 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>AUTHOR</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number6 index5 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PUBDATE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number7 index6 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>PRICE</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number8 index7 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"></</code><code class="html keyword">tr</code><code class="html plain">></</code><code class="html keyword">thead</code><code class="html plain">></code> </div> <div class="line number9 index8 alt2" style="height: 16px;"> <code class="html spaces"> </code> </div> <div class="line number10 index9 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tbody</code><code class="html plain">></code> </div> <div class="line number11 index10 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">tr</code><code class="html plain">></code> </div> <div class="line number12 index11 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>1</</code><code class="html keyword">td</code><code class="html plain">></code> </div>& & Lt; <div class="line number13 index12 alt2" style="height: 16px;"> <code class="html spaces">td</code><code class="html plain"> & gt; Journey to the West & LT;/</code><code class="html keyword">td</code><code class="html plain"> & gt; </code><code class="html keyword"> </code><code class="html plain"> </code> </div> <div class="line number14 index13 alt1" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"> </code><code class="html keyword"> ~ </code><code class="html plain"> </code><code class="html keyword"> </code><code class="html plain"> <div class="line number23 index22 alt2" style="height: 16px;"> <code class="html spaces"> </code><code class="html plain"><</code><code class="html keyword">td</code><code class="html plain">>2010-1-2</</code><code class="html keyword">td</code><code class="html plain">></code> </div> <div class="line number24 index23 alt1" style="height: 16px;"><c></c></div></code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </table> </div> </div> </div>

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

1 months ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7759

Java Tutorial

1644

CakePHP Tutorial

1399

Laravel Tutorial

1293

PHP Tutorial

1234

Related knowledge

Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles