search

Home  >  Article  >  Web Front-end  >  Detailed explanation of html tags (1)

Detailed explanation of html tags (1)

高洛峰
高洛峰Original
2017-02-16 14:05:591509browse

1.Basic tags

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

2.Commonly used tags in body
## Comment tag shortcut key: Ctrl+Shift+/ , I use myeclipse

                                                                                                                                                                                        .

Represents the title, divided into h1 to h6 fonts in descending order
and < ;/b>                                                                                                                         making the text bold
; and ; 
 
The effect is as follows: 


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




Note: The src attribute is commonly used in the   tag. The source and name of the image; use the title attribute to set the text displayed when the mouse is placed on the image; use the alt attribute to set the description of the image when the chart cannot be displayed normally; use the width and height attributes to set the width and height of the image
 
The effect is as follows: 




## 4: Link tag 
 (1) Basic link introduction html标签详解（1）   

 Note: Use & lt; a & gt; & lt;/a & gt; use the HREF attribute to indicate the address of the jump when the hyperlink is realized; The text displayed when the hyperlink is on; use the target attribute to specify the jump method of the hyperlink, where _self means not to open a new window and open the page after the jump in the current window (default) and _blank means to open a new window to open the jump. the following pages. 
Details: If all hyperlinks in a page jump in the same way, unified configuration can be performed in the   tag. Add 
 to the  tag to indicate that all hyperlinks to the page will be displayed in the original window
 means that all hyperlinks on the page are displayed in a new window
(2) Page positioning through a tag
html标签详解（1） Case : Click to return to the top of the page 


<!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
 Note: When clicking to return to the top, the page will be positioned at the position of the id="top" tag, and it is at the top. This is positioned through the id attribute. Here in the web page There are very few things placed and there is no effect. If you want to test, you can add many other tags between the two, so the effect will be obvious
(3) Download through a tag


 Note: You can click on the link to automatically download documents and compressed files. When you cannot directly download the picture, when you click on the picture, the page will open the picture instead of downloading 


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


 If you want to download the picture, you need to add a step;


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


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




The following is the html in 3 frames


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>


The running results are as follows:












 


 More detailed explanations of html tags (1) For related articles, please pay attention to the PHP Chinese website! 
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introductory concepts of HTMLNext article：Introductory concepts of HTML
Related articles
See more
Public welfare online PHP training，Help PHP learners grow quickly！
About usDisclaimerSitemap
                © php.cn All rights reserved