核心内容摘要
大点评自动秒收录谷歌蜘蛛网站是真的吗_谷歌蜘蛛自动秒收录大点评网站是真的吗?
蜘蛛池的原理图解_蜘蛛池SEO技术原理解析图
一、HTML
1、web标准
2、文档类型
3、什么是HTML
4、HTML的骨架
5、标签
(1)常见标签
(2)H5新增标签
6、表格table
7、H5C3和Html,css相比有什么变化
(1)H5新增特性
(2)C3新特性
二、CSS
1、css三大特性
2、css样式分类
3、css样式
4、css选择器
5、标签元素分类和特点
6、说一下对浮动的理解
7、定位
8、常见的盒子模型有哪些,有什么区别
9、弹性盒模型有哪些属性和属性值,什么效果
10、圣杯布局(双飞翼布局)有哪几种实现方式
11、如何去掉相邻两个图片中间的白边
12、如何实现文字垂直水平居中,盒子垂直水平居中
13、单行文本溢出显示省略号,多行文本溢出显示省略号
14、光标cursor
15、响应式布局
16、像素
1、web标准
结构标准:HTML统一规范
表现标准:CSS统一规范
行为标准:JS统一规范
2、文档类型
标签作用:声明了文档类型
3、什么是HTML
HTML:超文本标记语言,用来描述网页的一种语言。所谓超文本,可以加入图片、声音、动画、多媒体等内容,不仅如此,还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接
4、HTML的骨架
html:根标签
head:头部标签,主要设置网站的属性
body:主体标签,主要书写网站内容
meta:标记元素(元标签),用于定义与网页相关的元信息,包括字符编码、作者、关键词及页面刷新等,被浏览器和搜索引擎解析以控制功能或优化索引,但不直接显示在页面中。
5、标签
(1)常见标签
hn(1<=n<=6):标题标签,独占一行
p:段落标签,一个段落结束后,另起一行
br:换行标签,单标签、自动换行
hr:水平线标签,width宽度,size高度
div:盒子标签,独占一行、包含任意元素
span:范围标签,不换行
b/strong:加粗标签,不换行
i/em:倾斜标签,不换行
u/ins:下划线标签,不换行
s/del:删除线标签,不换行
img:图标标签,src(路径)、title(标题,光标移入图片上会显示title的属性值)、alt(当图片不显示时会显示图片的属性值)、width(图片的宽度,不加单位)、height(图片的高度,不加单位)、border(图片的边框)、target(_blank新窗口打开、_self默认,在相同框架中打开,_parent在父框架中打开、_top在这个窗口打开、framename在指定的框架中打开)
a:链接标签,href(跳转的地址,添加href属性后,默认有下划线和字体颜色的变化),text-decoration:none删除下划线
audio:音频标签,controls音频控件、loop循环播放、muted静音
video:视频标签,controls视频控件、loop循环播放、muted静音
(2)H5新增标签
nav:导航标签
aside:侧导航标签
button:按钮标签
article:文章标签
progress:进度条标签
footer:底部标签
6、表格table
tr:行标签
td:单元格标签
cellspacing:边框与边框之间的距离,相当于margin
cellpadding:单元格内容与边框之间的距离,相当于padding
caption:标题
align:表格的位置,left/right/center
rowspan:跨行合并
colspan:跨列合并
table只包含caption、thead、tbody、tfoot、tr
tr只包含tr、td
td可以包含任意标签
7、H5C3和Html,css相比有什么变化
(1)H5新增特性:
①、语义化标签:如header、nav、footer、aside、article、section等。
②、音频(audio)、视频(video)
③、表单属性:placeholder、autofocus自动获取焦点、required校验、maxlenght、 minlength、 novaildate不校验表单
④、输入框类型:email、url、number、search、range、color、time、date、month
(2)C3新特性:
①、选择器:属性选择器、伪类选择器、伪元素选择器
②、颜色:rgba、hsla表示方式
③、阴影:盒子阴影(box-shadow)文字阴影(text-shadow)
④、边框:圆角border-radius
⑤、怪异盒子模型:box-sizing
⑥、背景剪切:背景色剪切:background-clip背景图剪切:background-origin
⑦、渐变:线性渐变:linear-gradient 径向渐变:radial-gradient
⑧、转换:transfrom 缩放拉伸scale 扭曲skew 平移translate旋转rotate
⑨、过渡:transition可以实现动画
⑩、动画animate
1、css三大特性
层叠性:后边的样式覆盖前边的样式、就近原则
继承性:后代元素继承祖先元素的样式、亲代优先继承、元素本身的样式大于继承的样式
优先级
2、css样式分类
行内样式
内部样式:在head中写的style
外部样式:引入的样式(rel:文件类型)
3、css样式
(1)字体样式
font-size:字体大小,普通文本文字默认16px,最小12px
font-family:字体家族,默认宋体
font-style:font-style,默认normal,italic/oblique:倾斜的
font-weight:加粗,normal正常、bold加粗、100~900加粗
font:综合设置,font-style、font-weight、font-size、font-family
(2)颜色样式:color: rgb(红、绿、蓝):0~255
(3)text-decoration: underline(下划线)、line-through(删除线)、overline(上划线)
(4)首行缩进:text-indent: 2em
(5)文字间隔:letter-spacing:10px
(6)背景色:background-color:rgba:0~1(0:完全透明,1:完全不透明)
opacity:0~1(0:完全透明,1:完全不透明)
(7)背景图片:background-image: url(路径)
背景图片平铺:background-repeat: no-repeat(显示一张),默认显示多张
背景图片尺寸:background-size: X轴 Y轴:800px(80%) 600px(60%)
背景图片位置:background-position: left/right/top/bottom/center/100px/100%
(8)边框:border:solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)
边框会影响盒子的尺寸大小
去掉边框:border: 0/none
(9)内边距:padding
综合设置:padding:4个属性值:上、右、下、左
3个属性值:上、左右、下
2个属性值:上下、左右
1个属性值:上下左右
内边距会影响盒子的尺寸大小
(10)外边距:margin
综合设置:margin:4个属性值:上、右、下、左
3个属性值:上、左右、下
2个属性值:上下、左右
1个属性值:上下左右
外边距不会影响盒子的尺寸大小
(11)元素显示与隐藏:
display: none(隐藏)/block(显示):将元素完全移除了
不占位置
点击不可交互
visibility: hidden(隐藏)/visible(显示):没有删除元素,还在文档中,只是让元素隐藏了
占位置
点击不可交互
opacity: 0:透明度,不是隐藏
占位置
点击可交互
overflow: hidden:隐藏溢出的内容
4、css选择器
(1)css选择器分类
css选择器:基础选择器、复合选择器、伪类选择器
基础选择器:通配符选择器(*)、标签选择器、类名选择器、多类名选择器、id选择器
复合选择器:交集选择器(p .pro)、并集选择器(h3,p,.sec{})、子代选择器(父元素>子元素)、后代选择器(父元素 子元素)
伪类选择器:a标签的伪类::link(未点击)、:hover(鼠标移入)、:active(点击时)、:visited(已访问)
(2)css选择器优先级
在同一元素下:通配符选择器<标签选择器<类名选择器