テキスト内の改行を追加するのが適切な場所を指定します。 |
|
(1) ナビゲーション リンクを定義します
これは意味のあるラベルでもあり、単にこのラベルをどこかに追加するという意味ではありません。ナビゲーション スタイルでは、これはすべて意味があります。メニュー タグ
html コード:
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header>
ログイン後にコピー
cssコード:
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
}
ログイン後にコピー
このように、これまでp
(2)だけで行っていたメニューレイアウトが完成しました。 ) 記事タグを定義
記事ブロックタグを使って記事を書くことができるので、このタグを使ってセクション部分に記事を書きます。
よく使う
htmlコード:
<article><!--文章块p-->
<h2>文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article>
ログイン後にコピー
cssスタイル:
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}
ログイン後にコピー
この方法で記事を書くことができます
(3) メディア コンテンツのグループとそのタイトルを定義します<図>
A。このタグは、対応するタグ と組み合わせて使用できますが、タイトル
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure>
ログイン後にコピー
B は の中央に記述する必要があります。図キャプション>。 と組み合わせて使用することもできます。 はタイトルの書き込みに使用され、 はコンテンツの書き込みに使用されます。表示効果は次のとおりです。 use
<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure>
ログイン後にコピー
(4) ダイアログ ボックスまたはウィンドウを定義する
この中で dd タグと dt タグを使用することもできます。タグ、ダイアログ ボックスのタイトルと内容、ダイアログ ボックスの最初の属性は open であり、このタグの互換性はあまり良くありません
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog>
ログイン後にコピー
(5) コマンドのリストまたはメニューを定義します
A。このタグは li
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu>
ログイン後にコピー
B と一緒に使用できます。
<menu type="context" id="cai">
<!--label是右键后显示的菜单项,onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu>
ログイン後にコピー
<span contextmenu="cai">单击我试试</span>
ログイン後にコピー
を使用して、右クリック (Firefox とのみ互換) Union (ユーザーがポップアップ メニューから呼び出せるコマンド/メニュー項目を定義) タグに独自のコンテンツを追加できます。 右クリックすると、目的のメニュー項目が表示されます
#メニュー項目をクリックすると、コンテンツがポップアップ表示されます ##(6) タイトルグループ
一般的に使用するタイトルのいくつかの組み合わせを記述することができます
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup>
ログイン後にコピー
#(7) 小さなテキストを定義する
このタグは実際には他の太字のタグと似ています<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
ログイン後にコピー
( 8) 要素の詳細を定義します
内部のコンテンツはタイトルタグとコンテンツタグで使用できます<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details>
ログイン後にコピー
詳細をクリックしてタイトルとコンテンツを表示します
(9) ルビコメントの定義
知らない単語が出てきたらこの Annotate Pinyin を使用できますが、一部の互換性はあまり良くありません。その時点で変更できます<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见,不能兼容的时候让括号可见,rt是进行这是的内容-->
ログイン後にコピー
#(10) 事前定義された範囲内の測定値を定義します
min="" max="" value="" low="" high="" という複数の属性値があります。low と high は範囲です。値の範囲を超えると、異なる効果が表示されます。
<meter min="0" max="10" value="4" low="2" high="7">
ログイン後にコピー
値の値が範囲を超えた後
<meter min="0" max="10" value="8" low="2" high="7">
ログイン後にコピー
(11) 進捗状況のラベルbar