这篇博客详细介绍了HTML的基础内容，包括HTML骨架、语法规范、排版标签、文本格式化、媒体标签、超链接、列表、表格、表单以及语义化标签等核心概念。适合初学者学习。
目录
一、HTML骨架
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体,
以后所有的标签 内容都放到body标签里面.
</body>
</html>
二、html语法规范
html注释
解释说明的作用,给自己或者他人看.
快捷键:ctrl+/
标签分类
双边标签
<p>内容</p>
单边标签
<br>
<hr>
标签关系
父子关系(嵌套关系)
兄弟关系(并列关系)
三、排版标签
一、标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点
双标签
独占一行
文字加粗变大
h1-h6依次递减二、段落标签
<p>一段文字</p>
特点:
双标签
独占一行
段落之间有间隙
会根据浏览器窗口大小自动换行显示三、换行标签
<br>
单标签
强制换行四、水平线标签
<hr>
单标签
显示一条分割线四、文本格式化标签
加粗:
<b>加粗</b>
<strong>加粗</strong>
下划线:
<u>下划线</u>
<ins>下划线</ins>
倾斜:
<i>倾斜</i>
<em>倾斜</em>
删除线:
<s>删除线</s>
<del>删除线</del>
重点掌握 strong em
推荐大家在实际开发中使用单词较长的标签,语义更加强烈.五、媒体标签
一、图像标签
<img src="图片地址/图片路径">
属性:
src:图片的路径(必写属性)
alt:替换文本
title:提示文本
width:设置图片宽度
height:设置图片高度
boder:设置边框二、文件路径
文件路径
绝对路径:以计算机盘符开始.
<img src="D:\web79\day01\05-素材\baby.jpg" alt="">
<!-- 网址路径 一定要以https://或者以http://才可以出来 -->
<img src="http://www.itheima.com/images/logo.png" alt="">
相对路径:从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
同级目录
方法一:目标文件名称
方法二:./目标文件名称(推荐使用vscode提示)
<img src="./dog.gif" alt="">
下级目录
方法一: 目标文件夹/目标文件名称
方法二: ./目标文件夹/目标文件名称(vscode提示)
<img src="./img/cat.gif" alt="">
上级目录
../
<img src="../baby.jpg" alt="">三、音频标签
<audio src="./music.mp3" controls autoplay loop></audio>
常见属性:
src:音频路径
controls:显示播放控件
autoplay:自动播放
loop:循环播放
音频标签支持3种格式,推荐使用mp3六、超链接标签
<a href="链接的地址">跳转的文本</a>
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式
取值:
_self:默认值,当前窗口打开页面
_blank:新的窗口打开,保留原始窗口.
示例代码
<a href="https://www.jd.com/">外部链接</a>
<a href="./02-视频标签.html">内部链接</a>
<a href="链接地址"><img src="图片路径">网页元素链接</a>
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
<a href="./02.zip">下载链接</a>
<a href="#">空链接</a>七、列表
一、无序列表
应用场景: 新闻列表 网页的导航 网页的侧边栏
<ul>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ul>
无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)
二、有序列表
<ol>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ol>
有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)
三、自定义列表
应用场景:网页的底部导航(网页尾部)
<dl>
<dt>列表主题</dt>
<dd>列表主题的每一项内容</dd>
<dd>列表主题的每一项内容</dd>
....
</dl>
dd前面会有默认的缩进效果 后续css处理
dl标签里面只允许包含dt/dd标签
dt/dd标签里面可以嵌套任意内容(标签)
dt/dd是兄弟关系
八、表格标签
一、表格基本标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
....
</tr>
....
</table>
示例代码:
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>16</td>
</tr>
</table>
嵌套关系:
table>tr>td
二、表格属性
表格属性(table 属性):
border:设置边框
width:设置宽度
height:设置高度
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
rules:细线表格 属性是all(后续使用css修饰)
tr属性:
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
bgcolor:背景颜色
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<tr align="center" bgcolor="red" height="50">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center" bgcolor="green">
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr align="center" bgcolor="pink">
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>王五</td>
<td>男</td>
<td>16</td>
</tr>
</table>
三、表格标题+表头单元格标签
<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align=" center">
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr align="center">
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center">
<td>王五</td>
<td>男</td>
<td>16</td>
</tr>
</table>
四、表格结构标签
表格头部:
<thead></thead>
表格主体:
<tbody></tbody>
表格尾部:
<tfoot></tfoot>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all"><caption>
<h2>学生信息表</h2>
</caption>
<!-- 表格头部 -->
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<!-- 表格身体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>16</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>总结</td>
<td>非常nice</td>
<td>非常nice</td>
</tr>
</tfoot>
</table>
五、表格合并
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• `rowspan`：跨行合并→垂直方向合并
• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
九、 表单标签:form标签
一、input控件系列
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中二、button系列
<button type="submit">提交按钮</button><br>
<button type="reset">重置按钮</button><br>
<button type="button">普通按钮</button><br>三、select下拉系列
select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:
所在城市:
<select>
<option>请选择城市</option>
<option selected>上海</option>
<option>北京</option>
<option>深圳</option>
<option>广州</option>
<option>武汉</option>
</select>四、文本域
<textarea placeholder="请您留言"></textarea>五、label标签
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label>文本框:<input type="text"></label>十、语义化标签
一、无语义化标签
<div>独占一行</div>
<span>一行显示多个</span>
二、有语义化标签
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
十一、总结
实际项目用地比较多多的标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ul>
<!--自定义列表-->
<dl>
<dt>自定义列表主题</dt>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
....
</dl>
<!--表格基本语法-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
</table>
<!--表单标签-->
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)
<input type="radio">
多选框
<input type="checkbox">
搜索框
<input type="search" placeholder="">
普通按钮
<button type="button">普通按钮</button>
无语义化标签
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>
扫一扫
3859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
