我的第一个html
</head>
<body>
<a name="first"></a>
<p>Hello World</p>
<p><a href="https://baidu.com">百度</a><br/></p>
<abbr title="World Wide Web">WWW</abbr><br/><br/>
<b>粗体文字</b><br/>
<!-- <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map> -->
<article>
<h1>对话</h1>
<p>80后的付巧妹，来自中国科学院古脊椎动物与古人类研究所。现场，有人生动形容她的发言是“最年轻的科学家讲一个最古老的研究课题”。</p>
</article>
<!-- <p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside> -->
<audio src="someaudio.wav">yinpin</audio>
<p>文本 <b>粗体文本</b> </p>
<img src = "eg_smile.gif" /> <br/>
<!--bdo 元素可覆盖默认的文本方向。-->
<bdo dir="ltr">正向输出</bdo><br/>
<bdo dir="rtl">反向输出</bdo><br/>
<p>
--------------- <br/>
这是一段段落
<br/><br/>
<big>放大1次</big><br/>
<big> <big>放大2次</big> </big><br/>
<big><big><big>放大3次</big></big></big><br/>
<p style="color: aqua;"><big><big><big><big><big><big><big>放大7次</big></big></big></big></big></big></big></big></p>
</p>
<p>
<b>Here is a long quotation</b>
<blockquote>
Here is a long quotation<br/>
Here is a long quotation
</blockquote>
</p>
<p style="font-size: 20px;">Copyright © 2020 号码:XXXXXXXXX </p><br/>
<h1 align="center"> 一级标题 </h1>
<h2 align="center"> 二级标题 </h2>
<p align="center">
80后的付巧妹，来自中国科学院古脊椎动物与古人类研究所。现场，有人生动形容她的发言是“最年轻的科学家讲一个最古老的研究课题”。
</p>
<p>
<hr align="center" size="10px" color="#00ffff" />
<p align="center"><b>QWQ</b></p>
<br/>
</p>
<p>
<hr style="height:15px;border-width:0;color:blue;background-color: blue"/>
<hr />
</p>
<!--无序列表-->
<ul type="disc">
<h1>支付方式</h1>
<li type="circle">网银支付</li>
<li>支付宝</li>
<li type="square">微信</li>
</ul>
<!--有序列表-->
<ol type="I">
<h1>步骤</h1>
<li>选择</li>
<li>显示</li>
<li>确定</li>
<li>输入</li>
<li>支付</li>
</ol>
<!--有序列表和无序列表嵌套 -->
<p>
<h1>服务中心</h1>
<ul>
<li>支付方式</li>
<ul type="disc">
<li type="circle">网银支付</li>
<li>支付宝</li>
<li type="square">微信</li>
</ul>
<hr/>
<li>步骤</li>
<ol>
<li>选择</li>
<li>显示</li>
<li>确定</li>
<li>输入</li>
<li>支付</li>
</ol>
</ul>
</p>
<!--表格-->
<table align="center" border="5px" width="5px" height="5px" cellspacin="5px" cellpadding="5px">
<caption aligh="left">标题</caption>
<!--第一行-->
<tr>
<td>1r1c</td>
<td>1r2c</td>
</tr>
<tr>
<td>2r1c</td>
<td>2r2c</td>
</tr>
</table>
<!--嵌套表格-->
<table width="300" border="2">
<tr>
<td rowspan="4">商务鞋</td>
<td>正装</td>
<td>2358</td>
</tr>
<tr>
<td>休闲类型</td>
<td>2358</td>
</tr>
<tr>
<th rowspan="2">其他</th>
<td>登山</td>
<td>1000</td>
<tr>
<td>下海</td>
<td>2000</td>
</tr>
</tr>
</table>
<table align="center" width="500">
<thead style="background-color:cadetblue;">
<tr>
<th>季度</th>
<th>销量</th>
</tr>
</thead>
<tbody style="background: coral;">
<tr>
<td>一季度</td>
<td>10000</td>
</tr>
<tr>
<td>二季度</td>
<td>20000</td>
</tr>
</tbody>
<tfoot style="background: chartreuse;">
<tr>
<td>季度平均销量</td>
<td>15000</td>
</tr>
<tr>
<td>总计</td>
<td>30000</td>
</tr>
</tfoot>
</table>
<!--表单-->
<form name="登陆" action="www.cnblogs.com" method="POST">
</form>
<!--分区标签-->
<div align="center" style="width: 1px; height: 1px; background:cornsilk">
<img width = "100" height = "100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""/>
</div>
<br/>
<div>
<a href="https://baidu.com" target="_parent">套娃1</a><br/>
<a href="https://baidu.com" target="_blank">套娃2</a><br/>
<a href="https://baidu.com" target="_self">套娃3</a><br/>
</div>
<!--这两个效果一样-->
<a href="#first">[点击回到开头]</a><br/>
<a href="#">[登陆]</a><br/>
<a href="info.html#name" target="_blank">[了解更多]</a>
<a href="https://www.baidu.com" target="_blank"><img width = "100" height = "100" src="https://bkimg.cdn.bcebos.com/pic/1c950a7b02087bf49212ea50f1d3572c10dfcf89?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5"/></a>
<!--表单元素-->
<br><br>
<!--文字框-->
<input type="text" name="username" size="18" value="王XX" /><br/>
<!--密码框-->
<input type="password" name="password" size="18" value="" /> <br/>
<!--按钮-->
<!--重置按钮-->
<input type="reset" value="重置"><br>
<!--提交按钮-->
<input type="submit" value="提交"><br>
<!--普通按钮-->
<input type="button" value="普通按钮"><br>
<!--图片按钮-->
<input type="image" src="https://acm.hunnu.edu.cn/img/lastlogin.9ab95631.svg"><br>
<!--复选框-->
<form>
competition：
<input type="checkbox" name="复选框名称" value="s_1" checked="checked">CCF
<input type="checkbox" name="复选框名称" value="s_2" >NOI
<input type="checkbox" name="复选框名称" value="s_3" checked="checked">ACM
</form>
<!--单选框-->
<form>
最弱选手：
<input type="radio" name="单选框" value="s_1">HEX
<input type="radio" name="单选框" value="s_2" checked="checked">LLD
<input type="radio" name="单选框" value="s_3">ZXY
</form>
<!--隐藏域网页表面不会显示，但可以通过查看html代码看到-->
<form>
<input type="hidden" name="userid" value="u01">
</form>
<!--文件域,选择一个文件-->
<form action="" method="POST" enctype="multipart/form-data">
<p>
<input type="file" name="files"><br>
<input type="submit" name="upload" value="上传">
</p>
</form>
<!--选择栏-->
调查者年龄：
<select name="age" size="2">
<option value="15岁以下">15岁以下</option>
<option value="15--19岁">15--19岁</option>
<option value="20--35岁">20--35岁</option>
<option value="36--50岁" selected="selected">36-50岁</option>
<option value="50岁以上">50岁以上</option>
</select>
<br>
<!--多行文本域-->
<textarea name="文本域名" rows="10" cols="50" >在此输入信息</textarea>
<!--表单高级-->
<h2>阅读协议</h2>
<form>
<textarea name="content" cols="50" rows="5" readonly="readonly">
欢迎阅读服务协议。。。。
</textarea><br><br>
同意以上协议<input type="checkbox" name="check_1">
<input name="register" type="submit" value="注册" disabled="disabled">
</form>
<!--范围标签:用于标识行内的某个内容，以实现行内某个部分的特殊设置以区分其他内容-->
<span style="color: darkmagenta;">¥299</span>
<p>
你好啊，我很<span style="color:red">喜欢</span>你呢!<br>
</p>
<!--span和div的区别：span只是行级元素，不会换行，div是块级元素，会换行-->
<span style="color: red;">QWQ</span>
<span style="color: red;">QWQ</span>
<span style="color: red;">QWQ</span>
<div style="color: royalblue;">QWQ</div>
<div style="color: royalblue;">QWQ</div>
<div style="color: royalblue;">QWQ</div>
</body>
