<!DOCTYPE html>
<!--说明这是个htmi文档-->
<html lang="en">
<head>
<!--头部信息-->
<meta charset="UTF-8">
<!--meta标签，描述网页数据，此处定义中文编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>严春静的网页</title>
<!--标题-->
<style>
h3{color: aqua;
font-size: 20px;
}
</style><!--作用是在当前style中写CSS样式,color颜色，font-size字体大小-->
</head>
<body><!--展示信息-->
<h1 align="center">欢迎来到我的网页</h1><!--标题1 位置属性-->
<hr color="Blue" width="300PX" size="15PX">
<hr>
<!--水平线 颜色、宽度、高度、位置aligh-->
<h2 align="left">我在左边</h2>
<p>这是一段话，一个段落</p>
<!--段落P-->
<h3 align="right">我去了右边</h3>
<img src="./tu/1.jpg" width="80px" height="50px" alt="美女" title="亲亲">
<!--图片img 路径，宽，高，破裂显示，鼠标放上显示-->
<br>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2ccdc25d-8fc4-401e-b2fc-ed80fee9114e%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681491361&t=60681d5c2057fd32ee80209b7c0ebe3f"
width="80px" height="100px" alt="美女" title="亲亲">
<!--网络路劲-->
<br>
<p>点击我
<a href="https://www.baidu.com/">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2ccdc25d-8fc4-401e-b2fc-ed80fee9114e%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681491361&t=60681d5c2057fd32ee80209b7c0ebe3f"
width="50px" height="50px" alt="美女" title="亲亲">
</a></p>
<!--a标签代表超链接，href链接地址，内容可以嵌套任何形式图片文字等，后期CSS可以修改效果-->
<em>定义着重文字</em><br>
<b>定义粗体文本</b><br>
<i>定义斜体字</i><br>
<strong>定义加重语气</strong><br>
<del>定义这是删除的</del><br>
<spean>元素没有特定的含有,后期为了CSS方便</span><br>
<!--文本标签，可以嵌套P中-->
<ol type="1"><!--拥有type属性，区别1、2、3、4、A/B/C/D-->
<li>这是一个勤劳的早晨，有序标签
<ol type="A">
<li>士兵</li>
<li>排长</li>
</ol>
</li>
<li>歌哨中伴着起床号音</li>
</ol>
<!--列表标签，按顺序排列，外面是ol，里面是li，显示是1.2.3.这种-->
<ul type="square"><!--无序属性有disc默认实心圆，circle空心圆，square小方块，none不显示-->
<li>无序的1</li>
<li>无序的2</li>
<li>无序的3</li>
</ul>
<!--无序标签，常用于网址导航,快捷方式ul>li*3-->
<p>制造单元格并且合并他</p>
<table border="2" width="300" height="100"><!--三个属性，border边框像素，width宽，height高-->
<!--同样表格是可以合并的，水平合并colspan，垂直合并rowspan-->
<tr>
<td rowspan="3" width="20">表格1</td>
<td colspan="2">表格2</td>
</tr>
<tr>
<td>表格5</td>
<td>表格6</td>
</tr>
<tr>
<td>表格8</td>
<td>表格9</td>
</tr>
</table>
<!--表格，快捷方式table>tr*3>td*3{快捷方式}-->
<form action="url" method="get|post" name="myfrom"></form>
<!--action指向服务器地址，method存在get（提交少量数据）和post（提交大量数据），name表单名称-->
<!--form表单，指用户输入的地方-->
<p>FORM表单,登录搜索</p>
<form action="">
username:<input type="text" name="user"><!--提交按钮传给后台-->
用户：<input type="text"><!--单标签，text文本框-->
<p>密码：******</p>
密码：<input type="password"><!--单标签，password密码框-->
<input type="submit" value="按钮"><!--type="submit变成提交了，value替换文本-->
<button>按钮</button><!--按钮-->
</form>
<div id="header"></div><!--头部容器-->
<div id="nav"></div><!--导航容器 -->
<div id="article"><!--内容区域-->
<div id="section"></div><!--内容区-->
</div>
<div id="silder" ></div><!--侧边栏-->
<div id="footer"></div><!--底部-->
<header></header><!--头部容器-->
<nav></nav><!--导航容器-->
<article><!--代表独立的内容区-->
<section></section><!--内容区-->
</article>
<aside></aside><!--侧边栏-->
<footer></form><!--底部-->
<!--div容器标签-->
<hr>
<P>开始CSS学习</P>
<P>CSS基本语法:选择器{属性:值;属性:值;}</P>
<h3>标题内容</h3>
</body>
</html>
浙公网安备 33010602011771号