今天学习总结
HTML常用元素与属性
描述html元素的功能，
，![]()
双标签内容由用户提供:
Hello world
单标签/空元素
内容由标签的某个属性设置:
通常用来加载一些外部资源，例如图片，视频，音频，文档 加载css 属性 写到开始标签中:
Hello
不同的类型的标签，具有不同的属性，但是总有一些通用的，共有的属性 通用属性 id class style title 推荐安装三个vscode插件 auto reanme tag auto closed tag prettier-format code!DOCTYPE html>
Hello World
<img src="https://img0.baidu.com/it/u=1802049463,150729828&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"alt="" />
<!-- ----------------------------------------------------------- -->
<!-- 2.属性: 元素的“特征”-->
<p id="first">今天是一个重要的日子</p>
<div>邮箱:<input type="email" name="" id="" /></diy>
<!-- 属性必须写到起始标签中，使用"名-值对"的方式 ， id=“first"-->
<!-- 1.id: 匹配唯一元素，唯一性由用户保证，浏览器不检査 -->
<h3 id="first">我今天吃炒面</h3>
<h3 id="first">我今天吃了很多的小龙虾</h3>
<style>
#first {
color: red;
}
</style>
<!-- 2.class:匹配满足条件的一类元素，例如篮子里面有土豆和西红柿，当提到西红柿西红柿举手了（集合）-->
<!-- 3.style:设置当前元素的样式-->
<div>
<button style="background-color:【yellow">提交</button>
</div>
<div>
<button>取消</button>
</div>
<!--4.title :不常用 -->
<h2 title="1921年07月01日">庆祝100年诞辰</h2>
<!--
标签: 元素的"功能”
属性: 元素的"特征”
通用属性: id，class，style
-->
- haha1
- haha2
- haha3
<li>
<a href="">星期二</a></li>
<a href=""><img src="https://n.sinaimg.cn/spider20240522/140/w800h940/20240522/0404-5080396beb643d58e904d4a6918a6000.jpg " alt=""width=90>
</a></li>
<li>
<a href="">星期三</a></li>
<a href=""><img src="https://n.sinaimg.cn/spider20240522/140/w800h940/20240522/0404-5080396beb643d58e904d4a6918a6000.jpg " alt=""width=90>
</a></li>
<li>
<a href="">星期四</a></li>
<a href=""><img src="https://n.sinaimg.cn/spider20240522/140/w800h940/20240522/0404-5080396beb643d58e904d4a6918a6000.jpg " alt=""width=90>
</a></li>
<li>
<a href="">星期五</a></li>
<a href=""><img src="https://n.sinaimg.cn/spider20240522/140/w800h940/20240522/0404-5080396beb643d58e904d4a6918a6000.jpg " alt=""width=90>
</a></li>
<li>
<a href="">星期六</a></li>
<a href=""><img src="https://n.sinaimg.cn/spider20240522/140/w800h940/20240522/0404-5080396beb643d58e904d4a6918a6000.jpg " alt=""width=90>
</a></li>
!DOCTYPE html>
| id | name | salary |
|---|---|---|
| 1 | 西子 | 5000 |
| 2 | 李子 | 7000 |
| 3 | 橘子 | 8000 |
| 3 | 18000 |
<!--表体-->
<tbody>
<tr align="center">
<td>1</td>
<td>西子</td>
<td>5000</td>
</tr>
<tr align="center">
<td>2</td>
<td>李子</td>
<td>7000</td>
</tr>
</tbody>
<tbody bgcolor="yellow">
<tr align="center">
<td>3</td>
<td>橘子</td>
<td>8000</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr align="center">
<td></td>
<td>3</td>
<td>18000</td>
</tr>
</tfoot>
| id | name | salary |
|---|
<!-- 行的合并rowspan：将第二行与第三行的第一列全部合并 -->
<tr>>
<td rowspan="2"bgcolor="yellow">x</td>
<td>x</td>
<!-- 列的合并: 将以下的三列进行合并 -->
<!-- 将合并的属性必须添加到第一个td上 -->
<td "colspan="3" bgcolor="lightblue" >x</td>
<!-- <td>x</td>
<td>x</td> -->
</tr>
<tr>
<!-- 此时第三行的第一列就是多余的，被兼并的-->
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
| x | x | x | x | x |
