关于前端html+css你不知道的细节（1）

@洋哥

已于 2022-07-14 12:00:00 修改

阅读量199

点赞数 1

分类专栏： html+css 文章标签：前端

于 2022-07-12 17:25:08 首次发布

本文链接：https://blog.csdn.net/tangsiyang/article/details/125742877

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是前端？前端就是凡是肉眼可见的都可以称之为前端。例如网页、APP端！

前端工程师工作就是根据PSD和PRD做成网页高效的还原设计图。

网站是指在eternal（因特网）上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。那什么是网页？

网页是网站中的一页，通常是HTML格式的文件，需要通过浏览器来打开。

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，大多数都是以.htm和.html后缀结尾的文件，因此我们通常将其称为HTML文件。在浏览器中运行、解析，根据不同的标签展示不同的样式，最终展现在用户面前。

网页制作：由前端人员书写HTML文件，然后浏览器打开就能看到网页。

html是超文本标记语言，用来描述网页的一种语言，它不是编程语言，而是一种标记语言。

如何理解编程语言和标记语言？编程语言是指包含有函数和变量，有逻辑和行为能力具有主动性，而标记语言是使用标记进行标识，不用于向计算机发出指令，常用于格式化和链接。标记语言存在用来被读取的，是就被动性的。

何为超文本？它可以加入图片、声音、动画、多媒体等内容（它超过了文本限制），它还可以从一个文件跳转到另一个文件它与世界各地的主机的文件链接（超级链接文本）。何为文本？电脑新建的文本文档后缀名都是以.text结尾的普通文档。

开发常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari（苹果电脑自带）和Opera。（作为一个合格的程序员必须需要知道的）。

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C（万维网联盟）是国际最著名的标准化组织

遵循Web标准除了可以让不同的开发人员写出的页面更加标准、更加统一之外，还有以下优点：

1.让web的发展前景更加广阔

2.内容能被更广泛的设备访问

3.更容易被搜索引擎搜索

4.降低网站流量费用

5.使网站更加便于维护

6.提高页面的浏览速度

web的标准：分为结构、表现、行为

结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的板式，颜色、大小等外观样式，主要是指CSS
行为	行为是指网页模型的定义以及交互的编号、JavaScript等

Web标准提出的最佳体验方案：结构、样式、行为相分离；简单理解就是说：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript（js）文件中。

细节1：在img标签中属性alt和title的区别：alt是文本，图片加载不出来的时候（网络问题，路径错误...）展示的文本，而title中是鼠标移动上去才会出现的文本。

细节2：常用的块级标签有div、p、h1-h6...它们的特点是独占一行，可以用css来设置宽高。行内标签有a、span、i、u、b、s。特点是不能设置标签的宽高。行内块标签，img 在一行中显示，可以用来设置宽高。

细节3：在表格中：<1>cellspacing每个单元格和每个单元格之间的距离，cellpadding每个单元格中的内容和单元格边框之间的距离。<2>colspan是从指定单元格位置开始，横向向右合并，几个单元格（包含自己）被合并掉的单元格应从tr中删除；rowspan是从指定单元格位置开始，横向向下合并，几个单元格（包含自己）被合并掉的单元格应从tr中删除；

细节4：清除浮动有哪些方法：1：overflow：hiddin；2：给父元素设置高度；3：clear：both在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护 4：利用伪元素clearflx给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的，如下：

.clearfix:after{

content:"";

display:block;

visibility:hidden;

clear:both;

}

细节5：ulli无序列表快捷键ul>li*4

1：关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大