HTML 简答部分:
1.说说你对标签语义化的理解?
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
c. 方便其它设备解析,以意义的方式来渲染网页
d. 便于团队开发和维护,语义化更具可读性,减少差异化
2.块级元素与行级元素分别有什么特点?
块级元素:
- 总是在新行开始
- 高度,行高,内边距外边距都可控
- 宽度默认是容器的100%。除非重新设定
- 可以容纳内联元素(文本元素),与其他块级元素
行级元素: - 和其他元素在同一行
- 高,行高,内边距与外边距不可改变
- 内联元素只能容纳文本或其他内联元素
3.元素的alt和title有什么异同?
在alt和title同时设置的时候,alt作为图片的替代文字出现,title是图片的解释文字
4.说出三种在定宽高的块元素中水平竖直居中的方法
- postion :absolute;+margin:auto;+top,bottom,left,right=0;
四方都为0,margin:auto; - postion:absolute;+top:50%;left:50%;+translate(-50%,50%)
元素尺寸不固定 - postion:absolute;+top:50%;left:50%+margin:-元素宽度一半 0 0 -元素高度一半;
定位,50%,margin负距
5.CSS标签优先级排序以及优先级相同时应该如何选择?
元素选择器:1
类选择器:10
id选择器:100
元素标签:1000
!important声明的样式优先级最高,如果冲突再进行计算
如果优先级相同,则选择最后出现的样式
继承得到的样式的优先级最低
6.用纯CSS创建一个三角形的原理是什么?
答:基本原理:首先给一个块级元素的宽高设置为0,然后将不需要的边框设置为透明,再给需要的边框设置颜色等参数
代码如下:
<style>
div{
height: 0;
width: 0;
border: 50px solid transparent;
border-top: 50px solid blue;
}
</style>
7. 如何实现元素的显示隐藏,都有哪些方法,各自的优缺点
(1)display 使用none值会让元素从文档中直接删除,
优点:简单暴力,不需要多余代码。不占空间,对布局没有影响
缺点:元素从文档删除,不利于SEO
(2)text-indent:-999em;当给它一个足够大的负值,大到一般我们浏览器无法显示
优点:利于搜索引擎
缺点:他的作用其实就是把文字提到段落前面,不影响宽度,但会影响布局
(3)postion 假如一个元素的距离我们视窗足够大,大到浏览器也无法显示
缺点:用法太死,不能随意修改
(4)visibility :hidden;
优点:利于SEO优化
缺点:该属性会继承,想要让子元素能被看见,就要给子元素多写一个
visibility :visible;
(5)opacity:0 设置透明度0,视觉上隐藏
(6)overflow:hidden;
8.讲一下浮动会带来什么问题,如何清除浮动?
浮动问题:
- 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0
- 若浮动元素的后面跟非浮动元素,非浮动元素会紧随其后浮动起来
- 若浮动元素前面还有统计元素没有浮动则会影响页面结构
如何清除浮动: - 在最后一个浮动标签后面添加一个标签给其设置clear:both;属性
缺点:添加了无意义的标签 - 给父级添加overflow:hidden;属性…
9.什么是BFC,怎样触发BFC?
BFC可以理解为一个区域(块级格式化上下文),在这个区域内的元素无论如何布局,都不影响区域外的元素
触发BFC的条件:
(1)浮动元素:float除none以外的值
(2)绝对定位元素:postion(absolute,fixed)
(3)display为inline-block,table-cells,flex
(4)overflow:除visible以外的值
10. 圣杯布局与双飞翼布局是什么,结局了什么问题,主要实现方式以及区别在哪里
圣杯与双飞翼布局都是为了实现一个两侧宽度固定
,中间宽度自适应的三栏布局
其主要实现方式都为三栏全部浮动,但左右两栏加上负margin让其跟中间栏div并排。不同在于解决“中间栏div内容不被遮挡”问题的思路不一样
圣杯布局为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后 ,将左右两个div用相对布局postion:relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div
双飞翼布局为了中间div内容不被遮挡,直接在中间div呢你不创建子div用于防止内容,在该div里用margin-left和margin-right为左右两栏留出位置
HTML代码题:
- 用html和css实现一个圆形在矩形容器中左右循环滑动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.kuang{
border: 1px solid black;
}
.yuan{
width: 100px;
height: 100px;
background-color: blanchedalmond;
border-radius: 50%;
animation: dong 5s linear infinite alternate;
}
@keyframes dong {
from{
margin-left: 0px;
}
to{
margin-left: 93%;
}
}
</style>
</head>
<body>
<div class="kuang">
<div class="yuan">
</div>
</div>
</body>
</html>
- 请只使用html编写一个基础form表单,要求含有文本输入框、单选框(其中默认选定一个选项)、复选框、提交按钮,且行与行间有换行,最终达到下图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
name: <input type="text" name="name">
<br>
sex:
<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br>
<input type="checkbox" name="interest" value="male">Male
<input type="checkbox" name="interest" value="female">Female
<br>
<input type="submit" value="submit">
</form>
</body>
</html>