コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド htmlチュートリアル htmlタグの詳しい解説(1)

htmlタグの詳しい解説(1)

高洛峰
高洛峰
Feb 16, 2017 pm 02:05 PM
htmlタグ

1.基本タグ

<!DOCTYPE html>               <!--表示文本类型-->
<html>                        <!--<html></html>表示创建一个html文档-->
    <head>                    <!--<head></head>设置文档标题和其它在网页中不显示的信息-->
        <title>标题</title>   <!--<title></title>设置文档的标题，就是最上方的名字-->
    </head>
    <body>                    <!--<body></body>设置文档的内容-->
        <p>原创作者：雨点的名字</p>
   </body>
</html>
ログイン後にコピー

2.本文中でよく使うタグ
コメントラベルのショートカットキー: Ctrl+Shift+/, myeclipseを使用します

;strong> テキストに下線を設定します
 
効果は次のとおりです:


<!DOCTYPE html>
<head>
<title>来吧</title>
</head>
<body>
<!--这是一个注释标签，页面上你看不到-->
<h4>我是标题哦</h4>
<hr/>
<p>我是p标签<b>我自动加粗的</b></p><br/>
<s>我是删除线</s>
<u>我是下划线</u><br/>
<pre class="brush:php;toolbar:false">  我是预编译，
         我怎么输它就怎么显示



ログイン後にコピー
 
注: タグの場合、src 属性は画像のソースと名前を示すために使用され、title 属性は画像上にマウスを置いたときに表示されるテキストを設定するために使用され、alt 属性は画像プレートを設定できない場合に使用されます。画像を記述するときは、width 属性と height 属性を使用して画像の幅と高さを設定します。 




 (1) 基本的なリンクの紹介 
ハイパーリンクを実装するためのタグ




<!DOCTYPE html>
<head>
<title>美女图片</title>
</head>
<body>
<img src="first.jpg"   title="就问你美不美"  alt="这里显示第一张图"  width="200" height="300">
<img src="second .jpg" title="身材太好了"   alt="这里显示第二张图"  width="200" height="300">
</body>
</html>
ログイン後にコピー
 注:   を使用してジャンプ アドレスを指定するには、title 属性を使用して、マウスを置いたときに表示されるテキストを設定します。ハイパーリンク; target 属性を使用してハイパーリンクのジャンプ方法を指定します。ここで、_self は新しいウィンドウを開いてジャンプ後のページを現在のウィンドウで開くことを意味し (デフォルト)、_blank は新しいウィンドウを開いてページを開くことを意味します。ジャンプ後のページ。 
 詳細: ページ内のすべてのハイパーリンクが同じようにジャンプする場合は、/head> で統一して設定できます。 


 を  タグに追加して、ページ上のすべてのハイパーリンクが元のウィンドウに表示されることを示します html标签详解（1） 
 は、ページ上のすべてのハイパーリンクが新しいウィンドウに表示されることを意味します 
 (2) a タグを使用してページの位置を実装します 
 ケース: クリックしてページの先頭に戻ります


<!DOCTYPE html>
<html>
    <head>
        <title>我是a标签</title>
    </head>
    <body>
        <!-- 版权声明-->
        <a href="http://www.baidu.com/" 
           title="百度一下，你就知道" target="_self">百度</a>
        <a href="http://www.163.com" 
           title="网易新闻" target="_blank">网易</a>
   </body>
</html
ログイン後にコピー
 注: クリックすると先頭に戻ります。その際、ページは id="top" タグの位置に配置され、これは id 属性によって先頭に配置されます。ここの Web ページにはほとんど何も含まれておらず、効果はありません。テストしたい場合は、他の多くのタグを追加して、効果が明らかになるようにしてください
(3) タグを通じてダウンロードしてください
注) : 画像を直接ダウンロードできない場合、リンクをクリックすると、画像をダウンロードする代わりに画像が開きます


<!DOCTYPE html>
<html>
    <head>
        <title>网页定位</title>
    </head>
    <body>
        <p id="top">这里是顶部</p>
        <p>原创作者：蜗牛</p>
        <p>原创作者：蜗牛</p>
        <a href="#top">返回顶部</a>
   </body>
</html>
ログイン後にコピー

html标签详解（1） 。 、ステップを追加する必要があります。 
<!DOCTYPE html>
<html>
    <head>
        <title>下载</title>
    </head>
    <body>
        <a  href="6用户注册项目.docx">点击下载文档</a>
        <a  href="2017-1-4Jquery.rar">点击下载压缩文件</a>
        <a  href="second .jpg">点击图片</a>
   </body>
</html>
ログイン後にコピー
5: HTML フレームワーク 
<body>
<a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
</body>
ログイン後にコピー




以下は 3 フレームの HTML です


1: head.html


<!DOCTYPE html>
<head>
<title>Html框架</title>    <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签-->
</head>
<frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%-->
          <frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容-->
          <frameset cols="25%,75%">    <!--在下面在定义一个框架级，再分为左右两部分 cols代表列-->
                <frame src="left.html" name="left"/>
                <frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用-->
           </frameset> 
     </frameset><noframes></noframes>      <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言-->
</html>
ログイン後にコピー


2: left.html


<!DOCTYPE html>
<head>
<title>head.html</title>
</head>
<body>
    <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>
</body>
</html>
ログイン後にコピー


3:center .html


<!DOCTYPE html>
<head>
<title>无标题文档</title>
</head>
<body>
    <a href="https://www.baidu.com" target="body">百度</a>    <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现-->
    <a href="http://www.163.com" target="body">网易</a>
</body>
</html>
ログイン後にコピー


実行結果は以下の通りです












 htmlタグの詳しい解説はこちら（1） 関連記事はPHP中国語サイトに注目！ 



						

					

					

						
このウェブサイトの声明

						
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

					

				


				



				



				
    


					


											

							

								

									
									
ホットAIツール

								

								

																		

											
												Undresser.AI Undress
											
											

												
													
Undresser.AI Undress

												
												
リアルなヌード写真を作成する AI 搭載アプリ

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
写真から衣服を削除するオンライン AI ツール。

											

										

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
脱衣画像を無料で

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI衣類リムーバー

											

										

																		

											
												AI Hentai Generator
											
											

												
													
AI Hentai Generator

												
												
AIヘンタイを無料で生成します。

											

										

																

								

									もっと見る
								

							

						

					

					

					

						

							

								
								
人気の記事

							

							

															

									R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
									

										2週間前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									レポ：チームメイトを復活させる方法
									

										4週間前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
									

										4週間前
										By 尊渡假赌尊渡假赌尊渡假赌
									

								

															

									スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
									

										3週間前
										By DDD
									

								

															

									R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
									

										3週間前
										By DDD
									

								

														

							

								もっと見る
							

						

					



											

							

								

									
									
ホットツール

								

								

																		

											
												メモ帳++7.3.1
											
											

												
													
メモ帳++7.3.1

												
												
使いやすく無料のコードエディター

											

										

																			

											
												SublimeText3 中国語版
											
											

												
													
SublimeText3 中国語版

												
												
中国語版、とても使いやすい

											

										

																			

											
												ゼンドスタジオ 13.0.1
											
											

												
													
ゼンドスタジオ 13.0.1

												
												
強力な PHP 統合開発環境

											

										

																			

											
												ドリームウィーバー CS6
											
											

												
													
ドリームウィーバー CS6

												
												
ビジュアル Web 開発ツール

											

										

																			

											
												SublimeText3 Mac版
											
											

												
													
SublimeText3 Mac版

												
												
神レベルのコード編集ソフト（SublimeText3）

											

										

																	

								

									もっと見る
								

							

						

										

					
					

						

							

								
								
ホットトピック

							

							

															

									Gmailメールのログイン入り口はどこですか？
									

										

											
											7323
										

										

											
											9
										

									

								

															

									Java チュートリアル
									

										

											
											1625
										

										

											
											14
										

									

								

															

									CakePHP チュートリアル
									

										

											
											1350
										

										

											
											46
										

									

								

															

									Laravel チュートリアル
									

										

											
											1262
										

										

											
											25
										

									

								

															

									PHP チュートリアル
									

										

											
											1209
										

										

											
											29
										

									

								

														

							

								もっと見る
							

						

					

				

			

							

					

						

							Related knowledge
						

						


													

								
									Go言語で正規表現を使用してHTMLタグの内容を抽出する方法
								
								Go言語で正規表現を使用してHTMLタグの内容を抽出する方法
								Jul 14, 2023 pm	 01:18 PM
								
正規表現を使用して Go 言語で HTML タグのコンテンツを抽出する方法 はじめに: 正規表現は強力なテキスト マッチング ツールであり、Go 言語でも広く使用されています。 HTML タグを処理するシナリオでは、正規表現を使用すると、必要なコンテンツを迅速に抽出できます。この記事では、Go 言語で正規表現を使用して HTML タグの内容を抽出する方法と、関連するコード例を紹介します。 1. 関連パッケージの導入 まず、関連パッケージ regexp と fmt をインポートする必要があります。正規表現パッケージが提供する

							

														

								
									Python 正規表現を使用して HTML タグを削除する方法
								
								Python 正規表現を使用して HTML タグを削除する方法
								Jun 22, 2023 am	 08:44 AM
								
HTML (HyperTextMarkupLanguage) は、Web ページを作成するための標準言語であり、タグと属性を使用して、テキスト、画像、表、リンクなど、ページ上のさまざまな要素を記述します。ただし、HTML テキストを処理する場合、後続の処理のためにテキスト コンテンツを迅速に抽出することは困難です。現時点では、Python の正規表現を使用して HTML タグを削除し、プレーン テキストをすばやく抽出できます。 Python では、通常のテーブル

							

														

								
									PHPの文字列からHTMLタグを削除するにはどうすればよいですか?
								
								PHPの文字列からHTMLタグを削除するにはどうすればよいですか?
								Mar 23, 2024 pm	 09:03 PM
								
PHP は、Web サイト開発やバックエンド アプリケーション開発で広く使用されている、一般的に使用されるサーバー側スクリプト言語です。 Web サイトやアプリケーションを開発するとき、文字列内の HTML タグを処理する必要がある状況によく遭遇します。この記事では、PHP を使用して文字列から HTML タグを削除する方法と、具体的なコード例を紹介します。なぜ HTML タグを削除する必要があるのですか? HTML タグは、ユーザー入力やデータベースから取得したテキストを処理するときによく使用されます。テキストを表示するときにこれらの HTML タグを削除したい場合があります。

							

														

								
									PHPでHTMLタグをエスケープする方法
								
								PHPでHTMLタグをエスケープする方法
								Feb 24, 2021 pm	 06:00 PM
								
PHP では、htmlentities() 関数を使用して html をエスケープし、文字を HTML エンティティに変換できます。構文は「htmlentities(string,flags,character-set,double_encode)」です。 PHP の html_entity_decode() 関数を使用して、HTML をエスケープ解除し、HTML エンティティを文字に変換することもできます。

							

														

								
									Javaで指定された文字列からHTMLタグを削除するにはどうすればよいですか?
								
								Javaで指定された文字列からHTMLタグを削除するにはどうすればよいですか?
								Aug 29, 2023 pm	 06:05 PM
								
String は Java の最終クラスであり、不変です。つまり、オブジェクト自体を変更することはできませんが、オブジェクトの参照は変更できます。 String クラスの replaceAll() メソッドを使用して、特定の文字列から HTML タグを削除できます。正規表現を使用して、指定された文字列から HTML タグを削除できます。文字列から HTML タグを削除した後、文字列を通常のテキストとして返します。構文 publicStringreplaceAll(Stringregex,Stringreplacement) の例 publicclassRemoveHTMLTagsTest{&nbs

							

														

								
									HTML テーブルで HTML タグを使用するにはどうすればよいですか?
								
								HTML テーブルで HTML タグを使用するにはどうすればよいですか?
								Sep 08, 2023 pm	 06:13 PM
								
テーブルに HTML タグを簡単に追加できます。 HTML タグは <td> タグ内に配置する必要があります。たとえば、段落 <p>…</p> タグまたはその他の利用可能なタグを <td> タグ内に追加します。構文 次に、HTML テーブルで HTMl タグを使用するための構文を示します。 <td><p>コンテキストの段落</p><td>例 1 HTML テーブルでの HTML タグの使用例を以下に示します。 <!DOCTYPEhtml><html><head&g

							

														

								
									基本的な HTML タグを検証するための PHP 正規表現メソッド
								
								基本的な HTML タグを検証するための PHP 正規表現メソッド
								Jun 24, 2023 am	 08:07 AM
								
PHP は、正規表現関数をサポートし、入力データの有効性を迅速に検証できる効率的な Web 開発言語です。 Web 開発では、HTML は一般的なマークアップ言語であり、HTML タグの検証は Web フォーム検証の非常に重要な方法です。この記事では、基本的な HTML タグの検証方法と、検証に PHP 正規表現を使用する方法を紹介します。 1. HTML タグの基本構造 HTML タグは、山括弧で囲まれた要素名と属性で構成されており、一般的なタグには p、a、div などがあります。

							

														

								
									HTML タグの完全なコレクション
								
								HTML タグの完全なコレクション
								Nov 27, 2023 am	 10:05 AM
								
HTML标签有<!DOCTYPE>、<html>、<head>、<title>、<meta>、<link>、<style>、<script>、<body>、<h1> - <h6>、<p >、<a>、<img>、<div>、<span>、<input>、<button>、<form

							

													


													
								See all articles