学习目标

能够使用idea创建html文档
能够使用h1~h6、hr、p、br 等与文本有关的标签
能够使用有序列表ul-li和无序列表ol-li显示列表内容
能够使用图片img标签把图片显示在页面中
能够使用超链接a标签跳转到一个新页面
能够使用table、tr、td标签定义表格
能够制作旅游网的首页

1、HTML

1.1 什么是html

html是超文本标记语言
超文本: 超出了文本范畴, 功能要比文本强大
标记语言: 语法由标签组成

1.2 html可以做什么

设计页面,做网页

1.3 HTML的结构

<html><head><title>标题</title>//外部的引入文件 css, js//配置: eg 编码</head><body>//展示的内容</body>
</html>

1.3.1 head标签

一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到.

作用

指定网站的标题

指定网站的关键字/指定网站的描述信息

外挂一些外部的css/js文件

添加一些浏览器适配相关的内容

1.3.2 title标签

作用：专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点：title标签必须写在head标签里面

1.3.3 body标签

作用：专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点：虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中.

一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

1.4 html语法规范

扩展名是html或者htm
html标签不区分大小写

<p></p>
<P></P>
----------------------
<p></P>
<P></p>

html由头(head)和体(body)组成
标签是可以嵌套的,标签里面可以放标签
标签一般由起始标签开始，结束标签终止。但是如果标签不修饰内容，可以在标签里结束。br, hr, img

<p>内容.....</p>: 起始标签,结束标签
<br/>: 标签里结束,因为不需要标签里面定义内容

1.5 标签属性

在这里插入图片描述

属性是属于标签的，修饰标签，让标签有更多的效果
属性一般定义在起始标签里面。 hello
属性一般以 属性=属性值的形式存在
属性值一般用 ‘’或者“ ”括起来。不加引号也是可以的.(不建议使用)

1.6 使用IDEA创建HTML

创建静态Web模块

在这里插入图片描述

指定模块名和保存位置

在这里插入图片描述

创建HTML文件，选择html5的版本

在这里插入图片描述

1.7 排版标签

字体标签

<font color="字体颜色" size="字体大小(1~7)" face="字体风格">哈哈</font>

标题标签

<hn>标题<hn>  n取值1~6, 1是一级标题, 2是二级标题...

段落标签

<p>段落</p>
注意：段落之间自动进行换行

粗体标签

<b>内容</b>

斜体标签

<i>内容</i>

下划线标签

<hr/>

换行标签

<br/>

Ctrl+Shift+/: 注释快捷键,alt shift z可以把文字等围起来添加标签快捷键

2、图片展示案例

一,案例需求

在这里插入图片描述

二,技术分析

1,图片标签

img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片

语法总结:
img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>
注意路径写法:./写也不写都是表示当前图片所在的目录,../表示当前图片所在目录的上一级目录
注意宽高写法:100px表示像素,50%表示img图片标签占父标签body的一半,宽高只写一个会等比例缩放
注意地址写法:scr图片路径地址可以是本机电脑上的,也可以是网络上复制过来的图片地址

示例代码

    <!--掌握: src属性: 图片的路径; width属性:指定图片的宽度 ; height属性: 指定图片的高度;了解: alt属性: 图片的描述(只有图片显示错误的时候才有效果); title属性: 鼠标放上去显示的标题--><img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/>

2.路径问题

2.1相对路径

相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

2.1.1同级

同级就是"图片"和".html文件"存储在同一个文件夹中

格式: src=“QRCode.jpg”

含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

2.1.2上级

上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

格式: src="…/QRCode.jpg"

含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫QRCode.jpg, 其中../ 代表找到当前文件夹的上一级文件夹

2.2绝对路径

绝对路径就是每次都从指定的盘符开始查找.

绝对路径注意点:

1.路径中不要出现中文, 否则可能出现未知问题

2.如果是通过"相对路径"来指定图片, 不能跨盘符,例如.html文件在C盘, 那么不能去查找D盘图片

三，思路分析

创建页面
创建标题标签
创建img, 文本, 下划线标签, 复制5次

四，代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例二图片展示</title>
</head>
<body><!--- 创建标题标签- 创建一个图片标签, 创建font标签, 创建下划线标签(复制4个)--><h1>家用电器排行</h1><img src="../img/tv01.jpg"> <font size="3">TCL电视, 品质保障</font><hr/><img src="../img/tv02.jpg"> <font size="3">TCL电视, 品质保障</font><hr/><img src="../img/tv03.jpg"> <font size="3">TCL电视, 品质保障</font><hr/><img src="../img/tv04.jpg"> <font size="3">TCL电视, 品质保障</font><hr/><img src="../img/tv05.jpg"> <font size="3">TCL电视, 品质保障</font><hr/></body>
</html>

案例三网站友情链接页面案例

一，案例需求,友情链接

在这里插入图片描述

点击百度，进入百度页面…

二，技术分析

1.列表标签

1.1无序列表

语法

<ul type="类型"><li>需要显示的条目内容</li>...
</ul>

示例代码

    <!--二 无序列表 ul--><!--type属性: 列表的类型; dist实心圆默认；circle: 空心圆; square: 实心的正方形--><ul type="square"><!--li定义列表里面的条目(item). li定义在ul里面--><li>乔丹</li><li>詹姆斯</li><li>艾弗森</li><li>科比</li><li>库日天</li></ul>

注意点

ul标签和li标签是一个整体,一般情况下ul标签和li标签都是一起出现, 不会单个出现.

li要定义在ul里面
应用场景

新闻列表
商品列表
导航条

1.2有序列表

语法

<ol type="类型" start="起始索引"><li>需要显示的条目内容</li>...
</ol>

示例代码

    <!--一,有序列表 olstart属性: 起始的索引(默认是第1个)type属性: 列表类型;  1: 阿拉伯数字（默认）; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字,多学一招:ol>li*3 按tab快捷键生成在ol里面搞3个li--><ol start="1" type="1"><!--li定义列表里面的条目(item). li定义在ol里面--><li>乔丹</li><li>詹姆斯</li><li>艾弗森</li><li>科比</li><li>库日天</li></ol>

2.超链接标签

2.1超链接标签的基本使用

超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的

超链接标签的格式:<a href="指定需要跳转的目标路径" target="打开的方式">需要展现给用户查看的内容</a>
target属性取值: _blank：新起页面_self：当前页面（默认）

示例代码

    <!--href属性: 跳转的路径(可以是本地的也可以是远程的)target属性: 链接打开方式; _blank: 新开一个窗口;_self:在当前页面打开(默认值)--><a href="http://www.baidu.com" target="_self">百度</a><a href="../案例一信息展示案例/index.html">案例一信息展示页面</a>

2.2假链接

就是点击之后不会跳转的链接我们称之为假链接.在企业开发前期, 其它界面都没有写出来, 那么我们就不知道应该跳转到什么地方, 所以就只能使用假链接来代替. 当项目后期其它界面都已经完成时再将假链接体会为真链接

<a href="#">这是一个假链接</a>

三，思路分析

创建一个html
创建标题标签
创建无序列表(3个li)
在每一个li里面嵌套a标签,设置不同的路径

四，代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--- 创建一个html- 创建一个标题标签- 创建无序(ul)列表标签, 再在ul里面定义3个li-  在每一个li里面嵌套超链接, 写上跳转的路径
--><h1>友情链接</h1><!--  ul>(li>a)*3: tab--><ul><li><a href="http://www.baidu.com" target="_blank">百度</a></li><li><a href="http://www.itcast.cn">传智</a></li><li><a href="#">谷歌</a></li></ul></body>
</html>

案例四小说排行案例

一，案例需求

在这里插入图片描述

二，技术分析

1.表格标签的使用

在过去,表格标签用的非常的多, 绝大多数的网站都是使用表格标签来布局.表格标签类似Excel.

<!--
语法:
<table border="1px" width="" height="" bgcolor="" align="">
<tr>
<td>需要显示的内容</td>
</tr>
</table>
1.解释说明
table标签代表整个表格
tr标签代表是表格中的一行,r是row即英文行的意思,缩写而已
td标签就是一行中的一个单元格,巧记,刚刚单元格的单拼音是dan以d开头!
2.注意点
表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
tr定义在table里面, td定义在tr里面
-->

2.表格中的属性

在这里插入图片描述

3.合并单元格【重点】

删除要合并的单元格，只留一个(最前方)
设置colspan或者rowspan属性，几个合并，值就是几

4.表格的其它标签

<!--多学一招:不用css设置边框颜色用bordercolor="red"--><table><caption>表格标题</caption><tr><th>第一列的标题</th><th>第二列的标题</th><th>第三列的标题</th></tr>...
</table>1.caption表格标题在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.th列标题在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的,<!--巧记head加粗单元格居中,领导就是头,大佬,拍照居中-->

5.表格的完整结构[了解]

<table><caption>表格的标题</caption><thead><tr><th>每一列的标题</th></tr></thead><tbody><tr><td>数据</td></tr></tbody><tfoot><tr><td>数据</td></tr></tfoot>
</table>caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

6.表格容易错的地方

<body><table><tr></tr> <!--不算规范的表格, 就算是一行一列, td是不能少的--></table><table><tr><td></td></tr> <!--这才是一行一列--></table><table>  <!--不要这么写,tr定义在table里面的, tr里面只放td; td里面才放内容-->哈哈<tr>哈哈<td>1</td><td>2</td><td>3</td></tr></table></body>

三，思路分析

创建页面
创建标题(居中)
创建8行6列的表格
每一个格子里面定义内容, 第一行需要设置背景色, 居中

四，代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--- 创建8行6列的表格- 创建表格的标题(caption), 嵌套h2- 第一行: 设置背景色, 用th- 第二行~8行: 填充内容, 设置居中
--><!-- table>tr*8>td*6 tab-->
<table border="1px" width="800px" align="center"><caption><h1>今日小说排行榜</h1></caption><tr bgcolor="#F1F1F1"><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/up.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/up.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/up.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/up.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/down.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/up.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr><tr align="center"><td>1</td><td>修罗武神</td><td><img src="../img/down.jpg"></td><td>2704</td><td>167878</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr>
</table></body>
</html>

案例五综合案例,课后作业,独立思考,动手能力

一,案例需求

在这里插入图片描述

二，思路分析

创建一个8行的表格
第一行(logo):定义一个img
第二行(search): 嵌套1行3列的表格, 每一个格子里面定义img
第三行(menu): 设置背景色, 嵌套1行9列的表格
第四行(轮播图):定义img
第五行(旅游线路): 嵌套3行4列的表格, 进行单元格合并
第六行(旅游线路): 嵌套3行4列的表格, 进行单元格合并
第七行(广告): 定义img
第八行(底部信息): 定义文本居中

<!--table>tr*8>td tab-->
<table><!--第1行:定义一个img--><tr><td></td></tr><!--第2行: 嵌套1行3列的表格--><tr><td></td></tr><!--第3行: 嵌套1行9列的表格--><tr><td></td></tr><!--第4行: 定义一个img--><tr><td></td></tr><!--第5行:嵌套3行4列表格, 需要进行单元格合并--><tr><td></td></tr><!--第6行:嵌套3行4列表格, 需要进行单元格合并--><tr><td></td></tr><!--第7行: 定义一个img--><tr><td></td></tr><!--第8行: 居中, 定义文字--><tr><td></td></tr>
</table>

三，代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>综合案例</title>
</head>
<body>
<!--- 创建一个8行的表格- 第1行:定义一个img- 第2行: 嵌套1行3列的表格- 第3行: 嵌套1行9列的表格- 第4行: 定义一个img- 第5行:嵌套3行4列表格, 需要进行单元格合并- 第6行:嵌套3行4列表格, 需要进行单元格合并- 第7行: 定义一个img- 第8行: 居中, 定义文字
--><!--table>tr*8>td tab--><table  width="98%" align="center"> <!--布局大表格居中,宽度适配98%--><!--第1行:定义一个img--><tr><td width="100%" height="100px"> <!--通用套路:单元格适配行宽,高度自定义--><img src="../img/top_banner.jpg" width="100%" height="100%"></td></tr><!--第2行: 嵌套1行3列的表格--><tr><td width="100%" height="100px"><table width="100%" height="100px"> <!--表格也要适配,因为表格里面的图片可能过大--><tr><td><img src="../img/logo.jpg"></td><td><img src="../img/search.png"/></td><td><img src="../img/hotel_tel.png"/></td></tr></table></td></tr><!--第3行: 嵌套1行9列的表格--><tr><td width="100%" height="40px"><table width="100%" height="40px"><tr bgcolor="#FFC900" align="center"><td><a href="#"><font color="black">首页</font></a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td><td><a href="#">首页</a></td></tr></table></td></tr><!-- 第4行: 定义一个img--><tr><td width="100%" height="300px"><img src="../img/banner_1.jpg" width="100%" height="100%"/></td></tr><!--第5行:嵌套3行4列表格, 需要进行单元格合并--><tr><td width="100%" height="550px"><table width="100%" height="550px" ><tr><td colspan="4" height="50px"><img src="../img/icon_6.jpg"/>国内游</td></tr><tr><td rowspan="2" width="25%" height="500px"><img src="../img/guonei_1.jpg" width="100%" height="100%"/></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_1.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_2.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_3.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td></tr><tr><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_1.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_2.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_3.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td></tr></table></td></tr><!--第6行:嵌套3行4列表格, 需要进行单元格合并--><tr><td width="100%" height="550px"><table width="100%" height="550px"><tr><td colspan="4" height="50px"><img src="../img/icon_6.jpg"/>国内游</td></tr><tr><td rowspan="2" width="25%" height="500px"><img src="../img/guonei_1.jpg" width="100%" height="100%"/></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_1.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_2.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_3.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td></tr><tr><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_1.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_2.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td><td align="center" width="25%" height="250px"><img src="../img/jiangxuan_3.jpg"/><p>上海直飞三亚5天4晚自由行(春节预售...</p><p><font color="red">¥899</font></p></td></tr></table></td></tr><!--第7行: 定义一个img--><tr><td width="100%" height="80px"><img src="../img/footer_service.png" width="100%" height="100%"></td></tr><!--第8行: 居中, 定义文字--><tr><td align="center" width="100%"><font color="gray" size="2">版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font></td></tr></table>
</body>
</html>

HTML扩展标签

一,锚点链接,回到顶部

锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。

在html里面锚点的作用: 通过a标签跳转到指定的位置.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a id="aId"></a><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><img src="img/banner_1.jpg" width="500px" height="2000px"/><p>111</p><p>111</p><p>111</p><p>111</p><p>111</p><a href="#aId">回到顶部</a></body>
</html>

二,图片链接,链接里面包裹图片和文字,点图片或者点文字都跳转而已,巧记文字换图片,效果跟点击文字一样即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="http://www.baidu.com"><img src="img/b.jpg"/><br/>百度
</a></body>
</html>

三,video标签

video标签的作用是用来播放视频

<video src="视频的资源">
</video>

在这里插入图片描述

四,audio标签

audio标签的作用是用来播放音频

<audio src="音频的资源"></audio>

在这里插入图片描述

五,详情和概要标签

利用summary标签来描述概要信息, 利用details标签来描述详情信息. 默认情况下是折叠展示, 想看见详情必须点击

<details><summary>概要信息</summary>详情信息
</details>

html

学习目标

1、HTML

1.1 什么是html

1.2 html可以做什么

1.3 HTML的结构

1.3.1 head标签

1.3.2 title标签

1.3.3 body标签

1.4 html语法规范

1.5 标签属性

1.6 使用IDEA创建HTML

1.7 排版标签

2、图片展示案例

一,案例需求

二,技术分析

1,图片标签

2.路径问题

2.1相对路径

2.1.1同级

2.1.2上级

2.2绝对路径

三，思路分析

四，代码实现

案例三网站友情链接页面案例

一，案例需求,友情链接

二，技术分析

1.列表标签

1.1无序列表

1.2有序列表

2.超链接标签

2.1超链接标签的基本使用

2.2假链接

三，思路分析

四，代码实现

案例四小说排行案例

一，案例需求

二，技术分析

1.表格标签的使用

2.表格中的属性

3.合并单元格【重点】

4.表格的其它标签

5.表格的完整结构[了解]

6.表格容易错的地方

三，思路分析

四，代码实现

案例五综合案例,课后作业,独立思考,动手能力

一,案例需求

二，思路分析

三，代码实现

HTML扩展标签

一,锚点链接,回到顶部

二,图片链接,链接里面包裹图片和文字,点图片或者点文字都跳转而已,巧记文字换图片,效果跟点击文字一样即可

三,video标签

四,audio标签

五,详情和概要标签

相关文章