html标签（第一部分）
标题标签
❤ <h1>~<h6>一级标题到六级标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易云音乐</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落和换行标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是一个段落标签</p>
<br>换行标签:单标签
</body>
</html>
文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<ins>下划线</ins>
<u>下划线</u>
<del>删除线</del>
<s>删除线</s>
</body>
</html>
div和span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个盒子，单独占一行</div>
<span>这是一个行内标签</span>
</body>
</html>
img图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.IgtxM5qnqcIMjR2M5KfO3wHaKu?pid=ImgDet&rs=1"
alt="美女图片" title="这是一张美女图片"><br>
<span>图像标签:<br>
url:指向图像的路径<br>
alt:当图片显 示不出来的时候替换
title:鼠标放在图像上的提示文字
width:给图像设置宽度
height:给图像设置高度、
❤ 单独设置时，会等比例缩放
border:给图像设定边框
</span>
</body>
</html>
注意:
属性之间没有向后顺序,属性与属性之间均以空格分隔
属性之间采用键值对的格式
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a></a>
</body>
</html>
注意:链接可以跳转到网页，也可以跳转到页面
❤ 如果是文件或者是压缩包，则会下载链接
❤ 锚点链接:设置id的值，使用#id进行跳转
综合练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h1>圣诞节的那些事</h1>
<a href="#fastive">1.圣诞是怎么由来的<br></a>
<a href="#men">2.圣诞老人的由来<br></a>
<a href="#tree">3.圣诞树的由来<br></a>
<h2>圣诞是怎么由来的</h2>
<p>但在圣诞节这天不是耶稣的生辰，因为《圣经》未有记载耶稣具体生于哪天，同样没提到过有此种节日，是基督教吸收了古罗马神话的结果。据《圣经》记载，来自东方三博士在耶稣降生的时候赠送礼物——黄金，乳香，没药，朝拜耶稣，表示对这位人类救主的尊荣。这就是圣诞老人为儿童赠送礼品习俗的由来。英国孩子在圣诞前夕把长筒袜子放在壁炉旁，相信圣诞老人晚上会骑着麋鹿从大烟囱爬下来，给他们带来满袜子的礼物。法国的孩子把鞋放在门口，让圣婴来时把礼物放在鞋里面。公历每年的12月25日，是基督教徒纪念耶稣诞生的日子，称为圣诞节。从12月24日于翌年1月6日为圣诞节节期。圣诞节节日期间，各国基督教徒都举行隆重的纪念仪式。圣诞节本来是基督教徒的节日，由于人们格外重视，它便成为一个全民性的节日，国家一年中最盛大的节日，可以和新年相提并论，类似中国过春节。</p>
<img id="fastive" src="https://img0.pchouse.com.cn/pchouse/1711/20/2069083_37.jpg" alt="圣诞节">
<h2>圣诞老人的由来</h2>
<p>
圣诞老人原来的名字叫做尼古拉，在第四世纪的时候，出生在小亚细亚巴大拉城，家庭富有，父母亲是非常热心的天主教友，不幸他的父母早逝。尼古拉长大以后，便把丰富的财产，全部捐送给贫苦可怜的人，自己则出家修道，献身教会，终生为社会服务。尼古拉后来作了神父，而且还升为主教。他一生当中，做了很多慈善的工作，他最喜欢在暗中帮助穷人，圣诞老人是他后来的别号，这个名字是出自他暗中送钱，帮助三个女孩子的故事。
</p>
<img id="men" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.sJS0D2E5RxIuUsDcVxdJGgHaHa?pid=ImgDet&rs=1" alt="圣诞老人">
<h2>圣诞树的由来</h2>
<p>圣诞树是怎么来的 来历一：起源于德国，最早出现在古罗马12月中旬的农神节，德国传教士尼古斯在公元8世纪用纵树供奉圣婴；来历二：圣诞节那天，有个善良的农民热情地招待了一名流浪孩子，其实是上帝的使者，临别时孩子折下一树枝插在地上后长大成树，并挂满礼品。来历三：耶稣在一棵小棕树下降生。</p>
<img src="https://tse1-mm.cn.bing.net/th/id/R-C.1ed332a195e37d38df785d0163d9116d?rik=YxFxgQ2Ns36DxQ&riu=http%3a%2f%2fwww.u-ts.com%2fuploads%2f190318%2f1-1Z31Q21F0X7.jpg&ehk=9Uxzq14FSQFdBxB9v9gtoX3B4mK%2bLw8WlgehVfBnqy0%3d&risl=&pid=ImgRaw&r=0" alt="">
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格属性</title></title>
</head>
<body>
<!--
align:对齐方式
border:边框样式
cellpadding:规定单元边沿与其内容的空白，默认为1像素
cellspacing:单元格和单元格之间的间距
width:表格的宽度
-->
<table align="center" border="1" cellspacing="0" width="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>56</td>
</tr>
<tr>
<td>张学友</td>
<td>男</td>
<td>56</td>
</tr>
</table>
</body>
</html>
综合练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table align="center" cellspacing="0" border="1px" width="400px">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>关键链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td align="center"><img src="https://bpic.588ku.com/element_origin_min_pic/19/03/24/5b0b5958bba5b06c9c11bc0e6ca52628.jpg" width="16px" alt=""></td>
<td>345</td>
<td>123</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td></td>
<td>345</td>
<td>123</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td></td>
<td>345</td>
<td>123</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>甄嬛传</td></td>
<td></td>
<td>345</td>
<td>123</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
</table>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <table border="2" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th colspan="2">image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>67</td>
<td><img width="100px" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.orRPtz9J6hWrPnGHpgztvQHaEo?pid=ImgDet&rs=1" alt=""></td>
</tr>
</tbody>
</table> -->
<table border="1p" cellspacing="0" width="300px" height="200px">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th colspan="2">图片</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>食物</h1>
<ul>
<li>米饭</li>
<li>方便面</li>
<li>零食</li>
</ul>
</body>
</html>
有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>壹</li>
<li>贰</li></li>
<li>叁</li>
<li>肆</li>
</ol>
</body>
</html>
自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我我们</dd>
</dl>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
