recherche

Maison >interface Web >tutoriel HTML >Explication détaillée des balises html (1)

Explication détaillée des balises html (1)

高洛峰
高洛峰original
2017-02-16 14:05:591533parcourir

1. Balises de base 

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

2. Balises couramment utilisées dans le corps
Shift /, j'utilise MyEclipse
& lt; br & gt; paragraphe
& lt; h1 & gt; & lt; / h1 & gt; >
et ;pre>                                                    🎜>
3 .Balise d'image

L'effet est le suivant :

Remarque : Dans la balise , l'attribut src est couramment utilisé pour représenter la source et le nom de l'image ; placé sur l'image ; l'attribut alt est utilisé pour définir la description de l'image lorsque le graphique ne peut pas être affiché normalement ; les attributs width et height sont utilisés pour définir la largeur de l'image. L'effet Hegao

. est la suivante : 

<!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">  我是预编译，
         我怎么输它就怎么显示

4 : Balises de lien

(1) Introduction du lien de base

balise pour implémenter le lien hypertexte html标签详解（1）

Remarque : utilisez l'attribut href pour spécifier l'adresse de saut lorsque vous utilisez affiché lorsque la souris est placée sur l'hyperlien ; utilisez l'attribut target pour indiquer la méthode de saut de l'hyperlien, où _self signifie ne pas ouvrir de nouvelle fenêtre et ouvrir la page après le saut dans la fenêtre actuelle (par défaut) et _blank indique l'ouverture une nouvelle fenêtre pour ouvrir la page après le saut.

Détails : Si tous les hyperliens d'une page sautent de la même manière, ils peuvent être configurés uniformément dans la balise Ajoutez

à la balise pour indiquer que tous les hyperliens de la page sont affichés dans la fenêtre d'origine 
<!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>

Indique que tous les hyperliens de la page sont affichés dans une nouvelle fenêtre

(2) Positionnement de la page via une balise

Cas : Cliquez pour revenir en haut de la page html标签详解（1）

Remarque : Lorsque vous cliquez pour revenir en haut, la page sera positionnée à la position de la balise id="top", et c'est en haut. Ceci est positionné via l'attribut id, ici Il y a très peu de choses dans la page Web et il n'y a aucun effet. Si vous voulez tester, vous pouvez ajouter de nombreuses autres balises entre les deux, pour que l'effet soit obtenu. sera évident
(3) Téléchargez via la balise a

Remarque : Vous pouvez cliquer sur le lien pour télécharger automatiquement les documents et les fichiers compressés lorsque l'image ne peut pas être téléchargée directement, lorsque vous cliquez. sur l'image, la page ouvrira l'image au lieu de la télécharger 

<!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
Si vous souhaitez télécharger l'image, vous devez ajouter une étape

5 : cadre html ;

Ce qui suit est le code HTML en 3 cadres

1 : head.html

<!DOCTYPE html>
<html>
    <head>
        <title>网页定位</title>
    </head>
    <body>
        <p id="top">这里是顶部</p>
        <p>原创作者：蜗牛</p>
        <p>原创作者：蜗牛</p>
        <a href="#top">返回顶部</a>
   </body>
</html>

2:gauche. html

3:center.html

<!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>
Les résultats en cours d'exécution sont les suivants : 

<body>
<a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
</body>

<!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>


Pour des explications plus détaillées sur les balises html (1) Pour les articles connexes, veuillez faire attention au site Web PHP chinois ! 
<!DOCTYPE html>
<head>
<title>head.html</title>
</head>
<body>
    <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1>
</body>
</html>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Concepts d'introduction au HTMLArticle suivant：Concepts d'introduction au HTML

Articles Liés

Voir plus