Detailed explanation of html tags (1)-HTML Tutorial-php.cn

Detailed explanation of html tags (1)

高洛峰

Release： 2017-02-16 14:05:59

Original

1535 people have browsed it

1.Basic tags

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

Copy after login

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

Copy after login

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
#
<!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>
Copy after login

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
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
Copy after login
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>
Copy after login

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>
Copy after login
5: html frame

<body> <a href="first.jpg" download="first.jpg">点击图片</a>  </body>
Copy after login

The following is the html in 3 frames

1: head.html

<!DOCTYPE html> <head> <title>Html框架</title>     </head> <frameset rows="25%,75%">            <frame src="head.html" name="heand"/>            <frameset cols="25%,75%">                     <frame src="left.html" name="left"/>                 <frame src="center.html" name="body"/>             </frameset>      </frameset><noframes></noframes>       </html>
Copy after login

2:left.html

<!DOCTYPE html> <head> <title>head.html</title> </head> <body>     <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1> </body> </html>
Copy after login

3:center.html

<!DOCTYPE html> <head> <title>无标题文档</title> </head> <body>     <a href="https://www.baidu.com" target="body">百度</a>         <a href="http://www.163.com" target="body">网易</a> </body> </html>
Copy after login

The running results are as follows:

More detailed explanations of html tags (1) For related articles, please pay attention to the PHP Chinese website!