#36 HTML
logo.png
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2cR33kj-1594272823173)(C:\Users\lenovo\AppData\Local\Temp\HZ$D.976.1716\logo.png)]
phone1.png:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BLtxyOD-1594272823181)(C:\Users\lenovo\AppData\Local\Temp\HZ$D.976.1718\phone1.png)]
side4.png:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NcvOwXR-1594272823186)(C:\Users\lenovo\AppData\Local\Temp\HZ$D.976.1719\slide4.jpg)]
xingye.jpg:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ggyjjMe4-1594272823191)(C:\Users\lenovo\AppData\Local\Temp\HZ$D.976.1720\xingye.jpg)]
1.demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: pink;
}
div {
height: 400px;
width: 250px;
border-color: white;
border-width: 20px;
border-style: solid;
border-bottom-width: 30px;
float: left;
margin-left: 100px;
box-shadow: 10px 10px 5px gray;
}
#d1 {
background-image: url(img/girl1.jpg);
background-size: 100% 100%;
transform: rotate(45deg);
transition: transform 1s;
}
#d1:hover {
transform: rotate(15deg);
transition: transform 1s;
}
#d2 {
background-image: url(img/girl2.jpg);
background-size: 100% 100%;
transform: rotate(15deg);
transition: background-size 1s;
}
#d2:hover {
background-size: 110% 110%;
transition: background-size 1s;
}
#d3 {
background-image: url(img/girl3.jpg);
background-size: 100% 100%;
filter: grayscale(80%);
filter: gray;
transform: rotate(-45deg);
transition: all 1s;
}
#d3:hover {
filter: grayscale(0%);
filter: gray;
transform: rotate(45deg);
transition: all 1s;
}
#d4 {
margin-left: 100px;
margin-top: 30px;
background-image: url(img/girl4.jpg);
background-size: 100% 100%;
filter: grayscale(80%);
filter: gray
}
#d5 {
margin-top: 30px;
background-image: url(img/girl5.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<div id="d4">
</div>
<div id="d5">
</div>
</body>
</html>
2.背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- C:\Users\ShenMouMou\Pictures\图片\xingye.jpg 绝对路径 -->
<body background="img/xingye.jpg">
</body>
</html>
3.标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">阿斯顿发斯蒂芬</h1>
<h2 align="right">阿斯顿发斯蒂芬</h2>
<h3 align="left">阿斯顿发斯蒂芬</h3>
<h4>阿斯顿发斯蒂芬</h4>
<h5>阿斯顿发斯蒂芬</h5>
<h6>阿斯顿发斯蒂芬</h6>
werwerwerwerwerwr
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
H<sub>2</sub>O
3<sup>2</sup>
</body>
</html>
4.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表格最早就是用来布局页面的 tr 表示行 td 表示列 3行3列 -->
<table border="1" cellspacing="0" cellpadding="20" width="500px" height="500px" align="center" bgcolor="aqua" bordercolor="red" background="img/xingye.jpg">
<tr align="center" height="100px">
<th>姓名</th>
<th>年龄</th>
<th>手机</th>
</tr>
<tr align="center" bgcolor="blue">
<td>张三</td>
<td>23</td>
<td>110</td>
</tr>
<tr align="center">
<td>李四</td>
<td>24</td>
<td bgcolor="red">120</td>
</tr>
</table>
</body>
</html>
5.表格嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500px" height="500px" align="center">
<tr height="300px">
<td width="100px">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</td>
<td width="100px">Data</td>
<td width="100px">Data</td>
<td width="100px">Data</td>
<td width="50px">Data</td>
<td width="50px">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
6.插入图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/xingye.jpg" width="200px" height="200px" border="2" title="美女"/>
<img src="img/xingye.jpg" width="200px" height="200px" border="2"/>
<img src="img/xingye.jpg" width="200px" height="200px" style="border:2px solid aqua ;"/>
<div id="" style="width: 200px;height: 200px;border: 1px solid black;background-image: url(img/xingye.jpg);background-size: 100% 100%;border-radius:100px;">
</div>
</body>
</html>
7.常用标签
<!DOCTYPE html>
<html>
<head>
<!-- 定义页面编码 -->
<meta charset="utf-8">
<title>常用标签</title>
</head>
<body>
<p align="right">
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。
</p>
<p>近日，山东济宁女子苟晶23年前疑两次上大学遭顶替的事件备受关注。6月25日，苟晶接受采访时表示，发帖后当年让女儿顶替自己上学的班主任邱印林（化名），曾来到她的老家和工作地点，希望与其见面。</p>
</body>
</html>
8.超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- a 进行页面的跳转 -->
<a href="http://www.baidu.com">进入百度</a>
<a href="http://www.163.com">进入网易</a>
<a href="http://www.sina.com">进入新浪</a>
<!-- 跳转自己的页面 -->
<!-- target="_self" 在自身窗口打开这个页面 -->
<a href="插入图片.html" target="_self">跳转自己站点中的页面</a>
<!--target="_blank" 新建一个窗口打开这个页面 -->
<a href="插入图片.html" target="_blank">跳转自己站点中的页面</a>
</body>
</html>
9.合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="" width="500px" height="300px">
<tr>
<!--colspan 左右合并 -->
<td colspan="3">Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<!-- 上下合并 -->
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
10.合并单元格2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500px" height="400px">
<tr>
<td>Data</td>
<td colspan="3">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td colspan="2">Data</td>
</tr>
</table>
<br><br><br><br><br><br>
<table border="1" cellspacing="0" cellpadding="0" width="500px" height="400px">
<tr>
<td rowspan="5"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr height="50px">
<td colspan="2" align="right">
<button type="button" style="height: 40px;width: 160px;background:yellowgreen;margin-right: 20px;border-style: none;border-radius: 10px;color: aliceblue;letter-spacing: 5px;">加入购物车</button>
</td>
</tr>
</table>
</body>
</html>
11.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 无序列表 -->
<ul type="circle">
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ul>
<!-- 有序列表 -->
<ol start="10">
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
<li>列表项1</li>
</ol>
<dl>
<dt>自定义列表的标题</dt>
<dd>自定义列表的说明</dd>
</dl>
</body>
</html>
12.锚点链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 根据锚点名称，跳到锚点所在的位置 -->
<a href="#bottom">跳到底部</a>
<!-- 定义一个锚点位置 起个名著中 -->
<a name="top"></a>
<p>凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。凭借终极版，我们强调了Vanquish S独特的传统，技术和工艺的融合，以及三种大胆的外部涂装方案和极具吸引力的内部包装，创造性地使用令人兴奋的材料，”阿斯顿马丁的首席执行官Marek Reichman说道。创意人员。“我们的设计团队创造了三个独特的主题，将外部和内部包装结合在一起，但我们一直小心翼翼地确保每种外观颜色和内部主题能够很好地协同工作，为我们的客户提供最大的选择”。
阿斯顿马丁Vanquish S终极版获得了一个熟悉而强大的V12
在驾驶特性方面，Vanquish S Ultimate版获得了三级可调阻尼器和碳陶瓷制动系统。此外，它可能是最后一辆配备旧款5.9升V12发动机的车型。新一代可能会获得AMG采购的机器，并且在其顶级规格中，我们在华丽的阿斯顿马丁DB11中学到了新的5.2升V12 Biturbo 。</p>
<a href="#top">跳到顶部</a>
<!-- 定义一个锚点 -->
<a name="bottom"></a>
</body>
</html>
13.使用表格来布局页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100px">
<tr>
<td width="300px"></td>
<td width="60px"><img src="img/logo.png" ></td>
<td><font size="5">西部开源欢迎你！</font></td>
<td width="300px"></td>
<td><img src="img/phone1.png" ></td>
<td>029-86699937 029-88262419</td>
<td width="300px"></td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="500px">
<tr><td><img src="img/slide4.jpg" ></td></tr>
</table>
</body>
</html>
14.转义字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 转义字符 -->
<b><</b> <b>></b> &
"
</body>
</html>
15.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--
action 后台的地址
请求方式：
method="get" 他会将请求参数拼接在地址栏后面 请求的数据大小有限制
//username=lisi&password=123456 请求参数 key=value&key=value
http://127.0.0.1:8848/20200627-HTML-下午/表单标签.html?username=lisi&password=123456
method="post" 会将请求参数封装到请求体里面提交 请求的数据大小无限制
input 表单项，需要提供name属性 和value username=zhangsan
username=lisi&password=66666&sex=1&hobby=lq&hobby=zq&xueli=dx&desc=ok
-->
<form action="#" method="get">
用户名：<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="5"/>
<br>
密码：<input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="5"/>
<br>
<!-- 两个性别的表单项的name属性值要一样 -->
性别：<input type="radio" name="sex" id="nan" value="1" checked="checked"/><label for="nan">男</label>
<input type="radio" id="nv" name="sex" value="0"/><label for="nv">女</label>
<input type="radio" name="sex" id="yao" value="2"/><label for="yao">妖</label>
<br>
爱好：
<input id="lanqiu" type="checkbox" name="hobby" value="lq" checked="checked"/><label for="lanqiu">篮球</label>
<input type="checkbox" name="hobby" value="zq" checked="checked"/>足球
<input type="checkbox" name="hobby" value="ppq"/>乒乓球
<br>
学历：<select name="xueli">
<option value ="1">---请选择你的学历----</option>
<option value ="xiao">小学</option>
<option value ="zx">中学</option>
<option value ="dx" selected="selected">大学</option>
</select>
<br>
个人介绍：
<textarea rows="5" cols="20" name="desc">
</textarea>
<br>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
</form>
</body>
</html>
一.Web教程
链接：https://pan.baidu.com/s/1tK6b5Ruwq-c6RQ6vz6YKxw
提取码：wj6q
二.HTML基础知识
链接：https://pan.baidu.com/s/1DPz9YwTwwGxrPdNHXxXYrQ
y" value=“zq” checked=“checked”/>足球
乒乓球
学历：
—请选择你的学历----
小学
中学
大学
个人介绍：
</textarea>
<br>
<!-- 提交按钮 -->
<input type="submit" value="注册"/>
</form>
</body>
一.Web教程
链接：https://pan.baidu.com/s/1tK6b5Ruwq-c6RQ6vz6YKxw
提取码：wj6q
二.HTML基础知识
链接：https://pan.baidu.com/s/1DPz9YwTwwGxrPdNHXxXYrQ
提取码：dvqs
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
