html中的常用标记
---设置文本内容换行
一般换行都是用回车，但是在html中回车的换行没有效果，只能使用br标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br标记</title>
</head>
<body>
<h1>设置文本换行</h1>
<h3>一般换行都是用回车，但是在html中回车的换行没有效果，只能使用br标记</h3>
江雪 <br>
千山鸟飞绝 </br>
万径人踪灭
</body>
</html>2.HTML 格式化标记
格式化标记是一组标记 设置文本内容变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式化标记</title>
</head>
<body>
<h1>格式化标记----设置文本内容变化</h1>
格式化标记是一组标记<br>
<b>b--设置文本加粗</b> <br>
<em>em--设置字体文本倾斜</em> <br>
<i>i--设置字体文本倾斜</i> <br>
<small>small--设置小号字体</small> <br>
<strong>strong--设置文本加粗</strong> <br>
<b>sup设置上标：X<sup>2</sup>-2X+1=0</b>
<b>sub设置下标X<sub>1</sub>=1,X<sub>2</sub>=-1</b> <br>
<ins>ins--设置文本内容携带下划线</ins> <br>
<del>del--设置文本内容的删除线或者贯穿线</del> <br>
</body>
</html>3.img---设置在html中显示图片
图片的显示使用的是图片路径
src：图片路径
width:设置图片的宽度
height:设置图片的高度
alt:设置图片的文字提示【当图片无法显示是才会显示】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置图卡</title>
</head>
<body>
<h1>img--设置在html中显示图片[需要图卡路径]</h1>
<h4>图片路径表示有2种方式:绝对路径\相对路径</h4>
<h3>绝对路径:从计算机本地磁盘表示开始通过文件名称组织起来的路径</h3>
<h4>例如--D:\wangxing\lianxi\20220302.html\imgs\avatar.png</h4>
<h4>缺点1:如果保存图片的文件夹太多，那么这个路径会很长，麻烦</h4>
<h4>缺点2:当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化就找不到了[不推荐使用]</h4>
<h3>相对路径:以当前html文件为中心查找图片形成的路径</h3>
<h4>当前html文件与图片在一个文件夹中 src="图片名称"</h4>
<h4>图片当前html文件所在文件夹的子文件夹中 src="子文件夹的名称/图片名称"</h4>
<h4>图片当前html文件所在文件夹的上一级目录 src="上一级保存图片的文件夹/图片名称"</h4>
<h3>图片的路径可以是一个网址</h3>
<img src="D:\wangxing\lianxi\20220302.html\imgs\avatar.png"/>
<img src="avatar5.png"/>
<img src="imgs/avatar2.png"/>
<img src="D:\wangxing\shangyiji tupian/avatar04.png"/>
<img src="https://img1.baidu.com/it/u=38369561,1780099806&fm=26&fmt=auto">
</body>
</html>4.a--表示超链接标记
href---设置链接地址
target---被打开的内容在何处显示 -blank[新窗口] -self[覆盖当前窗口] href="#top"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<h1><a id="">a--超链接</a></h1>
<h3>href--设置链接地址【绝对路径/相对路径/网址】</h3>
<h3>target--被打开的内容何处显示【blank[新窗口] 】</h3>
<a href="D:\wangxing\lianxi\20220302.html\br.html">打开br.html文件</a>
<a href="img.html" target="_blank">打开br.html文件</a>
<a href="http://www.baidu.com" target="_self">打开baidu</a>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 4</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>
<a href="#top">回到顶部</a>
</body>
</html>5.table--设置表格
<table>---表示表格
<thead>---表示表头
<tbody>---表示表格的身体
<tr>-----表格中的行
<td>----行中的列
注意:表格中没有内容的时候表格不显示
border--设置表格的边框
width / height----设置表格的宽度和高度
cellpadding---设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing--- 增加单元格之间的距离。
align--表格中的内容水平对齐 【left 左 center 居中 right 右】
table设置以后，表示整个表格整体水平对齐
tr设置以后，表示当前行中内容水平对齐
td设置以后，表示当前单元格中内容水平对齐
valign--设置表格中的内容垂直对齐【top 上 middle 中 bottom 下】
tr设置以后，表示当前行中内容垂直对齐
td设置以后，表示当前单元格中内容垂直对齐
bgcolor---设置背景颜色 【table tr td】
background---设置背景图片【table tr td】
colspan--设置表格跨列【左右合并单元格】
rowspan--设置表格跨行【上下合并单元格】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格设置</title>
</head>
<body>
<h4>table--表格/thead--表头/tbody--表格身体/tr--行/td--列</h4>
<table align="center" border="1px" width="300px" height="300px" cellpadding="0px"
cellspacing="0" bgcolor="blue">
<thead>
<tr align="center"><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
</thead>
<tbody>
<tr><td>01</td><td>张三</td><td>12</td><td>西安</td></tr>
<tr><td>02</td><td>历史</td><td>14</td><td>北京</td></tr>
<tr valign="bottom"><td>03</td><td>王六</td><td>14</td><td>上海</td></tr>
<tr><td>04</td><td>五月</td><td>14</td><td valign="bottom">浙江</td></tr>
</tbody>
</table>
<hr>
<h4>colspan--设置表格跨列【合并左右单元格】</h4>
<table border="1px" width="300px" height="300px" cellspacing="0">
<tr><td colspan="4"><b>学生信息表</b></td></tr>
<tr><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
<tr><td>01</td><td>张三</td><td colspan="2">12 西安</td></tr>
<tr><td>02</td><td>历史</td><td>14</td><td>北京</td></tr>
<tr><td>03</td><td>王六</td><td>14</td><td>上海</td></tr>
<tr><td>04</td><td>五月</td><td>14</td><td>浙江</td></tr>
</table>
<hr>
<h4>rowspan--设置表格跨行【合并上下单元格】</h4>
<table border="1px" width="300px" height="300px" cellspacing="0">
<tr><td rowspan="5"><b>学<br>生<br>信<br>息<br>表</b></td></tr>
<tr><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
<tr><td>01</td><td>张三</td><td>12</td><td>西安</td></tr>
<tr><td>02</td><td>历史</td><td>14</td><td rowspan="2">北京<br>上海</td></tr>
<tr><td>03</td><td>王六</td><td>14</td></tr>
</table>
</body>
</html>6.html中的列表
html中的列表有3种：有序列表/无序列表/自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<h4>html中的列表有3种：有序列表/无序列表/自定义列表</h4>
<h5>有序列表--ol/列表的每一项--li</h5>
<h5>ol上添加type属性设置修改有序列表前面的标号【a A i I 1】</h5>
<h5>ol上添加start属性设置修改有序列表前面的标号的开始值</h5>
<ol type="1" start="3">
<li>姓名：张三</li>
<li>年龄：13</li>
<li>地址：西安</li>
</ol>
<h5>无序列表--ul/列表的每一项--li</h5>
<ul>
<h5>ul上添加type属性设置修改有序列表前面的标号【disc 实心/circle 空心/square 正方形】</h5>
<ul type="disc">
<li>姓名：张三</li>
<li>年龄：13</li>
<li>地址：西安</li>
</ul>
<h5>自定义列表--dl/表示自定列表主项目--dt/表示自定列表中主项目里的子项目--dd</h5>
<dl>
<dt>电器</dt>
<dd>冰箱</dd>
<dd>电视</dd>
<dd>洗衣机</dd>
<dd>空调</dd>
</dl>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
