简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLタグを画像と文字で詳しく解説(2)_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:35:58996ブラウズ

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

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

この記事の主な内容

  • リストタグ
  • テーブルタグ
  • フレームタグとインラインフレーム763ae25ebcdd258086cdf17e13ad75cd、順序なしリストの各項目は25edfb22a4f469ecb59f1190150159c6

    英語の単語: un list。
    例: 

    <ul>	<li>默认1</li>	<li>默认2</li>	<li>默认3</li></ul>

    効果:

    属性:

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

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


    2. 順序付きリスト c82288867cc1587ebeab2ac62c9b98dd、その中の各項目は 25edfb22a4f469ecb59f1190150159c6

    英語の単語: 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. 定義リスト5c69336ffbc20d23018e48b396cdd57a

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

  • 73de882deff7a050a357292d0a1fca94: リストのタイトル、title を定義します
  • 67bc4f89d416b0b8236eaa5f43dee742: リストのリスト項目

    • 例: 

    <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>

    効果:

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

    f5d188ed2c074f8b944552db028f98a1 属性:

    border: 境界線。単位はピクセルです。

    • 幅: 幅。単位はピクセルです。

    • 高さ: 身長。単位はピクセルです。

    • align:
  • テーブルの配置。属性値は左、右、中央に入力できます。 注: これはテーブル内のコンテンツの配置を設定するものではありません。コンテンツの配置を設定したい場合は、セルのラベルを設定する必要があります 199d44e5503740e5cbf3ad224516a9fc: 行

    テーブルは行と行で構成されます。


    属性:

  • dir：共有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
  • bgcolor：设置这一行的单元格的背景色。
    注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。


    • b6c5a531a458a2e790c1fd6421739d1c：单元格

    属性：

  • align：内容的横向对齐方式。属性值可以填：left right center。
    如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
  • valign：内容的纵向对齐方式。属性值可以填：top middle bottom
  • width：绝对值或者相对值(%)
  • height：单元格的高度
  • bgcolor：设置这个单元格的背景色。
  • background：设置这个单元格的背景图片。


    • 单元格的合并

    如果要将两个单元格合并，那肯定就要删掉一个单元格。
    单元格的属性：

  • colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
  • rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
    效果举例：（横向合并）

    • 效果举例：（纵向合并）

    b4d429308760b6c2d20d6300079ed38e：加粗的单元格。相当于b6c5a531a458a2e790c1fd6421739d1c + a4b561c25d9afb9ac8dc4d70affff419

  • 属性同b6c5a531a458a2e790c1fd6421739d1c标签。


    • 63bd76834ec05ac1f4c0ebbeaafb0994：表格的标题。使用时和tr标签并列

  • 属性：align，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
    效果：

    • 表格的ae20bdd317918ca68efdc799512a9b39标签、92cee25da80fac49f6fb6eec5fd2c22a标签、06669983c3badb677f993a8c29d18845标签

    这三个标签有与没有的区别：

  • 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>

    效果：

    框架标签

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

  • 注意，框架标签不能放在6c04bd5ca3fcae76e30b72ad730ca86d标签里面，因为6c04bd5ca3fcae76e30b72ad730ca86d标签代表的只是一个页面，而框架标签代表的是多个页面。
  • 框架的集合用f900b4fc197b16ab214eecf015bb6bd2表示，然后在f900b4fc197b16ab214eecf015bb6bd2集合里放入一个一个的框架04a0d55efbbfd646a993fbc01f262c57

    • f900b4fc197b16ab214eecf015bb6bd2：框架的集合

    一个框架的集合可以包含多个框架或框架的集合。
    属性：

  • rows：水平分割，将框架分为上下部分。写法有两种：
    1、绝对值写法：rows="200,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
    2、相对值写法：rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
    注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。

  • cols：垂直分割，将框架分为左右部分。写法有两种：
    1、绝对值写法：cols="200,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
    2、相对值写法：cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
    注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。

    • 效果：

    上图中，如果删掉页面right.html，显示效果如下：

    04a0d55efbbfd646a993fbc01f262c57：框架

    一个框架显示一个页面。
    属性：

  • scrolling="no"：是否需要滚动条。默认值是true。
  • noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。

    • 举例：

    <frame src="top.html" noresize></frame>
  • bordercolor="#00FF00"：给框架的边框定义颜色。这个属性在框架集合f900b4fc197b16ab214eecf015bb6bd2中同样适用。
    颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。

  • frameborder="0"或frameborder="1"：隐藏或显示边框。

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

    • 效果：

    内嵌框架

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

  • 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>

    效果演示：

    表单标签

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

    d5fd7aea971a85678ba271703566ebfd：输入标签

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

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

  • value="内容"：文本框里面的内容
  • size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
    注意size属性值的单位不是像素哦。
  • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
    用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
  • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

  • checked：将单选按钮或多选按钮默认处于选中状态。当d5fd7aea971a85678ba271703566ebfd标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。

    • 举例：

    	<form>		姓名：<input value="呵呵" >逗比<br>		昵称：<input value="哈哈" readonly=""><br>		名字：<input type="text" value="name" disabled=""><br>		密码：<input type="password" value="pwd" size="50"><br>		性别：<input type="radio" name="gender" value="male" checked="">男 			  <input type="radio" name="gender" value="female" >女<br>		爱好：<input type="checkbox" name="love" value="eat">吃饭			  <input type="checkbox" name="love" value="sleep">睡觉			  <input type="checkbox" name="love" value="bat">打豆豆	</form>

    效果：

    四种按钮的举例：

    	<form>		<input type="button" value="普通按钮"><br>		<input type="submit"  value="提交按钮"><br>		<input type="reset" value="重置按钮"><br>		<input type="image" value="图片按钮1"><br>		<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>		<input type="file" value="文件选择框">	</form>

    效果：

    221f08282418e2996498697df914ce4e：下拉列表标签

    221f08282418e2996498697df914ce4e标签里面的每一项用5a07473c87748fb1bf73f23d45547ab8表示。

    221f08282418e2996498697df914ce4e标签的属性：

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

    • 5a07473c87748fb1bf73f23d45547ab8标签的属性：

  • selected：预选中。没有属性值。

    • 举例：

    	<form>		<select>			<option>小学</option>			<option>初中</option>			<option>高中</option>			<option>大学</option>			<option selected="">研究生</option>		</select>		<br><br><br>		<select size="3">			<option>小学</option>			<option>初中</option>			<option>高中</option>			<option>大学</option>			<option>研究生</option>		</select>		<br><br><br>		<select multiple="">			<option>小学</option>			<option>初中</option>			<option selected="">高中</option>			<option selected="">大学</option>			<option>研究生</option>		</select>		<br><br><br>	</form>

    效果：

    121108afe4a3f8d2e5201edfc1bd1f21标签：多行文本输入框

    属性：

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

    • 举例：

    	<form>		<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>	</form>

    效果：

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


    表单的语义化

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

    	<form>		<fieldset>		<legend>账号信息</legend>		姓名：<input value="呵呵" >逗比<br>		密码：<input type="password" value="pwd" size="50"><br>		</fieldset>		<fieldset>		<legend>其他信息</legend>		性别：<input type="radio" name="gender" value="male" checked="">男 			  <input type="radio" name="gender" value="female" >女<br>		爱好：<input type="checkbox" name="love" value="eat">吃饭			  <input type="checkbox" name="love" value="sleep">睡觉			  <input type="checkbox" name="love" value="bat">打豆豆		</fieldset>	</form>

    效果：

    17bc257102169cbee8e20a03c884d3e6标签：for属性配合id一起用形成标注。暂略。

    多媒体标签

    c13e0c5c6d6db5040172f3e526aa994e标签：播放背景音乐

    属性：

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

    • 举例：

     <body>	<bgsound src="王菲 - 清风徐来.mp3"></bgsound> </body>

    运行效果：
    打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。

    d8e2720730be5ddc9c2a3782839e8eb6标签：播放多媒体文件（音频、视频等）

    备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

    属性：

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

    • d8e2720730be5ddc9c2a3782839e8eb6标签播放音频举例：

     <body>	<embed src="王菲 - 清风徐来.mp3"></embed> </body>

    IE 8中的运行效果：

    google浏览器中的运行效果：

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

    ed126914ed1419bab26abf7cf307b7b9：移动标签

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

  • 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"：移动一次休息多长时间。单位是毫秒。

    • 举例：

    	<marquee behavior="alternate" direction="down"  width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>

    效果：
    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS は透明な背景と不透明なテキストを実現し、すべてのブラウザと互換性があります_html/css_WEB-ITnose次の記事：CSS は透明な背景と不透明なテキストを実現し、すべてのブラウザと互換性があります_html/css_WEB-ITnose

    関連記事

    続きを見る