基本的html汇总学习

基本元素

标题

内容：h1~h6

段落

内容：p 这是块级元素，浏览器自动前后添加空行

链接

内容：<a href=”http://www.baidu.com” target=”_blank”> baiddu

图像

内容：<img src=”**.png”> alt属性：为图像定义一串预备的可替换的文本

字体粗体

内容：<strong>(<b>)

字体斜体

内容：<em>(<i>)

头标签

内容：head 可以放置 title,style,meta,link,script,noscript,base

表格

内容：table th tbody thead tfoot tr td 默认不显示边框

无序

内容：ul li

有序

内容：ol li

自定义列表

内容：dl dt dd

div标签

内容：块级元素，无意义，布局使用

span标签

内容：内联元素，无意义，文本的容器

表单form

内容：input类型：text password radio checkbox submit label button

框架

内容：iframe 属性：frameborder

注意点

1.<这些会有对应的html的字符转化
2.浏览器会阶段页面中的空格，无论多少个，只保留一个。（可使用 & nbsp;）

---

浏览器元素分类

块级元素(block)特性：

1.总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
2.宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
3.块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul

内联元素(inline)特性

1.和相邻的内联元素在同一行;
2.宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
3.内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
•display:block – 显示为块级元素
•display:inline – 显示为内联元素
•dipslay:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

题外话：最近整理有关块级元素和内联元素区别的有关知识，网上找了不少相关的文章，发现大家的理解似乎都有误，我自己亲自测试了下，发现了不少的问题：
1.内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。
2.内联元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)

---

参考：
1.块级和内联–http://www.jb51.net/web/76249.html
2.html速查列表–http://www.runoob.com/html/html-quicklist.html