ホームページ > 記事 > ウェブフロントエンド > htmlタグの詳しい解説(1)

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

高洛峰オリジナル: 2017-02-16 14:05:591455ブラウズ

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 までご連絡ください。

前の記事：HTML の入門概念次の記事：HTML の入門概念

関連記事

続きを見る