这篇博客详细介绍了HTML的基础知识，包括换行标记<br>、格式化标记如<b>、<i>等，图片标记<img>的使用，超链接<a>的href和target属性，以及表格<table>的创建和样式设置。此外，还讲解了有序列表<ol>、无序列表<ul>和自定义列表<dl>的创建方法。
HTML中常用的标记
1.<br>或者<br />：设置文本内容换行
ps：之前我们换行都是用的回车，在html中回车没有作用，只能使用br把标签
<html>
<head>
<meta charset="utf-8">
<title>br标记</title>
</head>
<body>
<h1>br---设置文本内容换行</h1>
<h3>换行都用的是回车，但是在html中回车的换行没有效果，只能使用br标记</h3>
咏鹅<br>
鹅鹅鹅，<br/>
曲项向天歌。
</body>
</html>
2.HTML格式化标记
格式化标记是一组标记
设置文本变化内容
<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>
3.img---设置HTML 中的图片
图片的显示使用的是图片路径
src：图片路径
width:设置图片的宽度
height:设置图片的高度
alt:设置图片的文字提示【当图片无法显示是才会显示】
<img src ="绝对路径:从计算机本地磁盘表示开始通过文件名称组织起来的路径【不推荐使用】">
<img src ="相对路径：相对路径:以当前html文件为中心查找图片形成的路径">
<img src ="当前html文件与图片在同一个文件夹中 src="图片名称">
<img src ="图片在当前html文件所在文件夹的子文件夹中 src="子文件夹的名称/图片名称">
<img src ="图片在当前html文件所在文件夹的上一级目录中 src="../保存图片的文件夹/图片名称">
图片的网站可以是一个网址
4.a--超链接标记
<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>
<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="#m1">回到顶端</a>
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>
<table border="1px" cellpadding="5px" cellspacing="0 " align="center">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<tr>
<th colspan="8">个人简历</th>
</tr>
<tr>
<td>姓名</td>
<td></td>
<td>年龄</td>
<th></th>
<th>性别</th>
<th></th>
<th colspan="2" rowspan="4"><img src="imgs/avatar5.png" ></th>
</tr>
<tr>
<td>学历</td>
<td></td>
<td>家庭住址</td>
<th colspan="3"></th>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>身高</td>
<th></th>
<th>外语程度</th>
<th></th>
</tr>
<tr>
<td>所在学院</td>
<td></td>
<td>熟悉软件</td>
<th></th>
<th>邮箱编码</th>
<th></th>
</tr>
<tr>
<td>兴趣爱好</td>
<td colspan="7"></td>
</tr>
</table>
</body>
</html>
6.HTML中的列表
html中的列表分为三种：li--有序列表 ul---无序列表 dt---自定义列表
有序列表--ol/列表的每一项--li
ol上添加type属性设置修改有序列表前面的标号【a A i I 1】
ol上添加start属性设置修改有序列表前面的标号的开始值
<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>
扫一扫
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
