那么你面试必须知道的H5C3知识点

目录

  • 1、rem和em的区别
  • 2、如何关闭IOS键盘首字母自动大写
  • 3、什么是语义化标签
  • 4、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
  • 5、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
  • 6、:webkit表单输入框placeholder的颜色值能改变吗?
  • 7、禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片
  • 8、禁止ios和android用户选中文字
  • 9、自适应
  • 10、响应式
  • 11、布局方案

1、rem和em的区别

rem是相对于根元素(html)的font-size
em是相对于父元素的font-size。

2、如何关闭IOS键盘首字母自动大写

<input type="text" autocapitalize='off'>

只需要给input输入框加上一个属性即可。

3、什么是语义化标签

1、易读性和维护性会更好
2、在seo上,蜘蛛抓取更好
3、IE8不兼容HTML5标签,可以通过htm5shiv.js解决这个问题。

4、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

1、区别

:是伪类,::是伪元素,主要是为了区分

2、是什么,作用
元素before之前,元素after之后。
清除浮动,样式布局等…

5、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

添加一个样式即可解决。


rgba (0,0,0,0)则表示完全不透明的白色,也即是无色;

6、:webkit表单输入框placeholder的颜色值能改变吗?

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>

  <style>
    input::-webkit-input-placeholder {
      color: red;
    }
  style>
  <body>
    <input type="text" placeholder="默认值">
  body>
html>

7、禁止ios长按时触发系统的菜单,禁止ios&android长按时下载图片

	/*禁止ios 长按时触发系统的菜单,禁止ios&android长按时下载图片*/
html,body{
	touch-callout: none;
	-webkit-touch-callout: none;
	
	user-select:none; //禁止选中文字
	-webkit-user-select:none;
}

8、禁止ios和android用户选中文字

html,body{
	user-select:none;
	-webkit-user-select:none;
}

9、自适应

淘宝无限适配【移动端】:淘宝无限适配 + 布局单位使用rem

10、响应式

响应式主要是通过媒体查询来根据屏幕的大小来改变样式。

1. 是什么?
	一个URL可以响应多端
2. 语法结构
	@media only screen and (max-width: 1000px){
		ul li:last-child{
			display: none;
		}
	}

	only : 可以排除不支持媒体查询的浏览器
	screen : 设备类型
	max-width | max-height
	min-width | min-height 
3. 响应式图片【性能优化】
	<picture>
		<source srcset="1.jpg" media='(min-width:1000px)'>
		<source srcset="2.jpg" media='(min-width:700px)'>
		<img srcset="3.jpg">
	picture>

11、布局方案

一、什么情况下采用响应式布局
	
	数据不是特别多,用户量不是特别大,纯展示类的项目适合响应式布局
	
	例如:公司的官网、专题页面
	
	特别追求性能的项目,不太适合响应式,因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc + 移动端应该做什么样的布局方案
	注意:访问量还可以或者比较大,类似于淘宝网。
	
	pc是一套,会加入一点点响应式。
	移动端是一套,会使用自适应的布局方式。

三、pc的设计图

	ui:1980
	笔记本电脑:1280
	ui图的宽度和电脑的宽度不对应该怎么办?
		1. 把ui图进行等比缩放,缩放成和电脑一样的尺寸
		2. 换1980的电脑
		
四、移动端的设计图

	宽度:750
	因为750设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸做为基准点。

你可能感兴趣的:(html5,css3)