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

ホームページ  >  記事  >  ウェブフロントエンド  >  htmlタグを本来の意味に戻す_html/css_WEB-ITnose

htmlタグを本来の意味に戻す_html/css_WEB-ITnose

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

正直に言うと、「div+css」という言葉は多くの人を傷つけてきました。提案者の本来の意図は間違っていないかもしれませんが、フォロワーはその意味を誤解し、ページ全体を div+ にするべきだと考えました。 cssファイルの組み合わせです。これを行うと、以前に設計されたページ レンダリングが復元されるため、視覚的な影響はありませんが、この HTML ドキュメントが分析のためにマシン (スパイダーなど) に渡されると、重要なポイントをまったく見つけることができない可能性があります。たとえば、それはシロアリの巣のようなもので、最初に行う必要があるのは、同じものを削除してからコンテンツをフィルタリングすることです。

検索エンジンの発達により、インターネット業界に「SEO」という職業が誕生しました。そのため、ほとんどすべての「SEO」は、タイトルを作成することに加えて、キーワードの調査にその「技術的核」を置きます。 、キーワード、説明、そして文書全体には、検索エンジンが興味を持ちそうなキーワードがたくさんあります。画像の alt 属性やテキストコンテナの title 属性さえも「キーワード」です このような一見完璧な「seo技術」は、次の2つの重要なポイントを無視していることがよくあります: 1. htmlタグの定義。 2. ページを合理化します。前者は検索エンジンがページ全体の「意味」を「理解」できるようになり、後者はアクセス速度が向上しサーバー負荷が軽減されます。残念なことに、「SEO」担当者は HTML と読み込みを理解していないことが多く、コードを書く人は「SEO テクノロジー」を理解していないことが多く、これがキャリアの大きなボトルネックとなり、すぐに成功したいという心理を引き起こす可能性があります。この 2 つの職業は、手っ取り早く利益を得るために作られています。互いに学ぶことはなく、それぞれが独自のことを行っています。私の開発経験では、 と を除いて、残りはすべて

であるように見えます。 10,000 の無関係なコンテンツで構成されています); また、ページ全体が
  • として構造化されていることに遭遇しました (私の理解では、このページのすべての要素はリストです)。実際、これら 2 つの状況は非常に一般的です。「div+css」の本当の意味が誤解されているため、div+css だけで完全なページを完成させることはほぼ不可能であるため、そのような用語は存在すべきではないのかもしれません。この用語の本来の意味 「html + css を divs で割ったもの」ということになると思いますが、「html + css」と言った方が確実だと思いますが、これでは「フローレイアウト」の「人気」が反映されません…。本当に面倒です。

    HTML タグには 50 種類以上あります。詳細については、第 4 章を参照してください。一般的に使用される HTML タグ (form タグを除く) には、主に次のようなものがあります:

    div、ul、ol、li、dl、dt、dd、p。 、span、h1-h6、label、em、strong、img、a、u、b、i、s...

    それらの定義を述べてからグループに分ける必要があると思います。私よりも科学的ですが、私ほど理解するのは簡単ではありません:

    div: 分割 (分離、分割、区別、割り当て、分割線)、タグはドキュメントを独立した異なる部分に分割できます。ブロックレベル要素の代表として、決まった形式がないため、現在最も悪用されています。

    ul:unordered list (順序なしリスト) は li 要素と結合してグループを形成します。

    ol:owned list (順序付きリスト) は li 要素と結合してグループを形成します。

    li: リスト項目 (リスト項目) は親の ul または ol コンテナー内にある必要があります。これは自分で追加する必要があります。 w3c は次のように述べています:

    この要素が使用できるコンテキスト: 要素内。リスト (定義リスト) は、dt (定義用語によって定義される項目) と dd (定義記述によって定義される説明) を含むグループに結合されます。

    p:paragraph (段落) は、記事の段落を格納するために使用されます。

    span: スパン (範囲) タグは、ドキュメント内のセクションのコンテンツを結合するために使用されます。インライン要素としては、固定フォーマットがないため、現在悪用されることが増えています。

    h6: head (タイトル 1 からタイトル 6)。ここでの head は、 タグとは異なる意味を表しており、 とは何の関係もないと考えてください。 。これは、ドキュメントの内容を強調するタイトルにすぎません。 </p> <p>検索エンジンは、ページ内に h タグがあることを検出すると、その中のコンテンツがより重要であるとみなし、重要度は 1 から 6 まで徐々に低下することに注意してください。 </p> <p>label:label (フォーム コントロールのラベル)、その名前は label と呼ばれますが、ここでは、w3c によって与えられた定義は、フォームの説明として使用されることです。たとえば、これを の前後に追加します。入力ラベル。 </p> <p>em: 強調 (強調、強調)、含まれるテキストを強調します。デフォルトのスタイルは斜体です。表示効果は <i> タグに似ていますが、検索エンジンは w3c によって与えられた定義を尊重し、表示効果を無視する傾向があるため、これらが同じであるとは考えられません。 </p> <p>strong:strong (強調、強調)、含まれるテキストを強調します。デフォルトのスタイルは太字です。 emよりも強調効果が少し強いです。 <b> タグにも太字の表示効果がありますが、同じ理由で検索エンジンはこれらを同じものとはみなしません。 </p> <p>img:image (picture, image); </p> <p>a:anchor (アンカー) はハイパーリンクに基本的なチェーンを作成します。 </p> <p>u: アンダーライン (テキストの下線)、まもなく廃止されます。 </p> <p>s/strike: 取り消し線、テキスト全体に線を引きます。 </p> <p>表示スタイルに従って: </p> <p>ブロックレベル要素またはブロック要素 (デフォルトのスタイルはブロック) タグは次のとおりです: </p> <p>div,ul,ol,li,p,dl,dt,dd, h1-h6.. </p> <p>デフォルトでは、それらは独自の行を占有します。スタイルで変更しない限り。 </p> <p>インライン要素（デフォルトのスタイルはインラインですが、「インライン要素」と呼んだほうがわかりやすいと思います）のラベルは次のとおりです: </p> <p>span,label,em,strong,img,a,u,b,i, s...</p> <p> デフォルトでは、display:block などの特定のスタイルを追加すると、他の要素と 1 行に共存します。ただし、ここで事前に言及しておく必要があるのは、すべての display:block が 1 行を占有する必要はないということです。幅があり、float を押し込みとして使用すると、他の要素とともに 1 行に押し込まれます。 </p> <p>組み合わせによる分割: </p> <p>固定グループ: </p> <p>ul--li</p> <p>ol--li</p> <p>dl--dt--dd</p> <p>分散した個人: </p> <p>その他...</p> <p>準備が必要 いくつかの説明: </p> <p>1. インライン要素自体は「フレーム化」されていません。つまり、そのサイズはブロックレベルの要素になる前に、幅と高さの制御が役に立ちません。ブロックレベル要素になる方法: 1. display:block (行全体を直接占有します) 2. float は行全体を占有しませんが、幅または高さを制御できます。 </p> <p>2. 含めたりネストしたりできない一部の要素 (w3c からコピー): </p> <p>a: 他の a タグを含めることはできません。 </p> <p>他の a 要素を含めることはできません。</p> <p>pre: (事前にフォーマットされた定義済みフォーマット (テキスト)) には、img、object、big、small、sub、または sup 要素を含めることはできません</p> <p> img、object、big、small 、 sub 要素、または sup 要素。</p> <p>button ボタンには、input、select、textarea、label、button、form、fieldset、iframe または isindex 要素を含めることはできません。</p> <p> input、select、textarea、label、button、form を含めることはできませんfieldset、iframe、または isindex 要素。</p> <p>label には他の label 要素を含めることはできません。</p> <p>form には他の form 要素を含めることはできません。 </p> <p></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="Stylus を使用すると、CSS プレフィックスの実装と CSS_html/css_WEB-ITnose のリセットが簡単になります" href="http://m.php.cn/ja/faq/272938.html">Stylus を使用すると、CSS プレフィックスの実装と CSS_html/css_WEB-ITnose のリセットが簡単になります</a></span><span>次の記事：<a class="dBlack" title="Stylus を使用すると、CSS プレフィックスの実装と CSS_html/css_WEB-ITnose のリセットが簡単になります" href="http://m.php.cn/ja/faq/272940.html">Stylus を使用すると、CSS プレフィックスの実装と CSS_html/css_WEB-ITnose のリセットが簡単になります</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>