html

学习目标

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

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

  1. 创建静态Web模块

在这里插入图片描述

  1. 指定模块名和保存位置

在这里插入图片描述

  1. 创建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>
  • 示例代码
    <!--一,有序列表 ol
        start属性: 起始的索引(默认是第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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值