按默认样式分
1 块级block
div
p
h1-h6
hr
menu
ul
ol
table
他默认会占据正行,不会给其他元素留下空间,可以包含某些块级元素和内联元素
2 行内inline(内联元素)
span
strong
a
abbr(缩写)
br
em
i
img
input
label
他不会独占一行,他会很和谐的跟其他的元素挤在一起,在一行中的某一个地方,内联元素允许其他内联元素与其位于同一行
宽度,高度,内边距外边距都是不可以改变的,宽高都是内容的宽高,不可以改变
3 inline-block(内联块级元素)
select
他像inline一样和其他元素在一行内与其他的元素和谐共处,既不会占据一整行也不会和其他元素在一行待不下去,他可能是方块的形状,但是可能他还有自己的宽高等
``
## 块级元素和内联元素转换
display的三个值
display:block–显示为块级元素
display:inline–显示为内联元素
display:inline-block–内联元素和块级元素特性兼而有之,既不会沾满元素,又可以设置width和height属性
HTML元素嵌套关系
1 块级元素可以包含行内元素
2 块级元素不一定能包含块级元素
3 行内元素一般不能包含块级元素
HTML 面试真题
doctype的意义是什么?(作用)
DOCTYPE是document type(文档类型)的缩写<!DOCTYPE>声明位于文档的最前面,处于标签之前,他不是HTML标签,主要作用是告诉浏览器是的解析器使用哪种HTML规范或者XHML规范来解析页面
1 让浏览器以标准模式渲染
2 让浏览器知道元素的合法性
删除<!DOCTYPE>会发生什么?
在W3C标准出来之前,不同的浏览器对页面的渲染有不同的标准,产生了一定的差异。这种渲染方式叫做混杂模式。在w3c标准出来之后,浏览器对页面的渲染有了一定的统一的标准,这种渲染凡是叫做标准模式,<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式出现,就是把如何渲染页面的权利都交给了浏览器,有多少种浏览器就会展示多种页面,因此要提高浏览器兼容性就必须重视<!DOCTYPE>
常见的DOCTYPE声明
<!DOCTYPE html>
HTML和XHTML和HTML5的关系
1 HTML属于SGML
2 XHML属于XML,是HTML进行XML严格化的结果
3 HTML5不属于SGML或XML,比XHTML宽松
HTML5有什么变化
1 新的语义化元素
2 表单增强
3 新的API(离线,影视频,图形,实时同信,本地存储,设备能力)
4 HTML5视频和音频
<! DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls = "controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
</video>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
6 HTML5地理定位
7HTML5Canvas
em 和i的区别
1 em是语义化的标签,表强调
2 i是纯样式的标签,表斜体
3 HTNL5中i不推荐使用,一般用做标签
语义化的意义是什么?
1开发者容易理解
2 机器容易理解结构(搜索,读屏软件)
3 有助于SEO
哪些元素可以自闭和
1 表单元素input
2 图片 img
3 br
4 hr
5 meta
6 link
HTML 和DOM的关系
1 HTML 是“死的”
2 DOM由HTML解析而来,是活的
3 JS可以维护DOM
property和attribute的区别
1property是属性
2 attribute是特性
3 attribute是“死的”,写在HTML中的
4 property是“活的”
5 Attribute一般指HTMLDOM对象自带(特有)的属性,例如id,class,title
6 Property就是DOM为了方便JS操作附加的一些编程接口,例如childNodes,lastChild
总结:
Attribute是DOM节点上自带属性,例如我们在HTML中常用的ID,class,src,title,alt等。而Property则是这个DOM元素作为对象,其附加的属性和内容,例如吃了点NOdes,firstChild等
2 Attribute取值和赋值
//attribute取值
getAttribute()
var id = div1.getAttribute(“id”)
var id = div1.getAttribute("title1")
//attribute赋值
setAttribute(attribute,value)//value只能是字符串
div1.setAttribute('class','a');
div1.setAttribute('title1','asd')//自定义属性
Property取值和赋值
//通过‘.’号获取property
var id = div1.id;
var className = div1.className //相当于div1.getAttribute('class')
//通过‘=’赋予property
div1.className = 'a'
div1.align = 'center'
form的作用有哪些?
1直接提交表单
2 使用submit/reset按钮
3 便于浏览器保存表单
4 第三方库可以整体提取值