検索
ホームページウェブフロントエンドhtmlチュートリアル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:
      • テーブルの配置。属性値は左、右、中央に入力できます。 注: これはテーブル内のコンテンツの配置を設定するものではありません。コンテンツの配置を設定したい場合は、セルのラベルを設定する必要があります
      • : 行

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


        属性:

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

      • 属性: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>

        效果演示:

        表单标签

        表单标签用

        表示,用于与服务器的交互。

        :输入标签

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

      • 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,可以省略。

      • 举例:

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

        效果:

      • multiple:可以对下拉列表中的选项进行多选。没有属性值。
      • size="3":如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
      • 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>

        效果:

        标签:多行文本输入框

        属性:

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

        效果:

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

        多媒体标签

        标签:播放背景音乐

        属性:

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

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

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

        标签:播放多媒体文件(音频、视频等)

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

        属性:

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

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

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

      • 举例:

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

        效果:

        )

        cellpadding: セルからの距離。コンテンツを端までピクセル単位で表示します。デフォルトでは、テキストは左側の行の隣にあります。つまり、デフォルト値は 0 です。
      • セルの内容から四辺までの距離ではなく、一辺までの距離であることに注意してください。デフォルトは左側の線からの距離です。属性 dir="rtl" が設定されている場合、コンテンツから右側の行までの距離を参照します。

      • cellspacing: セル間の距離 (余白) (ピクセル単位)。デフォルト値は 0 です。

      • bgcolor="#99cc66": テーブルの背景色。

      • background="path src/...": 背景画像。
      • 背景画像は背景色よりも優先されます。

      • bordercolorlight: テーブルの上部と左の境界線、およびセルの右側と下部の境界線の色

      • bordercolordark: テーブルの右側と下部の境界線、およびセルの上部と左側の境界線の色
      • これら 2 つのプロパティ3D効果を設定することです。

      • dir: public 属性、セルの内容の配置 (方向)。 可能な値: ltr: 左から右 (デフォルト)、rtl: 右から左
      • dir は共有属性であるため、この属性を任意のラベルに配置すると、このラベルが右から開始して配置される可能性があることを意味します。
      • セルの境界線の効果:

        :单元格

        属性:

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

      • 单元格的合并

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

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

        :加粗的单元格。相当于 +
      • 属性同
      • 标签。


        :表格的标题。使用时和tr标签并列
    声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    HTMLを超えて:Web開発のための重要なテクノロジーHTMLを超えて:Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

    強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

    HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

    ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

    HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

    HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

    HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

    HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

    マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

    HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

    HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

    HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

    HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

    Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

    HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

    HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

    See all articles

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    VSCode Windows 64 ビットのダウンロード

    VSCode Windows 64 ビットのダウンロード

    Microsoft によって発売された無料で強力な IDE エディター

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

    AtomエディタMac版ダウンロード

    AtomエディタMac版ダウンロード

    最も人気のあるオープンソースエディター

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    mPDF

    mPDF

    mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。