本文根据慕课网视频整理：http://www.imooc.com/code/49
以下标签是基础标签：
| 标签 | 使用示例 | 备注 |
|---|---|---|
<p> | <p>段落文本</p> | 将文字进行段落划分 |
<hx> | <h1>标题</h1> | x取值范围1-6，文字逐级减小，代表不同等级的标题 |
<em> | <em>会变斜体的文字</em> | 表示强调，被包裹的文字会变斜体 |
<strong> | <strong>会加粗的文字</strong> | 表示更加强烈的强调，被包裹的文字会变粗体 |
<span> | <span>文字</span> | 为了设置单独的样式 |
<q> | <q>被引用的文本</q> | 用于短文本/句子引用，被引用的对象会自动加上双引号 |
<blockquote> | <blockquote>被引用的段落</blockquote> | 用于长文本的引用，被引用的文本左右会有缩进 |
<hr>或<hr /> | 空标签，无需成对存在，表示分割线，其中<hr />是html1.0版本写法 <hr>是html4.01版本写法 | |
<address> | <address>地址信息</address> | 展示地址信息，被包裹的文本会变斜体 |
<code> | <code>一行代码</code> | 插入一行代码 |
<pre> | <pre>多行代码</pre> | 插入多行代码，会保留代码区中的换行和空格 |
<ul> | <ul><li>条目</li></ul> | 添加无序列表，每项li前会自带一个黑点 |
<ol> | <ol><li>条目</li></ol> | 添加有序列表，每项li前会自带有序标签1. 2. 3. |
<div> | <div id="goods"><h2>商品种类<h2><ol><li>苹果</li><li>橘子</li><ol></div> | 逻辑划分，将网页各部分划分为不同的逻辑块 |
<table> | <table>...</table> | 整个表格以<table>开始，以</table>结束 |
<tbody> | <tbody>...</tbody> | 如果表格内容没有被<tbody>标签包裹，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示 |
<tr> | <tr>...</tr> | 表格中的一行，有几对<tr>就代表表格有几行 |
<td> | <td>...</td> | 表格的一个单元格，一行中包含几对<td>，说明一行中就有几列 |
<th> | <th>...</th> | 表格的头部的一个单元格，表格表头，表头内字体会加粗居中 |
<summary> | <table summary="摘要"></table> | 给表格添加摘要，摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容 |
<caption> | <table><caption>标题<caption></table> | 给表格添加标题 |
<a> | <a href="http://www.baidu.com" title="点击进入百度" target="_blank">百度网址</a> | 添加超链接,target="_blank"代表在新窗口打开网页 |
<a> | <a mailto="邮件地址?cc=邮件地址&bcc=邮件地址&subject=邮件主题&body=邮件内容">点我发邮件</a> | 注意：mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔<cc>代表抄送地址，如果有多个用”;”隔开。<bcc>代表密件抄送地址，如果有多个用”;”隔开。<subject>代表邮件主题。<body>代表邮件内容 |
<img> | <img src="图片地址" alt="加载失败后的替换文本" title="提示文本"> | 图像可以是GIF，PNG，JPEG格式的图像文件 |
扫一扫
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
