html元素笔记,Html-元素类型笔记

注意点：

元素类型分为 块级元素 和 行内元素

块级元素：

在网页中以块的形式显示，默认情况都会占据一行，两个相邻的块级元素不会出现并列显示的元素，按照顺序自上而下排列。

块级元素可以定义自己的宽度和长度。

div：

dl：与dt、dd搭配使用

form：交互表单

h1-h6:标题

hr：水平线

ol：有序列表

ul：无序列表

p：段落

fieldset：表单字段级

colgroup-col：表单列分组元素

table-tr-td：表格及行，单元格

行内元素：

在网页中始终以行内逐个显示，没有自己的形状并且不能定义自己的宽和高，他显示的宽和高根据所包含内容的宽和高确定。

内联元素也会遵循盒模模型基本法则，如定义padding，border，margin，background等属性，但是个别属性不能正确显示。

a：锚点

b：粗体

strong：粗体

sub：下标

sup：上标

u：下划线

i：斜体

br：换行

em：强调

input：输入框

img：图片

label：表格标签

span：内联容器

textarea：富文本

可变元素：

需要根据上下文确定该元素是块元素还是内联元素。

applet：java applet

button：按钮

del：删除文本

iframe：inline iframe

ins：插入文本

map：图片区域

object：对象

script：客户端脚本

元素类型的转换

display属性：用于定义建立布局时元素生成的显示框类型

常见属性值：

none：此元素不会被显示，隐藏元素并脱离文本流

block：将元素设置为块级元素，独占一行。不设置宽度时宽度撑满一行。当元素设置了float属性后就相当于给元素加了display：block；属性

inline：在元素后面删除行符，多个元素可以在一行显示。非独占一行，不支持宽度，代码换行被解析成空格

list-item：将元素转换成列表，li 的默认类型。不设置宽度时宽度撑满一行，独占一行，支持高度设置

大部分块元素display属性值默认为block，其中列表的默认值为list-item

大部分内联元素的display属性值默认为inline，其中img，input默认值为inline-block

练习：

html>

Documenttitle>

* {margin: 0; padding: 0;}

.nav {height: 60px; background: #2a063a;}

.nav ul { width: 960px; margin: 0 auto; text-decoration: none; overflow: hidden;}

.nav ul li {float: left; border-right: 1px #fff solid;}

.nav ul li a {display: block; width: 119px; height: 60px; color: #fff;

text-align: center; line-height: 60px; text-decoration: none; font-size: 18px;}

.nav ul li a:hover {background: rgb(224, 28, 28);}

.nav ul .last{border-right: none;}

style>head>

• 博客首页a>li>