HTML是一种标记语言,用于创建网页结构和内容。它定义了不同的标记(或元素)来表示网站中的不同部分,如标题、段落、链接和图像等。HTML 是构建网页的基础。
CSS是一种样式表语言,用于美化网页。它定义了不同的样式规则来控制网页中的元素,如字体、颜色、布局和大小等。CSS 可以为网页带来丰富的视觉效果,使其更加吸引人眼球。
JavaScript是一种脚本语言,用于添加交互性和动态性。它可以在网页上创建动态效果,如弹出窗口、下拉菜单、表单验证等。它还可以通过与服务器进行交互来获取外部数据,并在网页上呈现。JavaScript 支持多种编程范式,包括面向对象和函数式编程。
浏览器渲染页面的过程主要包括以下几个步骤:
解析 HTML 文件。浏览器读取 HTML 文件,并解析其中的标签、属性等信息,生成文档对象模型(DOM)。
解析 CSS 文件。浏览器读取 CSS 文件,并解析其中的样式信息,生成层叠样式表(CSSOM)。
将 DOM 和 CSSOM 合并。浏览器将 DOM 和 CSSOM 合并,生成渲染树(render tree),渲染树只包含需要显示的节点以及它们的样式信息。
布局(Layout)。浏览器根据渲染树计算出每个节点在屏幕上的大小和位置,并生成布局(layout)。
绘制(Painting)。根据布局信息,浏览器将渲染树中的节点转化为实际的像素,并绘制到屏幕上,生成绘制(painting)。
合成(Composite)。最后,浏览器将绘制的内容合成(composite)为一幅图像,并显示在屏幕上。
以上就是浏览器渲染页面的主要步骤,其中每个步骤都有可能触发回流(reflow)和重绘(repaint)操作,这些操作会影响到页面的性能和用户体验。因此,编写高效的 HTML 和 CSS 代码,减少 DOM 操作和样式变化,可以提高页面的渲染性能。
HTML和XHTML都是用于创建web页面的标记语言,但是它们的语法和一些规则不同。
HTML是一种标记语言,用于创建网页和其他信息,它是一种基于文本的语言,标记包括标签和属性。HTML的语法相对宽松,不强制要求标签和属性使用小写,也不需要严格的标签嵌套。
而XHTML是一种更严格的XML应用,它的语法比HTML更为严格,要求标签和属性必须小写,标签和属性必须完全嵌套,而且必须以正确的顺序出现。XHTML还要求标签必须用符合规范的方式关闭,空标签必须用闭合符号/。
总的来说,XHTML是HTML的升级版本,更严格的语法可以使页面更加规范和清晰,也更容易被搜索引擎识别和索引。但是,它的学习曲线较陡峭,对语法的理解和掌握要求更高。
在 HTML5 中,新增了许多语义化标签,这些标签的目的是为了让网页结构更加清晰易懂,让搜索引擎更容易理解、索引和分类网页内容。以下是 HTML5 中常用的语义化标签:
使用这些语义化标签可以提高网页的可访问性和可读性,同时也有助于改善网页在搜索引擎中的排名。
CSS的盒模型定义了一个HTML元素在页面中占据的空间,包括元素的内容、内边距、边框和外边距。
标准盒模型是由W3C定义的,它将元素的宽度和高度计算为内容区域的宽度和高度,而不包括内边距、边框和外边距。因此,如果将元素的宽度和高度设置为100像素,实际上元素的总宽度和高度将是100像素加上内边距和边框的宽度。
IE盒模型是在IE浏览器中实现的一种盒模型,它将元素的宽度和高度计算为内容区域、内边距和边框的宽度之和。因此,如果将元素的宽度和高度设置为100像素,实际上元素的总宽度和高度将是100像素。
两种盒模型的主要区别在于它们如何计算元素的宽度和高度。在标准盒模型下,元素的宽度和高度只包括内容区域,因此在设置元素的宽度和高度时需要考虑内边距和边框的影响。在IE盒模型下,元素的宽度和高度包括了内容区域、内边距和边框的宽度,因此在设置元素的宽度和高度时不需要考虑内边距和边框的影响。
1.使用flex布局
将父元素设置为display:flex,然后使用justify-content:center和align-items:center属性来实现水平垂直居中。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2.使用绝对定位和负margin值
将子元素设置为绝对定位,然后使用top、left、bottom和right属性以及负margin值来实现水平垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.使用table布局
将父元素设置为display:table,然后将子元素设置为display:table-cell和vertical-align:middle属性来实现水平垂直居中。
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
注意:以上三种方式都需要考虑父元素和子元素的宽度和高度,以及浏览器兼容性。
CSS3中新增了许多特性,以下列出其中一些:
Flexbox布局:弹性盒子布局,是一种更简单、更灵活的布局方式。
Grid布局:网格布局,可以更精确地控制网页布局和对齐方式。
多列布局:可以将文本分成多列进行排版。
自定义字体:可以使用 @font-face 规则加载自定义字体文件。
动画和过渡效果:可以通过 CSS3 实现更丰富的动画和过渡效果。
渐变色彩:可以使用 Linear Gradient 和 Radial Gradient 等方式实现颜色渐变效果。
媒体查询:可以根据不同的屏幕尺寸自适应调整布局和样式。
选择器的扩展:新增了众多的选择器,如 nth-child、nth-of-type、:not 等。
剪贴路径:可以通过 Clip-path 属性实现任意形状的剪切效果。
变换和旋转:可以通过 Transform 属性实现元素的变换和旋转。
CSS 清除浮动的几种方式如下:
.clearfix::after {
content: "";
display: table;
clear: both;
}
.parent {
position: relative;
}
.parent::after {
content: "";
display: block;
clear: both;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
}
Flexbox(flexible box)布局是一种用于页面布局的 CSS 技术,它主要用来解决在不同分辨率下,放置在页面上的元素出现重叠、无法对齐或者难以控制的问题。
Flexbox 布局的主要特点包括:
父元素设置 display: flex; 即可使其成为一个 flex 容器,容器内的所有子元素均会自动成为 flex 项目。
每个 flex 项目都有自己的弹性容器,用来控制该项目在容器内的布局。使用 flex 属性可以对弹性容器进行控制,如 flex: 1; 表示该项目可以在剩余空间中填满整个容器。
可以使用 justify-content 和 align-items 属性分别控制 flex 容器的主轴与交叉轴上的对齐方式。
可以使用 flex-direction 属性来控制 flex 项目的排列方向,如 column 表示垂直排列,row 表示水平排列。
通过 flex-wrap 属性可以控制 flex 项目是否换行。
通过 order 属性可以改变 flex 项目的排列顺序,同时还可以使用 flex-grow、flex-shrink 和 flex-basis 等属性对 flex 项目进行调整。
Flexbox 布局可以帮助我们更好地控制页面布局,使其更加灵活、自适应,并且写起来也相对简单。
HTML5新增了很多元素,其中一些最常用的包括:
: 定义文档的头部区域。
:定义文档的底部区域。
:定义导航链接的区域。
:定义独立的内容块,例如新闻文章或博客帖子。
:定义文档的一个区域,可以包括多个章节。
:定义文档的侧边栏内容。
:定义时间。
:定义视频。
:定义音频。
:定义进度条。
这些元素的添加使得文档结构更清晰,也更容易被搜索引擎识别和解析。
内联样式、嵌入式样式和外部样式表
内联样式、嵌入式样式和外部样式表都是用于定义网页样式的方式。
内联样式:直接在HTML标签中使用style属性定义样式,如下:
这是一段红色的文字
这种方式的优点是简单快捷,可以快速定义一个特定的元素的样式,但缺点是难以维护和修改,不利于代码的复用。
嵌入式样式:在HTML文件的头部定义style标签,并在其中定义样式,如下:
这是一段红色的文字
这种方式将样式和HTML文件分离开来,更好地实现了代码的可维护性和可复用性,但仍然存在代码冗长的问题。
外部样式表:将样式单独放在一个CSS文件中,然后在HTML文件中通过link标签引入,如下:
这是一段红色的文字
这种方式将样式和HTML文件完全分离,更好地实现了代码的可维护性、可复用性和可扩展性。
综上所述,外部样式表最为推荐和常用,尤其是对于大型网站或应用程序,使用外部样式表将更加方便和高效。
实现响应式布局的方法可以分为四步:
使用 viewport meta 标签来设置视口:
使用 CSS 媒体查询来针对不同的屏幕大小进行样式设置:
/* 当屏幕宽度小于 600 像素时,改变元素样式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
使用相对单位(例如 em 或者 rem)代替像素单位,以保证在不同的屏幕下显示更加一致:
body {
font-size: 1em;
}
@media (max-width: 600px) {
body {
font-size: 0.8em;
}
}
使用弹性盒子布局(Flexbox)代替传统的浮动布局来实现更为灵活的布局:
.container {
display: flex;
justify-content: center;
align-items: center;
}
以上是一些实现响应式布局的方法,具体的实现方式和效果可能会因为页面的具体情况而不同。
网络中使用最多的图片格式包括JPEG、PNG、GIF和BMP等格式。其中,JPEG格式主要用于存储照片和图像,具有高压缩率和高质量的特点;PNG格式主要用于透明和非透明的图像,支持高质量的图像压缩和无损压缩;GIF格式主要用于动态图像,支持动态效果和透明背景;BMP格式则是一种比较老的图像格式,主要用于Windows操作系统。
CSS3新增的特性包括但不限于:
Border-radius:可以制作圆角边框;
Box-shadow:可以为元素添加阴影效果;
Text-shadow:可以为文字添加阴影效果;
Gradients:可以为元素添加渐变背景;
Transitions:可以为元素添加过渡效果;
Transformations:可以为元素添加旋转、缩放、倾斜等效果;
Flexbox:可以更加轻松地进行灵活的布局;
Grids:可以进行网格布局;
Media Queries:可以根据不同的设备尺寸进行响应式设计。
以上只是CSS3新增的一部分特性,CSS3还有许多其他有用的功能和技巧,您可以自行学习研究。
position定位的属性值有以下几种,它们之间的区别如下:
static:默认属性值,元素按照文档流排列,不进行定位。
relative:元素相对于自身原来位置进行移动,不脱离文档流。
absolute:元素相对于离它最近的已经定位的祖先元素(如果有),没有则以body为准进行定位,脱离文档流。
fixed:元素相对于浏览器窗口进行定位,不随滚动条滚动。
通过不同的属性值,可以实现不同的布局效果。
Border-box和content-box是CSS中盒子模型的两种不同的模式。
content-box是默认的CSS盒子模型,它在计算一个元素的宽度和高度时只考虑内容的尺寸,不计算边框和内边距的尺寸。因此,如果你设置一个元素的宽度为200px,那么你实际上是设置的内容(包括内边距)的宽度为200px,而整个元素实际上比200px宽了内容边距和边框的大小。
Border-box模式下,设置盒子的宽或高值时,不再计算内边距和边框的尺寸,而是把它们计算进去了。也就是说,如果你设置一个元素的宽度为200px,那么你实际上是设置元素的总宽度为200px,包括内容、内边距和边框的尺寸。
总的来说,content-box会让盒子增加内边距和边框的大小,而border-box则会让盒子的大小包括内边距和边框。在实际的开发中,我们可以根据具体情况选择不同的盒子模型,以满足我们的需求。
要将一个元素垂直居中,可以使用以下方法:
使用flexbox布局。将父元素设置为display:flex,并添加align-items:center属性,即可将子元素垂直居中。
.parent {
display: flex;
align-items: center;
}
使用CSS的transform属性。将元素的位置通过transform属性转换为translateY(-50%),即可将元素垂直居中。
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
使用CSS的table布局。将父元素设置为display:table,子元素设置为display:table-cell,通过vertical-align:middle将子元素垂直居中。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
BFC是块级格式化上下文(Block Formatting Context)的缩写。它是Web页面中用于布局和定位块级元素的一种CSS渲染机制。BFC中的元素是在垂直方向上一个个排列的,每个元素占据整个BFC的宽度。BFC在处理浮动元素、清除浮动、防止margin重叠等方面有着重要的作用。BFC可以通过一些CSS属性来触发,例如overflow、float、display、position等。
触发BFC的方法有以下几种:
1.浮动(float):可以通过将元素浮动来触发BFC。
2.定位(position):可以通过将元素设置为position: absolute或position: fixed来触发BFC。
3.块级格式化上下文(block-level formatting context):某些元素可以触发BFC,例如display: inline-block、display: table-cell、overflow: hidden等。
4.清除浮动(clearfix):可以通过使用clearfix技巧来触发BFC。
在实际开发中,我们可以根据具体的需求选择合适的方法来触发BFC,以避免出现布局问题。
Chrome浏览器的默认最小字号设置为12px,如果您想要显示小于12px的文字,可以通过以下方法实现:
1.使用CSS中的“font-size”属性将字体大小设置为小于12px。例如:
p {
font-size: 10px;
}
使用浏览器缩放功能缩小页面。按下“Ctrl”键并使用鼠标滚轮向下滚动可以缩小页面。缩小页面后,小于12px的文字将会显示。
请注意,过小的字体大小可能会影响可读性和用户体验,建议慎重使用。
2.使用transform: scale()属性:将元素进行缩小,例如:
.small-text {
transform: scale(0.8);
}
CSS选择器分类:
CSS属性可以继承的有 :
CSS优先级计算:
根据以下顺序依次计算:
CSS3新增的伪类包括:
CSS选择器权重是指在同一规则下存在多个选择器时,浏览器根据选择器的特定等级来决定使用哪个样式。这些等级组合在一起形成一个“权重”,决定了哪个规则应用于给定的元素。一般来说,选择器的权重从高到低排列如下:
如果两个选择器具有相同的权重,则后者将覆盖先前的样式。如果两个选择器的特定等级相同,则使用最后声明的样式。如果出现多个选择器的组合,它们的权重将被相加。例如,如果一个规则包含两个类选择器和一个元素选择器,则它们的权重将相加为21(10 + 10 + 1)。
以下是一些可以优化网页图片加载速度的方法:
压缩图片尺寸和质量:在上传图片之前对图片进行压缩,可以减少页面加载时间。可以使用在线压缩工具或者图片编辑工具实现。
使用响应式图片:使用响应式图片可以根据屏幕大小自动调整图片尺寸,从而减少加载时间。
使用缓存和CDN:使用缓存和CDN(内容分发网络)可以将图片缓存至用户本地或者最优的服务器,从而提高图片加载速度。
延迟加载图片:使用延迟加载图片的方法可以使得网页先加载出重要的内容,再加载其他图片,从而提升用户体验。
移除不必要的图片:移除不必要的图片可以减少页面大小,从而加快加载速度。
综上所述,以上方法可以帮助优化网页图片加载速度,提升用户体验。
在 HTML 中,所有的元素都可以分为两类:块级元素和行内元素(也叫内联元素)。
块级元素特征:
、
~
、
、
、
、
等。
行内元素特征:
HTML 5中新增加的元素还引进了一个新的类别——“行内块元素”,具有这种特征的标签看起来就像是同时具有行内和块级属性的元素,例如:、
、
等。此外,我们还可以通过使用CSS的display
属性将一个元素的类型从块级元素转变成行内元素或者行内块元素。
需要注意的是,HTML元素本身具有的默认类型是不可更改的。如果您需要修改某个元素的显示属性,则应该使用样式表(如CSS)来实现。
浏览器的标准模式和怪异模式区别?
浏览器的标准模式和怪异模式主要的区别在于它们处理 HTML 和 CSS 的方式不同。
标准模式是浏览器按照 W3C 标准渲染 HTML 和 CSS 页面的模式。在标准模式下,浏览器会解析文档类型声明,并根据文档类型声明来确定如何渲染页面。在这种模式下,浏览器会尽量遵循标准,使得页面在不同浏览器中的显示效果一致。
怪异模式又叫混杂模式或兼容模式,是指浏览器在处理没有文档类型声明或解析错误的 HTML 和 CSS 页面时所采用的模式。在怪异模式下,浏览器的行为可能会与标准不一致,这导致同一份代码在不同浏览器下的显示效果可能会出现差异。
总的来说,为了确保网站在不同浏览器下的显示效果一致,建议在 HTML 文档头部加上正确的文档类型声明。这样可以让浏览器以标准模式渲染页面,保证页面的正确性和可靠性。
Margin和padding在什么场合下使用
Margin和padding都是用来控制元素与周围元素之间的距离,但它们的使用场合略有不同:
Margin:主要用于控制元素与周围元素之间的间距,我们可以通过设置margin属性来改变元素的位置,可以用于调整页面布局中元素之间的距离,也可以用于实现垂直居中和水平居中等效果。
Padding:主要用于调整元素的内容与边框之间的距离。我们可以通过设置padding属性来改变元素内容与边框之间的距离,可以用于调整元素的大小,也可以用于调整元素的背景颜色和边框之间的距离。
Margin和padding都是常用的CSS属性,根据不同的需求进行使用。如果需要控制元素与周围元素之间的距离,使用Margin;如果需要控制元素的内容与边框之间的距离,使用Padding。
弹性盒子布局属性有那些请简述?
弹性盒子布局属性主要包括以下几个:
-
display: flex; 设置元素为弹性盒子容器。
-
flex-direction: row/column; 设置主轴方向,即弹性盒子的排布方向。
-
justify-content: flex-start/flex-end/center/space-between/space-around; 设置主轴上的对齐方式。
-
align-items: flex-start/flex-end/center/baseline/stretch; 设置交叉轴上的对齐方式。
-
flex-wrap:nowrap/wrap/wrap-reverse; 控制弹性盒子是否可以换行。
-
flex-flow: <‘flex-direction’> || <‘flex-wrap’>; 等价于同时设置flex-direction和flex-wrap。
-
align-content: flex-start/flex-end/center/space-between/space-around/stretch; 当弹性盒子容器内的多个行(行内元素)交叉轴上的空间总和大于容器的高度时,可以通过该属性设置每行之间的对齐方式。
怎么实现标签的禁用
标签的禁用有多种实现方式,下面列举其中一种:
- 在HTML中添加disabled属性
可以在HTML的标签中添加disabled属性,例如:
上面的代码中,disabled属性被添加到了input标签中。这样,用户就无法进行输入或者选择操作。在使用时,可以通过JavaScript获取该标签的disabled属性值,根据该属性值判断是否需要禁用。
2. 通过JavaScript操作标签
使用JavaScript可以动态地操作标签的属性值,从而实现标签的禁用。例如:
// 获取文本框节点
var inputNode = document.getElementsByName("username")[0];
// 禁用文本框
inputNode.disabled = true;
上述代码中,使用了JavaScript获取了文本框的节点,然后通过设置节点的disabled属性来禁用该文本框。
值得注意的是,如果使用JavaScript操作标签的禁用状态,需要确保在页面加载完成后操作,否则可能会出现获取不到标签节点的问题。可以将代码放在页面加载完成事件中执行。
以上就是其中的两种实现方式,可以根据具体需求选择合适的方法。
Flex布局原理
Flex布局是一种CSS布局模式,它通过设置容器的display属性为flex或inline-flex来创建一个弹性盒子。Flex布局的原理基于以下几个概念:
-
弹性容器(Flex Container):包含了一组弹性子元素的父元素,通过设置display属性为flex或inline-flex来创建。
-
弹性子元素(Flex Item):容器内布局的基本单位,每个子元素被分配一个flexible length,通过flex属性(默认值为0)指定弹性子元素的伸缩性。
-
主轴(Main Axis):弹性容器的主要方向,可以是水平方向(row)或垂直方向(column)。
-
交叉轴(Cross Axis):弹性容器的次要方向,与主轴垂直。
-
弹性盒模型:定义了弹性容器和弹性子元素的排列方式和尺寸计算规则,包括了主轴和交叉轴上的对齐方式、间隙等特性。
-
弹性容器的大小与子元素的大小没有固定关系,由弹性盒模型计算得出。
Flex布局可以实现灵活的布局方式,包括了对齐、分布、排序等多种操作。同时,Flex布局也可以与传统布局方式(如定位、浮动等)结合使用,扩展了CSS布局的功能。
Px与em、rem的区别
在网页设计和开发中,Px、em和rem是用于定义字体大小和其他元素大小的单位。它们的主要区别在于它们的基准点和相对性质。
-
Px(像素):像素是屏幕上显示的基本单位,它指的是显示设备上的一个点。Px是一种绝对单位,它的大小是固定的,不会随着屏幕的缩放而变化。因此,在设计中使用Px可以确保字体大小或者元素大小的一致性。
-
em:em是相对单位,它的大小取决于它的父元素字体的大小。例如,如果在一个14像素的段落中定义一个2em的字体大小,那么这个字体将会是28像素。em通常用于定义相对大小而不是绝对大小。
-
rem:rem是相对单位,它的大小取决于根元素(通常是HTML)的字体大小。与em不同,rem的大小不会随着元素的父元素字体大小的改变而改变。这使得rem成为在响应式设计中定义字体大小和元素大小的理想单位。
总体来说,Px是一种绝对单位,而em和rem是相对单位。在设计过程中,应该根据需求选择使用不同的单位。
请简述媒体查询
媒体查询(Media queries)是一种CSS3技术,用于根据不同设备(如电脑、手机、平板电脑等)的屏幕尺寸、屏幕分辨率、宽度等特征,动态地为网页设置不同的样式。通过媒体查询,可以针对不同的设备显示不同的页面布局、字体大小、图片大小等,从而提高用户体验。媒体查询可以在CSS代码中使用,使用@media关键字定义,在{}中编写样式规则。例如:
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于768像素时应用此样式 */
body {
font-size: 14px;
}
}
此代码将在屏幕宽度小于768像素时将文本字体大小设置为14像素。
html-css常见的兼容性问题
HTML和CSS的兼容性问题是Web开发中常见的问题,以下是一些常见的兼容性问题:
-
不同浏览器之间的盒模型差异:在IE盒模型中,宽度和高度包括了边框和内边距;而在标准盒模型中,宽度和高度只包括内容。
-
浏览器对CSS选择器支持的差异:CSS选择器有不同的优先级和支持度,在不同的浏览器中,可能会出现选择器无法识别的情况。
-
不同浏览器对CSS属性的支持度:一些CSS属性在不同的浏览器中可能有不同的实现方式,导致网页在不同的浏览器中显示不一致。
-
字体渲染差异:不同的浏览器可能采用不同的字体渲染方式,导致字体显示效果不同。
-
不同浏览器的默认样式不同:每个浏览器都有自己的默认样式,可能会影响网页的布局和显示效果。
-
CSS3特性的支持度问题:CSS3新增的一些属性和特性在不同的浏览器中的支持度可能不同,可能需要使用厂商前缀或者Polyfill来实现。
针对这些兼容性问题,我们可以采取一些解决方案,例如使用CSS reset来统一不同浏览器的默认样式,使用标准的CSS属性和属性值,优先使用标准布局方法等。
三栏布局方式两边固定中间自适应
可以使用 Flexbox 布局实现三栏布局,具体步骤如下:
1.在 HTML 中创建一个容器元素,并给容器元素添加一个类名或 id 名称,例如:
左边栏
中间栏
右边栏
2.在 CSS 中设置容器元素的样式,使其成为一个 Flexbox 容器:
.container {
display: flex;
}
3.为左边栏和右边栏添加固定宽度,并将它们的 flex
属性设置为 none
,确保它们不会自动拉伸,例如:
.left, .right {
width: 200px;
flex: none;
}
4.为中间栏设置 flex-grow
属性,使其自动填充剩余空间:
.main {
flex-grow: 1;
}
完整的 CSS 代码如下:
.container {
display: flex;
}
.left, .right {
width: 200px;
flex: none;
}
.main {
flex-grow: 1;
}
Doctype作用
DOCTYPE 是一种文档类型声明,它告诉浏览器网页使用哪种 HTML 或 XHTML 规范。在 HTML5 中,DOCTYPE 可以简化成以下形式:
DOCTYPE 的作用主要有以下三点:
- 告诉浏览器使用哪个 HTML 版本来解析网页,以便正确渲染页面。
- 避免浏览器使用默认的怪异模式,确保网页在不同浏览器中的一致性。
- 帮助搜索引擎正确解析网页,并提高网页的搜索排名。
怎么通过html+css实现一个三角形
建立一个正方形,宽高都为0,建立边框,让其他三条边框都是透明即可
div { height: 0; border-top: 20px solid pink; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; /透明/ width: 0; }
Rem怎么计算?Rem的缺点?
-
概念:rem(font size of the root element)是指相对于根元素html的字体大小的倍数,可以随窗口大小等因素改变而变化。更好的实现响应式设计。
-
计算: rem = ?px / 根元素字体大小
-
缺点:
-
有局限性,IE8 及以下版本不支持
-
对 pc 页面来讲使用次数不多
-
数据量大:所有的图片、盒子都需要给一个准确的值,才能保证不同机型的适配;
语义化是什么?为什么?怎么做?
简单来书:HTML标签语义化来说就是:根据结构化的内容,选择合适的标签。
那为什么要做到语义化呢?
【合适的标签】是内容表达的高度概括,这样的话浏览器爬虫或者任何机器在读取HTML时,都能更好地理解,进而解析效率更高。这样带来的好处如下:
有利于SEO
开发维护体验更好
用户体验更好(如使用alt标签用来解释图片信息)
更好地accessibility,方便任何设备解析(如盲人阅读器)
那么如何做到语义化呢?
具体做法包括:
-
使用正确的HTML标签。例如,使用h1标签表示页面主标题,使用p标签表示段落,使用ul标签和li标签表示列表等。
-
使用有意义的标签和属性。例如,为图片添加alt属性描述图片内容,为链接添加title属性指明链接目标,为表格添加caption和thead、tbody、tfoot等标签提高表格可读性等。
-
避免使用纯样式标签和属性,如font、center、bgcolor等,这些样式应该用CSS来设置。
-
尽量不使用无语义的div和span标签,而是使用更具有语义化的标签。
-
给网页内容添加结构,例如使用header、nav、main、section、article、aside、footer等标签来划分页面内容。
总之,语义化是一种编写高质量、高可读性网页的思想和方法,可以提高网站的用户体验和性能,同时也方便了维护和SEO优化。