网页设计——第一次课后练习

本文主要是介绍网页设计——第一次课后练习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本次练习了html文档的基本语法，主要内容有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="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg"><p>修改一下图片的大小</p><img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" width="400px"></p><a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml">从当前窗口跳转到一个新的链接<br></a><a href="https://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.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>

运行效果如下：

meta标签：

在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>这是一段带有&nbsp;&nbsp;&nbsp;&nbsp;额外缩进的文本。</p></body>
</html>

运行效果：

链接：

<a href="链接">链接文本</a>就是一个完整的html文本链接语句。

例如：

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">一张图片</a>

图片链接：

格式：<img src="图片">，可以添加一些细节，例如在后面加上宽度（width）、高度（height）等，例如：

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg"><img decoding="async" src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" alt="示例图片"></a>

下载链接：

格式：只需要在<a href="文件" download><a>就好了，只是增加了一个download语句。

这篇关于网页设计——第一次课后练习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！