Home > Web Front-end > HTML Tutorial > HTML basics_general tags, commonly used tags and tables

HTML basics_general tags, commonly used tags and tables

高洛峰
Release: 2017-02-17 10:54:43
Original
1127 people have browsed it

Part 1 HTML

--Start tag

Control information on the web page

<p> ; </p> <p> --End tag</p> <p><!--Comment content--> Comment</p> <p>Body attributes: </p> <p> bgcolor Page background color</p> <p> text text color (specifies the color of all text)</p> <p> topmargin top margin</p> <p> leftmargin left margin</p> <p> rightmargin Right margin Distance</p> <p> bottomargin bottom margin</p> <p>background background wallpaper</p> <p>Note: Choose one of background color and background wallpaper</p> <p>1.1. General tags 1.1. 1. Format control tag </p> <p> <font color="" face="" size=""></font> Control font; color="##FF0000"; face, font; size, font size. </p> <p>                                                                                                                                                                                                                       Underline </p> <p>                                                                                                                                can be made bold (                        ). </p>## & lt; center & gt; & lt;/center & gt; Juxian <p></p> Note: & lt; center & gt;/center & gt; show. <p></p> <br> or <br> Equivalent to carriage return (shortcut key: shift + enter) <p></p> space<p></p>1.1.2. Content container tag<p></p> <h1></h1>……<h6></h6> Title (will wrap automatically). HTML heading (Heading) is defined through tags such as <h1> - <h6>. </h6> </h1> <p></p>Note: <h1></h1>...<h6></h6> The importance decreases in order, depending on the existing default size for increment or decrement. And if there are others before and after, perform line breaks before and after, and leave a blank line to ensure that it is a whole<p></p> Note: <p></p> If there is anything else before and after, perform a line break before and after, and leave a blank line to ensure that it is a whole <p></p> <p></p> One line)<p></p> <span></span> The serial number is 1, 2, 3..., the serial number format can be changed in quotation marks<p></p> <p> </p> <p>Note: By default, it comes with a serial number and line breaks. If there are others before and after, perform line breaks before and after, and leave a blank line to ensure that it is a whole </p> <p>If "ol" is changed to "ul" above, it will be an unordered list, which does not have its own line breaking function. </p> <p>1.2. Common tags</p> <p>Hyperlink tags</p> <p> <a href="Hyperlink%20address" target="_blank">Hyperlink text</a> --href (hyperlink reference); _blank opens in a new window. </p> <p> The first step: Make the anchor tag. <a name=""></a></p> <p> Step 2: Make anchor links. <a href="The%20value%20of%20the%20name%20of%20the%20target%20link"></a></p> <p> </p> <p>Picture tag</p> <p><img src="Picture%20address" alt="Text" style="max-width:90%" height=""> --Set one height and one width, and the displayed image will be scaled proportionally. alt displays text when the image cannot be loaded, and can also help search engines search. </p> <p><img alt="HTML basics_general tags, commonly used tags and tables" > must appear alone. </p> <p>1.3. Table</p> <p> </p> <table></table> Table<p> Width: Width. Can be expressed in pixels or percentages. Commonly used is 960 pixels. </p> <p> border: border. Commonly used value is 0. </p> <p> Cellpadding: The margin between the content and the cell border. Commonly used value is 0. </p> <p> Cellspacing: The spacing between cells. Commonly used value is 0. </p> <p>     align: Alignment. </p> <p> bgcolor: Background color. </p> <p> background: background image. </p> <p> </p> <tr></tr> Row<p> align: The horizontal alignment of the content of a row</p> <p> valign: The vertical alignment of the content of a row</p> <p> Height: row height</p> <p> bgcolor:Background color</p> <p> Background:Background image</p> <p> </p> <td></td> Cell<p> < ;th> Header, the content of the cell is automatically centered and bold</p> <p> align: the alignment of the content of the cell</p> <p> valign: the vertical alignment of the content of the cell Method </p>## completely: cells width <p></p># Height: cell height <p></p># BGCOLOR: background color <p></p> Background: background picture <p>## Content Must be placed in cells, cells must be placed in rows, and rows must be placed in tables. When setting the cell row height and column height, it will also affect the corresponding row or column</p> <p> Cell merge: (It is recommended to use table nesting as much as possible)</p> <p> colspan="n"——Merge Cells in the same row (subtract the corresponding columns when writing code later) </p> <p> rowspan="n" - merge cells in the same column (subtract the corresponding columns starting from the second row)</p> <p>Based on the above basic knowledge, the program code and running results are given below</p> <p>Program code:</p> <p>XML/HTML Code copy the content to the clipboard</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>脚本之家</title> </head> <body bgcolor="#00FFCC"> <a name="top"></a> 今天<br> 天 气<br />不错。<br /> <br /> <font size="45" color="red"> 字体格式控制标签:<br /> <b>文字加粗方式1,b标签</b><br /> <strong>文字加粗方式2,strong标签</strong><br /> <i>文字倾斜方式1,i标签</i><br /> <em>文字倾斜方式2,em标签</em><br /> <u>文字加下划线,u标签</u> 123<center>居中标签,center,默认,前后若有其他,执行前后换行,保证自身是一个整体,然后进行居中显示。</center>456<br /> <br /> 内容容器标签:<br /> 123<p>p标签,段落标签,若前后有其他,执行前后换行,并且空开一行,保证自身是一个整体,</p>456 <ol>ol有序列表 <li>默认自带序号</li> <li>自带换行</li> <li>若前后有其他,执行前后换行,并且空开一行,保证自身是一个整体</li> </ol> <ul>ul无序列表 <li>默认不自带序号</li> <li>自带换行</li> <li>若前后有其他,执行前后换行,并且空开一行,保证自身是一个整体</li> </ul> <a href="http://www.baidu.com" target="_top">百度一下</a><br /> <img src="123.jpg" title="这是两个美女" alt="zheshilianggemeinv" /><br /><br /> <a href="http://www.qq.com"><img src="123.jpg" style="max-width:90%" / alt="HTML basics_general tags, commonly used tags and tables" ></a><br /><br /> <img src="123.jpg" style="max-width:90%" style="max-width:90%" / alt="HTML basics_general tags, commonly used tags and tables" > </font> <h1>h1~h6标签,标题控制标签</h1> <h2>若前后有其他,执行前后换行,并且空开一行,保证自身是一个整体</h2> <h3>重要性依次递减</h3> <h4>依附于现有的默认尺寸,进行增加或减小</h4> <p style="background-color:#0F0">p层标签,默认一上来就占用一整行</p> <span style="background-color:#CF0">span层标签,默认使用多少就占用多少</span><br /> <br /> <table align="center" width="480" height="120" border="1" cellpadding="0" cellspacing="0"> <tr align="center"> <td width="120"><a href="http://autohome.com">汽车之家</a></td> <td width="120">易车网</td> <td colspan="2">新浪汽车</td> </tr> <tr align="center"> <td>58同城</td> <td>赶集网</td> <td rowspan="2" bgcolor="#FF0033">京东</td> <td>安居客</td> </tr> <tr align="center"> <td>天猫</td> <td>聚美优品</td> <td>唯品会</td> </tr> </table> <br /> <a href="#top">返回最顶端</a> </body> </html></pre><div class="contentsignin">Copy after login</div></div><p></p> <p>operation result:</p> <p><br></p> <p><img alt="HTML basics_general tags, commonly used tags and tables" src="https://img.php.cn/upload/article/000/000/013/91647257c97b32607bd2623b63f31d57-0.jpg" style="max-width:90%" style="max-width:90%" title="HTML basics_general tags, commonly used tags and tables"></p> <p><img alt="HTML basics_general tags, commonly used tags and tables" src="https://img.php.cn/upload/article/000/000/013/91647257c97b32607bd2623b63f31d57-1.jpg" style="max-width:90%" style="max-width:90%" title="HTML basics_general tags, commonly used tags and tables"></p> <p><img alt="HTML basics_general tags, commonly used tags and tables" src="https://img.php.cn/upload/article/000/000/013/5424639f0a0bc8d124e6f5d528fe4c25-2.jpg" style="max-width:90%" style="max-width:90%" title="HTML basics_general tags, commonly used tags and tables"></p> <p><img alt="HTML basics_general tags, commonly used tags and tables" src="https://img.php.cn/upload/article/000/000/013/2194af7172c69ff00dc6b50c31291eb7-3.jpg" style="max-width:90%" style="max-width:90%" title="HTML basics_general tags, commonly used tags and tables">The above basic HTML key points_general tags, commonly used tags and tables are all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website. </p> <p>For more HTML basic key points_general tags, commonly used tags and tables related articles, please pay attention to the PHP Chinese website! </p>
Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template