第一节 HTML基础
<!doctype>作用
声明文档类型,告诉浏览器该用哪种规范来解析文档内容
常见的浏览器及其内核
- Chrome Blink
- Firefox Gecko
- Ie Trident
- Safari webkit
- Opera
常见的块级标签和行内标签分别有哪些?
块级:div p h1~6 ul li ol table hr
行内标签: ins span I b u del b
B和strong(i和em)标签的区别
都是文本加粗,后者起强调作用,给浏览器看
对语义化的理解
语义化是指用合理的html标记以及特有的属性去格式化文档,如,标题用h,段落用p,合理的给图片添加alt属性
可呈现很好的内容结构,代码可读性,便于维护,利于用户体验,利于爬虫
第二节 链接&表格&表单
如何合并表格单元格
- 跨行合并 rowspan
- 跨列合并 colspan
<thead><tbody><tfoot>有什么作用
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类
常见表单元素有哪些
- Text文本输入框
- Password密码输入
- Radio单选框
- Checkbox复选框
- Button普通按钮
- Submit提交按钮
- Reset清空
- Lable绑定
- File上传文件
- Image图像形式的提交按钮
- Select>option下拉列表
-
Textarea 多行文本输入框
第三节 css基础
引入css样式有几种
(1)内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页,不能被其它网页共享。
注意:<style>标记可以放在网页的任何地方,但一般放在<head>。
(2)外联式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式:<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意:<link>标记只能放在<head>中
(3)行内样式
通过style的属性来书写CSS代码。
举例:<p style=“font-size:24px;”></p>
单行文本水平居中如何实现
添加text-align:center;
设置盒子的高度,line-height:盒子的高度;(垂直居中)
第四节 盒模型
选择器优先级如何计算
通过权重计算,复合选择器计算其权重之和在比较
-
*通配符0
-
标签1
-
类选择器10
-
Id选择器100
一般:行内样式>id>class>标签>通配符,行内样式优先
若父级元素和子集的样式发生冲突的时候,不管父级的权重多大,都归0;
!important具有最大优先级
权重相同时,就近原则
那些css属性是可以继承的?
Font- text- line- color(a标签不会继承父级颜色)
1)、字体系列属性
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
font-style:字体的风格
line-height:行高
2)、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
color:文本颜色
text-decoration:文本修饰
简述css盒模型
本质是一个盒子,封装周围的html标签,它包括:边距、边框、填充、和实际内容
盒模型又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。
由于IE盒模型的怪异模式,IE模型和标准模型的内容计算方式不同。
元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;
元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。
如何用border实现小三角
sanjiao{
width: 0;
height: 0;
border-bottom: 30px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
Margin外边距常见问题及解决办法
Problem:外边距塌陷,父子标签嵌套,margin会取其中最大值
Method:
-
给父级元素设置border或者添加内边距padding
-
改变父级bfc渲染规则
Position:absolute/fixed
Display:inline-block
Flot:left/right
Overflow:hidden
第五节 浮动
块级标签和行内标签的区别
块级标签:
- 独占一行,
- 无内容宽由父级的宽,高为0
行内标签:
- 一行显示,
- 宽高无效,宽高由内容撑起,水平方向的padding和margin可以设置,垂直方向无效
- 只能容纳文本、其他行内标签
行内块标签(input\image\td\button)
浮动产生的原因?清除浮动的方案?
标签浮动后,脱离正常文档流,导致父标签无法被撑开,且会影响后续正常布局
Method:
- 设置父标签高度
- 清除浮动clear:both
- 父标签添加overflow:hidden
- 伪元素
父级标签::after{
content:'内容’;//默认是行内元素,在一行显示
display:block;
clear:both;
}