html+css简答

最新推荐文章于 2024-10-02 17:15:49 发布

m0_46692083

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量320

点赞数

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

本文链接：https://blog.csdn.net/m0_46692083/article/details/107900450

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html部分
1.前端三要素：
html：毛坯房
css：装修
javascript：人住进去

2.谈谈你对B/S架构的认识？
首先B是browser浏览器，S是server服务器
浏览器 -http请求-> 服务器 -> 数据库
数据库 -> 服务器 -响应-> 浏览器

3.html网页的结构
doctype目的：告诉标准通用语言解析器，它应该使用什么样的文档类型定义来解析文档
如果页面没有doctype声明，那么声明文档的解析类型就是怪异模式，也就是不同的浏览器会按照自己的解析方式去解析，
那么在不同的浏览器中就会有不同的样式。所以你的页面添加了<!doctype html>,那么浏览器就会按照标准模式解析然后渲染页面

4.列出常见的标签，并简单介绍这些标签用在什么场景？
块元素
div 用于页面框架搭建
ol > li 无序列表……
行内元素
a 超链接
span 无意义行内元素
i 可用于字体图标的引入
……

5.html核心属性有哪些？
id class title style

6.placeholder 属性有什么作用？
提示语，可用在输入框中提示用户信息输入

7.说说name和id的区别或者理解？
ID 是以 #定义的CSS样式，也可以用JS获取来控制 getElementById(这里是ID) 来获取

name很多了，就是给当前标签或元素指定名称，也可以用JS来控制值，form提交后获取的时候就需要获取name名称。

id 一般用于css和js中引用,name用于表单提交,只有加了name属性的标签元素才会提交到服务器。

8.表单如何重置？
reset

9.H5新增的块元素（语义化标签）
header(头)
nav
article（主体）
section (部分)
footer（脚）
video
audio

10.form中methods请求方式
get
参数拼接在url后面，通过?来分割
传递参数较少
post
参数存放在请求体中，安全
传递参数更多

11.空元素定义
HTML元素的内容是开始标签与结束标签之间的内容。
而某些 HTML 元素具有空内容。那些含有空内容的HTML元素，就是空元素。空元素是在开始标签中关闭的
例如：
常见的空元素：

分割线
鲜为人知的是：，

12、块级元素与行内元素的区别
块级元素
div、h1~h5、p、html、body、ul、li
1) 独占一行
2) 默认宽度为100%，默认高度由子元素或者内容决定
3) 可以为其指定宽高 style=“width:;height:;”

行内元素
span、a、img、strong、i
1) 与其他行内元素共享一行
2) 默认宽高由内容决定
3) 不能为其指定宽和高
4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

css部分
1.@import和link的区别
1) 所属范围
@import 是css的语法，只能导入样式
link是html的标签，不仅可以加载样式，还可以定义rel属性
rel="stylesheet"表示调用外部样式表
2) 加载顺序
页面加载的时候，link标签引入的css被同时加载
@import引入的css在页面加载完毕后再被加载
3) 兼容性
@import需要兼容IE5+
link标签，不存在兼容性问题

2.选择器有啥？
*基本
id
class
逗号
组合
*
*层次
后代
子代
相邻兄弟
通用兄弟
属性
元素
伪元素

3.子代选择器和后代选择器的区别
子代 -> 儿子
后代 -> 儿子，孙子，重孙子,…

4.通用兄弟选择器和相邻兄弟选择器

5.字体样式 font- ?
color
font-style
font-weight
font-size
line-height
font-family

6.文本样式 text- ?
text-align
text-decoration
text-indent
text-shadow
text-transform

7.可设置文本垂直居中，水平居中
line-height，text-align

8.选择器优先级【级联】
1. !important
优先级最高，不推荐
2. 特性值
1000
内联style属性
100
id
10
类名选择器、伪类选择器、属性选择器
1
标签选择器、伪元素选择器

9.iconfont在html中的使用
1.加购 -> 添加至项目 -> 生成在线链接
2.复制在线css代码到icon.css(自己新建)
3.使用

10.fontawesome在html中的使用
1. 在bootcdn中搜索fontawesome，引入link到页面
2. 使用
或者
1.下载离线fontawesome
2.引入离线包（所有）
3.使用

11.网络字体(字体图标库的使用) webfont http://www.xiazaiziti.com/tag/ttf?btwaf=17865710
1. 下载对应的字体，如此处的ttf字体
2. 将下载好的字体文件放到对应的目录
3. 在style标签中引入
@font-face {
font-family: ‘随意’;
src: url(’./HYXinHaiXingKaiW.ttf’);
}
4. 在需要使用字体的文本的标签加上font-family即可
.test {
font-family:‘随意’;
}

12.盒子的理解
内容盒子
边框盒子

13.清除浮动的方式
1、浮动元素的父级元素： overflow:hidden;
2、浮动元素的父级元素： ::after{clear:both;content:’’;display:block;}
3、浮动元素的同级：添加一个空标签，并且设置clear:both;
14、块级元素如何在父元素中水平垂直居中
1) 父元素position
1. 父元素相对定位，子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;
2. 父元素相对定位，子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度
2) 父元素display
1. 父元素display:flex; justify-content:center; align-items:center，子元素自动居中（伸缩盒布局）
2. 父元素display:table-cell; vertical-align:middle; 子元素display:inline-block
css中link和@import的区别
1) 所属范围
@import是 CSS 的语法，只能导入样式
link是 HTML 的标签，不仅可以加载 CSS 文件，还可以定义 rel 属性
rel="stylesheet"表示调用外部样式表

加载顺序
页面加载时，link标签引入的 CSS 被同时加载
@import引入的 CSS 将在页面加载完毕后被加载
兼容性区别
@import需要IE5+
link标签，不存在兼容性问题

15、如何让元素使用margin:0 auto，水平居中
只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
块级元素：div、h1~h3、ul
/对于块级元素，只需要设置width/
div{
width: 200px;
background-color: #ccc;
margin:0 auto;
}

行内元素：span、a
/对于行内元素，需要先设置为块级元素，再加宽度/
span{
display: block;
width: 100px;
background-color: red;
margin:0 auto;
}

行内块元素：button、img、input、textarea
/对于行内块级元素，需要设置为块级元素，可以不用设置宽度/
input{
display: block;
margin:0 auto;
}

16、overflow的三种取值，并说明具体含义
auto：自适应，内容如果溢出，会自动生成滚动条
scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出内容进行裁剪，不会出现滚动条。