ブロックレベル要素
ブロックレベル要素の機能:
-
ブラウザの表示、デフォルトでラインは、自動的にその親要素の幅の幅を埋めるときに、
-
;あなたは、幅、高さ属性を設定することができます
-
マージンおよびパディング特性が提供されてもよいです。
- ディスプレイに対応:ブロック
:を含むブロックレベル要素
要素 | 説明 |
---|---|
<address> |
カスタムアドレス |
<caption> |
テーブルのキャプションを定義します |
<dd> |
定義リストの定義エントリ |
<div> |
パーティションまたはセクションでは、ドキュメントを定義します |
<dl> |
定義リスト |
<dt> |
リスト内の項目の定義 |
<fieldset> |
フレームのセットの定義 |
<form> |
フォーム要素の作成 |
<h1> - <h6> |
タイトル要素 |
<hr> |
レベル |
<legend> |
title要素を定義するためにフィールドセット |
<li> |
項目の定義されたリスト |
<noframes> |
ブラウザに表示さにテキストフレーム、フレームセットに配置されたタグをサポートしていない人のために |
<noscript> |
これらのブラウザの表示テキストは、スクリプトをサポートしていません。 |
<ol> |
順序付きリスト |
<ul> |
順序なしリスト |
<p> |
段落の定義 |
<pre> |
整形済みテキストの定義 |
<table> |
テーブルを定義します |
<tbody> |
テーブル本体を定義します |
<td> |
スタンダードセルテーブル |
<tr> |
表の行 |
<tfoot> |
表のフッター |
<th> |
定義されたヘッダーセル |
<thead> |
テーブルヘッダを定義 |
インライン要素
インライン要素の特性:
- 隣接インライン要素は、排出ラインを下回らないまで、同じ行に配置され、元素の含有量に応じて変化する線幅を変更します
- インライン要素は、幅、高さ、無効な属性を設定します
- インライン要素は、他のプロパティが再生されませんだけのマージンマージン左マージンから右、パディング左、パディング右、パディング効果の役割を果たしています。
- 表示に対応:インライン;
あってインライン要素:
要素 | 説明 |
---|---|
<a> |
アンカーとハイパーリンクを定義します |
<abbr> |
これは、短縮形を表します |
<acronym> |
短い形式は、タイトルの最初の文字だけを示してください |
<b> |
太字フォント |
<bdo> |
デフォルトのテキストの方向をオーバーライドすることができます |
<big> |
大きな太字フォント |
<br> |
ラップ |
<cite> |
リファレンスが定義されています |
<code> |
コンピュータコードテキストの定義 |
<dfn> |
定義されたプロジェクトの定義 |
<em> |
これは、コンテンツ重視のように定義されます |
<i> |
斜体テキスト効果 |
<img> |
ページに画像を埋め込みます |
<input> |
入力ボックス |
<kbd> |
カスタマイズキーボードのテキスト |
<label> |
標識/ラベル入力 |
<q> |
ショートの定義を参照 |
<s> |
彼らは、コンテンツを削除すべきではない与えられた、正確に無関係ではないと述べました |
<samp> |
定義されたサンプルテキスト |
<select> |
カスタムラジオやマルチ選択メニュー |
<small> |
小さなフォントレンダリング効果 |
<span> |
文書のインライン要素の組み合わせ |
<strong> |
コンテンツに強い重点をトーン |
<sub> |
下付き文字列を定義します |
<sup> |
上付き文字の定義 |
<textarea> |
複数行のテキスト入力コントロール |
<tt> |
タイプライターやテキストエフェクトの幅 |
<var> |
変数の定義 |
ブロックレベル要素とインライン比較メモリ素子
ブロックレベル要素 | 行内元素 |
---|---|
デフォルトでは、行は、自動的にその親要素の幅の幅を埋めます | 隣接インライン要素は、排出ラインを下回らないまで、同じ行に配置され、元素の含有量に応じて変化する線幅を変更します |
あなたは、幅、高さプロパティを設定することができます | インライン要素は、幅、高さ、無効な属性を設定します |
あなたはマージンとパディングのプロパティを設定することができます | インライン要素は、他のプロパティが再生されませんだけのマージンマージン左マージンから右、パディング左、パディング右、パディング効果の役割を果たしています。 |
ディスプレイに対応:ブロック | 表示に対応:インライン; |
私たちは、ブラシをテーマに、このような問題が発生します。
eg1: 浏览器天生默认inline-block元素有哪些?(拥有内在尺寸,可以设置高度,但是不会自动换行。)
input button img label texterea
eg2: 请选出所有的置换元素()
正确答案: A B C D 你的答案: A B C D (正确)
A. img
B. input
C. textarea
D. select
这就引出了我们接下来要讲的替换元素和不可替换元素
替换元素
替换元素浏览器根据元素的标签和属性,来决定元素的具体显示内容。
替换元素一般有内在尺寸,所以具有width
和height
。
所以替换元素也可增加行框高度,但不影响line-height
,内容区高度值 = padding-top
+ padding-bottom
+ margin-top
+ margin-bottom
+ height
。 要想替换元素居中,可以设置line-height
= height
, vertral-align
= middle
。
常见的替换元素有html中的<img>
、<input>
、<textarea>
、<select>
、<object>
。
eg1:
<input type="submit" name="submit" value="提交"/>
<input>
标签是根据type
属性来决定是显示输入框,还是提交按钮等等。
type属性值 | 描述 |
---|---|
button |
定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox |
定义复选框。 |
file |
定义输入字段和 "浏览"按钮,供文件上传。 |
hidden |
定义隐藏的输入字段。 |
image |
定义图像形式的提交按钮。 |
password |
定义密码字段。该字段中的字符被掩码。 |
radio |
定义单选按钮。 |
reset |
定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit |
定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text |
定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
eg2:
<img src="helloWord.jpg"/>
<img>
元素通过src
属性的值来读取图片信息并显示出来,而如果查看html
代码,却看不到图片的实际内容,而且<img>
元素的内容通常会被src
属性指定的图像替换掉;
eg3:
<object>
元素
<object>
元素(或者称作 HTML
嵌入对象元素)表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源。
属性 | 描述 |
---|---|
data | 一个合法的 URL 作为资源的地址,,需要为 data 和 type 中至少一个设置值。 |
type | data 指定的资源的 MIME 类型,需要为 data 和 type 中至少一个设置值。 |
usemap | 指向一个 <map>元素的 hash-name;格式为 ‘#’ 加 map 元素 name 元素的值。</map> |
width | 资源显示的宽度,单位是 CSS 像素。 |
height | 资源显示的高度,单位是 CSS 像素。 |
name | 浏览上下文名称(HTML5),或者控件名称(HTML 4)。 |
也有某些元素只在一些特殊情况下表现为可替换元素,例如<video>
、<audio>
、 <picture>
和 <canvas>
。 通过 CSS content
属性来插入的对象被称作匿名可替换元素(anonymous replaced elements)。
非替换元素
html 的大多数元素是不可替换元素,即其内容直接表现给用户端
<p>不可替换元素</p>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)
- 行内非替换元素
width
和height
在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后(在任何子元素相对偏移之前)的宽度,它的高则是基于字体。
如<a>
、<span>
是行内非替换元素 ,但是浮动后的行内非替换元素可以使用width和height。