replaced element ，input，select

最新推荐文章于 2023-05-04 15:08:24 发布

Adrian503

最新推荐文章于 2023-05-04 15:08:24 发布

阅读量527

点赞数

分类专栏： HTML 文章标签： replaced element input select 替代元素

本文链接：https://blog.csdn.net/Adrian503/article/details/48752395

版权

HTML 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

替换元素：

其内容不受css视觉格式化模型控制的元素，比如image，img元素的内容通常被其src属性指定的内容替换掉。

替换元素通常有固定的尺寸：一个固定的高度，一个固定的宽度和固有的比率。

不可替换元素：

Html中大部分元素都是不可替换元素，其内容直接表现给用户端（比如浏览器），例如<p>标签。

block元素：

总在新行上开始；

width,height,border等可控；

宽度确省是它的容器的100%；

inline元素：

和其他元素都在一行上；

width,height,border等不可控；

宽度就是它的文字或图片的宽度，不可改变。

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

替换元素有以下：

<img /> 属于内联元素，但是特殊的内联元素，它也是替换元素。说明它具有内联元素的特性，也具有替换元素的特性。

<input />代表表单的单行输入域

属性：

acesskey：表单的快捷键访问方式；

alt: 用来替换提交按钮的图片（当在input的src属性定义的图片无法显示时）；

checked：如果是选择型的输入域，代表已经被选择（可以让选择框默认打勾）；

disabled:输入框无法获得焦点，无法选择，以灰色显示，在表单中不起任何作用（不可选中）

maxlength:输入框最多可以输入的文字长度

name:元素的名称

size:输入域的长度

src:当使用图片来显示按钮时，代表图片的位置。

readonly:输入域可以选择，但不能更改（只读）

tabindex:代表tab的遍历顺序（取值为数字）

type:输入域的显示方式（分为输入型，选择型，点击型）

value:输入域的值

拓展：type属性的取值：

hidden：隐藏域

输入型：

text ：文字输入域

password：也是文字输入域，但输入的文字以密码符号显示

file：可以输入一个文件路径

选择型：

checkbox：复选框，可以选择0个或多个

radio：单选框，指可以选择一个而且必须选择一个

点击型：

button：按钮

image：使用图片来显示按钮，

submit:提交按钮，把信息送到服务器，可以使用value属性来显示按钮上的文字

reset：重置按钮，可以把表单中的信息清空。

<textarea /> 表单多行输入域

accesskey:表单的快捷键访问方式

cols:多行输入的列数

rows：多行输入的列数

disabled：输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用

name:元素的名称；

readonly:只读

tabindex:输入域的tab遍历顺序

<select>单选或多选菜单

语法：

    <select size="2" multiple="multiple" id="multipleselect" name="multipleselect[]">
        <option>XHTML</option>
        <option>HTML</option>
    </select>

属性：

disabled -- 输入域无法获得焦点、无法选择，以灰色显示，在表单中不起任何作用

multiple -- 设置后菜单可多选，否则只能单选（默认单选）

name -- 元素名称

size -- 菜单的可见行数

tabindex -- 输入域的"tab"键遍历顺序