多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Web之HTML5

Web之HTML5 目录1.marquee2.href3.列表4.details和summary5.“血条”、电量1.marqueemarquee:设置滚动效果behavior:设置滚动方式alternate左右横跳scroll默认循环滚动slide只滚动一次就停止marquee behavioralternate欢迎来到网页设计课堂/marquee如图所示当然marquee也可以用于图片的运动。direction:设置滚动方向有up、down、left 和 right。图中的P大小写其实效果一样类似换行说是分段落更合理。nbsp是空格。marquee directionup behaviorscroll P aligncenter img srcimages/eat.jpg height15% width15%nbsp img srcimages/flawer.jpg height15% width15%nbspnbsp img srcimages/grass.jpg height15% width15%nbspnbspnbsp img srcimages/lamian.jpg height15% width15%nbspnbsp img srcimages/hear_in.jpg height15% width15% /P /marquee效果如下2.href一般用到href都和网页操作有关比如跳转用法一页面跳转a hrefhttps://www.bilibili.com/bangumi/play/ep102835?spm_id_from333.337.0.0 img srcimages/appint1.jpg height100% width100% title你喜欢哪一个点击可进入观看 alt约会大作战yyds /a效果如下可以知道这里的图片可以看成一个按钮与一个网页绑在一起。 点击图片就可以跳转到href后面跟着的网页。其中title鼠标放置其上几秒后显示alt没有图片或图片失效会显示hiddenuntil-found隐藏图片。点击后用法二跳转到标题处类似csdn的文章目录功能。a nametitleh4 aligncenter我的第一张网页/h4/a a href#title返回标题/a效果图点击“返回标题”就会跳转到“我的第一张网页”。其中使用a name锚点名称/a创建目标位置的锚点名称。使用a href#锚点名称连接文本/a创建锚点链接补充一下h1/2/3/4/5/6标题/h1/2/3/4/5/6是设置标题样式1最大6最小。关于href_self是在当前页面跳转_blank是重开页面。3.列表A.无序列表ul contenteditabletrue li mark无序列表1/mark /li li无序列表2/li li无序列表3/li /ulmark:标黄contenteditable设置是否可以编辑。B.有序列表ol li mark有序列表1/mark /li li有序列表2/li li有序列表3/li /ol效果图4.details和summary两者一般是搭配使用的。details summary figcaption竹里馆/figcaption /summary p独坐幽篁里弹琴复长啸。/p p深林人不知明月来相照。/p /details效果图如下一个很简单但挺实用的功能。一般放在details中的内容会被隐藏点击三角形符号会显示而summary的内容会一直显示。5.“血条”、电量br progress/progress br progress value45 max100/progress br meter min0 max100 low10 high20 optimum100 value5 title5%5%/meter br meter min0 max100 low10 high20 optimum100 value15 title15%15%/meter br meter min0 max100 low10 high20 optimum100 value80 title80%80%/meter br效果图注progress如果没有设置别的属性蓝条就会一直走。
返回列表