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

HTML basics_general tags, commonly used tags and tables

高洛峰Original: 2017-02-17 10:54:431135browse

Part 1 HTML

--Start tag

Control information on the web page

; --End tag  Comment Body attributes: bgcolor Page background color text text color (specifies the color of all text) topmargin top margin leftmargin left margin rightmargin Right margin Distance bottomargin bottom margin background background wallpaper Note: Choose one of background color and background wallpaper 1.1. General tags 1.1. 1. Format control tag Control font; color="##FF0000"; face, font; size, font size. Underline can be made bold ( ). ## & lt; center & gt; & lt;/center & gt; Juxian Note: & lt; center & gt;/center & gt; show. or Equivalent to carriage return (shortcut key: shift + enter) space1.1.2. Content container tag <h1></h1>……<h6></h6> Title (will wrap automatically). HTML heading (Heading) is defined through tags such as <h1> - <h6>. </h6> </h1> 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 Note: 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 One line) The serial number is 1, 2, 3..., the serial number format can be changed in quotation marks 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 If "ol" is changed to "ul" above, it will be an unordered list, which does not have its own line breaking function. 1.2. Common tags Hyperlink tags <a href="Hyperlink%20address" target="_blank">Hyperlink text</a> --href (hyperlink reference); _blank opens in a new window. The first step: Make the anchor tag. <a name=""></a> Step 2: Make anchor links. <a href="The%20value%20of%20the%20name%20of%20the%20target%20link"></a> Picture tag <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. <img alt="HTML basics_general tags, commonly used tags and tables" > must appear alone. 1.3. Table <table></table> Table Width: Width. Can be expressed in pixels or percentages. Commonly used is 960 pixels. border: border. Commonly used value is 0. Cellpadding: The margin between the content and the cell border. Commonly used value is 0. Cellspacing: The spacing between cells. Commonly used value is 0. align: Alignment. bgcolor: Background color. background: background image. <tr></tr> Row align: The horizontal alignment of the content of a row valign: The vertical alignment of the content of a row Height: row height bgcolor:Background color Background:Background image <td></td> Cell < ;th> Header, the content of the cell is automatically centered and bold align: the alignment of the content of the cell valign: the vertical alignment of the content of the cell Method ## completely: cells width # Height: cell height # BGCOLOR: background color Background: background picture ## 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 Cell merge: (It is recommended to use table nesting as much as possible) colspan="n"——Merge Cells in the same row (subtract the corresponding columns when writing code later) rowspan="n" - merge cells in the same column (subtract the corresponding columns starting from the second row) Based on the above basic knowledge, the program code and running results are given below Program code: XML/HTML Code copy the content to the clipboard<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> 今天 天气 不错。 字体格式控制标签： 文字加粗方式1，b标签 文字加粗方式2，strong标签 文字倾斜方式1，i标签 文字倾斜方式2，em标签 文字加下划线，u标签 123<center>居中标签，center，默认，前后若有其他，执行前后换行，保证自身是一个整体，然后进行居中显示。</center>456 内容容器标签： 123p标签，段落标签，若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体，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> <img src="123.jpg" title="这是两个美女" alt="zheshilianggemeinv" /> <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> <img src="123.jpg" style="max-width:90%" style="max-width:90%" / alt="HTML basics_general tags, commonly used tags and tables" > <h1>h1~h6标签，标题控制标签</h1> <h2>若前后有其他，执行前后换行，并且空开一行，保证自身是一个整体</h2> <h3>重要性依次递减</h3> <h4>依附于现有的默认尺寸，进行增加或减小</h4> p层标签，默认一上来就占用一整行 span层标签，默认使用多少就占用多少 <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> <a href="#top">返回最顶端</a> </body> </html></pre> operation result: <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"> <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"> <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"> <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. For more HTML basic key points_general tags, commonly used tags and tables related articles, please pay attention to the PHP Chinese website!

Statement：

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

Previous article：table border attribute in htmlNext article：table border attribute in html

See more

HTML basics_general tags, commonly used tags and tables

Related articles