学习目标
- 能够使用idea创建html文档
- 能够使用h1~h6、hr、p、br 等与文本有关的标签
- 能够使用有序列表ul-li和无序列表ol-li显示列表内容
- 能够使用图片img标签把图片显示在页面中
- 能够使用超链接a标签跳转到一个新页面
- 能够使用table、tr、td标签定义表格
- 能够制作旅游网的首页
案例一-网站信息页面案例
一,案例需求
二,技术分析
1,什么是html
- html是超文本标记语言
- 超文本: 超出文本范畴. 功能要比文本强大
- 标记语言: 语法由标签组成
学习HTML核心就是学习标签
2.html可以做什么
- 设计页面,做网页
3.HTML的结构
<html>
<head>
<title>标题</title>
//引入其他外部文件(css,js...)
//配置(编码....)
</head>
<body>
//内容
</body>
</html>
3.1head标签
一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到.
- 作用
指定网站的标题
指定网站的关键字/指定网站的描述信息
外挂一些外部的css/js文件
添加一些浏览器适配相关的内容
3.2title标签
- 作用
专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题 - 注意点:
title标签必须写在head标签里面
3.3body标签
- 作用
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频) - 注意点
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中.
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签
4.html语法规范
-
扩展名是html或者htm
-
html标签不区分大小写
<p></p>
<P></P>
-------
<p></P>
<P></p>
-
html由头(head)和体(body)组成
-
标签是可以嵌套的,标签里面可以放标签 eg: head标签里面定义了title标签
-
标签一般由起始标签开始，结束标签终止(成对出现)。但是如果标签不修饰内容，可以在标签里结束。
<head>xxx</head>
<p>hello</p>
eg: 换行
<br/>
5.标签属性
武器(标签) 武器属性(标签属性)
攻击之爪 +6点攻击力
圣剑 +100点攻击力
倚天剑 +50点攻击力, +15%攻速
- 属性是属于标签的，修饰标签，让标签有更多的效果
- 属性一般定义在起始标签里面。
<font color='red' size="6">你好</font>
- 属性一般以 属性=属性值的形式存在 多个属性直接使用空格隔开
- 属性值一般用 ‘’ 或者“ ” 括起来。 不加引号也是可以的.(不建议使用)
6.使用IDEA创建HTML
需求: 展示hello sz68… 颜色变成红色
步骤:
-
创建静态web工程, 创建html页面
-
创建font标签
-
创建静态Web模块
-
指定模块名和保存位置
-
创建HTML文件，选择html5的版本
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+/: 注释快捷键
三,思路分析
- 创建一个HTML
- 创建一个标题标签
- 创建下划线标签
- 创建四个段落标签
- 把第一个段落标签前面几个文字嵌套在字体标签, 设置color=red
四,代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--1.创建一个html页面
2.创建一个标题标签
3.创建一个下滑线标签
4.创建4个段落标签
5.在第一个段落前面几个文字,嵌套一个font标签,设置color属性为red-->
<body>
<h1>公司简介</h1>
<hr />
<p><font color="red">“程序员训练营”</font>是由***进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 目前，“***”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p>
<p>程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p>
<p>程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>
<p>一直以来，程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
</body>
</html>
五,小结
- 字体
<font color="" size="" face=""></font>
-
标题标签
n取值是1~6
-
段落标签
段落之间自动进行换行
- 粗体
<b></b>
- 斜体
<i></i>
- 下划线
<hr/>
- 换行
<br/>
案例二-图片展示案例
一,案例需求
二,技术分析
1,图片标签
img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片
语法:
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>
-
示例代码
<!--掌握: 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盘图片. 直接打开, 不要使用IDEA
三，思路分析
- 创建HTML
- 创建标题标签
- 创建img, 文本, 创建下划线
- 复制4个
四，代码实现
<!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>
五,小结
- 图片标签
<img src="图片路径" width="宽" height="高"/>
- 图片路径
- 相对路径
- ./ 当前目录 (./可以省略)
- …/ 上级目录
- 相对路径
- 绝对路径(从盘符开始, 从网络协议)
直接把图片拖进去
案例三-网站友情链接页面案例
一，案例需求
- 点击百度，进入百度页面…
二，技术分析
1.列表标签
1.1无序列表
-
语法
- 需要显示的条目内容
- ...
-
示例代码
<!--二 无序列表 ul--> <!--type属性: 列表的类型; 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或者ol里面, li里面定义内容 -
应用场景
新闻列表
商品列表
导航条,菜单
1.2有序列表
-
语法
- 需要显示的条目内容
- ...
-
示例代码
<!--一,有序列表 ol start属性: 起始的索引(默认是第1个) type属性: 列表类型; 1: 阿拉伯数字; a: 小写的英文字母; A:大写的英文字母; i: 小写的罗马数字; I:大写的罗马数字 --> <ol start="1" type="1"> <!--li定义列表里面的条目(item). li定义在ol里面--> <li>乔丹</li> <li>詹姆斯</li> <li>艾弗森</li> <li>科比</li> <li>库日天</li> </ol>
2.超链接标签
2.1超链接标签的基本使用
-
超链接标签的作用: 就是用于控制页面与页面(服务器资源)之间跳转的
超链接标签的格式:
需要展现给用户查看的内容
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
- 创建标题标签
- 创建无序列表标签, 定义三个列表项
- 在每一个列表项里面定义超链接
四，代码实现
<!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>
五,小结
-
列表
-
有序列表
- 内容
-
无序列表
- 内容
-
-
超链接
target: _self 当前窗口(默认)
target: _blank 新开窗口(默认)
案例四-小说排行案例
一，案例需求
二，技术分析
1.表格标签的使用
在过去表格标签用的非常的多, 绝大多数的网站都是使用表格标签来布局.表格标签类似Excel.
语法:
<table border="1px" width="" height="" bgcolor="" align="">
<tr>
<td>需要显示的内容</td>
</tr>
</table>
1.解释说明
table标签代表整个表格
tr标签代表是表格中的一行
td标签就是一行中的一个单元格
2.注意点
表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
tr定义在table里面, td定义在tr里面
2.表格中的属性
3.合并单元格【重点】
- 删除要合并的单元格，只留一个(最前方)
- 设置colspan或者rowspan属性，几个合并，值就是几
4.表格的其它标签
<table>
<caption>表格标题</caption>
<tr>
<th>第一列的标题</th>
<th>第二列的标题</th>
<th>第三列的标题</th>
</tr>
...
</table>
1.caption表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.th列标题
在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的
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>
<!--1. 不是表格, 就算是1行1列 td不能少
<table>
<tr>
<td></td>
</tr>
</table>
-->
<table>
<tr></tr>
</table>
<!--2. 错误不规格的表格 初始状态下, 每一行的列个数需要相等【合并之后除外的】-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--3. tr定义在table里面, td定义在tr里面, 内容定义在td里面-->
<table>
哈哈
<td>1</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>
五,总结
-
表格结构
-
格子合并
- 删除要合并的格子, 只留一个(最前方那一个)
- 行合并设置rowspan, 列合并设置colspan, 几个合并值就是几
-
格子任意错的地方
- 就算是一行一列, td不能少
- table定义tr, tr定义td, td里面定义内容
- 初始化状态下, 每一行的td的个数要相等【合并之后除外】
案例五-旅游首页
一,案例需求
二，思路分析
- 创建一个8行(每个tr里面放td)的表格
- 第1行(顶部图片): 定义img
- 第2行(logo): 嵌套1行3列的表格, 定义img
- 第3行(menu): 设置背景色, 嵌套1行9列的表格
- 第4行(轮播图): 定义img
- 第5行(线路): 嵌套3行4列的表格, 进行单元格合并
- 第6行(线路): 嵌套3行4列的表格, 进行单元格合并
- 第7行(底部图片): 定义img
- 第8行(底部信息): 居中, 设置文本
三，代码实现
<!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">
<!--第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扩展
一,回到顶部
1.锚点
锚一般指船锚，是锚泊设备的主要部件。铁制的停船器具，用铁链连在船上，把锚抛在水底，可以使船停稳。
在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="音频的资源"></auto>
五,详情和概要标签
利用summary标签来描述概要信息, 利用details标签来描述详情信息. 默认情况下是折叠展示, 想看见详情必须点击
<details>
<summary>概要信息</summary>
详情信息
</details>
扫一扫
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
