提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

速刷html一周目（下）

HTML 一周 速刷
2023-06-13 09:13:12 时间

续上文

目录

改变文字方向

删除线与下划线

 以下是常见标签

HTML注释

HTML链接

HTML链接语法

HTML表格

HTML列表

 无序列表

 有序列表

改变文字方向

<html>

<body>

<p>如果浏览器支持的话，下一行从右到左输出</p>

<bdo dir="rtl">
right to left
</bdo>

</body>

</html>

输出如下

删除线与下划线

<ins>下划线

<del>删除线

<html>
<body>
<p>我<del>不喜欢</del><ins>喜欢</ins>你</p>
<p>一些老式浏览器并不支持删除线和下划线，会将其显示为普通文本</p>
</body>
</html>

输出如下

 以下是常见标签

标签

描述

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

标签

描述

<abbr>

定义缩写。

<address>

定义地址。

<bdo>

定义文字方向。

<blockquote>

定义长的引用。

<q>

定义短的引用语。

<cite>

定义引用、引证。

<dfn>

定义一个定义项目。

HTML注释

HTML中注释格式<!--注释-->例如

<html>
<body>
<!--其实我不是高手-->
<p>我是高手！</p>
</body>
</html>

输出如下

HTML链接

HTML使用超链接与网站上另一个文件相连，方便用户跳转。

<html>
<body>

<p>
<a href="www.baidu.com">这几个文字</a>会让你跳转到百度。
</p>

</body>
</html>

输出如下

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以通过点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当鼠标指针移动到网页中的某个链接上时，鼠标会显示可交互式操作。

通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

HTML链接语法

1.<a href="url">text</a>

开始和结束标签中间的文本被标示为超链接。

若想让超链接被点击后，在新标签页中打开，可以如下操作

<a href="www.baidu.com" target="_blank">visit baidu</a>

2.在HTML中，name被定义成锚，可以使用name属性创建HTML页面中的书签。

书签不会以任何特殊方式显示。

<a name="label">锚（显示在页面上的文本）</a>

锚的名称随你喜欢定义

可以使用id属性来替代name属性。

HTML表格

<html>
<body>

<p>表格标签table开始</p>
<p>表格行由tr开始</p>
<p>表格数据由td开始</p>

<h4>一列</h4>
<table border="1">
<tr>
    <td>250</td>
</tr>
</table>

<h4>一行两列</h4>
<table border=1>
<tr>
    <td>250</td>
    <td>500</td>
</tr>
</table>

<h4>两行两列</4>
<table border="1">
<tr>
    <td>250</td>
    <td>500</td>
</tr>
<tr>
    <td>750</td>
    <td>1000</td>
</tr>
</table>
</body>
</html>

输出如图

 border="1"是定义边框，如果只写<table>,则不会输出边框。

表格中的表头用<th></th>定义。

空单元格

<html>

<body>

<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td>&nbsp</td>
  <td>Some text</td>
</tr>
</table>
</html>

输出如图

 &nbsp相当于空格，添加之后可以有效避免空白单元格中无边框的情况发生。

HTML列表

标签

描述

<ol>

定义有序列表。

<ul>

定义无序列表。

<li>

定义列表项。

<dl>

定义定义列表。

<dt>

定义定义项目。

<dd>

定义定义的描述。

 无序列表

<html>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

输出如图

 有序列表

<html>
<body>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>

输出如图

相关文章