HTML常用标签的用法示例
16lz
2021-09-29
HTML常用标签的用法示例
a 标签-超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
示例
<a href="https://www.php.cn/"></a>
HTML 链接 - target 属性
| 属性 | 值 | 描述 |
|---|---|---|
| target | _blank | 在新窗口中打开 |
| target | _parent | 使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效 |
| target | _self | 在本窗口打开，默认值 |
| target | _top | 假如你的页面被固定在框架之内，用该属性可以跳出框架 |
| target | framename | 指定框架中打开framename为框架名 |
| target | #标记 | 对应跳转到锚点（也叫书签）<a name="标记">标记</a> |
img 图片标签
图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" />
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="php.gif" alt="php" />
当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
ol、ul 有序和无序列表标签
搭配<li>列表项</li>标签使用
ol 有序列表
<ol><li>牛奶</li><li>咖啡</li><li>柠檬茶</li></ol>
ul 无序列表
<ul><li>牛奶</li><li>咖啡</li><li>柠檬茶</li></ul>
上面两部分代码显示为：
table 表格标签
| 标签 | 名称 | 说明 |
|---|---|---|
<table></table> | 表格标签 | 必须 |
<caption></caption> | 表格标题 | 标题 |
<thead></thead> | 表格表头 | 表头 |
<tbody></tbody> | 表格表体 | 一个table可以有多个表体 |
<tr></tr> | 行 | 包含单元格 |
<td></td> | 单元格 | 最小组成部分 |
<tfoot></tfoot> | 表格表尾 | 表格底部 |
代码示例
<table width="600" border="1"><!-- 标题 --><caption>表格标题</caption><!-- 表头 --><thead><tr bgcolor="lightgreen"><td>表头项目1</td><td>表头项目2</td><td>表头项目3</td><td>表头项目4</td><td>表头项目5</td><td>表头项目6</td></tr></thead><!-- 表格中的所有数据必须放在单元格td的元素中,必须写到tr中 --><!-- 表格主体 --><tbody><tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><tr><td>x</td><td>x</td><!-- 从表体2行3列开始水平方向合并3列 --><td bgcolor="red" colspan="3">x</td><!-- <td>x</td>1<td>x</td>2 --><td>x</td></tr><tr><td>x</td><!-- 在第3行进行垂直方向/行方向合并2个单元格 --><td bgcolor="violet" rowspan="2">x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr><!-- 注意2点: 合并操作一定是发生在单元格上td元素, --><!-- 合并属性colspan,rowspan,一定要写到被合并的起始单元格上 --><tr><td>x</td><td>x</td><!-- 这一个单元格应该被注释或删除 --><!-- <td>x</td> --><td>x</td><td>x</td><td>x</td></tr></tbody><!-- 可以有多个tbody表格主体 --><!-- 表尾 --><tfoot><tr><td bgcolor="yellow" colspan="6">表尾，备注...</td></tr></tfoot></table>
上方代码显示为：
iframe 内联框标签
定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架），在不改变当前网址的情况下在页面中打开另外一个页面。
代码示例
<h2><a href="https://taobao.com" target="taobao">淘宝</a></h2><iframe srcdoc="<em>点击上面的链接打开</em>" frameborder="1" width="400" height="400" name="taobao"></iframe>
上方代码显示为：
上图为点击“淘宝”链接前
上图为点击“淘宝”链接后
更多相关文章
- 1.模态框 2.flex布局 3.grid属性
- HTML5 初识
- CSS盒模型常用属性,单位，选择器
- 绝对定位、固定定位及flex,grid属性
- 1.box-sizing属性 2.伪类选择器 3.媒体查询
- Flex与grid属性思维导图
- 网页的标题标签（Title Tag）要怎么写才是最优化？
- 做SEO时，需要了解哪些HTML标签 ？
- Nofollow属性的介绍和使用