本次练习了html文档的基本语法，主要内容有html文档的标题、段落、结构、换行、图片、链接、列表、图表等。
代码：
<!DOCTYPE HTML>
<html><head><title>Report</title></head><body><h1>这是一个标题</h1><h2>这是一个二级标题</h2><p>这是一个文本标签</p><p>这是一个换行符<br>它的效果如下：</p><p>1<br>36<br>123<br>78912</p><p>恰似人间惊鸿客<br>墨染星辰云水间</p><p>还有一些细节化处理，例如：</p><p>这是<i>斜体</i>,这是<b>粗体</b>,这是<u>下划线</u></p><p>这是一张图片</p><img src=".jpg"><p>修改一下图片的大小</p><img src=".jpg" width="400px"></p><a href=".shtml">从当前窗口跳转到一个新的链接<br></a><a href=".shtml"target="_blank">新开一个窗口跳转到一个新的链接</a><ol><p>这是一个有序列表(ordered list)</p><li>list item1</li><li>list item2</li><li>list item3</li></ol><ul><p>这是一个无序列表(unordered list)</p><li>list item1</li><li>list item2</li><li>list item3</li></ul><p>这是一个表格：</p><table><thead><tr>行（table row）<td>表头1（table data）</td><td>表头2</td><td>表头3</td></tr></thead><tbody><tr><td>111</td><td>222</td><td>333</td></tr><tr><td>111</td><td>222</td></tr></tbody></table><p>给表格加上边框：</p><table border="1"><thead><tr>行（table row）<td>表头1（table data）</td><td>表头2</td><td>表头3</td></tr></thead><tbody><tr><td>111</td><td>222</td><td>333</td></tr><tr><td>111</td><td>222</td></tr></tbody></table></body>
</html>运行效果如下：
在HTML中，meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。
例如：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"/><title>网页标题</title><meta name="description" content="Chatgpt4.0是一个好软件"><meta name="keywords" content="HTML, meta, 前或后端开发"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>meta name="description" content="Chatgpt4.0是一个好软件"<br/>meta name="keywords" content="HTML, meta, 前或后端开发"<br/>meta http-equiv="Content-Type" content="text/html; charset=UTF-8"<br/></body>
</html>运行截图：
格式：<!-- 注释内容 --> ，例如：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页标题</title></head><body><!--这是一个注释--><p>明月松间照</p><!--又是一个注释--><p>清泉石上流</p><!--回忆一下斜体--><i>直上青天揽明月</i><!--回忆一下换行--><br><br><!--回忆一下黑体--><b>欲倾东海洗乾坤</b></body>
</html>运行结果：
简单标签，分为上标和下标。
例如：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页标题</title></head><body><!--上标举例--><p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p><!--下标举例 工业制月亮--><p>Gd+O<sub>2</sub>=Good</p></body>
</html>运行效果：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网页标题</title></head><body><p>这是一段带有 额外缩进的文本。</p></body>
</html>运行效果：
<a href="链接">链接文本</a>就是一个完整的html文本链接语句。
例如：
<a href=".jpg">一张图片</a>图片链接：
格式：<img src="图片">，可以添加一些细节，例如在后面加上宽度（width）、高度（height）等，例如：
<a href=".jpg"><img decoding="async" src=".jpg" alt="示例图片"></a>下载链接：
格式：只需要在<a href="文件" download><a>就好了，只是增加了一个download语句。
本文发布于:2024-02-02 11:13:06，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170684358743414.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
