本文详细介绍HTML、CSS基础知识，包括文档类型声明、常用浏览器及其内核、标签分类、表格与表单操作、CSS引入方式及盒模型等内容。
第一节 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;
}
扫一扫
4639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
