第一天
路径(前期铺垫知识)
(1)目录文件夹和根目录:
实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。
目录文件夹︰就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
想快速打开一个目录文件夹,可以直接拖动过去。
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。这里简单来说,图片相对于HTML页面的位置
下一级路径的写法:
…/是上一级,…/…/是上两级,以此类推……
绝对路径∶是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。例如“D:\web\img\ogo.gif”
(不常用)或完整的网络地址“http://www.itcast.cn/images/logo.gif”。
绝对路径和相对路径的斜杠不一样。
超链接标签(重点)
代码:
<!DOCTYPE htm1>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv=“X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http: / / www.qq.com" target="_blank">腾讯</a>
<!--必须带上冒号和反斜杠-->
target打开窗口的方式―默认的值是_self当前窗口打开页面_blank 新窗口打开页面
<!可以改变target的值来试试效果>
</body>
</htm1>
内部链接:
<body>
<h4>1.外部链接</h4>
<a href="http: //ww.qq.com" target="_blank">腾讯</a>
<a href="http: //ww.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接:网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html">公司简介</a>
</body>
还得先创建一个HTML文件:
代码:
锚点链接在标题处是这样的:
锚点链接在目录中是这样的:
注释标签:
那是反斜杠。
特殊字符
第二天:创建表格、列表等
表格标签
表格的作用:
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
Pink老师总结:表格不是用来布局页面的,而是用来展示数据的.
像这样:
没有列的概念,都是单元格的概念。是各种嵌套的“父子关系”
上代码:
<!DOCTYPE htm1>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>刘德华</td><td>男</td> <td> 56</td></tr><tr><td>张学友</td><td>男</td> <td> 58 </td></tr><tr><td>郭富城</td><td>男</td><td> 51 </td></tr><tr><td>黎明</td><td>男</td> <td>57</td></tr>
</table>
</body>
</html>
效果:
表头单元格标签:
表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示
代码:
效果:
代码里显示白色的目的是为了说明这些其实不在HTML里书写。
来个案例:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.O"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>鬼吹灯</td>
<td><img src="down .jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#"">图片</a> <a href=""#">百科</a></td>
</tr>
</table>
</body>
</html>
表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分.
在表格标签中,分别用: <thead>
标签表格的头部区域(范围更广)、<tbody>
标签表格的主体区域.这样可以更好的分清表格结构。
合并单元格
上图为总操作。
合并前:
合并后:
列表
列表标签:
表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
无序列表(重点)
无序列表默认是小黑点开头。
注意:
1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2. <ul></u>
中只能嵌套<li><li>
,直接在<u></ul>
标签中输入其他标签或者文字的做法是不被允许的。
3. <li>
与</li>
之间相当于一个容器,可以容纳所有元素。
4.无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。
注意事项:
自定义列表(重点)
通俗来说就是一个大哥领着一群小弟。
(并列的兄弟关系)
来个代码:
<!DOCTYPE htm1>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge ">
<title>自定义列表(重点)</title>
</head>
<body>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>
效果:
注意点: