html网页制作代码大全 网页常用标签及说明

上篇文章我们介绍了怎么创建一个最基本的网页,这篇我们介绍一下经常被使用的标签及用途。

显示在浏览器中的内容都要添加在基本模板中的body标签的中间,这点一定要记住!!

下面的body标签中各个标签,我做了解释说明,大概了解各个标签长什么样子,能记住就更好了。

下面的HTML代码可以直接复制到你的网页中(创建HTML文件的方法上篇文章有介绍)

html网页制作代码大全-1

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>这里是网页的标题,你看到在哪里显示的了吗?——橙先生</title>

</head>

<body>

<div>div标签可以理解为是个空盒子,什么都能装下</div>

<!– img标签用来插入图片,src=”图片路径”,alt属性可选,用来描述图片, <img src=”图片路径” alt=”图片的说明(可选)”> –>

这是一张图片,注意这里的img标签形式,这是个单标签

<img src=”图片地址” alt=”图片的说明(可选)”>

<!– a标签用来添加超链接 ,target=”_blank”属性用来点击链接后跳转到新的浏览器页签 href=”需要跳转到的网址或是文件”–>

<a href=”需要跳转到的网址或是文件,如” target=”_blank”>这个是文字的链接,也可以在其他内容上添加(比如图片)</a>

<!– p标签用来填入文字 –>

<p>在这里填入文字</p>

<p>在这里填入文字</p>

<!– span标签用来添加文字等,属于行内元素 –>

<span>在这里添加你想要的内容</span><span>!!!!!!这里是另外一段内容</span>

<!– 这里说说块元素和行内元素,像上面的P标签就是块元素,它独占一行, span标签就是行内元素,可以在一行中显示多个span标签内容 –>

<!– br标签用来换行 –>

<br>

<!– h1至h6是有固定大小的标题/文字标签 –>

<h1>这是h1里的内容</h1>

<h2>这是h2里的内容</h2>

<h3>这是h3里的内容</h3>

<h4>这是h4里的内容</h4>

<h5>这是h5里的内容</h5>

<h6>这是h6里的内容</h6>

<!– ul 和li是固定的搭配,是无序列表,可以有N个li –>

<ul>

<li>这里是无序列表1</li>

<li>这里是无序列表2</li>

<li>这里是无序列表3</li>

</ul>

<!– ol 和li是固定的搭配,是有序列表,可以有N个li –>

<ol>

<li>这里是有序列表1</li>

<li>这里是有序列表2</li>

</ol>

<!– table 、tr 和 td是固定搭配 :table是表格,tr是表格里的行,td是表格里的列, 表格里可以有N行 N列–>

<table>

<tr>

<td>表格中第一行的第1列</td>

<td>表格中第一行的第2列</td>

</tr>

<tr>

<td>表格中第二行的第1列</td>

<td>表格中第二行的第2列</td>

<td>表格中第二行的第3列</td>

</tr>

</table>​

</body>

</html>

上面的内容已经大致了解了吧?下一篇我们将介绍各种常用到的样式,让各个标签更加的美观。记得关注一下哦!

(0)
上一篇 2023年8月9日 21:06:15
下一篇 2023年8月9日 21:11:51

相关推荐

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 caogoon@qq.com 举报,一经查实,本站将立刻删除。