用Html写网页的基本知识（1）_html加黑加粗的title用什么标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46357376/article/details/109460234

本文介绍了HTML网页制作的基础知识，包括声明、html标签、head标签、body标签的使用，以及标题、加粗、斜体、段落、自闭合标签、列表、超链接和图像标签的详细讲解，帮助初学者掌握网页布局和内容展示的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

一个声明，写在文档最前面

<!DOCTYPE html>

第二步

html标签，网页中所有的内容都写在html标签内。

第三步（ html标签内的东西）

head标签，里面可以添加网页内容,还可以设置网页标题，首先设置网页字符集编码，为了方便浏览器识别字符

<meta charset="utf-8" />

title标签来设置标题

<title>我的网页</title><!--网页标题-->

可以用以下的代码来添加一些内容，提供给搜索引擎，相当于是浏览器找到我们网站的关键词，在我们的网页中不显示。当然现在写这段代码与不写也没什么区别，因为浏览器怎么也搜索不到这个网页。标签就是注释,用法如下。

        <meta name="keywords" content="123">   <!--keywords，设置关键字 -->
		<meta name="description" content="456"><!--description，对网站中的信息进行简单的描述 -->
		<meta name="author" content="ww"><!--author，作者 -->

所有网页中的内容都写在 body 标签内如下，可以在这个标签内添加属性，text是字体颜色，bgcolor是背景颜色，用法如下：

<body text="red"  bgcolor="blue">
		我的网站
	</body>

写到这一步网页就是这样的：
在这里插入图片描述

如果不设置标题，不设置属性就是这样的：
在这里插入图片描述

基础标签

标签分为自闭合标签(单标签)和闭合标签(双标签)，单标签是指没有修饰的内容，给浏览器起一个提示作用，双标签就是有修饰的内容，在修饰内容前后都要写一个标签，一般后面那个标签比前面那个标签多一个斜杠(/).
1.标题标签，该变h后的数字可以改变标题的级数，作用是把字体加黑加粗，改变字体大小，一个占一行，添加属性可以改变标题位置(align)，实例如下：

        <h1 align="center">一级标题</h1>
		<h2 align="right">二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		<h7>七级标题</h7>

7的时候就没有用了，和普通字体一样
在这里插入图片描述

2.加黑加粗标签(b)和斜体标签(i),实例如下：

        <b>加黑加粗</b>
		<i>斜体标签</i>

效果：
在这里插入图片描述
3.（p）标签表示一个段落,段落与段落之间会有一个间隔，在代码中文字间不管有多少个空格浏览器都视为一个空格来显示，但用&nbsp来代替空格时就可以显示多个空格，（br/）是一个自闭合标签，为了告诉浏览器要换行.代码如下：

<p >
			 网页网页网页网页网&nbsp&nbsp&nbsp&nbsp&nbsp页网页网           页网页网页网页网页<br/>
			 网页网页网页网页网页网页网页网页网页
		 </p>
		 <p >
		 			 网页网页网页网页网页网页网页网页网页网页网页<br/>
		 			 网页网页网页网页网页网页网页网页网页
		 </p>

这就可以看出写&nbsp和空格的区别，和（br/）标签的作用，并且俩个段落之间的间隔也可以看到：
在这里插入图片描述
4.一些常用的自闭合标签&reg(商标符)，&copy(版权符)，&lt(小于号（<）)，&gt(大于号（>）)，<hr/>分割线

        &reg;  
		&copy;
		
		<br/>
		&lt;
		&gt;
		<hr/>

效果：
在这里插入图片描述

5.有序列表标签(ol)，该标签一般配合(li)标签使用，(ol)标签相当于在网页中申请一块地方，(li)就相当于在(ol)申请的地方内添加内容。有序列表可以在内容前面自动添加序号，(ol)可以根据type属性来指定序号的类型。示例如下：
(写三个有序列表可以方便观看区别)

<ol>
			<!--自动生成序号-->
			<li>列表第一条内容</li>
			<li>列表第二条内容</li>
		</ol>
		
		
		<ol type="a">
			<!--用a,b,c表示-->
			<li>列表第一条内容</li>
			<li>列表第二条内容</li>
		</ol>
		
		
		<ol type="I">
			<!--用罗马数字表示-->
			<li>列表第一条内容</li>
			<li>列表第二条内容</li>
		</ol>

效果如下：
在这里插入图片描述
无序列表的标签是(ul),不会自动生成序号，但在内容前面自动添加一个小图标，也可以根据type属性来指定内容前图标的类型，示例如下：

<ul>
			<!--自动生成小黑点的图标-->
			<li>列表第一条内容</li>
			<li>列表第二条内容</li>
		</ul>
		
		
		<ul type="circle">
			<!--空心圆圈表示-->
			<li>列表第一条内容</li>
		</ul>
		
		<ul type="square">
			<!--小方块表示-->
			<li>列表第一条内容</li>
		</ul>

效果如下：
在这里插入图片描述
6.超链接(a)，效果是通过网页上的东西来打开另一个网页，默认在当前窗口打开，使得我们自己的网页就没有了，我们可以用target属性改变，默认的参数是_self，我们可以设置成_blank，这个参数的意思就是新打开一个网页，用参数href来添加地址，示例：

<a href=http://www.baidu.com target="_blank">百度</a>
		<a href=http://www.qq.com target="_self">腾讯</a>

在这里插入图片描述
点击百度：

点击腾讯：

看到腾讯的网页就把原来我们的网页覆盖了。

7.图像标签(img)可以用 src=“图片地址”,来引用添加在本项目文件下的img文件内的的图片，如果没有添加到img文件内就使用绝对路径。这个标签也有一些属性，width=“宽度” ，height=“高度”，这俩个不建议使用，因为改变原有的宽度和高度会使图片变形，border=“边框宽度”（默认是0），alt=“图片不显示时显示的文字” 原因可能是地址填错了，有时候网不好图片加载不出来等，title=“鼠标移动到图片上时显示的汉字” 平时不显示，示例：

        <img src="img/hao123.png"/>
		<img src="img/hao123.png" width="20"   height="20" />
		<img src="img/1.png" border="1"/>
		<img src="img/1.png" border="2"/>
		<img src="img/1.pn"/>
		<img src="img/1.pn" alt="衣服"/>
		<img src="img/hao123.png"  width="300"   height="300"  border="1" title="这是hao12345"/>

效果：
在这里插入图片描述

当鼠标放在最后一张图上时，就会显示文字，其他就不会：
在这里插入图片描述
在超链接中添加图片，就可以使图片也可以点击后跳转到另一个网站：

<a href=http://www.qq.com target="_blank">
			<img src="img/qq.ico"/>

在这里插入图片描述