首頁 > 文章 > web前端 > html標籤詳解（1）

html標籤詳解（1）

高洛峰原創: 2017-02-16 14:05:591452瀏覽

1.基礎標籤

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

2.body內常用標籤

註解標籤快速鍵：Ctrl+Shift+/, 我使用的是用my

橫線標籤

表示段落

表示標題，分為h1到h6字體依序遞減

> 混淆文字加粗

與

和則移除文字設定線

和將文字設定下線預編譯格式且有用的標籤

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

運作結果如下：

3.圖片標籤

html標籤詳解（1）

html标签详解（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>

註解：在該

html標籤詳解（1）

標籤中常用src屬性表示圖片的來源和名稱；以title屬性設定滑鼠放到圖片上時顯示的文字；用alt屬性設定當圖盤無法正常顯示時圖片的描述；用width和height屬性設定圖片的寬和高

效果如下：

4：連結標籤

（1）基本連結介紹 html标签详解（1）標籤實作超連結

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

title屬性設定當滑鼠放到超連結時顯示的文字；用target屬性指明超連結的跳轉方式，其中_self表示不開啟新視窗且在目前視窗開啟跳轉後的頁面（預設）而_blank表示開啟新視窗開啟跳轉後的頁面。

細節：如果在一個頁面中所有的超連結跳轉方式均一致，那麼可以在標籤中進行統一的配置。在標籤中新增

表示該頁面的所有超連結在原始視窗中顯示

表示該頁面的所有超連結均在新視窗顯示

（2）透過a標籤實現頁面定位

案例：點擊回到頁面頂部

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

註解：當點擊回到頂部的時候，頁面會定位在id= 「top」標籤的位置，而且是最上面，這就是透過id屬性定位，這裡網頁中放的東西很少，沒有啥效果，你要測試可以在這兩者之間添加許多其他標籤，這樣效果就很明顯

（3）透過a標籤實現下載

註解：可以實現點擊鏈接自動下載文檔，和壓縮文件，當不能直接下載圖片，當點擊圖片後頁面會打開圖片而不是下載

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

想要實現圖片的下載需要在新增一步;

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

5：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>

下面是3個框架中的html

1：head.html

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

2:left.html. 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）

更多html標籤詳解網（1）中文相關文章請追蹤PHP 更多html標籤！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML的入門概念下一篇：HTML的入門概念

相關文章

看更多