全部标签
写点什么
OpenHarmony算法元宇宙MySQL移动开发学习方法Web3.0高效工作数据库Python音视频前端AI大数据团队管理程序员运维深度思考低代码redisgolang微服务架构flutter 查看更多

速刷 html 一周目（下）

作者：吉师职业混子
  • 2022 年 9 月 23 日
    吉林

  • 本文字数：1092 字

    阅读完需：约 4 分钟

速刷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>
复制代码

输出如下



 以下是常见标签




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 列表


 无序列表


<html><body><ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul></body></html>
复制代码

输出如图


 有序列表


<html><body><ol><li>咖啡</li><li>茶</li><li>可口可乐</li></ol></body></html>
复制代码

输出如图



划线
评论
复制
发布于: 刚刚阅读数: 3

版权声明: 本文为 InfoQ 作者【吉师职业混子】的原创文章。

原文链接:【http://xie.infoq.cn/article/9de2acac51bfe20132fc90c79】。未经作者许可，禁止转载。

九月月更
用户头像

吉师职业混子

关注

还未添加个人签名 2022.08.25 加入

还未添加个人简介

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
速刷html一周目（下）_九月月更_吉师职业混子_InfoQ写作社区