HTML学习笔记

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习

前端学习专栏收录该内容

38 篇文章

订阅专栏

这篇博客介绍了HTML5中如何使用地图元素创建图片超链接，对比了使用坐标和PS抠图两种方法的优缺点。同时讲解了HTML表格的创建、单元格内嵌入超链接和多媒体文件（视频、音频）的处理，包括浏览器兼容性问题的解决。此外，还提到了HTML的容器元素及其用途，以及文本编辑相关标签。最后讨论了元素的包含关系和一些基本的HTML标签使用规则。

HTML学习笔记
HTML5标签元素周期表HTML5元素 - 时钟网 - 在线时钟报时网 (sslfy.com)
一、用同一张的图片里的各个元素分别设置超链接的方法（可以通过css去掉超链接的下划线）
1、先用地图元素设置好图中用于超链接的元素的坐标
优点：花时间少，比较方便
缺点：误差大、容易翻车

            其中shape是元素的形状，coords ="..."中填写元素的各个参数，如：
             ①、如果shape为圆（circle），那么coords = "圆心x坐标，圆心y坐标，半径r"
             ②、如果shape为矩形（rect），那么coords = "x（矩形左上），y（矩形左上），x（矩形右下，y（矩形右下）"
             ③、如果shape为多边形（poly），那么coords = "（多边形各拐点的坐标）"

……

           然后在a元素标签中中增加<img usemap = "#地图元素名" src = "./……（文件名）（建议相关文件最好和HTML文件存在一个文件夹里）"示例如下：
             

          注：①、target = "_blank" 的作用是在新的页面打开超链接 ，而用_target则是在当前页面打开超链接 
                 ②、href = "（这里面放这个元素绑定的超链接）"

          然后同类的超链接元素放在一个地图元素里就行了


      2、用ps把相关的图片元素抠出来，然后分别用<a>..</a>绑定超链接，用多个a标签分别放置在<body>..</body>里
            优点：超链接的位置非常精准，不会像上面用坐标选区域那样存在较大的误差和翻车点
            缺点：对ps技术有要求，并且比用坐标圈定会多花些时间

二、用HTML放置表格
1、放置表格的元素为

，每行用 (这之中是每行的内容），每个单元格的表格数据用 (表格数据），表示，包含在里面，示例：

运行效果：

使用

添加边框和设置标题（默认加粗）后的效果

在

中：
*设置单元格边距用
*设置单元格间距用

使用设置横跨n个单元格的表格

使用设置纵跨n个单元格的标题

其他时候，单元格会根据自适应调整大小以保持表格美观

          2、在单元格内嵌入文字超链接或图片超链接的方法：把<a></a>元素嵌入<td></td>中

①、文字示例：

效果：

②、图片示例：

效果：

          3、列表（有序列表、无序列表、定义列表）
                  *<ol></ol>设置有序列表（在元素前面用数字或者字母为其排序）
                  *<ul></ul>设置的是无序列表（可用于制作菜单或者新闻列表）
                  *定义列表（多用于文献）：<dl></dl>、<dt></dt>、<dd></dd>(描述）
                                     包含关系：dl -> dt -> dd

示例：

效果：

*行内元素和块级元素的区别

三、用HTML放置多媒体文件（视频、音频、动画等）
首先说下处理多媒体文件和浏览器兼容性的问题
有些浏览器可能支持一种格式而不支持另一种格式，那么这时候可以用把多种格式的同一种视频放在里，这样浏览器就会从上到下检索他兼容的格式并播放，播放了第一个兼容的版本就不会播放之后的版本。
eg.

如果都不支持，那么也可以在最后用

做上引导并加上下载该多媒体文件其他格式的超链接

1、视频：

其中controls = “controls"播放控件显示开关（就是开始暂停和进度条那些）src = ”“ 设置视频链接，style=”"设置视频的宽度等，单位是像素(px)，示例：

效果：

*拓展：布尔(bool)属性(可以在一个标签的开始添加多个bool属性)
1.只有两种状态：不写或取值为属性名
2.取值为属性名时使用这种属性的功能
3. eg.
①、controls=" " 播放控件显示开关
②、autoplay = " " 自动播放，当浏览器设置为不允许自动播放时，可以使用muted = " "(静音播放)
③、loop = " " 循环播放
eg.

当然使用多个bool类型时也可以不给其取值，直接用类型名就行，eg.

2、音频
eg.

效果：

四、容器（可以理解为板块或者区域，可套娃，在网页开发中无处不在，作用为划分区域）

1、

划分一个区域，里面还可以套娃，容器内的显示和排版是css写，不是HTML
2、语义化容器元素（便于电脑和自己编码时理解，板块化做网页，这是标准化设置样式，可以根据自己划分的样式来板块式设置网页，便于设置和后续维护，而以下标签本身并没有什么特殊功能）
页头header：

内容，可以是各种，在文章里是标题等

页尾footer：

正文article：

表示整片文章正文

章节section：

通常用于表示文章章节

附加信息aside(可以设置为侧边栏）：

五、元素的包含关系
*如果包含关系出现问题，则页面也出现异常
1、容器元素可以包含任何元素
2、a元素几乎可以包含任何元素(但不能a里套a)
3、某些元素有固定的资源，如ul -> li 、ol -> li、 dl -> dt -> dd，……
5、标题和段落元素不能相互嵌套，并且其中不能包含容器元素
4、根据元素语义上的逻辑关系和百度查找、查手册查找包含关系

六、文本编辑时的标签

1、格式化标签

2、计算机输出标签

3、引文、引用及标签定义

七、内联框架iframe（几乎不怎么用），在当前页面引入一个其他页面，两个页面混在同一个网页中显示，但是操作引入的页面时会在新窗口打开被引入的页面

frameborder = "0"是取消内联框架的边框，可以用width和height调整内联框架的长和宽

这里在太阳系图中引入一个b站的页面，下面是效果：

那么就可以再一个页面中塞两个页面，不过此时如果点b站中任意一个功能模块，就会在新窗口中打开那个功能模块，而不是在这个页面中的小b站里打开