本文详细介绍了HTML中的基本元素，包括br用于文本换行，格式化标记如b、em、i等改变文本样式，img设置图片显示，a创建超链接，以及table构建表格，包括thead、tbody、tr、td等元素。此外，还讲解了ol和ul列表的使用，以及dl、dt、dd自定义列表的创建。这些基础知识对于理解和构建HTML页面至关重要。
html中的常用标记
1.br---设置文本内容换行
换行都用的是回车，但是在html中回车的换行没有效果，只能使用br标记
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>br标记</title>
</head>
<body>
<h1>br---设置文本内容换行</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><br>
<b>sub设置下标:X<sub>1</sub>=1,X<sub>2</sub>=-1</b><br>
<ins>ins--设置文本内容携带下划线</ins><br>
<del>del--设置文本内容的删除线【贯穿线】</del>
</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>src属性设置图片路径</h4>
<h4>图片路径表示有2中方式:绝对路径\相对路径</h4>
<h2>绝对路径:从计算机本地磁盘表示开始通过文件名称组织起来的路径【不推荐使用】</h2>
<h4>例如--F:\20220222\HTML\20220302html基础(2)\code\imgs\avatar.png</h4>
<h4>缺点1:如果保存图片的文件夹太多，那么这个路径会很长</h4>
<h4>缺点2:当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化</h4>
<h2>相对路径:以当前html文件为中心查找图片形成的路径</h2>
<h4>当前html文件与图片在同一个文件夹中 src="图片名称"</h4>
<h4>图片在当前html文件所在文件夹的子文件夹中 src="子文件夹的名称/图片名称"</h4>
<h4>图片在当前html文件所在文件夹的上一级目录中 src="../保存图片的文件夹/图片名称"</h4>
<h2>图片的路径可以是一个网址</h2>
<img src="F:\20220222\HTML\20220302html基础(2)\code\imgs\avatar.png"/>
<img src="avatar5.png"/>
<img src="imgs/avatar2.png"/>
<img src="../tupian/avatar3.png"/>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_source%2Ff8%2F3a%2F37%2Ff83a371f767b48b2f7e19ef7ac6b4ad9_8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648795260&t=d4885b3d55f34cbef7f7ab4e468f5056" />
</body>
</html>
4.a--表示超链接标记
href---设置链接地址
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接--a</title>
</head>
<body>
<h1><a id="m1">a---超链接</a></h1>
<h3>href---设置链接地址【绝对路径/相对路径/网址】</h3>
<h3>target---被打开的内容何处显示[_blank[新窗口] _self[覆盖当前窗口] ifram的name属性值]</h3>
<h3>id属性--设置超链接的编号【可以连接到当前网页中指定位置】</h3>
<a href="F:\20220222\HTML\20220302html基础(2)\code\br.html">打开br.html文件</a>
<a href="img.html" target="_blank">打开img.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>
<a href="#m1">回到顶端</a>
</body>
</html>
5.table--设置表格
<table>---表示表格
<thead>---表示表头
<tbody>---表示表格的身体
<tr>-----表格中的行
<td>----行中的列
注意:表格中没有内容的时候表格不显示
border--设置表格的边框
width / height----设置表格的宽度和高度
cellpadding---设置单元格中的内边距[单元格中的内容距离4边边框的距离]
cellspacing--- 增加单元格之间的距离。
align--表格中的内容水平对齐
table设置以后，表示整个表格整体水平对齐
tr设置以后，表示当前行中内容水平对齐
td设置以后，表示当前单元格中内容水平对齐
valign--设置表格中的内容垂直对齐【top middle bottom】
tr设置以后，表示当前行中内容垂直对齐
td设置以后，表示当前单元格中内容垂直对齐
bgcolor---设置背景颜色 【table tr td】
background---设置背景图片【table tr td】
colspan--设置表格跨列【左右合并单元格】
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格设置</title>
</head>
<body>
<h4>table--表格/thead--表头/tbody-表格的身体/tr--行/td--列</h4>
<table border="1px" width="600px" height="200px" cellpadding="0px" cellspacing="0px"
align="center" >
<thead>
<tr align="center" bgcolor="green"><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
</thead>
<tbody>
<tr><td>1001</td><td>张三</td><td>23</td><td align="center" bgcolor="yellow">西安</td></tr>
<tr valign="middle" background="imgs/avatar2.png"><td>1002</td><td>李四</td><td>24</td><td>北京</td></tr>
<tr><td>1003</td><td>wangwu</td><td>25</td><td valign="bottom">上海</td></tr>
</tbody>
</table>
<hr>
<h4>colspan--设置表格跨列【左右合并单元格】</h4>
<table border="1px" width="600px" height="200px" cellspacing="0px">
<tr><td colspan="4"><b>学生信息表</b></td></tr>
<tr><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
<tr><td>1001</td><td>张三</td><td>23</td><td>西安</td></tr>
<tr><td>1002</td><td colspan="2">李四 24</td><td>北京</td></tr>
<tr><td>1003</td><td>wangwu</td><td>25</td><td>上海</td></tr>
</table>
<hr>
<h4>rowspan--设置表格跨行【上下合并单元格】</h4>
<table border="1px" width="600px" height="200px" cellspacing="0px">
<tr><td rowspan="4"><b>学<br>生<br>信<br>息<br>表</b></td><td>编号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>
<tr><td>1001</td><td>张三</td><td>23</td><td>西安</td></tr>
<tr><td>1002</td><td>李四</td><td>24</td><td rowspan="2">北京<br>上海</td></tr>
<tr><td>1003</td><td>wangwu</td><td>25</td></tr>
</table>
</body>
</html>
6.html中的列表
例子
<!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="4">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安</li>
</ol>
<h5>无序列表--ul/列表的每一项--li</h5>
<h5>ol上添加type属性设置修改有序列表前面的标号【disc/circle/square】</h5>
<ul type="square">
<li>姓名:zhangsan</li>
<li>年龄:23</li>
<li>地址:西安</li>
</ul>
<h5>自定义列表--dl / dt---表示自定列表主项目 / dd---表示自定列表中主项目里的子项目</h5>
<dl>
<dt>库</dt>
<dd>视频</dd>
<dd>图片</dd>
<dd>文档</dd>
<dd>音乐</dd>
<dt>计算机</dt>
<dd>本地磁盘(C:)</dd>
<dd>本地磁盘(D:)</dd>
<dd>本地磁盘(E:)</dd>
<dd>本地磁盘(F:)</dd>
</dl>
</body>
</html>
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
