ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの知識のまとめ

HTMLの知識のまとめ

怪我咯
怪我咯オリジナル
2017-01-16 11:51:021325ブラウズ

1. 新しいページにジャンプします:

target="_self" はジャンプしません

form にジャンプしますフォーム送信 設定に移動します

2. ボタンをクリックして別のページをポップアップし、

onclick="return false" を追加します

3. 表示: ブロック; ブロックレベルの要素、つまり、div 要素、p 要素などの 1 行を占めることができます。これは、行レベルの要素としても設定される要素を作成できることを意味します。これは、ナビゲーション メニューを作成し、各メニュー項目を行レベルの要素として設定するのに適しています。 。その幅と高さのデフォルトはコンテンツの幅と高さであり、典型的な要素はフォーム クラス要素です。 dispaly: inline。行レベルの要素、幅と高さは設定できません。典型的な例は、span、

4、html マウスハンド:

cursor:pointer; です。

5、html 背景画像属性:

background-size:100%; ただし、画像の幅と高さは 100% に設定する必要があります。 php ファイルは使いにくく、機能しません。Web サイトの絶対パスを使用する必要があります。background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url( "11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

これはページに背景を追加する本文です{padding: 0px; margin: 0px;background-color:#494949;width:100%;height: 100%;}.

背景画像を設定するときに、background-image:url("") 属性を使用して背景を設定することもできます。ただし、画像は gif 形式である必要があります

6. 出力モードに応じて表示しますテキスト形式:
水平線:
Double引用符 タグ 下線

7, html-- -position/relative/absolute/fixed/ 3 つのレイアウト配置方法の概要: 相対はそれ自体に基づき、絶対はブラウザに基づきますが、親要素がある場合は、親レベル要素に基づいて位置が変更されることに注意してください。

8. 順序なしリスト li{list-style:none;} の前の黒い点を削除します

9. 非表示要素 - display:none または Visibility:hidden

display - 設定後のこの要素現在のスペースを占有しませんが、レイアウトには影響しませんが、後者は非表示にした後もスペースを占有します

10. HTML 非表示冗長

Div{overflow:hidden}

10. Hideadaptive: overflow:auto;

11. フレームの問題について

これは表示したいページを受け入れるためのものです

indx.phpはフレームで表示されるページで、一番上、つまり表示するボタンがありません

これは、クリック後に表示したい場所です: target =""

カテゴリを追加

12. 背景の高さの問題について、つまり、div を定義しましたが、それを実行するために実行しませんでした。上の図が上の図です。そして、この属性があります

overflow:hidden;

つまり、親要素に属しますが、floatがテキストから分離されてフローティングになるため、親要素と子要素のスペースが使用されなくなります。この overflow:hidden を親に追加します

追加:

次に、ジャンプしたいページへのリンクを追加します。
アンカーを見つけます

14. クリックして確認コードの画像を変更します

15. 角丸

ボーダー-radius:5px;

16. textareaの左テキストは一番左にあります

17. HTMLブロック要素とインライン要素のまとめ、ブロックマージンは可能です。シェイプされた要素に設定されますが、マージンを使用する場合は次の条件に従う必要があります: 1. ブロック要素、2. 幅と高さがある インライン要素ではマージン、幅、高さの属性を設定できず、パディングのみを設定します

ブロック要素のリスト:

アドレスを定義します

定義リストのエントリを定義します

ドキュメント内のパーティションまたはセクションを定義します

< ;dl>リストを定義します

リスト内の項目を定義します

<フィールドセット>フレームセットを定義します

<フォーム>HTMLフォームを作成します

最大のタイトルを定義します

< h2> サブタイトルを定義します

タイトルを定義します

水平線を作成します

< ;legend> 要素は

要素の定義を定義します

はフレームをサポートしないブラウザ用のテキストを表示します <br> <br><noscript>スクリプトが実行されない場合の代替コンテンツを定義します<br><br><ol>順序付きリストを定義します<br><br><ul>順序なしリストを定義します<br><br><p>タグ定義段落<br><br><pre class="brush:php;toolbar:false">事前フォーマットを定義しますテキスト <br><br><table> HTML テーブルを定義します <br><br><tbody> テーブルの標準セル <br><br><tfoot>またはテーブル 注) <br><br><th> ヘッダセルを定義します <br><br><thead> テーブルのヘッダを定義します <br><br><tr> インライン要素のリストを定義します <br><br><a> ; ラベル 定義可能なアンカー <br><br><頭字語> 頭字語のみを定義します <br><br><bdo> ;大太字<br><br><br>改行<br><br><cite>定義する引用<br><br><code>定義コンピュータコードテキスト</p> <h2><dfn>定義項目を定義</h2> <p><em>定義 画像を埋め込む<br> <br><input> 入力ボックス <br><br><kbd> 強調用のコールアウト (タグ) を定義 <br><br><q>それ;samp> サンプルテキストを定義します <br><br><select> 単一または複数選択のメニューを作成します <br><br><span> ドキュメント内のインライン要素を結合します <br><br><strong>コンテンツ上で <br><br><sub> 下付きテキストを定義します <br><br><sup> 上付きテキストを定義します <br><br><textarea> 複数行のテキスト入力コントロール <br><br><tt> タイプライターまたは固定幅のテキスト効果 <br><br> <var> ;変数を定義する<br><br></strong></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="HTMLParserの使い方を詳しく解説(3)" href="http://m.php.cn/ja/faq/347360.html">HTMLParserの使い方を詳しく解説(3)</a></span><span>次の記事:<a class="dBlack" title="HTMLParserの使い方を詳しく解説(3)" href="http://m.php.cn/ja/faq/348804.html">HTMLParserの使い方を詳しく解説(3)</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>