簡単なWeb.ページの表現

タグについて

2012年

1月16日随時更新

次に勉強する順は興味をもった以下です左画面に学んだことをアップしましたご参考にご覧ください。
<ol type="1">は何かわからない。
<ol>タグはOrdered Listの略で、順序のあるリストを表示する際に使用します。
<ol type="1">で番号順Ａ順ローマ数字ii順で変換できます大文字や子文字。タグ記号をプラウザ表示するには <は＆lt;　>は＆gt; と記述する

ソースコードは「プログラミング言語などの人間が理解・記述しやすい言語」、
実際使用例は以下の通り

 
      <ol type="1"> 
           <li value="1"><b>タグ</li>
           <li><i>タグ</li>
           <li><ins>タグ</li>
           <li><small>タグ</li>
           <li>特殊タグ</li>
      </ol>

番号順に説明すると（<li>タグで囲まれたタグのこと）

1、太字のbタグ以外にも、 emの他 strongなど　の強調するタグがある。

２、文字を斜体で表示させるには i タグを設定します。

３、文字に下線を引く作業させるにはinsタグを設定します。

４、文字の大きさを注釈で小さくするにはsmallタグを指令します。

５、特殊記号&；など文字コード設定する、< > "⁢ ©　&cop; ≪ ≫ &133; &;

特殊文字の表示 Site for Ref.

<input type="date">タグについて

次に勉強する順序は、空白恐怖症ではないが人生長くないので、順序無視で興味をもった。タグから

プラウザで表示が異なる<input type="date">タグを書いてみた.2021-11@canape2021

caniuse.comで調べるとinput dateと入れ赤がダメなプラウザ、他にMDNで互換性を調べる

　　　 caniuse.comは、ウェブ開発者が特定のウェブ技術や機能が異なるウェブブラウザーでどの程度サポートされているかを調べるためのウェブサイトです。このサイトでは、HTML、CSS、JavaScript、APIなどのさまざまな技術や機能について、各ブラウザーでのサポート状況をリスト化しています。例えば、ある新しいCSSプロパティやJavaScriptのメソッドが追加された場合、それがどのブラウザーでサポートされているかどうか、またどのバージョンからサポートされているかなどの情報を見ることができます。これにより、開発者はコードを書く際に、クロスブラウザーの互換性を考慮することができます。 caniuse.comは、ウェブ開発者コミュニティに広く利用されており、最新のウェブ技術がどの程度普及しているかを把握するのに役立ちます。

マークアップ

[markup]という語は指示を伝える方法を意味していたらしいが誘導みたいな感じか？
HTMLでは、<このように> 山括弧で囲ったタグにより、要素をマークアップする
ランダム画像見出しを作りたい

headerマークアップについて

タイトルとイメージ（無料画像素材）
Unsplash Sourceのrandam／50エックスと書く
img src="https://source.unsplash.com/random/50x50" alt=""

img src="https://source.unsplash.com/user/bady/50x50" alt=""

サイトの検索欄内に?{food},{red}などと入れる

headerにはほかに
<nav>タグ <ul>タグ
<li>タグ中に
<a href="#">ホーム</a>それぞのページ飛ぶなどのタグを入れると便利かな。

mainマークアップについてブロブの場合
<article><hearder><h1>titleなど
<time datetime="2020-1-1">2021-1-1</time>
ほかに<div><p>
footerマークアップには<small>@ example .com など著作権　他を書く

Canape内で関連サイト

こんなタグを使ってみようww2019.starfree
<article><dl><dfn><abbr><i><figure><nav>
<lang=""><label><fieldset><egend>

HTML-onclick属性やリンクタグを学ぶww2019.starfree/header2a
コードは
<div id="text-button" onclick="location.href='　URL　'">Click</div>です

ifameタグとはcanape2020.stars

かんたんHTML特殊文字が調べられる変換ツール

コード	表示	コード	表示	コード	表示	コード	表示
＆lt;	<	＆gt;	>	＆quot;	"	＆amp;	&
＆#8810;	≪	＆#8811;	≫	＆#133;	…	＆hearts;	♥

コード	表示
＆copy;	©
＆diams;	♦

"http://www.htmq.com/text/"

: nbsp; 通常の半角スペースと同じサイズの空白です。; 文字列の「な」と「は」間に挿入した; 【使用例】あかさたなはまやらわ
: esnp; 半角スペースより少し広めの空白です。; 【使用例】あかさたなはまやらわ
: emsp; 半角スペースよりさらに広めの空白です。全角スペースとほぼ同じ幅です。; 【使用例】あかさたなはまやらわ
: thinsp; より狭い空白です。; 【使用例】あかさたなはまやらわ
の他にも空白を表す特殊文字があります。: preタグを使えば、HTMLに記述された半角スペースや改行などをブラウザにそのまま表示することができます; 全角スペースを使って連続してスペースを空ける方法; 【使用例】あかさたな　はまやらわ

は本来、「挿入した箇所の前後の改行を禁止する」

    
-- コード --    
<dl>
<dt><dfn> </dfn></dt>
   <dd class="yomi">nbsp</dd>
   <dd>通常の半角スペースと同じサイズの空白です。</dd>
   <dd>文字列の「な」と「は」間に挿入した</dd>
   <dd class="rei">【使用例】あかさたな<<<b> </b>はまやらわ</dd>    
</dl>

参考サイトReference site