効果:
属性:
その効果は次のとおりです:
<ul> タグに type 属性があるだけでなく、<ul> 内の <li> タグにも type 属性があります (この書き方はまれですが)。 )。効果は次のとおりです:
2. 順序付きリスト <OL>、その中の各項目は <li>" >1. 順序なしリスト<ul>、順序なしリストの各項目は<li>
英語の単語: un list。
例:
<ul> <li>默认1</li> <li>默认2</li> <li>默认3</li></ul>
効果:
属性:
その効果は次のとおりです:
<ul> タグに type 属性があるだけでなく、<ul> 内の <li> タグにも type 属性があります (この書き方はまれですが)。 )。効果は次のとおりです:
2. 順序付きリスト <OL>、その中の各項目は <li>
HTMLタグを画像と文字で詳しく解説(2)_html/css_WEB-ITnose
HTML タグの非常に詳細なグラフィックとテキストのデモンストレーションがまた続きます~~~
昨日のメリットをまだ見ていない場合は、急いでください。ポータル: HTML タグ ----詳細なグラフィックとテキストの説明
この記事の主な内容
リストタグ(リストタグ)
リストタグのポイントそこにの3種類です。
1. 順序なしリスト、順序なしリストの各項目は-
英語の単語: un list。
例:
<ul> <li>默认1</li> <li>默认2</li> <li>默认3</li></ul>
ログイン後にコピー 効果:
属性:
- type="属性値"。属性値は、disc (実線の原点、デフォルト)、square (実線の四角点)、circle (中空の円) から選択できます。
その効果は次のとおりです:
タグに type 属性があるだけでなく、 内の - タグにも type 属性があります (この書き方はまれですが)。 )。効果は次のとおりです:
2. 順序付きリスト 、その中の各項目は
英語の単語: Order List。
例:
<ol > <li>呵呵哒1</li> <li>呵呵哒2</li> <li>呵呵哒3</li></ol>
ログイン後にコピー 効果:
属性:
- type="属性値"。属性値は、1 (アラビア数字、デフォルト)、a、A、i、I です。 start 属性と組み合わせて、開始点を示します。
例:
<ol type="1"> <li>呵呵</li> <li>呵呵</li> <li>呵呵</li></ol><ol type="a"> <li>嘿嘿</li> <li>嘿嘿</li> <li>呵呵</li></ol><ol type="i" start="4"> <li>哈哈</li> <li>哈哈</li> <li>哈哈</li></ol><ol type="I" start="10"> <li>么么</li> <li>么么</li> <li>么么</li></ol>
ログイン後にコピー 効果は次のとおりです:
3. 定義リスト
英語の単語: 定義リスト、属性なし。
- : リストのタイトル、title を定義します
- : リストのリスト項目
例:
<dl> <dt>第一条</dt> <dd>你若是觉得你有实力和我玩,良辰不介意奉陪到底</dd> <dd>我会让你明白,我从不说空话</dd> <dd>我是本地的,我有一百种方式让你呆不下去;而你,无可奈何</dd> <dt>第二条</dt> <dd>良辰最喜欢对那些自认能力出众的人出手</dd> <dd>你可以继续我行我素,不过,你的日子不会很舒心</dd> <dd>你只要记住,我叫叶良辰</dd> <dd>不介意陪你玩玩</dd> <dd>良辰必有重谢</dd></dl>
ログイン後にコピー 効果:
テーブルラベル
テーブルラベルは次のように表されます<テーブル>。
テーブル
は各行 で構成され、各行は で構成されます。
したがって、テーブルは行と列ではなく、行で構成されている (行は列で構成されている) ことを覚えておく必要があります。
以前は、ラベルの位置を修正する唯一の方法はテーブルを使用することでした。これは、CSS の位置決め機能によって実現できるようになりました。しかし、現在でもページを作成するとき、テーブルにはいくつかの機能があります。 たとえば、セルの行:
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
ログイン後にコピー 上の表にはテキストが追加されていないため、生成された Web ページには何も表示されません。
たとえば、3 行 4 列のセル:
<table> <tr> <td>生命壹号</td> <td>23</td> <td>男</td> <td>黄冈</td> </tr> <tr> <td>许嵩</td> <td>29</td> <td>男</td> <td>安徽</td> </tr> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </table>
ログイン後にコピー 効果:
上の図の表には枠線がないようです。心配しないで、の属性を見てみましょう。 <テーブル>タグ。
属性: border: 境界線。単位はピクセルです。
幅: 幅。単位はピクセルです。
高さ: 身長。単位はピクセルです。
align: - テーブルの配置。属性値は左、右、中央に入力できます。 注: これはテーブル内のコンテンツの配置を設定するものではありません。コンテンツの配置を設定したい場合は、セルのラベルを設定する必要があります
)
cellpadding: セルからの距離。コンテンツを端までピクセル単位で表示します。デフォルトでは、テキストは左側の行の隣にあります。つまり、デフォルト値は 0 です。 - セルの内容から四辺までの距離ではなく、一辺までの距離であることに注意してください。デフォルトは左側の線からの距離です。属性 dir="rtl" が設定されている場合、コンテンツから右側の行までの距離を参照します。
cellspacing: セル間の距離 (余白) (ピクセル単位)。デフォルト値は 0 です。
bgcolor="#99cc66": テーブルの背景色。
background="path src/...": 背景画像。 - 背景画像は背景色よりも優先されます。
bordercolorlight: テーブルの上部と左の境界線、およびセルの右側と下部の境界線の色
bordercolordark: テーブルの右側と下部の境界線、およびセルの上部と左側の境界線の色- これら 2 つのプロパティ3D効果を設定することです。
dir: public 属性、セルの内容の配置 (方向)。 可能な値: ltr: 左から右 (デフォルト)、rtl: 右から左 - dir は共有属性であるため、この属性を任意のラベルに配置すると、このラベルが右から開始して配置される可能性があることを意味します。
セルの境界線の効果:
: 行
テーブルは行と行で構成されます。
属性:
- dir:共有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)
- bgcolor:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。
:单元格 属性:
- align:内容的横向对齐方式。属性值可以填:left right center。
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。
- valign:内容的纵向对齐方式。属性值可以填:top middle bottom
- width:绝对值或者相对值(%)
- height:单元格的高度
- bgcolor:设置这个单元格的背景色。
- background:设置这个单元格的背景图片。
单元格的合并
如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:
- colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
- rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
效果举例:(横向合并) 效果举例:(纵向合并)
:加粗的单元格。相当于 + - 属性同
标签。
:表格的标题。使用时和tr标签并列
- 属性:align,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom
效果: 表格的标签、标签、标签 这三个标签有与没有的区别:
- 1、如果写了,那么这三个部分的代码顺序可以任意,浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- 2、当表格非常大内容非常多的时候,如果用thead、tbody、tfoot标签的话,那么数据可以边获取边显示。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。
举例:
<body> <table border="1"> <tbody> <tr> <td>生命壹号</td> <td>23</td> <td>男</td> <td>黄冈</td> </tr> </tbody> <tfoot> <tr> <td>许嵩</td> <td>29</td> <td>男</td> <td>安徽</td> </tr> </tfoot> <thead> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </thead> </table> </body>
ログイン後にコピー 效果:
框架标签
如果我们希望在一个网页中显示多个页面,那框架标签就派上用场了。
- 注意,框架标签不能放在标签里面,因为标签代表的只是一个页面,而框架标签代表的是多个页面。
- 框架的集合用
:框架的集合
一个框架的集合可以包含多个框架或框架的集合。
属性:
rows:水平分割,将框架分为上下部分。写法有两种:
1、绝对值写法:rows="200,*" 其中*代表剩余的。这里其实包含了两个框架:上面的框架占200个像素,下面的框架占剩下的部分。
2、相对值写法:rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架:上面的框架占30%,下面的框架占70%。
注:如果你想将框架分成很多行,在属性值里用逗号隔开就行了。
cols:垂直分割,将框架分为左右部分。写法有两种:
1、绝对值写法:cols="200,*" 其中*代表剩余的。这里其实包含了两个框架:左边的框架占200个像素,右边的框架占剩下的部分。
2、相对值写法:cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架:左边的框架占30%,右边的框架占70%。
注:如果你想将框架分成很多列,在属性值里用逗号隔开就行了。
效果:
上图中,如果删掉页面right.html,显示效果如下:
:框架
一个框架显示一个页面。
属性:
- scrolling="no":是否需要滚动条。默认值是true。
- noresize:不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,这样的话,框架大小就不固定了。如果用了这个属性值,框架大小将固定。
举例:
<frame src="top.html" noresize></frame>
ログイン後にコピー - bordercolor="#00FF00":给框架的边框定义颜色。这个属性在框架集合
中同样适用。
颜色这个属性在IE浏览器中生效,但是在google浏览器中无效,不知道为啥。
frameborder="0"或frameborder="1":隐藏或显示边框。
name:给框架起一个名字。
利用name这个属性,我们可以在框架里进行超链。
举例:
效果:
内嵌框架
内嵌框架用
- src="subframe/the_second.html":内嵌的那个页面
- width=800:宽度
- height=“150:高度
- scrolling="no":是否需要滚动条。默认值是true。
- name="mainFrame":窗口名称。公有属性。
效果:
内嵌框架举例:(在内嵌页面中切换显示不同的压面)
<body> <a href="文字页面.html" target="myframe">默认显示文字页面</a><br> <a href="图片页面.html" target="myframe">点击进入图片页面</a><br> <a href="表格页面.html" target="myframe">点击进入表格页面</a><br> <iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe> <br> 嘿嘿 </body>
ログイン後にコピー 效果演示:
表单标签
表单标签用
英語の単語: un list。
例:
<ul> <li>默认1</li> <li>默认2</li> <li>默认3</li></ul>
効果:
属性:
その効果は次のとおりです:
- タグに type 属性があるだけでなく、
- タグにも type 属性があります (この書き方はまれですが)。 )。効果は次のとおりです:
2. 順序付きリスト
- 、その中の各項目は
英語の単語: Order List。
例:<ol > <li>呵呵哒1</li> <li>呵呵哒2</li> <li>呵呵哒3</li></ol>
ログイン後にコピー効果:
属性:
- type="属性値"。属性値は、1 (アラビア数字、デフォルト)、a、A、i、I です。 start 属性と組み合わせて、開始点を示します。
- : リストのタイトル、title を定義します
- : リストのタイトル、title を定義します
- : リストのリスト項目
幅: 幅。単位はピクセルです。
高さ: 身長。単位はピクセルです。
align: - テーブルの配置。属性値は左、右、中央に入力できます。 注: これはテーブル内のコンテンツの配置を設定するものではありません。コンテンツの配置を設定したい場合は、セルのラベルを設定する必要があります
)
cellpadding: セルからの距離。コンテンツを端までピクセル単位で表示します。デフォルトでは、テキストは左側の行の隣にあります。つまり、デフォルト値は 0 です。- セルの内容から四辺までの距離ではなく、一辺までの距離であることに注意してください。デフォルトは左側の線からの距離です。属性 dir="rtl" が設定されている場合、コンテンツから右側の行までの距離を参照します。
cellspacing: セル間の距離 (余白) (ピクセル単位)。デフォルト値は 0 です。
bgcolor="#99cc66": テーブルの背景色。
background="path src/...": 背景画像。
- 背景画像は背景色よりも優先されます。
bordercolorlight: テーブルの上部と左の境界線、およびセルの右側と下部の境界線の色
bordercolordark: テーブルの右側と下部の境界線、およびセルの上部と左側の境界線の色
- これら 2 つのプロパティ3D効果を設定することです。
dir: public 属性、セルの内容の配置 (方向)。 可能な値: ltr: 左から右 (デフォルト)、rtl: 右から左
- dir は共有属性であるため、この属性を任意のラベルに配置すると、このラベルが右から開始して配置される可能性があることを意味します。
セルの境界線の効果:
: 行
属性:- dir:共有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)
- bgcolor:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。:单元格 属性:
- align:内容的横向对齐方式。属性值可以填:left right center。
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。- valign:内容的纵向对齐方式。属性值可以填:top middle bottom
- width:绝对值或者相对值(%)
- height:单元格的高度
- bgcolor:设置这个单元格的背景色。
- background:设置这个单元格的背景图片。
单元格的合并
如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:- colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
- rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
效果举例:(横向合并)效果举例:(纵向合并)
:加粗的单元格。相当于 + - 属性同
标签。 :表格的标题。使用时和tr标签并列 - 属性:align,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom
效果:表格的标签、标签、标签
这三个标签有与没有的区别:
- 1、如果写了,那么这三个部分的代码顺序可以任意,浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- 2、当表格非常大内容非常多的时候,如果用thead、tbody、tfoot标签的话,那么数据可以边获取边显示。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。
举例:
<body> <table border="1"> <tbody> <tr> <td>生命壹号</td> <td>23</td> <td>男</td> <td>黄冈</td> </tr> </tbody> <tfoot> <tr> <td>许嵩</td> <td>29</td> <td>男</td> <td>安徽</td> </tr> </tfoot> <thead> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </thead> </table> </body>
ログイン後にコピー效果:
框架标签
如果我们希望在一个网页中显示多个页面,那框架标签就派上用场了。
- 注意,框架标签不能放在标签里面,因为标签代表的只是一个页面,而框架标签代表的是多个页面。
- 框架的集合用
:框架的集合 一个框架的集合可以包含多个框架或框架的集合。
属性:rows:水平分割,将框架分为上下部分。写法有两种:
1、绝对值写法:rows="200,*" 其中*代表剩余的。这里其实包含了两个框架:上面的框架占200个像素,下面的框架占剩下的部分。
2、相对值写法:rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架:上面的框架占30%,下面的框架占70%。
注:如果你想将框架分成很多行,在属性值里用逗号隔开就行了。cols:垂直分割,将框架分为左右部分。写法有两种:
1、绝对值写法:cols="200,*" 其中*代表剩余的。这里其实包含了两个框架:左边的框架占200个像素,右边的框架占剩下的部分。
2、相对值写法:cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架:左边的框架占30%,右边的框架占70%。
注:如果你想将框架分成很多列,在属性值里用逗号隔开就行了。效果:
上图中,如果删掉页面right.html,显示效果如下:
:框架
一个框架显示一个页面。
属性:- scrolling="no":是否需要滚动条。默认值是true。
- noresize:不可以改变框架大小。默认情况下,单个框架的边界是可以拖动的,这样的话,框架大小就不固定了。如果用了这个属性值,框架大小将固定。
举例:
<frame src="top.html" noresize></frame>
ログイン後にコピー- bordercolor="#00FF00":给框架的边框定义颜色。这个属性在框架集合
中同样适用。
颜色这个属性在IE浏览器中生效,但是在google浏览器中无效,不知道为啥。frameborder="0"或frameborder="1":隐藏或显示边框。
name:给框架起一个名字。
利用name这个属性,我们可以在框架里进行超链。
举例:效果:
内嵌框架
内嵌框架用
- src="subframe/the_second.html":内嵌的那个页面
- width=800:宽度
- height=“150:高度
- scrolling="no":是否需要滚动条。默认值是true。
- name="mainFrame":窗口名称。公有属性。
效果:
内嵌框架举例:(在内嵌页面中切换显示不同的压面)
<body> <a href="文字页面.html" target="myframe">默认显示文字页面</a><br> <a href="图片页面.html" target="myframe">点击进入图片页面</a><br> <a href="表格页面.html" target="myframe">点击进入表格页面</a><br> <iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe> <br> 嘿嘿 </body>
ログイン後にコピー效果演示:
表单标签
表单标签用
- セルの内容から四辺までの距離ではなく、一辺までの距離であることに注意してください。デフォルトは左側の線からの距離です。属性 dir="rtl" が設定されている場合、コンテンツから右側の行までの距離を参照します。
- 内の
例:
<ol type="1"> <li>呵呵</li> <li>呵呵</li> <li>呵呵</li></ol><ol type="a"> <li>嘿嘿</li> <li>嘿嘿</li> <li>呵呵</li></ol><ol type="i" start="4"> <li>哈哈</li> <li>哈哈</li> <li>哈哈</li></ol><ol type="I" start="10"> <li>么么</li> <li>么么</li> <li>么么</li></ol>
効果は次のとおりです:
3. 定義リスト
英語の単語: 定義リスト、属性なし。
例:
<dl> <dt>第一条</dt> <dd>你若是觉得你有实力和我玩,良辰不介意奉陪到底</dd> <dd>我会让你明白,我从不说空话</dd> <dd>我是本地的,我有一百种方式让你呆不下去;而你,无可奈何</dd> <dt>第二条</dt> <dd>良辰最喜欢对那些自认能力出众的人出手</dd> <dd>你可以继续我行我素,不过,你的日子不会很舒心</dd> <dd>你只要记住,我叫叶良辰</dd> <dd>不介意陪你玩玩</dd> <dd>良辰必有重谢</dd></dl>
効果:
テーブルラベル
テーブルラベルは次のように表されます<テーブル>。
テーブル
で構成されます。 したがって、テーブルは行と列ではなく、行で構成されている (行は列で構成されている) ことを覚えておく必要があります。 以前は、ラベルの位置を修正する唯一の方法はテーブルを使用することでした。これは、CSS の位置決め機能によって実現できるようになりました。しかし、現在でもページを作成するとき、テーブルにはいくつかの機能があります。 たとえば、セルの行: <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> ログイン後にコピー 上の表にはテキストが追加されていないため、生成された Web ページには何も表示されません。 <table> <tr> <td>生命壹号</td> <td>23</td> <td>男</td> <td>黄冈</td> </tr> <tr> <td>许嵩</td> <td>29</td> <td>男</td> <td>安徽</td> </tr> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </table> ログイン後にコピー 効果: 上の図の表には枠線がないようです。心配しないで、の属性を見てみましょう。 <テーブル>タグ。 |