HTMLタグを画像と文字で詳しく解説(2)_html/css_WEB-ITnose

HTML タグの非常に詳細なグラフィックとテキストのデモンストレーションがまた続きます~~~

昨日のメリットをまだ見ていない場合は、急いでください。ポータル: HTML タグ ----詳細なグラフィックとテキストの説明

この記事の主な内容 リストタグ テーブルタグ フレームタグとインラインフレーム フォームタグとセマンティクス マルチメディアタグ リストタグ(リストタグ) リストタグのポイントそこにの3種類です。

1. 順序なしリスト 、順序なしリストの各項目は 英語の単語: un list。 例:

默认1 默认2 默认3 ログイン後にコピー 効果:

属性:

type="属性値"。属性値は、disc (実線の原点、デフォルト)、square (実線の四角点)、circle (中空の円) から選択できます。 その効果は次のとおりです:

タグに type 属性があるだけでなく、 内の タグにも type 属性があります (この書き方はまれですが)。 ）。効果は次のとおりです:

2. 順序付きリスト 、その中の各項目は 英語の単語: Order List。 例:

呵呵哒1 呵呵哒2 呵呵哒3 ログイン後にコピー 効果:

属性:

type="属性値"。属性値は、1 (アラビア数字、デフォルト)、a、A、i、I です。 start 属性と組み合わせて、開始点を示します。 例:

呵呵 呵呵 呵呵 嘿嘿 嘿嘿 呵呵 哈哈 哈哈 哈哈 么么 么么 么么 ログイン後にコピー 効果は次のとおりです:

3. 定義リスト 英語の単語: 定義リスト、属性なし。

: リストのタイトル、title を定義します : リストのリスト項目 例:

第一条 你若是觉得你有实力和我玩，良辰不介意奉陪到底 我会让你明白，我从不说空话 我是本地的，我有一百种方式让你呆不下去；而你，无可奈何 第二条 良辰最喜欢对那些自认能力出众的人出手 你可以继续我行我素，不过，你的日子不会很舒心 你只要记住，我叫叶良辰 不介意陪你玩玩 良辰必有重谢 ログイン後にコピー 効果:

テーブルラベル テーブルラベルは次のように表されます 。 テーブル は各行 で構成され、各行は で構成されます。 したがって、テーブルは行と列ではなく、行で構成されている (行は列で構成されている) ことを覚えておく必要があります。 以前は、ラベルの位置を修正する唯一の方法はテーブルを使用することでした。これは、CSS の位置決め機能によって実現できるようになりました。しかし、現在でもページを作成するとき、テーブルにはいくつかの機能があります。

たとえば、セルの行:

ログイン後にコピー 上の表にはテキストが追加されていないため、生成された Web ページには何も表示されません。 たとえば、3 行 4 列のセル:

生命壹号 23 男 黄冈 许嵩 29 男 安徽 邓紫棋 23 女 香港 ログイン後にコピー 効果:

上の図の表には枠線がないようです。心配しないで、の属性を見てみましょう。 タグ。

属性:

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标签的话，那么 数据可以边获取边显示 。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。 举例：

生命壹号 23 男 黄冈 许嵩 29 男 安徽 邓紫棋 23 女 香港 ログイン後にコピー 效果：

框架标签 如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。

注意，框架标签不能放在 标签里面，因为 标签代表的只是一个页面，而框架标签代表的是多个页面。 框架的集合用 表示，然后在 集合里放入一个一个的框架 ：框架的集合 一个框架的集合可以包含多个框架或框架的集合。 属性：

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：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。 举例：

ログイン後にコピー bordercolor="#00FF00"：给框架的边框定义颜色。这个属性在框架集合 中同样适用。 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。 frameborder="0"或frameborder="1"：隐藏或显示边框。

name：给框架起一个名字。 利用name这个属性，我们可以在框架里进行超链。 举例：

效果：

内嵌框架 内嵌框架用 表示。 内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂时我不清楚)。 属性：

src="subframe/the_second.html"：内嵌的那个页面 width=800：宽度 height=“150：高度 scrolling="no"：是否需要滚动条。默认值是true。 name="mainFrame"：窗口名称。公有属性。 效果：

内嵌框架举例：（在内嵌页面中切换显示不同的压面）

默认显示文字页面 点击进入图片页面 点击进入表格页面 嘿嘿 ログイン後にコピー 效果演示：

表单标签 表单标签用 表示，用于与服务器的交互。

：输入标签 用于接收用户输入。 属性：

type="属性值" ：文本类型。属性值可以是： text（默认） password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选 checkbox：多选按钮，名字相同的按钮作为一组进行选择 hidden：隐藏框，在表单中包含不希望用户看见的信息 button：普通按钮，结合js代码进行使用。 submit：提交按钮，传送当前表单的数据给服务器或其他程序处理 reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 file：文件选择框

value="内容" ：文本框里面的内容 size="50"：表示文本框内可以显示 五十个字符 。一个英文或一个中文都算一个字符。 注意 size属性值的单位不是像素哦 。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。 checked：将单选按钮或多选按钮默认处于选中状态。当 标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。

举例：

姓名： 逗比 昵称： 名字： 密码： 性别： 男 女 爱好： 吃饭 睡觉 打豆豆 ログイン後にコピー 效果：

四种按钮的举例：

ログイン後にコピー 效果：

：下拉列表标签 标签里面的每一项用 表示。

标签的属性：

multiple：可以对下拉列表中的选项进行多选。没有属性值。 size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。 标签的属性：

selected：预选中。没有属性值。 举例：

小学 初中 高中 大学 研究生

ログイン後にコピー 效果：

标签：多行文本输入框 属性：

value：提交给服务器的值。 rows="4"：指定文本区域的行数。 cols="20"：指定文本区域的列数。 readonly：只读。 举例：

1、不爱摄影不懂设计的程序猿不是一个好的产品经理。 ログイン後にコピー 效果：

上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。

表单的语义化 比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。 举例：

账号信息 姓名： 逗比 密码： 其他信息 性别： 男 女 爱好： 吃饭 睡觉 打豆豆 ログイン後にコピー 效果：

标签：for属性配合id一起用形成标注。暂略。 多媒体标签 标签：播放背景音乐 属性：

src="音乐文件的路径" loop="-1"：属性值代表播放次数，-1代表循环播放。 举例：

ログイン後にコピー 运行效果： 打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。

标签：播放多媒体文件（音频、视频等） 备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

属性：

src="多媒体文件的路径" loop="-1"：属性值代表播放次数，-1代表循环播放。 autostart="false"：打开网页时，禁止自动播放。默认值是true。 volume="100"：设置默认的音量大小，测试发现这个值好像不起作用哦。 标签播放音频举例：

ログイン後にコピー IE 8中的运行效果：

google浏览器中的运行效果：

注：在HTML5中新增了 标签播放视频。

：移动标签 如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。 属性：

direction="right"：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。

behavior="slide"：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）、。 alternate和scroll属性值都是循环移动，区别在于：假设在direction="right"的情况下，behavior="scroll"表示从左到右、从左到右、从左到右···behavior="alternate"表示从左到右、从右到左、从左到右···

scrollamount="30"：移动的速度 loop="3": 循环多少圈。负值表示无限循环 scrolldelay="1000"：移动一次休息多长时间。单位是毫秒。

举例：

我来了 ログイン後にコピー 效果：