1.什么是HTML
超文本标记语言
超文本：比普通文本更加强大
标记语言：使用一组标签对对内容进行描述的语言，它不是一门编程语言
2.HTML的使用
2.1）所有的HTML文件都是以.html或者.htm结尾的，建议使用.html结尾
2.2）一个html网页分别由头部分<head></head>和体部分<body></body>组成，只有一个<head>标签
2.3）HTML的标签都是有开始和结束部分<br />，/结束
2.4）HTML的标签忽略大小写，建议小写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
3.常用标签
3.1）title标题
标题标签使用<hn></hn>，h固定不变，n（1-6）逐渐变小，超过h6显示为h6
特点：加黑、加粗，单独占用一行，与其他行有间距
<title>标题标签</title>
3.2）<!-- -->注释
快捷键Ctrl+/，包含在注释标签里面的内容不显示，只有在查看源码时才显示
<!--注释标签-->
3.3）<hr />水平线
水平线标签，没有结束标签需<hr />正确结束，
属性：不建议使用自带属性，用css取代，size-修改水平线的厚度（高度）
<hr />
3. 4）<p></p>段落
特点：不同的段落标签会自动换行
<p></p>
3.5）<font></font>字体
字体样式标签，必须结合属性才能具备一定的效果
设置颜色：color(可以是英文单词也可以是十六进制)
设置字体：face(那些字体必须是你本机已经有的)
设置大小的：size (从 1 到 7 逐渐变大，超过 7 的部分按照 7 来显示)
<font color="red" size="5" face="楷体">html语言</font>
4.图片标签
<img></img>
图片的位置属性：src
src：
绝对路径：带有盘符的
相对路径：1.如果时同级的话，直接写文件名称；
2.如果是上一级：../文件名称（如果是多级，那么就写多个../../）
3.如果是下级：写目录名称/文件名称
width:设置图片的宽度
height：设置图片的高度
alt：当图片无法正常显示的时候给出的提示信息
<img src="../../img/logo2.png" width="150px" height="30px" alt="logo图片"/>
5.超链接标签
<a href="#" target=""></a> #代表页面不发生跳转
属性
href：链接地址
target：新窗口打开方式
_blank：在新窗口中打开被链接文档。
_self：默认，在相同的框架中打开链接的页面
<a href="https://www.baidu.com/">百度一下你就知道！</a>
6.列表标签
无序列表
<ul> </ul>
<ul type="square">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ul>有序列表
<ol> </ol>
<ol start="4" reversed="reversed" type="a">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ol>
属性：type 有 5 个取值 start 其实位置，reverse：倒序
7.表格标签
<table>
<tr><td></td></tr>
</table>
Table 属性：
table中的属性也同样可以在行和列的标签中使用
行：<tr></tr>
列：<td></td>
边框：border
宽度：width
高度：height
背景颜色：bgcolor
背景图片：background
边框与边框的：cellspacing
边框与内容的：cellpadding
居中显示：alig
<table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
<tr height="100px" bgcolor="gold">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table> 跨行：rowspan（上下）
夸列：colspan（左右）
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2" align="center" width="250px" height="50px">
<img src="../../img/1.jpg" height="100%" width="100%"/>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" align="center" width="100%" height="100%">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
8.框架集结构标签
<frameset >
<frame></frame>
</frameset>
此标签作用是将页面进行区域划分，用作网站的后台管理界面，不能写在body标签里面（删除body）
属性：
rows：将页面分成上下两块（垂直分割），参数值和为100%，能用*指定任意百分比。
cols：将页面分成左右两块（水平分割），参数值和为100%，能用*指定任意百分比。
一但划分区域以后，我们需要对区域进行具体的内容填充，使用<frame></frame>标签
属性：
src：指定该区域显示文件的路径
name：它通常会结合超链接的 target 属性使用，来定义最终的显示位置。
main页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
</head>
<frameset rows="20%,*">
<frame src="top.html">
<frameset cols="25%,*">
<frame src="left.html"></frame>
<frame name="right"></frame>
</frameset>
</frame>
</frameset>
</html>
left页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
</head>
<body>
<a href="right.html" target="right"><font size="5" face="楷体">客户管理</font></a><br><br>
<a href="shangjia.html" target="right"><font size="5" face="楷体">商家管理</font></a><br><br>
<a href="shangping.html" target="right"><font size="5" face="楷体">商品管理</font></a><br><br>
<a href="fenlei.html" target="right"><font size="5" face="楷体">分类管理</font></a><br><br>
</body>
</html>
客户页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
</head>
<body>
<font size="6">客户管理页面</font>
</body>
</html>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
