1、HTML文本格式化标签:
<b>:定义粗体文本。<em>:定义着重文字。<i>:定义斜体字。<samll>:定义小号字。<strong>:定义加重语气。<sub>:定义下标字。<sup>:定义上标字。<ins>:定义插入字。<del>:定义删除字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <b>粗体文本</b> <br/> <strong>代替加粗b标签</strong> <br/> <i>斜体字</i> <br/> <em>代替斜体i标签</em> <br/> <small>文本是缩小的</small> <br/> <sub>下标</sub> <br/> <sup>上标</sup> <p> <del>blue</del> <br/> <ins>red</ins> </p> </body> </html>
2、HTML 计算机输出标签:
<code>:定义计算机代码。<kbd>:定义键盘码。<samp>:定义计算机代码样本。<var>:定义变量。<per>:定义预格式文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <code>计算机输出</code> <br/> <kbd>键盘输入</kbd> <br/> <samp>计算机代码文本</samp> <br/> <var>计算机变量</var> <br/> <pre> 定义 预 格式 文本 </pre> </body> </html>
3、HTML 引文,引用,及标签定义:
<abbr>:定义缩写。<address>:定义地址。<bdo>:定义文字方向。<blockquote>:定义长的引用。<q>:定义短的引用语。<cite>:定义引用、引证。<dfn>:定义一个定义项目。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <> <p> <addr title="Hello World">HW</addr> <br/> <address><a href="baidu@123.com">BD</a></address> <br/> <bdo dir="rtl">从右到左显示</bdo> <br/> <blockquote cite="https://baidu.com123">abcdefghijklmn</blockquote> <br/> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.H5im5apF0lK8QYr23V8MVgHaC9?w=327&h=140&c=7&r=0&o=5&dpr=1.25&pid=1.7" width="237" height="140"> <cite>作品的标题</cite> <br/> <dfn>定义项目</dfn> </p> </body> </html>
4、HTML 链接:使用标签 <a>来设置超文本链接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <a href="https://www.baidu.com">打开百度链接</a> </body> </html>
5、HTML 头部:
<head>:定义文档信息。<title>:定义文档的标题。<base>:定义页面链接标签的默认链接地址。<link>:定义一个文档和外部资源之间的关系。<meta>:定义HTML文档中的元数据。<script>:定义客户端的脚本文件。<style>:定义HTML文档的样式文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> <base href="www.baidu.com/images" target="_blank"> <link rel="stylesheet" type="text/css" href="styles.css"> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <p><img src="logo.png" ></p> <script>document.write("Hello World!") </script> <h1>这是一个标题</h1> <p>这是一个段落。</p </body> </html>
6、CSS用于渲染HTML元素标签的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body style="background-color:yellow;"> <h2 style="background-color:red;">标题</h2> <p style="background-color:green;">段落</p> <h1 style="font-family:verdana;">标题。</h1> <p style="font-family:arial;color:red;font-size:20px;">段落。</p> <h1 style="text-align:center;">居中对齐</h1> </body> </html>
7、HTML 图像由<img> 标签定义。要在页面上显示图像需要使用src属性,src属性值是图像的URL地址。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.H5im5apF0lK8QYr23V8MVgHaC9?w=327&h=140&c=7&r=0&o=5&dpr=1.25&pid=1.7" width="237" height="140" /> </body> </html>
8、HTML 表格由 <table> 标签来定义。行由 <tr> 标签定义,单元格由 <td> 标签定义,表头使用 <th> 标签进行定义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <table border="1"> <tr> <th>表头 1</th> <th>表头 2</th> </tr> <tr> <td>行 1, 单元格 1</td> <td>行 1, 单元格 2</td> </tr> <tr> <td>行 2, 单元格 1</td> <td>行 2, 单元格 2</td> </tr> </table> </body> </html>
9、HTML 列表:有序列表项有序列表始于 <ol> 标签,每个列表项始于 <li> 标签,使用数字来标记。无序列表使用 <ul> 标签,使用粗体圆点进行标记。自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <dl> <dt>饭</dt> <dd>- 吃</dd> <dt>牛奶</dt> <dd>- 喝</dd> </dl> </body> </html>
10、HTML <div>元素:定义文档的区域。HTML <span>元素:对文本中的一部分进行着色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你好(html)</title> </head> <body> <div style="color:#0000FF"> <h3>标题</h3> <p>文本</p> <p>我有 <span style="color:black">黑色</span> 的头发</p> </div> </body> </html>