块级元素是指本身属性为display:block的元素。因为它自身的特点,我们通常使用块级元素来进行大布局(大结构)的搭建。
布局上:独占一行,可以容纳内联元素和其他块元素
样式上:设置width、height有效,可以设置盒子模型的相关css属性,
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度
在不设置高度的情况下,块级元素的高度是它本身内容的高度
2、 行内元素:
内联元素是指本身属性为display:inline的元素。因为它自身的特点,我们通常使用块级元素来进行文字、小图标(小结构)的应用。
布局上:和其他元素从左到右在一行排列,只能容纳文本或者其他内联元素(不要在内联元素中嵌套块级元素)
样式上:不能直接控制width、height,只能使用盒模型部分属性,如padding、line_height、margin-left、margin-right。
内联元素的宽高是由本身内容的大小决定(文字、图标等)
3、 行内块状元素:尽可能少的占用横向空间,和其他元素都在一行上;可以设置width、height、margin、padding等盒模型相关属性。
*常用:img、input、td。
display:block;(将元素变为块级元素)
display:inline; (将元素变为行级元素)
display:inline-block;(将元素变为行级块元素)
a. 块元素特立独行;内联元素随波逐流。
b.块元素通常用作网页的主要构建模块,而内联元素常用来标记小段内容(修饰文本)
c.设计一个页面时,一般从较大的块开始 ,然后完善页面的时候再加入内联元素。
d. 对标签能够清晰的分类,掌握标签的特性,在选择标签时避免犹豫不决,提高布局效率。
HTML5新结构标签
HTML5-新的属性语法
HTML5图形
HTML5音视频标签
对本地离线存储的更好的支持
新的表单控件,比如 calendar、date、time、email、url、search
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u
对可用性产生负面影响的元素:frame,frameset,noframes;
支持HTML5新标签 : IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
一般来说,分为行内元素和块状元素,行内元素意思是,比如两个行内元素在同一行,他们不会分行,比如<a>,<span>等他们不支持宽度和高度的属性,所以行内元素的高度和宽度只是其内容的高度和宽度。,块状的话,如果两个块状元素不能再同一行,意思就是他们会换行,比如<div><p><h1><h2>...等,但是块状元素支持width和height的属性,而行内元素不支持,当然你可以通过css来把行内改成块状或者把块状改成行内。HTML(HyperText Mark-up Language,超文本标记语言或超文本链接标示语言),是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。HTML文档基本结构在HTML网页文档的基本结构中主要包含以下几种标记。1.HTML文件标记<HTML>和</HTML>标记放在网页文档的最外层,表示这对标记间的内容是HTML文档。<HTML>放在文件开头,</HTML>放在文件结尾,在这两个标记中间嵌套其他标记。2.HEAD文件头部标记文件头用<HEAD>和</HEAD>标记,该标记出现在文件的起始部分。标记内的内容不在浏览器中显示,主要用来说明文件的有关信息,如文件标题、作者、编写时间、搜索引擎可用的关键词等。在HEAD标记内最常用的标记是网页主题标记,即TITLE标记,它的格式为:<TITLE>网页标题</TITLE>网页标题是提示网页内容和功能的文字,它将出现在浏览器的标题栏中。一个网页只能有一个标题,并且只能出现在文件的头部。3.BODY文件主体标记文件主体用<BODY>和</BODY>标记,它是HTML文档的主体部分。网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。通常的标记样式如下:<BODY background="image-URL" bgcolor="color" text="color" link="color" alink="color" vlink="color"leftmargin="value" topmargin="value">…</BODY>.欢迎分享,转载请注明来源:内存溢出
评论列表(0条)