html的基本标签含义

2023年6月20日发(作者：)

:表示html文件的起始和终止，标签在首行，标签在最后一行，两个要一起使用，网页中其他内容都要放在这两个标签之间。

:表示网页的头部标签，用来定义文件的头部信息，与标签一样，也是成对使用。

:表示出文件主体区，之间是网页的主题内容和其他用于控制文本显示方式的标签。

:网页标题，用于定义浏览器窗口标题栏上的文本信息，可以是网页的标题名或创作信息等网页说明信息。 <hr>:用于显示水平线，使页面看起来更整齐明了。 <pre>:将内容以原始格式显示。 <address>:标注联络人姓名、电话、地址等信息。 <blockquote>:区段引用标签。 <!—— ——>:注释标签，使用注释标签的目的是为网页代码中不同部分加上说明，方便日后的修改。注释的内容是不会在浏览器上显示出来的，如<——要注释的内容——>。 :文本段落，可以用align属性设置left、center、right 3种对齐方式。 :强制换行，没有结束标签，在网页中产生换行效果。 <center>:使文字或其他网页元素居中显示。 <marquee>:文本或图片移动显示，属性direction用来指示移动方向。 <dl>、<dt>、<dd>:<dl></dl>标签创建无序列表，<dt></dt>定义上层项目，<dd>、</dd>定义下层项目，<dt>、</dt>和<dd></dd>标签一定要放在<dl></dl>标签中才能使用。 <ul>、<ol>、<li>:<ol></ol>标签创建有序列表，<ul></ul>标签创建无序列表，<li>、</li>定义下层项目，<li>、</li>标签一定要放在<ol></ol>或<ul></ul>标签中才能使用。 <dir>:目录式列表。 <menu>:菜单式列表。 <hi>:i=1,2,......,6,网页中文本标题，<h1></h1>显示最大的字号，<h6></h6>显示最小的字号。 :粗字体。 :斜字体。 :改变字体设置，有face、size、color3个属性来控制，face设置字体，size设置字号，color设置颜色。 <big>:加大字号。 :缩小字号。 :斜体标签。 <a>:建立超链接，有href、target、name等重要属性，其中href属性为<a>标签必须具备的属性。  href属性。设置目标页面的链接地址，可以是绝对地址也可以是相对地址，如果为“#”表示空链接。  target属性。设置超链接的打开方式，共5种：_blank指在新窗口中打开，_parent指在上一级窗口中打开，_self指在同一窗口打开，_top指在浏览器的整个窗口中打开，new指在新窗口中打开。  name属性。创建一个命名锚记，使用命名锚记后，会让链接直接跳转到一个页面的某一部分。 <img>:图像标签，用于网页中插入图像。<img>标签拥有以下属性。  src属性。该属性为<img>标签必须具备的属性，指存放图片的具体路径。  width属性。图像的宽度。  height属性。图像的高度。  alt属性。图像的注释，也就是代替文字。  align属性。图像的对齐属性，值baseline为基线对齐，值top为顶端对齐，值middle为居中，值bottom为底端对齐，值texttop为文本上方对齐，值absmiddle为绝对居中，值absbottom为绝对底端对齐，值left为左，值right为右。  border属性。图像的边框的宽度，值大于或等于0，以像素（px）为单位。  vspace属性。图像的垂直边距，图像与页面或文本之间的垂直边距。  hspace属性。图像的水平边距。 <table>:定义表格区域。 <caption>:定义表格标题。 <th>:定义表格头部。 <tr>:定义表格行。 <td>:定义单元格。 <div>:区域标签（又称容器标签），用来作为多种HTML标签的组合的容器，对该区域块进行操作和设置，就可以完成对区域块中元素的操作和设置，Div能让网页代码具有很高的可扩展性。 :文字图片等简短内容的容器，其意义有点类似Div，但是和Div不一样的是，span是文本级元素，默认不会占整行，可以在一行显示多个span。span常在段落、列表条目等项目中使用，该标签不能嵌套在其他的封闭级元素中。 p{text-indent:2em;}表示首行缩进两字符。 line-height表示行间距，p{line-height:2em;}表示行间距（行高）为两字符。 letter-spacing表示字母与字母之间的间距，word-spacing表示英文单词之间的间距。 text-align:center；表示居中对齐，text-align:left;表示居左对齐，text-align:right;表示居右对齐。 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、、、、、、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 在html中<div>、 、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。将内联元素a转换为块状元素表示为a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 在html中，、<a>、<label>、 和就是典型的内联元素（行内元素）。块状元素也可以通过代码display:inline将元素设置为内联元素。如：div{ display:inline; } 块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。 内联块状元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。 border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。 border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。 只设置下（上、右、左）边框的设置： div{border-bottom:1px solid red;} border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px，左右一样为20px，可以这么写： div{padding:10px 20px;} 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码： div{margin:20px 10px 15px 30px;} 如果上右下左的边界都为10px;可以这么写： div{ margin:10px;} 如果上下边界一样为10px，左右一样为20px，可以这么写： div{ margin:10px 20px;} 总结一下：padding和margin的区别，padding在边框里，margin在边框外。 流动模型 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 浮动模型 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。（在设置完边框数据后设置浮动模型） 并排显示左对齐：float:left; 一左一右显示：#div1{float:left;} #div2{float:right;} 并排显示右对齐：float:right; 层模型层模型有三种形式：1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed) 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> （要向什么方向移动就输入多少距离就输入相反的方向和距离） 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> Position fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。（想将层模型固定在什么位置就在Position fixed后加上位置，默认是固定在左上角） 运用position:relative可以相对于其他元素进行定位。 1、参照定位的元素必须是相对定位元素的前辈元素 2、参照定位的元素必须加入position:relative; 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 行内元素怎么进行水平居中： 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 ) 当被设置元素为块状元素时用 text-align：center 就不起作用了。 定宽块状元素(定宽块状元素：块状元素的宽度width为固定值) <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style> 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）： 加入 table 标签 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 如下：html代码： <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div> css代码： <style>table{ border:1px solid; margin:0 auto; } </style> 第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。 html代码： <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ text-align:center; }/* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; }/* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style> 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style> 设置垂直居中： 分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。 line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。 这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。 输入：.wrap{text-align:center;}表示垂直居中。 </img>2023年6月20日发(作者：)</img><html>:表示html文件的起始和终止，<html>标签在首行，</html>标签在最后一行，两个要一起使用，网页中其他内容都要放在这两个标签之间。 <head>:表示网页的头部标签，用来定义文件的头部信息，与<html>标签一样，也是<head></head>成对使用。 <body>:表示出文件主体区，<body></body>之间是网页的主题内容和其他用于控制文本显示方式的标签。 <title>:网页标题，用于定义浏览器窗口标题栏上的文本信息，可以是网页的标题名或创作信息等网页说明信息。 <hr>:用于显示水平线，使页面看起来更整齐明了。 <pre>:将内容以原始格式显示。 <address>:标注联络人姓名、电话、地址等信息。 <blockquote>:区段引用标签。 <!—— ——>:注释标签，使用注释标签的目的是为网页代码中不同部分加上说明，方便日后的修改。注释的内容是不会在浏览器上显示出来的，如<——要注释的内容——>。 :文本段落，可以用align属性设置left、center、right 3种对齐方式。 :强制换行，没有结束标签，在网页中产生换行效果。 <center>:使文字或其他网页元素居中显示。 <marquee>:文本或图片移动显示，属性direction用来指示移动方向。 <dl>、<dt>、<dd>:<dl></dl>标签创建无序列表，<dt></dt>定义上层项目，<dd>、</dd>定义下层项目，<dt>、</dt>和<dd></dd>标签一定要放在<dl></dl>标签中才能使用。 <ul>、<ol>、<li>:<ol></ol>标签创建有序列表，<ul></ul>标签创建无序列表，<li>、</li>定义下层项目，<li>、</li>标签一定要放在<ol></ol>或<ul></ul>标签中才能使用。 <dir>:目录式列表。 <menu>:菜单式列表。 <hi>:i=1,2,......,6,网页中文本标题，<h1></h1>显示最大的字号，<h6></h6>显示最小的字号。 :粗字体。 :斜字体。 :改变字体设置，有face、size、color3个属性来控制，face设置字体，size设置字号，color设置颜色。 <big>:加大字号。 :缩小字号。 :斜体标签。 <a>:建立超链接，有href、target、name等重要属性，其中href属性为<a>标签必须具备的属性。  href属性。设置目标页面的链接地址，可以是绝对地址也可以是相对地址，如果为“#”表示空链接。  target属性。设置超链接的打开方式，共5种：_blank指在新窗口中打开，_parent指在上一级窗口中打开，_self指在同一窗口打开，_top指在浏览器的整个窗口中打开，new指在新窗口中打开。  name属性。创建一个命名锚记，使用命名锚记后，会让链接直接跳转到一个页面的某一部分。 <img>:图像标签，用于网页中插入图像。<img>标签拥有以下属性。  src属性。该属性为<img>标签必须具备的属性，指存放图片的具体路径。  width属性。图像的宽度。  height属性。图像的高度。  alt属性。图像的注释，也就是代替文字。  align属性。图像的对齐属性，值baseline为基线对齐，值top为顶端对齐，值middle为居中，值bottom为底端对齐，值texttop为文本上方对齐，值absmiddle为绝对居中，值absbottom为绝对底端对齐，值left为左，值right为右。  border属性。图像的边框的宽度，值大于或等于0，以像素（px）为单位。  vspace属性。图像的垂直边距，图像与页面或文本之间的垂直边距。  hspace属性。图像的水平边距。 <table>:定义表格区域。 <caption>:定义表格标题。 <th>:定义表格头部。 <tr>:定义表格行。 <td>:定义单元格。 <div>:区域标签（又称容器标签），用来作为多种HTML标签的组合的容器，对该区域块进行操作和设置，就可以完成对区域块中元素的操作和设置，Div能让网页代码具有很高的可扩展性。 :文字图片等简短内容的容器，其意义有点类似Div，但是和Div不一样的是，span是文本级元素，默认不会占整行，可以在一行显示多个span。span常在段落、列表条目等项目中使用，该标签不能嵌套在其他的封闭级元素中。 p{text-indent:2em;}表示首行缩进两字符。 line-height表示行间距，p{line-height:2em;}表示行间距（行高）为两字符。 letter-spacing表示字母与字母之间的间距，word-spacing表示英文单词之间的间距。 text-align:center；表示居中对齐，text-align:left;表示居左对齐，text-align:right;表示居右对齐。 在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、、、、、、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 在html中<div>、 、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。将内联元素a转换为块状元素表示为a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 在html中，、<a>、<label>、 和就是典型的内联元素（行内元素）。块状元素也可以通过代码display:inline将元素设置为内联元素。如：div{ display:inline; } 块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。 内联块状元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。 border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。 border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。 只设置下（上、右、左）边框的设置： div{border-bottom:1px solid red;} border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码： div{padding:20px 10px 15px 30px;} 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px，左右一样为20px，可以这么写： div{padding:10px 20px;} 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码： div{margin:20px 10px 15px 30px;} 如果上右下左的边界都为10px;可以这么写： div{ margin:10px;} 如果上下边界一样为10px，左右一样为20px，可以这么写： div{ margin:10px 20px;} 总结一下：padding和margin的区别，padding在边框里，margin在边框外。 流动模型 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 浮动模型 任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。（在设置完边框数据后设置浮动模型） 并排显示左对齐：float:left; 一左一右显示：#div1{float:left;} #div2{float:right;} 并排显示右对齐：float:right; 层模型层模型有三种形式：1、绝对定位(position: absolute)2、相对定位(position: relative)3、固定定位(position: fixed) 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <div id="div1"></div> （要向什么方向移动就输入多少距离就输入相反的方向和距离） 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> Position fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。（想将层模型固定在什么位置就在Position fixed后加上位置，默认是固定在左上角） 运用position:relative可以相对于其他元素进行定位。 1、参照定位的元素必须是相对定位元素的前辈元素 2、参照定位的元素必须加入position:relative; 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 行内元素怎么进行水平居中： 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 ) 当被设置元素为块状元素时用 text-align：center 就不起作用了。 定宽块状元素(定宽块状元素：块状元素的宽度width为固定值) <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style> 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）： 加入 table 标签 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。 如下：html代码： <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div> css代码： <style>table{ border:1px solid; margin:0 auto; } </style> 第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果。 html代码： <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ text-align:center; }/* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; }/* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style> 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css代码： <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style> 设置垂直居中： 分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。 line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。 这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。 输入：.wrap{text-align:center;}表示垂直居中。 </img></div></article></div><div class="torson info"><div>本文发布于:2023-06-20，感谢您对本站的认可！</div><div>本文链接:<a href="http://www.torson.com.cn/wangzhan/1687264133a502.html" title="html的基本标签含义">http://www.torson.com.cn/wangzhan/1687264133a502.html</a></div><div>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</div></div>本文标签：<a href="/tag/3.html" target="_blank">html滚动条样式</a></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;">取消回复</a></h4><form action="/comment/create/502.html?safe_token=1jT3eWgXguT6i9AvD3Yn96YiKJKnSmzJ7pWnV5XdAL0mPPMsxgxuNopgmCt2mZjblBmlV1Er1LlmFdRj3DY_2Fkg_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5"></textarea></div></div><div class="torson psumbit"><input name="sumbit" type="submit" tabindex="6" value="发布" class="button" /></div></form></div><div class="torson commentlist"><div class="torson comment-tab"><div class="torson come-comt">评论列表（有0条评论）</div></div><ul class="diy-comment"></ul></div></div></div><div class="torson mainr"><div class="widget widget_previous"><h4 class="bar">最近发表</h4><ul><li><a href="/wangzhan/1687249706a20.html"title='webapi框架搭建-安全机制(四)-可配置的基于角色的权限控制' aria-label='webapi框架搭建-安全机制(四)-可配置的基于角色的权限控制'>webapi框架搭建-安全机制(四)-可配置的基于角色的权限控制</a></li><li><a href="/wangzhan/1687253089a130.html"title='element-ui滚动条样式修改' aria-label='element-ui滚动条样式修改'>element-ui滚动条样式修改</a></li><li><a href="/wangzhan/1687257443a269.html"title='js滚动事件' aria-label='js滚动事件'>js滚动事件</a></li><li><a href="/wangzhan/1687266192a564.html"title='java面试自我介绍范文_优秀Java程序员应聘个人介绍' aria-label='java面试自我介绍范文_优秀Java程序员应聘个人介绍'>java面试自我介绍范文_优秀Java程序员应聘个人介绍</a></li><li><a href="/wangzhan/1687266815a587.html"title='[程序员实习日记大全]java程序员实习日记多篇' aria-label='[程序员实习日记大全]java程序员实习日记多篇'>[程序员实习日记大全]java程序员实习日记多篇</a></li><li><a href="/wangzhan/1687266861a589.html"title='Java未来的发展方向与展望' aria-label='Java未来的发展方向与展望'>Java未来的发展方向与展望</a></li><li><a href="/wangzhan/1687269072a645.html"title='自动拆箱和自动装箱原理' aria-label='自动拆箱和自动装箱原理'>自动拆箱和自动装箱原理</a></li><li><a href="/wangzhan/1687272402a767.html"title='Java程序设计(清华大学出版社林巧民主编)课后答案' aria-label='Java程序设计(清华大学出版社林巧民主编)课后答案'>Java程序设计(清华大学出版社林巧民主编)课后答案</a></li><li><a href="/wangzhan/1687276443a896.html"title='css背景图片与img标签的区别梳理' aria-label='css背景图片与img标签的区别梳理'>css背景图片与img标签的区别梳理</a></li><li><a href="/wangzhan/1687276988a917.html"title='Jenkins持续集成——巧妙解决无法打开引用CSS、JS的HTML页面问题' aria-label='Jenkins持续集成——巧妙解决无法打开引用CSS、JS的HTML页面问题'>Jenkins持续集成——巧妙解决无法打开引用CSS、JS的HTML页面问题</a></li><li><a href="/wangzhan/1687278016a957.html"title='利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(d...' aria-label='利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(d...'>利用div+css实现九宫格,然后用js实现点击每个格子可以随机更改格子(d...</a></li><li><a href="/wangzhan/1687281206a1053.html"title='动态添加css' aria-label='动态添加css'>动态添加css</a></li><li><a href="/wangzhan/1687289914a1175.html"title='安卓刷机包制作详解' aria-label='安卓刷机包制作详解'>安卓刷机包制作详解</a></li><li><a href="/wangzhan/1687309950a1559.html"title='基于平衡计分卡的绩效管理指标权重的确定' aria-label='基于平衡计分卡的绩效管理指标权重的确定'>基于平衡计分卡的绩效管理指标权重的确定</a></li><li><a href="/wangzhan/1687316816a1761.html"title='SpringValidator校验解析' aria-label='SpringValidator校验解析'>SpringValidator校验解析</a></li><li><a href="/wangzhan/1687322920a1958.html"title='app测试与web测试的区别' aria-label='app测试与web测试的区别'>app测试与web测试的区别</a></li><li><a href="/wangzhan/1687331694a2239.html"title='测试基础-测试用例编写' aria-label='测试基础-测试用例编写'>测试基础-测试用例编写</a></li><li><a href="/wangzhan/1687332810a2282.html"title='软件测试设计报告材料案例QQ空间' aria-label='软件测试设计报告材料案例QQ空间'>软件测试设计报告材料案例QQ空间</a></li><li><a href="/wangzhan/1687339680a2606.html"title='sql学习资料笔记' aria-label='sql学习资料笔记'>sql学习资料笔记</a></li><li><a href="/wangzhan/1687353033a3606.html"title='Sql Server中存储、读写Word文件' aria-label='Sql Server中存储、读写Word文件'>Sql Server中存储、读写Word文件</a></li></ul></div><section id="aside_about" class="widget widget_aside_about sb br mb"><div class="avatar"><img class="img" src="/view/template/mitiqin/img/tx.jpg" alt="拓祥电子编程网"/></div><div class="wrap pd">拓祥电子编程网拓祥电子编程提供编程程序员技术分享技术，经验代码。<ul class="ul clearfix"></ul></div></section><div class="torson clear"></div><div class="torson widgets"><h4 class="bar">相关推荐</h4><div class="torson hot-post"><ul class="clearfix"><li><a href="/chengxu/1687261331a416.html"title='html中的标签' aria-label='html中的标签'><img src="/uploads/image/0932.jpg" alt="html中的标签"/>html中的标签</a></li><li><a href="/wangzhan/1687261439a420.html"title='HTML表头固定,内容滚动实现' aria-label='HTML表头固定,内容滚动实现'><img src="/uploads/image/0642.jpg" alt="HTML表头固定,内容滚动实现"/>HTML表头固定,内容滚动实现</a></li><li><a href="/news/1687261602a427.html"title='html背景框大小代码,CSS3:元素的边框、背景和大小_htmlcss_WEB-ITnos...' aria-label='html背景框大小代码,CSS3:元素的边框、背景和大小_htmlcss_WEB-ITnos...'><img src="/uploads/image/0003.jpg" alt="html背景框大小代码,CSS3:元素的边框、背景和大小_htmlcss_WEB-ITnos..."/>html背景框大小代码,CSS3:元素的边框、背景和大小_htmlcss_WEB-ITnos...</a></li><li><a href="/chengxu/1687261626a428.html"title='HTML实现左侧内容可滚动,右侧列表固定布局' aria-label='HTML实现左侧内容可滚动,右侧列表固定布局'><img src="/uploads/image/0535.jpg" alt="HTML实现左侧内容可滚动,右侧列表固定布局"/>HTML实现左侧内容可滚动,右侧列表固定布局</a></li><li><a href="/chengxu/1687261781a433.html"title='bootstraptable表头固定、冻结列、横向纵向滚动条' aria-label='bootstraptable表头固定、冻结列、横向纵向滚动条'><img src="/uploads/image/0445.jpg" alt="bootstraptable表头固定、冻结列、横向纵向滚动条"/>bootstraptable表头固定、冻结列、横向纵向滚动条</a></li><li><a href="/news/1687261947a436.html"title='HTML指令大全' aria-label='HTML指令大全'><img src="/uploads/image/0093.jpg" alt="HTML指令大全"/>HTML指令大全</a></li><li><a href="/wangzhan/1687262039a440.html"title='jquery设置css样式、style属性' aria-label='jquery设置css样式、style属性'><img src="/uploads/image/0891.jpg" alt="jquery设置css样式、style属性"/>jquery设置css样式、style属性</a></li><li><a href="/wangzhan/1687262062a441.html"title='详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现' aria-label='详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现'><img src="/uploads/image/0085.jpg" alt="详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现"/>详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现</a></li><li><a href="/wangzhan/1687262156a445.html"title='scroll系列相关属性' aria-label='scroll系列相关属性'><img src="/uploads/image/0694.jpg" alt="scroll系列相关属性"/>scroll系列相关属性</a></li><li><a href="/chengxu/1687262179a446.html"title='实例讲解DataTables固定表格宽度(设置横向滚动条)' aria-label='实例讲解DataTables固定表格宽度(设置横向滚动条)'><img src="/uploads/image/0103.jpg" alt="实例讲解DataTables固定表格宽度(设置横向滚动条)"/>实例讲解DataTables固定表格宽度(设置横向滚动条)</a></li><li><a href="/news/1687262224a448.html"title='DataTables列过多时固定表格宽度(设置横向滚动条)' aria-label='DataTables列过多时固定表格宽度(设置横向滚动条)'><img src="/uploads/image/0733.jpg" alt="DataTables列过多时固定表格宽度(设置横向滚动条)"/>DataTables列过多时固定表格宽度(设置横向滚动条)</a></li><li><a href="/chengxu/1687262819a460.html"title='html评价标准展示,网页设计评分标准.doc' aria-label='html评价标准展示,网页设计评分标准.doc'><img src="/uploads/image/0969.jpg" alt="html评价标准展示,网页设计评分标准.doc"/>html评价标准展示,网页设计评分标准.doc</a></li><li><a href="/news/1687262884a462.html"title='htmldiv代码大全,DIV+CSS常用代码大全' aria-label='htmldiv代码大全,DIV+CSS常用代码大全'><img src="/uploads/image/0746.jpg" alt="htmldiv代码大全,DIV+CSS常用代码大全"/>htmldiv代码大全,DIV+CSS常用代码大全</a></li><li><a href="/wangzhan/1687262988a464.html"title='HTML5 标签和属性列表' aria-label='HTML5 标签和属性列表'><img src="/uploads/image/0919.jpg" alt="HTML5 标签和属性列表"/>HTML5 标签和属性列表</a></li><li><a href="/news/1687263076a467.html"title='HTML语言基础练习题' aria-label='HTML语言基础练习题'><img src="/uploads/image/0496.jpg" alt="HTML语言基础练习题"/>HTML语言基础练习题</a></li><li><a href="/news/1687263345a477.html"title='html题目' aria-label='html题目'><img src="/uploads/image/0390.jpg" alt="html题目"/>html题目</a></li><li><a href="/wangzhan/1687263458a481.html"title='vue项目中el-tree支持横向和纵向滚动条设置' aria-label='vue项目中el-tree支持横向和纵向滚动条设置'><img src="/uploads/image/0471.jpg" alt="vue项目中el-tree支持横向和纵向滚动条设置"/>vue项目中el-tree支持横向和纵向滚动条设置</a></li><li><a href="/wangzhan/1687263503a483.html"title='html+css总结+实训day01' aria-label='html+css总结+实训day01'><img src="/uploads/image/0737.jpg" alt="html+css总结+实训day01"/>html+css总结+实训day01</a></li><li><a href="/chengxu/1687264044a499.html"title='[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡' aria-label='[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡'><img src="/uploads/image/0784.jpg" alt="[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡"/>[elementui]el-table在同时使用固定列和合计行时横向滚动条被遮挡</a></li><li><a href="/news/1687264270a508.html"title='htmlcss基础篇——DOM中关于脱离文档流的几种情况分析' aria-label='htmlcss基础篇——DOM中关于脱离文档流的几种情况分析'><img src="/uploads/image/0104.jpg" alt="htmlcss基础篇——DOM中关于脱离文档流的几种情况分析"/>htmlcss基础篇——DOM中关于脱离文档流的几种情况分析</a></li></ul></div></div><div class="torson clear"></div><div class="widget widget_tags"><h4 class="bar">标签列表</h4><ul><li class="submenu"><a target="_blank" href="/tag/617802.html">文件服务器中的DFS全名是什么</a></li><li class="submenu"><a target="_blank" href="/tag/617773.html">2t2b服务器的大神叫什么</a></li><li class="submenu"><a target="_blank" href="/tag/617769.html">一刀传世服务器爆满为什么进不去</a></li><li class="submenu"><a target="_blank" href="/tag/617759.html">为什么一用微信就无服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617756.html">ed2k服务器列表是什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617727.html">qq邮箱的邮箱服务器是什么样子的</a></li><li class="submenu"><a target="_blank" href="/tag/617685.html">魔兽世界tbc怀旧服什么时候开新服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617581.html">中国电脑服务器是干什么的</a></li><li class="submenu"><a target="_blank" href="/tag/617553.html">电脑主板和服务器主板有什么区别</a></li><li class="submenu"><a target="_blank" href="/tag/617531.html">好的塔科夫黑边什么服务器不能玩</a></li><li class="submenu"><a target="_blank" href="/tag/617524.html">服务器的交换机是什么样的</a></li><li class="submenu"><a target="_blank" href="/tag/617523.html">星球重启第一个服务器叫什么</a></li><li class="submenu"><a target="_blank" href="/tag/617502.html">远程摄像头服务器是什么样的</a></li><li class="submenu"><a target="_blank" href="/tag/617462.html">阿里云买服务器什么时候有活动啊</a></li><li class="submenu"><a target="_blank" href="/tag/617429.html">为什么我的DOTA2是日本服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617427.html">和利时M6为什么还有服务器</a></li><li class="submenu"><a target="_blank" href="/tag/617416.html">网易蛋仔派对的服务器长什么样</a></li><li class="submenu"><a target="_blank" href="/tag/617407.html">暗影格斗3没有服务器是什么意思</a></li><li class="submenu"><a target="_blank" href="/tag/617403.html">戴尔服务器r740支持什么系统</a></li><li class="submenu"><a target="_blank" href="/tag/617340.html">6s为什么地图无法定位服务器</a></li></ul></div><div class="torson clear"></div></div></div><footer id="footer"><div class="footer container-w cl"><div class="fnav"></div><div align="center"> CopyRight © 2022 All Rights Reserved <a href="/" title="拓祥电子编程网" target="_blank">拓祥电子编程网</a><a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-7</a>友情链接：<a href="https://www.815494.com/biancheng/">编程日记</a>|<a href="https://www.dn580.com/">电脑我帮您</a>|<a href="https://www.loghao.com/">网站日志分析</a>|<a href="https://www.sxydy.com/post/">数学伊甸园</a>|<a href="https://www.lxlong.com/">小龙励志网</a>|<a href="https://www.roclinux.cn/">Linux大棚</a>|<a href="https://www.dn580.com/">电脑知识</a></div></div></footer><script src="/view/template/mitiqin/js/common.min.js?2.3.0"></script><script src="/view/js/xiuno.js"></script><script src="/view/template/mitiqin/js/app.js?2.3.0"></script><div id="gotop"><div style="display: none; margin-bottom:5px;" id="goTopBtn"><a title="返回顶部" class="gotopa"></a></div><div align="center"></div></div></body></html>