HTML
关注
分享
扫一扫
本分栏，详细的分解了HTML网页结构，常用标签，学完后，可以优雅的搭建网页结构
燕穗子姐姐
成长就是一个不优秀的人带着一群不优秀的人一起走在变优秀的路上
展开
-
【CSS3】css中的数学运算-calc()
一、什么是calc()?calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。原创 2022-09-15 15:59:53 · 2676 阅读 · 0 评论 -
弄懂css动画知识点
1、过渡1.1.过渡的理解过渡（transition）[træn'siʒən]-通过过渡可以指定一个属性发生变化时的切换方式，平滑的过渡-在某种条件下可以触发，例如hover情况下-一次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值-IE10开始兼容，移动端兼容良好...原创 2022-08-01 14:58:51 · 1529 阅读 · 1 评论 -
Html5+CSS3+JS代码实现动态圣诞树
整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容树的动态旋转通过js实现、主干是html5、样式CSS......原创 2022-06-24 16:02:32 · 7376 阅读 · 2 评论 -
本地存储和会话存储
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种：(1)本地存储，对应localStorage对象。用于长期保存网站的数据，并且站内任何页面都可以访问该数据。(2)会话存储，对应 sessionStorage对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。...原创 2022-06-15 11:54:04 · 5007 阅读 · 0 评论 -
HTML和CSS面试题—整理过的48题，关注收藏，持续更新
主流浏览器的内核分别是什么？ IE：trident内核[‘traidnt ]Firefox：gecko 内核[ˈɡekəʊ]Safari：webkit 内核Chrome,Opera：Blink内核(基于webkit) 2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么<!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）......原创 2022-04-15 20:29:33 · 6179 阅读 · 0 评论 -
HTML旋转相册(520表白神器)
马上520了，看到一篇博客，适合520做表白礼物，无商用，纯分享，有需要的可以自行复制使用，换下图片就可以了，图片重命名为1.jpg 2.jpg 3.jpg以此规律命名 。<!DOCTYPE html><html lang="en" ondragstart="return false"> <head> <meta charset="UTF-8" /> <meta name="Keywords" c...原创 2022-05-13 09:09:42 · 1156 阅读 · 2 评论 -
5个炫酷登录页面，拿去就能用（附源码）
登录页面，觉得显示效果很好，借鉴其他博主的，喜欢的可以收藏关注，不商用，只为学习传播目录1、炫酷星空登录2、动态云层登录3、深海灯光水母登录4、炫酷蛛网登录5、彩色气泡登录1、炫酷星空登录代码： <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title...原创 2022-04-27 20:28:49 · 111363 阅读 · 96 评论 -
10个炫酷特效的网页写法（附源码），拿去就能用，nice
这是借鉴其他博主的，觉得挺实用的，给网页加个背景，给鼠标加个特效，这些“使用简单”，“效果爆炸”的页面，分享给大家，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了。目录1、鼠标点击弹出爱心2、鼠标点击弹出文字3、鼠标点击弹出烟花波纹4、鼠标小星星拖尾跟随5、鼠标粒子随心拖尾跟随6、鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果（自由组合）7、樱花特效8、蜘蛛网特效9、看板娘（左下角的小人）10、烟花1、鼠标点击弹出爱心代码&l原创 2022-04-26 20:48:32 · 92890 阅读 · 4 评论 -
HTML中音视频标签—— ＜audio ＞ ,＜video ＞
一：audio标签 用来向页面中引入一个外部的音频文件音视频文件引入时，默认情况下不允许用户自己控制播放停止,IE9以下的浏览器是不支持的属性：controls 是否允许用户控制播放，不用给值autoplay 音频文件是否自动播放 打开页面时，音乐会自动播放， 但目前为止，大部分浏览器是不可以自动播放的loop 是否循环播放二：video标签来向页面中引入一个视频使用方式跟音频基本上一样的...原创 2022-04-09 19:55:45 · 2434 阅读 · 0 评论 -
HTML中内联框架—＜ iframe ＞
使用内联框架可以在当前的页面引入一个外部的页面使用iframe来创建一个内联框架属性：src ：指向一个外部页面的路径，可以使用相对路径frameborder 内联框架的边框width：宽度height：高度name ：可以为内联框架指定一个name属性在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索<!DOCTYPE html><html lang="en"> <head> <meta c原创 2022-04-09 19:49:24 · 654 阅读 · 0 评论 -
HTML中常用的图片格式及应用场景
和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。一：图片的格式JPEG(JPG)- JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明- 一般用来保存照片等颜色丰富的图片GIF- GIF支持的颜色少，只支持简单的透明，支持动态图- 图片颜色单一或者是动态图时可以使用gifPNG- PNG支持的颜色多，并且支持复杂的透明，不支持动图- 可以用来显示颜色复杂的透明的图片专为网页而生的webp-谷歌新推出的专门用来表示网页的一种格式-原创 2022-04-09 19:45:36 · 3544 阅读 · 0 评论 -
HTML中的图片标签＜img＞
一：img标签——向网页中引入一个外部图片，img标签自结束标签img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）1:属性：src：设置一个外部图片的路径，路径规则跟超链接是一样的我们所要使用的路径全都是相对路径——相对路径指相对于当前资源所在目录的位置alt：可以用来设置在图片不能加载时，对图片的描述搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进...原创 2022-04-09 19:42:42 · 1875 阅读 · 0 评论 -
HTML超文本标记语言的‘超’——超链接
一：超链接的作用1:从一个页面跳转到另一个页面2:跳转当前页面的其他位置若将超链接的href属性设置为#，点击超链接后，页面不会发生跳转，而是跳到当前页面的顶部的位置可以跳转到页面的指定位置，只需要将href属性设置为 #目标元素的id属性值给a加标记——id属性（唯一不重复的标记）-每一个标签都可以添加一个id属性-id属性就是元素的唯一标识，同一页面中不能出现重复的...原创 2022-04-09 19:38:42 · 1637 阅读 · 0 评论 -
HTML中的常用的列表标签
列表（list） 一组一组1:有序列表 用ol标签创建，li表示列表项2:无序列表 用ul标签创建，li表示列表项3:定义列表 用dl标签创建，使用dd对内容进行解释说明注意：列表之间是可以互相嵌套的一：有序列表——使用有序的序号作为项目符号type属性，可以指定序号的类型可选值：默认值，使用阿拉伯数字a/A 采用小写或大写字母作为序号i/I 采用小写或大写的罗...原创 2022-04-09 19:26:03 · 4199 阅读 · 0 评论 -
HTML中常用的结构标签
布局标签（结构化标签）header 网页的头部main 网页的主体部分（一般就一个）footer 网页的底部nav 网页的导航aside 和主体相关的内容，侧边栏article 文章之类的section 独立的区块，上面的标签都不合适，就用这个div. 没有语义，就用来表示一个区块，目前来讲div还是主流的布局元素span 行内元素 ，也是没有任何语义，一般用于在网页中选中文字<!DOCTYPE html><html lang="en">.原创 2022-04-09 19:20:59 · 1452 阅读 · 0 评论 -
HTML中块元素行内元素的特点
块元素（block element）-在网页中一般通过块元素对页面进行布局，举例：购物平台-特点：会独占一行的的元素,无论他的内容有多少他都会独占一整行-举例：p h1 h2 h3 ...行内元素（inline element）-用来包裹文字-特点：指的是只占自身大小的元素，不会占用一行-举例：a img iframe span注意：1：一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素2:块元素中基本什么都能放3:p元素中不能放任何块元素&原创 2022-04-08 22:28:35 · 181 阅读 · 0 评论 -
HTML中常用的标签
使用HTML标签，时刻注意它的语义，而非样式，也就是注意它的血统地位，而不是穿的什么衣服，最终呈现什么样子，样子都是可以通过css假冒，而血统无法假冒<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>常用的标签</title> </head> <body> <!-- 一：标题标签 .原创 2022-04-08 22:23:51 · 736 阅读 · 0 评论 -
HTML中常用的实体
在网页中编写的多个空格默认会自动被浏览器解析为一个空格在HTML中，一些如< >这种特殊字符是不能直接使用，比如空格，大于小于号等如果我们需要在网页中书写这些，我们需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）浏览器解析到实体时，会自动将实体转换为其对应的字符实体的语法：&实体的名字;常用的实体空格 < <> >版权符号 ©更原创 2022-04-08 22:20:25 · 739 阅读 · 0 评论 -
HTML语法规范
1.HTML中不区分大小写,但是我们一般都使用小写2.HTML中的注释不能嵌套3.HTML标签必须结构完整，要么成对出现，要么自结束标签4:浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，浏览器都会为你自动修正，但是有些情况会修正错误5:HTML标签可以嵌套，但是不能交叉嵌套6:HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)...原创 2022-04-08 22:17:55 · 221 阅读 · 0 评论 -
HTML网页结构分析3-字符集
字符编码 所有的数据在计算机存储时都会转成二进制形式存储，文字也不列外 例如：王老师->0001100 ,当我们读取这段文字时的时候，计算机会将编码转换为字符，供我们阅读，即又进行了一次转换 加密解密编码——将字符转成二进制解码——将二进制转为字符字符集——编码解码所采用的规则乱码——如果编码和解码所采用的字符集不同就会出现乱码问题常见的字符集ASCII 美国的，ISO88591 欧洲的，GB2312 中国的，GKB 中国扩充的，UTF-8 万国码meta标签用来设置网原创 2022-04-08 22:03:43 · 428 阅读 · 1 评论 -
HTML网页结构分析2-文档声明
HTML网页结构分析2-文档声明<!DOCTYPE html><!-- h5的文档声明，声明当前的网页是按照HTML5标准编写的编写网页时，一定要将h5的文档声明，写在网页的最上边如果不写，则会导致有些浏览器会进入到一个怪异的模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示，所以为了避免这种模式，一定要写文档声明 --><html> <head> <title></title> </he.原创 2022-04-08 21:58:21 · 175 阅读 · 0 评论 -
HTML网页结构分析1
网页结构的分析<!-- 介绍注释：“vscode注释的快捷键:“Ctrl + /”和“Alt+Shift+A” 注释 1:不可以嵌套使用 2: 不会再页面中显示，但会在源码中查看 3:对代码进行描述，帮助其他开发者 4:注意简单明了 5:养成良好的习惯--><!-- html根标签，也叫根元素，一个页面只有一个根标签，网页中所有的内容都应该写在根标签里 --><html> <!-原创 2022-04-08 21:55:34 · 1252 阅读 · 0 评论