ホームページ  >  記事  >  ウェブフロントエンド  >  HTML テキストの属性

HTML テキストの属性

WBOY
WBOYオリジナル
2024-09-04 16:18:36823ブラウズ

HTML には、Web ページをよりユーザーフレンドリーに表示するためのいくつかの機能と、すべての HTML タグ要素の入れ子形式のような構造を含む HTML ドキュメントが含まれています。すでに見たように、すべてのタグ要素には、開始および終了山括弧 (<>、) が含まれています。すべての HTML 要素の拡張子は、開始タグと終了タグのようなタグのペアで示されます。 htmlテキスト。 HTML には、ユーザーの視点でカスタマイズされたレベルの Web ページを表示するためのタグが n 個あります。 Example

のような一部のタグ段落タグは、Web ページに表示されるテキストコンテンツに関して HTML ドキュメントの下に定義されます。

構文:

HTML には、HTML 内のテキスト属性用のタグが多数用意されています。要素タイプの修飾子もいくつかあります。

<html>
<head>
</head>
<body>
<strong> ---some text--</strong>
</body>
</html>

上記のコードは、HTML Web ページのテキスト属性の基本的な構文です。 「 など」のような他のテキスト属性も使用します。これらは、Web ページで使用する HTML の基本的なテキスト属性です。また、ユーザーの要件に基づいて、他のユーザー定義またはカスタマイズされたテキスト属性も使用します。

HTML テキスト属性の重要性

一般に、html 属性は、<> のような操作を実行するため、Web ドキュメント内の特別な種類の単語です。オープニングと html 属性で閉じます。 Web ページの属性パフォーマンスに基づいて要素の動作を制御します。また、テキストは、HTML 要素タイプの修飾子を、すべての HTML 要素タイプのデフォルト機能に記載される修飾子、または HTML に特定の機能を正しくまたは正しく実行できない特定の要素のタイプに機能を提供するかのいずれかに属性します。ウェブページ。

HTML ドキュメントの属性は、html 開始タグを使用して追加されます。また、「必須属性」などのいくつかの基本的な属性タイプの一部は、特定の要素タイプの機能が適切に動作するために特定の要素タイプで必要になります。 「オプション属性」と呼ばれる属性は、HTML 要素タイプのデフォルト機能を変更するために使用されます。 3 番目のタイプは「標準属性」のようなもので、多くの HTML タイプをサポートし、最後に「イベント属性」は、HTML 要素タイプを指定するために使用されます。特定の状況下で実行されるスクリプト。

一部の HTML 属性タイプの機能は、変更された HTML 要素タイプとは異なります。 html 属性は、名前と値のペアを呼び出します。それぞれを「=」記号で区切ります。また、html要素の名前と値をシングルクォートまたはダブルクォーテーションで囲んだ後のhtml要素の開始タグにも同様に記述します。また、特定の文字を含む値の一部は残ります。つまり、HTML から引用符が付けられなくなります。ただし、XHTML はサポートされていないため、一部の属性値は引用符で囲まれないままになります。 HTML ドキュメントからは安全でないとみなされる可能性があります。

ほとんどの HTML 要素は、HTML のいくつかの共通属性を受け取ります。 id 属性は id 属性のようなもので、ワールドワイド形式のドキュメントを提供します。また、html 要素の一意の識別子のようなものです。CSS セレクター スタイルを使用して、ブラウザを使用してプレゼンテーションのプロパティを提供し、特定の内容に注意を集中させます。 html 要素やその他のコンテンツのスクリプトと組み合わせたものは、プレゼンテーション シナリオになると変更する必要があります。 HTML の動的 Web ページでは、Web ページの URL を追加するために get や post などの URL メソッドを使用します。これはドキュメント内の特定の HTML 要素を直接ターゲットにし、通常は http://www.examples.com/html#attributes のように示される Web ページのサブセクションもターゲットにします。

「class」などの他の属性は、分類された HTML 要素を提供するか、同様の要素のように見えます。これは、プレゼンテーション目的の HTML ドキュメントの意味論的な目的に非常に役立ちます。さらに、クラスはマイクロフォーマット型で使用され、HTML ドキュメントのクラス型は「表記法」型のように見えます。これは、このクラス値を持つすべての html 要素が、Web ベースのドキュメントのメイン HTML テキストと副次的に連携していることを示します。このような種類の HTML 要素は、HTML ドキュメントのソース内のテキストの場所に表示されるのではなく、Web ページ上のヘッダーおよびフッター ノートのプレゼンテーションと収集して組み合わせる必要があります。

Moreover, CSS styles will be the presentation for the web documents user, or the Author will use the css style attributes for both non-attributable codes, which also looks with presentational properties of the html elements. The css style attributes will call the html based documents with the help of the class and id attributes for selecting the html elements with the style sheets for the web pages. also another sub-text based attributes in the html. In most of web browsers, this attribute will be called as the tooltip for the web pages.</p> <h3>Examples of HTML Text Attributes</h3> <p>Following are the examples:</p> <h4>Example #1</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><html> <body> <h2>Samples</h2> <p>Welcome To My Domain</p> <a href="https://www.gmail.com">Please login</a> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543792231609.png" alt="HTML テキストの属性" ></p> <h4>Example #2</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><html> <head> <style> .sample { text-transform: uppercase; } .sample1 { text-transform: lowercase; } .sample2 { text-transform: capitalize; } </style> </head> <body> <p class="sample">Welcome to My Domain.</p> <p class="sample1">Welcome to My Domain.</p> <p class="sample2">Welcome to My Domain.</p> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543792374995.png" alt="HTML テキストの属性" ></p> <h4>Example #3</h4> <p><strong>Code:</strong></p> <pre class="brush:php;toolbar:false"><html> <head> <style> #sample{ font-size: 33px; font-weight: bold; font-family: Arial; color: green; transition:0.7s; } </style> </head> <body> <p id="sample">Welcome To my Domain</p> <script type="text/javascript"> var b = document.getElementById('sample'); setInterval(function() { b.style.opacity = (b.style.opacity == 0 ? 1 : 0); }, 1000); </script> </body> </html></pre> <p><strong>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543792638569.png" alt="HTML テキストの属性" ></p> <h3>Conclusion</h3> <p>We have seen some HTML tags types like text elements; for the web pages, the text tags will be used for basic html documents. Some of the basic tags <h1> to <h10>,<p> etc this type of tags will be used for every html web-based documents. Some tags will be supported for browsers compatibility, and some tags will not be compatible.</p><p>以上がHTML テキストの属性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">xhtml</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">double</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Event</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">symbol</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">kind</a> <a href="javascript:void(0);">http</a><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="HTML スタイル属性" href="http://m.php.cn/ja/faq/1796600055.html">HTML スタイル属性</a></span><span>次の記事:<a class="dBlack" title="HTML スタイル属性" href="http://m.php.cn/ja/faq/1796600057.html">HTML スタイル属性</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>