部分html标签学习分享——制作歌曲推荐网页

学习目标：

1:常用的语义标签，明白语义是什么?至少记忆6-8个

2:熟悉有序列表，无序列表，定义列表的用法

3:行内元素与块元素的基本区别，并各举三个常用的块，行内元素

4:a标签的属性有哪些，其中target属性，有哪些属性值，能达到什么效果

a标签的路径问题，./和../

5:img标签的常用属性有哪些

6:常用的图片格式，简单知道各自的优势在哪里

7:音视频标签及常用属性

01.结构标签

布局标签（结构化标签）用来布局的标签都是块元素

header 网页的头部

main 网页的主体部分（一般就一个）

footer 网页的底部

nav 网页的导航

aside 和主体相关的内容，侧边栏

article 文章之类的

section 独立的区块，上面的标签都不合适，就用这个 ,

用来代替div

02.行内与块元素

元素分类

块元素（block element）用来布局

特点：

1、会独占一行

2、默认情况下，块元素的宽度是视口的100%

3、默认情况下，块元素的高度是被内容撑开的

常用块元素：div、p、h1-h6、header、main、footer、nav

行内元素（inline element）用来包裹文字

特点：

1、不会独占一行

2、宽高是被内容撑开的，内容有多宽它就多宽

常用行内元素：span、strong、em、del等

行内块元素

特点：

兼具块元素和行内元素特点

常用行内块元素：img

注意：

1、块元素主要是用来布局，里面可以放任何元素,块元素、行内元素、行内块元素

2、行内元素主要用来包裹文字的，一般情况下不能放块元素

3、p标签是个特殊的块元素，它里面不能放块元素

4、a标签是个特殊的行内元素，它里面什么都能放

03.列表

列表：如果页面中，出现结构、样式，功能等都比较雷同的部分，

就可以用列表

列表（list）一组一组

1:有序列表用ol创建列表，li表示列表项

2:无序列表用ul创建列表，li表示列表项

3:定义列表用dl创建列表，dt表示下定义，dd表示对定义的解释

类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释

注意：1、列表之间是可以互相嵌套的，ul，ol，li是块元素

2、可以使用type属性更改项目符号

ol 它的项目符号：1、a、A、I 等，默认项目符号是‘1’

ul 它的项目符号:

disc，默认值，实心的圆点

square，实心的方块

circle，空心的圆

3、默认样式，li前有项目符号，上下左右有间距

4、最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序区分

5、ol，li

ul，li

dl，dt，dd

都是配套使用，就像cp

04.超链接

超链接:可以是一个字，可以是一个块元素，可以是图片，可以是任何内容,

特殊的行内元素，可以包裹任何元素，除了它自己

默认样式：字体有一定颜色，有下划线

功能：1、从一个页面跳到另一个页面

2、在当前页面进行跳转（楼梯导航/锚点功能）

3、下载

属性：

href属性指向跳转的地址

绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对

相对地址：它的地址值跟超链接的html文件位置相关

./ 当前目录下跳转 ./可省略，默认是./

注意：很多路径规则都是一样，包括图片、音视频跳转等

target属性指定超链接页面打开的方式

可选值：

_self 在当前页面打开超链接默认值一般情况下，国外网站常用

_blank 新开页面打开超链接一般情况下，国内常用

具体用哪种方式，根据项目需求来的

锚点功能实现

去顶部 href属性值设置为#

去任意的位置先给要去的位置打个标记 id属性='id属性值'

在href里填写标记 href='#id属性值'

注意： id属性值：你起的名字

不以数字开头

一般不用汉字

一般不能重复使用

补充：空链接的写法

05.图片标签

使用img标签来向网页中引入一个外部图片，（掌握4个属性）

src alt width height

06.图片格式

图片的格式

JPEG(JPG)

- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

- 一般用来保存照片等颜色丰富的图片

GIF

- GIF支持的颜色少，只支持简单的透明，支持动态图

- 图片颜色单一或者是动态图时可以使用gif

PNG

- PNG支持的颜色多，并且支持复杂的透明，不支持动图

- 可以用来显示颜色复杂的透明的图片

专为网页而生的

webp

-谷歌新推出的专门用来表示网页的一种格式

-它具有其他图片格式的所有优点，而且文件格式还很小

-缺点：兼容性不好

base64

-讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

-一般都是需要和网页一起加载的图片才会使用base64

图片的使用原则：

效果不一致，使用效果好的

效果一致，使用小的

07.音视频

audio标签用来向页面中引入一个外部的音频文件

video标签来向页面中引入一个视频，使用方式跟音频基本上一样的

src 引入音视频的路径

controls 控制用户是否可以播放,默认是不能播放

autoplay 自动播放（基本被废止，也是考虑到用户的体验，除了ie9以下）

loop 循环播放

歌曲推荐——虞兮叹

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>歌曲推荐</title>
</head><body><center><h1>歌曲推荐</h1><hr><h3>虞兮叹</h3><h3></h3><a href="https://cn.bing.com/search?q=%e8%99%9e%e5%85%ae%e5%8f%b9%e4%bd%9c%e8%80%85&FORM=HDRSC1">闻人听書_<br>祝何作词、作曲</a><a href="#ABC">去第二张图片</a></center><p><center>楚河流沙几聚散 日月沧桑尽变换<br>乱世多少红颜换一声长叹<br>谁曾巨鹿踏破了秦关 千里兵戈血染<br>终究也不过是风轻云淡<br>长枪策马平天下 此番诀别却为难<br>一声虞兮虞兮泪眼已潸然<br>与君共饮这杯中冷暖 西风彻夜回忆吹不断<br>醉里挑灯看剑 妾舞阑珊<br><a href="https://music.163.com/#/album?id=95455188"> <img src="虞兮叹1.jpg" alt="虞兮叹1" height="200"></a><br>垓下一曲离乱 楚歌声四方<br>含悲 辞君 饮剑 血落凝寒霜<br>难舍一段过往 缘尽又何妨<br>与你魂归之处便是苍茫<br>长枪策马平天下 此番诀别却为难<br>一声虞兮虞兮泪眼已潸然<br>与君共饮这杯中冷暖 西风彻夜回忆吹不断<br>醉里挑灯看剑 妾舞阑珊<br>垓下一曲离乱 楚歌声四方v含悲 辞君 饮剑 血落凝寒霜<br>难舍一段过往 缘尽又何妨<br>与你魂归之处便是苍茫<br><p id="ABC"></p><a href="https://music.163.com/#/album?id=95455188"><img src="虞兮叹2.jpg" alt="虞兮叹2" height="200"></a><br>汉兵刀剑纷乱 折断了月光<br>江畔 只身 孤舟 余生不思量<br>难舍一段过往 缘尽又何妨<br>与你来生共寄山高水长<br></center></p><hr><center><p>友情链接：<ahref="https://blog.csdn.net/iheyu/article/details/99717268?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166858930416782390575624%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166858930416782390575624&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-99717268-null-null.142^v63^opensearch_v2,201^v3^control_2,213^v2^t3_esquery_v3&utm_term=vscode%E6%80%8E%E4%B9%88%E6%B7%BB%E5%8A%A0%E8%B6%85%E9%93%BE%E6%8E%A5&spm=1018.2226.3001.4187/">A网站</a><ahref="https://blog.csdn.net/iheyu/article/details/99717268?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166858930416782390575624%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166858930416782390575624&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-99717268-null-null.142^v63^opensearch_v2,201^v3^control_2,213^v2^t3_esquery_v3&utm_term=vscode%E6%80%8E%E4%B9%88%E6%B7%BB%E5%8A%A0%E8%B6%85%E9%93%BE%E6%8E%A5&spm=1018.2226.3001.4187/">B网站</a><ahref="https://blog.csdn.net/iheyu/article/details/99717268?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166858930416782390575624%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166858930416782390575624&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-99717268-null-null.142^v63^opensearch_v2,201^v3^control_2,213^v2^t3_esquery_v3&utm_term=vscode%E6%80%8E%E4%B9%88%E6%B7%BB%E5%8A%A0%E8%B6%85%E9%93%BE%E6%8E%A5&spm=1018.2226.3001.4187/">C网站</a></p></center><CENter><a id="回到顶部" href="#"><span>回到顶部| </span></a><a href="https://music.163.com/#/album?id=95455188">联系我们</a></CENter></body></html>

部分html标签学习分享——制作歌曲推荐网页相关推荐

计算机音乐专业学什么软件,四款音乐学习、制作软件推荐，开启你的音乐人之路...
四款音乐学习.制作软件推荐,开启你的音乐人之路 2020-12-02 00:10:00 91点赞 413收藏 14评论成为一个独立音乐人,需要什么?面对世界,面对周围,如何把自己心中的创意转换为优秀 ...
HTML制作简单网页（京东新闻资讯页，歌曲推荐网页）
1.创建一个新的文件夹后进入CODE 2.京东新闻资讯页 <!DOCTYPE html> <html><head><title>京东新闻资讯</t ...
知识图谱构建与应用推荐学习分享
知识图谱构建与应用推荐学习分享一.语言表征学习 Language Representation Learning 通过自监督语言模型预训练的语言表征学习已经成为许多NLP系统的一个组成部分.传统的语 ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
基于深度学习的搜索、推荐、广告系统最全最新论文分享
推荐系统是有效的信息过滤工具,由于互联网接入的增加.个性化趋势和计算机用户习惯的改变,这种工具非常普遍.尽管现有的推荐系统成功地产生了不错的推荐,但是它们仍然面临着诸如准确性.可伸缩性和冷启动等挑战. ...
HTML页面制作标签学习
HTML 1.快速入门: 语法 html文档后缀名.heml或者.htm 标签分为围堵标签:有开始标签和结束标签.如< html>< /html> 自闭和标签:开始标签和结束 ...
C＃坏习惯：通过不好的例子学习如何制作好的代码——第4部分
目录介绍没有"一个真正的来源" 它为什么如此重要? 文章的形式 1.吃异常 2.不正确的日志记录 3.重新抛出异常和方法上下文日志记录 4.控制程序流程的异常全局异常处理总 ...
列表与表格（自己的学习分享）
一.列表如图所示,简单地说列表就是将一些信息进行排列展示.一般情况下,列表默认是使用竖型进行展示,在经过后面学习,我们也可以将列表内容以我们想要地方式展现出来列表一般分为3种:无序列表.有序列表. ...
php制作普通网站流程图,分享在线制作流程图的网页
原标题:分享在线制作流程图的网页很多开始学习摸索制作流程图的小伙伴,觉得下载的很多软件都不太好用,希望通过别人的推荐,选择一款不错的在线软件,能够满足自己日常制作流程图的需求.那么在线制作流程图的网 ...

部分html标签学习分享——制作歌曲推荐网页

部分html标签学习分享——制作歌曲推荐网页相关推荐

最新文章

热门文章