<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>practice</title> </head> <body> <!--块级元素div 行内元素span--> <div>这是div1</div> <div>这是div2</div> <span>这是span1</span> <span>这是span2</span> <!--段落标签 p元素--> <p>hello world</p> <!--粗体标签 strong/b 前者利于搜索--> <strong>hello world</strong> <b>hello world</b> <!--斜体标签 em/i 前者利于搜索--> <em>hello world</em> <i>hello world</i> <!--#### 特殊符号 | 代码 | 符号 | | :------: | :-----: | | `<` | `<` 小于号 | | `>` | `>` 大于号 | | ` ` | 空格 | | ` ` | 空白位 | | `©` | 版权符 | | `&` | `&`符号 | --> <p>特<殊>符 号&emsp你好©2&3</p> <!--换行符br 水平线hr--> <span>在一起</span> <span>在一起</span> <span>要换行咯<br></span> <span>画一条线<hr></span> <span>在一起</span> <span>在一起</span> <!--#### `a`标签（超链接标签） a的属性 target=_blank 是否在当前页面打开链接 _self 当前 <a href="#">#</a> 刷新当前页面 <a href="javascript: void(0);">死链接</a> 死链接，不会跳转 <a href="#name">锚点</a> --> <!-- 图片标签 img元素 他的height 和width属性是默认的可修改，当只给定其中一个属性，那么图片等比缩放 <img src="地址" alt="利于搜索的关键字" width="宽" height="高"> --> <!--无序列表--> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ul> <!--有序列表--> <ol> <li>第一行</li> <li>第二行</li> <li>第三行</li> </ol> <!--定义列表--> <dl> <dt>定义标题</dt> <dd>定义列表项目1</dd> <dd>定义列表项目2</dd> <dd>定义列表项目3</dd> </dl> </body> </html>
运行结果
这是div1 这是div2 这是span1 这是span2 hello world hello world hello world hello world hello world 特<殊>符 号&emsp你好©2&3 在一起 在一起 要换行咯 画一条线 在一起 在一起 第一行 第二行 第三行 第一行 第二行 第三行 定义标题 定义列表项目1 定义列表项目2 定义列表项目3