html
文章平均质量分 71
html相关知识整理,总结,实践 和 分享
新生代农民工官方认证码农小拽
实践是检验知识的唯一标准!
展开
-
【ios兼容】处理ios页面底部留白问题
【ios兼容】处理ios页面底部留白问题原创 2022-09-22 16:41:22 · 398 阅读 · 0 评论 -
MDN扫盲篇之HTML
什么是HTMLHTML(HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言。它由一系列的元素(elements)组成。HTML 标签不区分大小写。但是推荐小写。尤其是现在的前端框架里,组件一般是大驼峰形式,不能和HTML元素混淆。块 、 行内块 、 行元素块级元素独占一行可设置宽高用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。以display: block的形式呈现不能被行内块和行内元素嵌套行内块原创 2022-03-28 09:44:42 · 1070 阅读 · 1 评论 -
修改滚动条并对滚动条事件进行封装
大家好,我是梅巴哥er。本篇,我们介绍三个部分:css改变滚动条样式的方法。js做出滚动条效果。滚动条事件在项目中的完整封装。css改变滚动条样式的方法老规矩,先来看下效果图:直接上demo:/*demo.html*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2021-06-14 01:02:58 · 351 阅读 · 0 评论 -
页面布局(6):响应式布局
大家好,我是梅巴哥er。本篇介绍响应式布局,用js+rem来解决。响应式的介绍,在页面布局(2):腾讯首页中简单聊过,但是说的不够完善,所以本篇中,将会更具体的做介绍,并能实际应用。响应式和自适应的区别响应式是不管页面宽度怎么变化,主要布局不会变化,体现的内容主题也不会变化。自适应是随着页面宽度的变化,布局也会有一定变化。 其实在腾讯首页中,是做的自适应。详情可以查看这篇文章:响应式网站自适应网站的区别以及利与弊响应式的具体做法直接上代码来展示吧<!--demo.html--原创 2021-05-25 21:04:58 · 782 阅读 · 4 评论 -
页面布局(5):body背景为切片②
大家好,我是梅巴哥er。上篇介绍了背景切片的其中一种形式(点击查看页面布局(4):body背景为切片①)。 本篇介绍另外一种形式。即自适应形式。看过上篇博文后,本篇就可以直接写代码了。我们直接来看效果和代码:代码<!--demo.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-05-23 19:17:10 · 94 阅读 · 2 评论 -
页面布局(4):body背景为切片①
大家好,我是梅巴哥er。本篇介绍一种新的常用布局------body背景为图片切片的布局。布局介绍这种布局常用在公司活动页面的制作。起初UI给到的一般是一张宽度为1920的完整图片,为了缓解页面压力,我们需要把一张UI背景图,先切片成若干片,然后再放在body作为背景图。body有了背景图,根据产品需要,布局分为两种情况。一种是body背景只上不分三栏布局,也不做自适应的布局。即,如果缩小屏幕宽度,控制台直接就遮盖页面,body背景不会缩小自身宽度。另一种是body背景之上,分三栏布局,中间一原创 2021-05-23 19:04:31 · 220 阅读 · 0 评论 -
页面布局(3):网易首页
大家好,我是梅巴哥er。本篇介绍网易首页的布局。悼念专栏2021年5月22日,也就是昨天,吴孟超院士和袁隆平院士离世,沉痛悼念两位老人,愿两位老先生一路走好。网易首页链接https://www.163.com/页面特点公司常用布局形式响应式三栏布局,中间固定宽度,两边自适应页面宽度缩小到一定宽度,中间宽度不变手机模式下可以正常观看页面文字新闻类型,内容以文字为主图片说明先来看看首页全部宽度的情况下,顶部是一个全宽的nav栏。下面是一个wrap原创 2021-05-23 13:20:19 · 699 阅读 · 0 评论 -
MDN扫盲班开课啦!(2)
大家好,我是梅巴哥er。MDNcss学习:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/What_is_CSSMDNcss所有属性和特性:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element可以当作查询文档使用。计算属性值/*举例*/width: calc(90% - 30px);transform: rotate(0.8turn)@rules@原创 2021-05-18 19:15:14 · 166 阅读 · 0 评论 -
MDN扫盲班开课啦!(1)
大家好,我是梅巴哥er。从最近的经历来看,目前面临两大困境,一是知识面不足,基础不够扎实,二是实操能力还有所不足,对知识应用不够熟练。针对第二点,已经开始了从页面布局到JS等多方面的练习。为了解决第一点的问题,特意给自己开一个扫盲班,阅读MDN官方文档,拓宽知识面,补充基础知识。从html开始阅读,并在阅读中记录自己的知识盲区,查漏补缺。同时,为了更好的掌握知识点,需要在记录时,给出代码demo,增加使用的能力。MDNhtml官网:https://developer.mozilla.org/zh-原创 2021-05-18 15:07:09 · 238 阅读 · 12 评论 -
canvas基础功能介绍
大家好,我是梅巴哥er。 最近在看一些html基础知识,刚看了canvas的相关知识,做个基础整理。如需了解更多内容,请移步cavas在MDN上的教程,可以学习更多更深入的知识。本篇就以代码demo的形式,对基础功能进行罗列。Canvas就是一块画布。 用js在画布上画画的。基础步骤:<!-- 1,准备一个canvas标签,默认尺寸是宽300px,高150px --><canvas id="canvas" width="300px" height="150px">&l原创 2021-05-17 19:50:11 · 335 阅读 · 0 评论 -
页面布局(2):腾讯首页
大家好,我是梅巴哥er。 本次看的是腾讯官网的布局(点击此处查看)。 他的官网,是典型响应式布局。下面就来细说一下,响应式的原理和具体实现方法,以及相应的代码案例。在了解响应式之前,先了解一下传统做法。一般来说,在写代码时,web端和手机端会分开。 web端一套代码,手机端一套代码,因为尺寸不同,排版方式也会有差别。这样做的好处很明显,就是写代码时,都是根据web和手机各自用户群体的特点来写的,针对性比较强。修改代码时,只修改某一个端的代码即可。其实,这种做法也是很常用的。什么是响应式布局原创 2021-05-17 12:05:10 · 1129 阅读 · 2 评论 -
怎么做好网站的SEO优化(转)
本篇为转载内容。详情可查看原博文:@Demi一、前端SEO规范概况1、合理的title、description、 keywords,搜索对着三项的权重逐个减小,title值强调重点即可。description把页面内容高度概括,不可过分堆砌关键词,keywords列举出重要关键词。2、语义化的HTML标签3、非装饰性的图片必须加alt4、让重要的内容放在HTML最前面,优先加载,搜索引擎抓取HTML顺序是从上到下,保证重要内容一定被抓取5、每个页面只出现一个h1标签6转载 2021-03-25 11:24:20 · 180 阅读 · 0 评论