HTML概述
HTML:超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种样式
标记语言：通过一组标签来对内容进行描述。<关键字>
<h1>静夜思</h1> <!--标题标签-->
<h2></h2>
<h3></h3>
<h4></h4> <!--需要注意的是h后面的范围1-6,如果超出的话，就只是简单的文本-->
<h5></h5>
<br/> <!--换行标签，在每一行的后面加上换行符，就可以进行换行-->
<p>床前明月光</p> <!--使用p标签包裹，就是在行的前面和在行的后面都加上一个换行符-->
<hr /> <!--水平分割线-->
<font color="red" size="1" face="仿宋">回家</font>
<!--font标签常用的属性，color，size,其中size的取值范围是1~7,face="仿宋"-->
<!--
p:paragraph tag
h:title tag
br:line feed(换行)
hr:horizontal line
b:overstriking
i:italic
strong:overstriking(include meaning)
em:italic(include meaning)
-->
website picture and prescribed route(指定路径)
<img src="文件路径" alt="图片加载失败"/>
<!--
../../ 上上级路径
../ 代表的是上一级路径
./ 代表的是当前路径
例如：./10.jpg
alt:image loading error message
-->
网站中的友情链接页面
- 无序列表
<!--
无序列表,type属性有小圆圈，小方块，小黑点
-->
<ul type="disc">
<li>百度</li>
<li>新浪微博</li>
<li>黑马程序员</li>
</u1>
- 百度
- 新浪微博
- 黑马程序员
- 有序列表
<!--
有序列表
常用属性：type指定需要的类型，start决定从几开始
href:the link address which needs to visit
target:open mode
-->
<ol type="a" start="2">
<li>百度</li>
<li>新浪微博</li>
<li>黑马程序员</li>
</ol>
- 百度
- 新浪微博
- 黑马程序员
寻找错误
浏览器右键点击检查，然后在Element中的下方出现的Console会显示错误
Table Tab
<!--
table
common used attributes:
border:specifies(指定) the border(边框)
width
height
bgcolor:background color
align(对齐方式)
tr:the line tag
td:the column tag
-->
<table border="1px" width="400px" bgcolor="yellow" align="center">
<tr bgcolor="red" align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td bgcolor="pink" align="center">1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
Table consolidation(合并) and nest(嵌套)
<!--
the common used attributes:
colspan:across the column
rowspan:across the row
-->
<table boeder="1px" width="400px">
<tr>
<td colspan="2">11</td>
<!--<td>12</td>-->
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<!--<td>23</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 rowspan="2">44</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<!--<td>54</td>-->
</tr>
</table>
| 11 | 13 | 14 | ||||
| 21 |
|
24 | ||||
| 31 | 34 | |||||
| 41 | 42 | 43 | 44 | |||
| 51 | 52 | 53 | ||||
the table living example
step analysis:
-
create a table with 8 rows ang 1 column
-
the first part:logo
- nest a table with 1 row and 3 columns
-
the second part:navigation bar(导航栏)
- place five hyperlinks
-
the third part:slideshow(轮播图)
-
the fourth part:nest a table with 3 rows and 7 columns
-
the fifth part:place a picture
-
the sixth part:copy the part four
-
the seventh part:place a picture
-
the eighth:place hyperlink
<!--create a table with 8 rows ang 1 column-->
<table>
<!--part one:nest a table with 1 row and 3 columns-->
<tr>
<td>
<table>
<tr>
<td>
<img src="C:\Users\kiss\Desktop\web素材\Day 1\Picture\Picture 11.png" />
</td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<!--part two:place five hyperlinks-->
<tr>
<td></td>
</tr>
<!--part three:slideshow(轮播图)-->
<tr>
<td></td>
</tr>
<!--part four:nest a table with 3 rows and 7 columns-->
<tr>
<td></td>
</tr>
<!--part five:place a picture-->
<tr>
<td></td>
</tr>
<!--part six:copy the part three-->
<tr>
<td></td>
</tr>
<!--part seven:place a picture-->
<tr>
<td></td>
</tr>
<!--part eight:place hyperlink-->
<tr>
<td></td>
</tr>
</table>
实例：京东页面的简单实现
实例链接：