HTML
HTML:Hyper Markup Language 超文本标记语言
超文本:比普通文本功能更加强大，可以添加各种样式
标记语言:通过一组标签来对内容进行描述 <关键字>
<h1>静夜思</h1>
<b><i>--李白</i></b></br>
<p>窗前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
1
2
3
4
5
6
html标签，标题h1,水平分割线hr,段落p，font标签
b标签，i标签，strong标签，em标签
img标签，相对路径
列表标签ul,ol,超链接标签
<!DOCTYPE html>
<!--
1.上面是一个文档声明
2.根标签html
3.html文件主要包含两部分，头和体。
头部分主要用来放置一些页面信息
体部分主要用来放置我们的html页面内容
4.通过标签来对内容进行描述，标签通常都是由开始标签和结束标签组成
5.标签不区分大小写，官方建议使用小写
-->
<html>
<head>
<!--meta 网站的配置信息-->
<!--指定浏览器打开页面的编码-->
<meta charset="utf-8" />
<title>入门案例01</title>
<!--指定网站标题-->
</head>
<body>
Hello World！
<!--h1标题:h后面的数字取值范围；1-6-->
<h1>标题1 </h1>
<!--水平分割线-->
<hr />
<p>段落1</p>
<hr />
<!--font 标签常用属性:color(颜色),size(改变字体大小1-7)face(字体)-->
我要<font color="red" size="1" face="仿宋">回家！！！</font>
<!--b:加粗 i:斜体 strong:加粗，带语义标签 em:斜体，带语义-->
<b><i>我</i></b>是最<strong><em>棒</em></strong>的
<!--建议使用带语义的标签-->
<!--img标签
常用属性: src:指定图片路径 width:指定图片宽度 height:图片高度 alt:文件加载失败时的提示语-->
<!--路径相关:
相对路径
./代表的是当前路径 ../代表的是上一级路径 ../../上上一级路径
-->
<!--列表标签:
无序列表:ul li列表项
常用属性:type属性，小圆圈、小方块、默认小黑点
有序列表:ol
常用属性:type指定序号的类型，
start规定序号从几开始，必须写数字
-->
<ul type="square">
<li>百度</li>
</ul>
<ol type="a" start="2">
<li>百度</li>
</ol>
<!--超链接标签
常用属性:href指定要跳转去的链接地址，需要加上http协议
target以什么方式打开
_self:默认打开方式，在当前窗口打开
_blank:新起一个标签页打开页面
-->
<ul>
<li><a href="http://www.baidu.com" target="blank">百度</a></li>
</ul>
</body>
</html>
表格，单元格合并，表格嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>入门案例02</title>
</head>
<body>
<!--table表格标签
常用属性:border指定边界 width宽度 height高度
bgcolor背景色 align对齐方式
colspan跨列 rowspan跨列
tr标签
td标签
-->
<table border="1px" width="400px" bgcolor="yellow" align="center">
<tr>
<td colspan="2">11</td>
<!--该操作将11与12合并(跨列)-->
<!--合并后，会将13挤出去，所以将12删除，才有单元格合并的效果-->
<!-- <td>12</td> -->
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td bgcolor="blue" align="center" colspan ="2" rowspan="2">
<!--表格嵌套-->
<table border="1px" width="100%">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<!-- <td>32</td> <td>33</td>-->
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
