html&css容易遗忘的问题

最新推荐文章于 2025-04-12 01:24:31 发布
最新推荐文章于 2025-04-12 01:24:31 发布
阅读量157 收藏
点赞数 2
分类专栏： CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wind_AN/article/details/118711455
版权

文档类型声明标签

<!DOCTYPE html>

告诉浏览器使用最新的html语言来渲染网页

常用标签

<br />   换行标签
<strong>文字加粗</strong>
<em>倾斜</em>
<del>删除线</del>

&;
&nbsp;空格
&lt;
&gt;
<a href="tel:1111111">电话</a>
<a href="mailto:11111111@qq.com">邮箱</a>
<!-- 协议限定符 -->
<!-- <a href="javascript:while(1) {alert('111')}">点击</a> -->

空格的作用

空个在编辑器中起到字符分割的作用(文本分割符)

常用样式

text-indent: 2em   /*首行缩进*/
text-decoration: line

行块元素

行级元素不能改变宽高

行级块元素

内容决定大小，可以改宽高

凡事带有inline,的都有文字特性，会有4px的间距

定位

absolute会脱离原来的位置重新定位

relative保留原来的位置，重新定位(相对于原来的位置定位)

要点问题

父子嵌套的元素，垂直方向上margin公用最大的那个

position: absolute;
float: left/right;
/*以上两个属性设置后该元素会默认设置为inline-block*/
display: inline-block;

BFC

触发bfc

  • position:absolute
  • display:inline-block
  • float:left
  • overflow:hidden

触发bfc可以解决高度坍塌的问题，也可以解决垂直方向上margin公用的问题，margin塌陷问题

浮动

所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性的元素以及文本都能看到浮动元素

文字溢出

单行文本

white-space: nowrap;
overfolw: hidden;
text-overflow: ellipsis
CQJTU web学习之HTML&CSS学习总结
weixin_59375581的博客
06-22 385
CQJTU的结课报告
3万字总结 HTML + CSS，还不赶紧学起来✔️
qq_43477721的博客
10-06 630
HMTL + CSS 1. DIV+CSS布局的好处 代码精简，且结构与样式分离，易于维护 代码量减少，减少了大量的带宽，页面加载更快，提升了用户的体验 对SEO搜索引擎更加友好，H5新增了许多语义化标签 允许更多炫酷的页面效果，丰富了页面 符合W3C标准，保证网站不会因为网络应用的升级而被淘汰 缺点: 不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。 2. HTML 标签语义化 2.1 HTML语义化背景介绍 HTML结构语义化，是最近几年才提出来的，以前的html结构，一打开.
html及css易忘知识点
qq_41743601的博客
08-13 354
html及css易忘知识点 文章目录html及css易忘知识点1.css溢出2.背景（背景图像，属性）3.Css组合器4.不透明度5.伪类（专门针对于链接属性设置）6.阴影7.box-shadow 属性8.Flexbox**8.表单（input等）**input元素 1.css溢出 溢出overflow 2.背景（背景图像，属性） 背景background 3.Css组合器 组合器 4.不透明度 不透明度 img { opacity: 0.5; } img:hover { opacity: 1.0
总结HTML和CSS易忘点
xlhuang77的博客
07-04 259
日日行,不怕千万里;常常做,不怕千万事 一、HTML 1、HTML常见兼容性问题？ 1、双边距BUG float引起的，解决方案使用display。 2、3像素问题使用float引起的，解决方案使用dislpay:inline -3px 3、超链接hover点击后会失效，应使用正确的书写顺序 link visited hover active 4、IE的 z-index问题，解决方案给父级添加position:relative 5、无法定义1px左右的宽度容器（ IE6默认的行高造成的 )，解决方案使用ov
html css记不住,记住CSS中的10个“不要”
weixin_42525387的博客
06-25 446
自我进入这个行业，我就发现开发人员一直在努力征服CSS。理由也很充分，开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行，而另一个DIV“浮”到左侧，感觉没有任何意义。你也一定听到过开发人员的抱怨：“我们只需要向左边移动五个像素，但是…天哪！为什么整个都向下移动了一行。到底是哪里错了？！？！？！”下面就是是我作为一个开发人员在编写CSS时认为不应该做的事情，欢迎大家指正，...
【CSS&LESS】容易遗忘的基础与进阶知识
最新发布
weixin_44288277的博客
04-12 553
可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JS的情况下，从一种样式换为另一种样式时为元素添加效果。动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。清除浮动的策略：闭合浮动。使用时候，使用“ ”将变量的值扩起来，使用同样将变量以@{变量名}的方式使用；转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果；
css常见容易遗忘的知识点整理
m0_58266149的博客
03-05 277
2022/3/5 Transition过渡 Transition 可以设置 CSS 属性的过渡效果 它有以下几个属性： transition-property用于指定应用过渡属性的名称 transition-duration用于指定这个过渡的持续时间 transition-delay用于指定延迟过渡的时间 transition-timing-function用于指定过渡的类型 常见写法 transition: all 0.5s linear; /* transition: ....
HTML&CSS编码规范
u011472830的博客
09-16 518
HTML&CSS编码规范永远遵循同一套编码规范，不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。HTML语法 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。 嵌套元素应当缩进一次（即两个空格）。 对于属性的定义，确保全部使用双引号，绝不要使用单引号。 不要在自闭合（self-closing）元素的尾部添加斜线 – HTML5 规范中明确说
常用且容易遗忘的 CSS 样式整理
黑夜中的潜行者
07-24 210
1、文字超出部分显示省略号 单行文本的溢出显示省略号（一定要有宽度） p{ width: 200rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本溢出显示省略号 p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: h
html css 总结
weixin_54253218的博客
07-09 167
HTML5 doctype 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。 语言属性 根据 HTML5 规范：更多关于 属性的知识可以从 此规范 中了解。这里列出了语言代码表。 IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。阅读这篇 stack overflow 上的文章可以
浅谈html和body标记应用CSS
01-19
对于这样的一个结构，不会有人感到陌生，然而往往有时候却是大家越熟悉的东西就容易让人去遗忘了他们的存在。或许你会在想，这个结构这些标签有什么好聊的呢，每个页面都需要他们的啊。是啊，以前我一直也是这么认为...
36个非常重要但常被遗忘的HTML标签
12-27
根据给定的信息，本文将详细介绍其中提及的部分HTML标签...以上是对部分重要但常被遗忘的HTML标签的简要介绍，每个标签都有其特定的功能和应用场景，在实际开发中合理运用这些标签能够极大地提升网页的质量和用户体验。
前端开发之路：HTML5与CSS3实践与学习笔记
该网站不仅作为一个展示学习成果的平台，同时也是作者记录新知识和反思学习中容易遗忘的内容的地方。通过这个项目，作者致力于实现其成为一名专业前端开发人员的梦想。 知识点概述: 1. 前端开发人员职责: 前端开发...
《原神》官网首页练习
MyBlog
07-20 2146
完成效果 项目数据 通过ajax请求data中的数据然后通过js动态渲染到页面中 AJAX的封装 请求的主要代码 function getInfo(index) { let message = null; switch (index) { case 0: $ajax({ method: 'get', url: '../data/newest.json', success: function (da
CSS-将多个div切割，通过定位实现一个图案
MyBlog
11-06 1425
CSS-将多个div切割，通过定位实现一个图案 通过CSS3中clip-path属性来实现个大象 同过clip-path对div进行裁剪时可以利用PS对原图片进行取色并获取一定的比例。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
Scss&Less初探，学会基本的使用方式
MyBlog
05-19 1299
文章目录简介Less&Scss注释变量定义插值作用域选择器嵌套、伪类嵌套、属性嵌套(Scss)运算函数混入命名空间继承合并媒体查询条件语句循环语句引入 简介 Scss和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数、继承等概念。将css作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。 Less&Scss 注释 两者注释都是单行注释编译后不显示，多行注释显示。 变量定义.
CSS3网格布局
MyBlog
05-17 410
简介 网格布局可以将容器划分为各种网格，可以对这些网格进行任意的组合，组成网格分界线的有行网格线和列网格线，由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。 注意：划分的网格并不是div，div存在与划分的网格之中，具体看以下实例。 <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <
CSS3新特性-新增样式
MyBlog
05-16 379
新增样式文本效果文本阴影文本裁剪单词换行边框圆角边框图片边框背景图片背景渐变背景盒子盒子大小界面上直接调节盒子尺寸盒子阴影 文本效果 文本阴影 语法： text‐shadow: x y blur color; x：水平方向上右为正 y：垂直方向上下为正 blur：模糊程度 color：文本颜色 <div> 我是一行文本 </div> div { text-shadow: 10px 5px 3px red;
CSS3新特性-选择器
MyBlog
05-15 347
结构性伪类 :first‐child/last‐child 父元素中第一个元素和最后一个元素 <div> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> div li:first-child { color: red
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

boboj1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值