这篇博客详细介绍了HTML的基本标签，包括标题标签、段落标签、字体标签、图像标签、列表标签、链接标签的使用方法，并提供了多个示例，如创建段落、插入图像、设置字体样式、创建列表和链接等。此外，还涉及到网页结构、字符编码、图像路径、列表类型、链接行为等内容。通过这些基础知识，读者能掌握构建网页的基本技能。
第一部分-------各种标签
01.标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01.标题标签</title>
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
</body>
</html>2.段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.段落标签</title>
</head>
<body>
<p>这是一个段落标签</p>
<hr/>
<p>这是一个段落标签</p>
<p>这是一个段落标签</p>
</body>
</html>03.字体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03.字体标签</title>
</head>
<body>
<font color="red">这是字体标签</font><hr>
<font face = "楷体" color="purple">这是字体标签</font><hr>
<font face = "微雅软黑" color="blue" size = "5">这是字体标签</font>
</body>
</html>04-图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-图像标签</title>
</head>
<body>
<!-- 图像标签，使用相对路径引入图片文件-->
<!-- ./回到上一级目录，../回到上上级目录-->
<img alt = "" width="500" height="700" src = "../imgs/随便图.jpeg">
<!-- 图像标签，使用绝对路径引入图片文件-->
<img alt = "此处有张图片" src = "D:\java26day\web\WEB-INF\imgs\随便图1.jpeg">
</body>
</html>05.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05.列表标签</title>
</head>
<body>
<!-- 无序列表 ul-->
<ul type="square">
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
<li>草莓</li>
<li>猕猴桃</li>
</ul>
<!-- 有序列表ol-->
<ol type="i">
<li>买菜</li>
<li>洗菜</li>
<li>炒菜</li>
<li>吃</li>
</ol>
</body>
</html>06-链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-链接标签</title>
</head>
<body>
<!--连接到网络地址(注意：跳转路径要添加http协议)默认本窗口打开-->
<a href="http://www.baidu.com"target="_blank">百度一下，你就知道</a>
<!--连接到网络地址(注意：跳转路径要添加协议)target 设置在新的窗口打开连接-->
<br>
<!-- 连接到一个文件(如果文件可以被浏览器解析，就会直接展示到页面上)-->
<a href="../imgs/随便图.jpeg">随便图.jpeg</a>
<br>
<!-- 连接到一个文件(如果文件不可以被浏览器解析，就会执行下载)-->
<a href="../imgs/随便图.zip">随便图.zip</a>
<hr>
<!-- 连接到当前页面的文本，配合猫连接 -->
<a href=""></a>
</body>
</html>第二部分：
demo01
<html>
<head>
<title>这是我的第一个网页</title>
</head>
<body>
HELLO WORLD!<br/>你好，HTML!
<p>这个是段落标签</p>
<p>这是第二个段落</p>
<img src ="imgs/凝光.jpg" width="570" height="360" alt="这个是漂亮的凝光姐姐"/>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
武林高手排行榜：
<ol type="i" start="3">
<li>扫地僧</li>
<li>萧远山</li>
<li>慕容博</li>
<li>虚竹</li>
<li>阿紫</li>
</ol>
武林大会人员名单：
<ul type="square">
<li>乔峰</li>
<li>阿朱</li>
<li>马夫人</li>
<li>白世镜</li>
<li>裟罗</li>
</ul>
你是喜欢<b>什么</b>月饼呢~<i>giegie</i>
<br/>
水分子的化学式：H<sub>2</sub>O<br/>
氧气的化学式：O<sup>2</sup>
<br/>
5<10<br/>
10>5<br/>
5≤10<br/>
10≥5<br/>
注册商标®<br/>
版权符号©<br/>
<span>赵又廷</span>，夺妻之仇。<br/>
<a href="http://www.baidu.com" target="_self">百度一下</a>
</body>
</html>
1.htlm语言是解释型语言，不是编译型
浏览器是容错的
2.html网页中由一对标签组成：<html></html>
3.title 表示网页的标题
4.可以在meta标签中设置编码方式
5.<br/>表示换行，开始和结束是同一个标签（也叫做单标签）--》“/”写在单词后面
6.p 表示段落标签
7.img表示图片标签
src属性表示图片文件的路径
width和height表示图片的大小
alt表示图片的提示
8.路径的问题：
1.相对路径：从存储数据的地方开始写
2.绝对路径从D盘或者C盘开始写
9.h1~h6：标题标签 ：由1到6越来越小
10.列表标签:
- ol 有序列表
start表示从*开始（从“”内开始），type显示的类型：A a I i 1（deafult）
- ul 无序列表
type disc(default),circle,square
11. u 下划线 b 粗体 i 斜体
12.上标 sup 下标 sub
13.HTML中的实体：小于号< ；大于等于号&ge；版权©
14.span 不换行的块标记
15.a 表示超链接
href 表示连接的地址
target:
_self 在本窗口打开
_blank 在一个新窗口打开
_parent 在父窗口打开
_top 在顶层窗口打开
16.div 层
demo02
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>17)表格 table
行 tr
列 td
表头列 th
table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border: 表格边框的粗细
- width: 表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性：align -> center,left,right
rowspan:行合并
colspan:列合并
demo03
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<form action="demo04.html" method="get">
昵称：<input type="text" name="nickName" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男 input type="radio"单选框
<input type="radio" name="gender" value="female" checked/>女<br/> checked表示默认选中，
check表示选中
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球 input type="checkbox复选框
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="earth"/>地球
<input type="checkbox" name="hobby" value="volleyball"/>排球<br/>
星座：<select name="star"> select name="star下拉式文本框
<option value="1">白羊座</option>
<option value="2">金牛座</option>
<option value="3">双子座</option>
<option value="4" selected>天蝎座</option>
<option value="5">天秤座</option>
<option value="6">处女座</option>
<option value="7">摩羯座</option>
<option value="8">狮子座</option>
</select><br/>
备注:<textarea name="remark" rows = "4" cols="50"></textarea><br/> 多行文本框
<input type="submit" value=" 注 册 "/> 注册按钮
<input type="reset" value=" 重置 "/> 表示恢复到默认状态--重置（不是清空）
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
18)表单 form
19) input type="text"表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
input type="password"表示密码框
input type="radio"表示单选按钮，需要注意的是，name属性值保持一致，这样才会有互斥的效果。
可以通过checked属性设置默认选中的项。
input type="checkbox"表示复选框，name属性值建议保持一致，这样将来服务器端获取值的时候获取的是一个数组
也可以通过checked属性设置默认选中的项。
select 表示下拉列表。每一个选项都是option,其中value属性是发送给服务器的值，selected表示默认选中的项
textarea表示多行文本框（或者称之为文本域）它的value值就是开始结束标签之间的内容
input type="submit" 表示提交按钮
input type="reset" 表示重置按钮
input type="button" 表示普通按钮
20)默认值：
checked="checked"当属性名和属性值相同的时候，属性值可以省略，变为：checked
在下拉式文本框中，为selected
demo04
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<h1><font color='red'>注册成功</font></h1>
</body>
</html>demo05
<html>
<head></head>
<frameset rows="20%,*"> <!---frameborder="no" -->
<frame src="frames/top.html"/>
<frameset cols="15%,*">
<frame src="frames/left.html"/>
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/botton.html"/>
</frameset>
</frameset>
</frameset>
</html>
frameset 表示页面框架，了解就好
frame表示框架中的具体页面引用
iframe 在一个页面嵌入一个子页面
demo06
<html>
<head>
<meta charset="utf-8">
</head>
<body>
这里是demo06页面的内容！！
<iframe src="frames/top.html"/>
</body>
</html>
iframe 在一个页面嵌入一个子页面
总结：
1.HTML是解释型的文本标记语言，不区分大小写
2-1.html,head,title,meta,body,br,ul,ol,h1~h6,a,img, ,p,div,span
2-2.table,tr,th,td
2-3.form（action='',method='post'）input type='text,password,checkbox,radio,submit,button,reset"
<select>,<textarea>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
