男女直接做那个视频网站,上海做网站优化价格,wordpress房产中介模板,wordpress 去掉自豪目录
写在前面
HTML简介
跳动的爱心
代码分析
运行结果
推荐文章
写在后面 写在前面
哎呀#xff0c;这是谁的小心心#xff1f;跳得好快吖#xff01;
HTML简介
老生常谈啦#xff0c;咱们还是从HTML开始吧#xff01;
HTML是超文本标记语言#xff08;Hyper…
目录
写在前面
HTML简介
跳动的爱心
代码分析
运行结果
推荐文章
写在后面 写在前面
哎呀这是谁的小心心跳得好快吖
HTML简介
老生常谈啦咱们还是从HTML开始吧
HTML是超文本标记语言HyperText Markup Language的缩写是一种用来创建网页的标记语言。它由一系列的标签组成每个标签用于指示网页中某个元素的开始和结束以及对元素进行各种操作和设置。HTML最早是由李爵士·伯纳斯-李Sir Tim Berners-Lee于1989年发明的当时他正在瑞士的欧洲核子研究组织CERN工作。HTML的设计初衷是为了在科研人员之间共享文档和信息。随着互联网的发展HTML逐渐成为了创建网页的标准工具。
HTML的基本结构是由开始标签和结束标签组成的。开始标签用尖括号()括起来结束标签在标签名前加上斜杠(/)。标签中可以包含属性用于设置元素的各种属性和样式。例如p是段落标签可以创建一个段落h1~h6是标题标签用于创建不同级别的标题。除了标签和属性之外HTML还包含了一些特殊字符和实体用于表示一些特殊的符号和语义。例如lt;表示小于号()nbsp;表示空格。在HTML中元素可以嵌套使用也可以使用一些特殊的标签和属性对元素进行各种操作和设置。例如a标签可以创建一个链接img标签可以插入一张图片table标签可以创建一个表格。HTML还支持一些特殊的元素和标签用于描述网页的结构和语义。例如head标签用于定义网页的头部信息body标签用于定义网页的主体内容header标签用于定义网页的头部nav标签用于定义导航栏footer标签用于定义页脚。
HTML的语法规则相对简单容易学习和理解。它是一种开放的标准任何人都可以使用和扩展。随着HTML的不断发展已经发布了多个版本最新的版本是HTML5它引入了许多新的元素和功能提供了更丰富的网页设计和交互效果。总之HTML是一种用于创建网页的标记语言它通过一系列的标签和属性描述了网页的结构、样式和语义。它是互联网的基础之一为人们提供了创建和共享信息的平台。
跳动的爱心
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitleLove/titlestyle typetext/css* {margin: 0;padding: 0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6 {margin: 0;}a {text-decoration: none;color: inherit;}img {display: block;border: none;}ol,ul {list-style: none;}.clearfix:after {content: ;display: block;clear: both;}.fl {float: left;}.fr {float: right;}html {height: 100%;background: -webkit-radial-gradient(center, pink, white);}.heart {position: relative;width: 300px;height: 300px;margin: 200px auto;transform: rotate(45deg);animation: move 2s infinite alternate;}.heart div {position: absolute;width: 200px;height: 200px;background: red;}.heart .middle {right: 0;bottom: 0;width: 200px;height: 200px;}.heart .left {left: 0;bottom: 0;border-radius: 50%;}.heart .right {top: 0;right: 0;border-radius: 50%;}.heart p {width: 200px;height: 30px;font: bold 25px/30px ;text-align: center;color: #fff;}.heart p {position: absolute;right: 0;bottom: 85px;transform: rotate(-45deg);}-webkit-keyframes move {10% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;}20% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}30% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}40% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}50% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}60% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}70% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}80% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 10px #fff;}90% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;}}/style
/headbodydiv classheartdiv classleft/divdiv classmiddle/divdiv classright/div/div
/body/html
代码分析
这是一个简单的HTML页面实现了一个心形动画效果。下面是对代码的详细分析
1. !DOCTYPE html声明文档类型为HTML。
2. htmlHTML开始标签并指定语言为英语。
3. head头部标签用于包含页面的元数据和引用外部资源。
4. meta charsetUTF-8指定字符编码为UTF-8。
5.meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0设置页面的视口尺寸。
6. meta http-equivX-UA-Compatible contentieedge设置IE浏览器的兼容性模式。
7. titleLove/title设置页面的标题。
8. style typetext/css内联CSS样式开始标签。
9. * { margin: 0; padding: 0; }设置所有元素的外边距和内边距为0。
10. body, ul, li, ol, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; }设置部分元素的外边距为0。
11. a { text-decoration: none; color: inherit; }设置链接元素的文本装饰为无并继承颜色。
12. img { display: block; border: none; }设置图片元素的显示为块级元素并去除边框。
13. ol, ul { list-style: none; }去除有序列表和无序列表的默认样式。
14. .clearfix:after { content: ; display: block; clear: both; }创建一个伪元素清除浮动。
15. .fl { float: left; }设置元素浮动在左侧。
16. .fr { float: right; }设置元素浮动在右侧。
17. html { height: 100%; background: -webkit-radial-gradient(center, pink, white); }设置HTML元素的高度为100%并设置背景为一个径向渐变。
18. .heart { position: relative; width: 300px; height: 300px; margin: 200px auto; transform: rotate(45deg); animation: move 2s infinite alternate; }设置心形容器的样式包括相对定位、宽度和高度、垂直居中、旋转和动画效果。
19. .heart div { position: absolute; width: 200px; height: 200px; background: red; }定义心形的三个部分的样式包括绝对定位、宽度和高度、背景为红色。
20. .heart .middle { right: 0; bottom: 0; width: 200px; height: 200px; }定义中间部分的样式设置其位置和尺寸。
21. .heart .left { left: 0; bottom: 0; border-radius: 50%; }定义左边的部分的样式设置其位置和边框半径为50%。
22. .heart .right { top: 0; right: 0; border-radius: 50%; }定义右边的部分的样式设置其位置和边框半径为50%。
23. .heart p { width: 200px; height: 30px; font: bold 25px/30px ; text-align: center; color: #fff; }定义心形内部的文本样式包括宽度和高度、字体加粗、字体大小和行高、居中对齐和颜色为白色。
24. .heart p { position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg); }定义心形内部的文本的位置和旋转。
25. -webkit-keyframes move { ... }定义一个动画关键帧实现心形的旋转和缩放效果。
在body标签中有一个心形的动画效果使用一个容器.heart和三个部分.left、.middle、.right组成。通过CSS样式定义了容器和部分的样式并通过动画关键帧-webkit-keyframes实现旋转和缩放效果。最后将容器放在页面的中央位置margin: 200px auto。
运行结果 推荐文章 序号目录直达链接1HTML实现3D相册HTML实现3D相册-CSDN博客2HTML元素周期表HTML元素周期表-CSDN博客3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客7HTML爱情树HTML爱情树-CSDN博客8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客9HTML想见你HTML想见你-CSDN博客10HTML蓝色爱心HTML蓝色爱心-CSDN博客11HTML跳动的爱心https://want595.blog.csdn.net/article/details/13913732612HTML橙色爱心HTML橙色爱心-CSDN博客13HTML大雪纷飞https://want595.blog.csdn.net/article/details/1391368291415161718192021222324252627
写在后面
我是一只有趣的兔子感谢你的喜欢
