html標籤詳解（1）-html教學-PHP中文網

首頁

web前端

html教學

html標籤詳解（1）

高洛峰

Feb 16, 2017 pm 02:05 PM

html標籤

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）效果如下：

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

登入後複製

註解：在該

標籤中常用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

熱AI工具

熱工具

熱門話題

Java教學

1667

CakePHP 教程

1426

Laravel 教程

1328

PHP教程

1273

C# 教程

1255

Related knowledge

如何在Go語言中使用正規表示式擷取HTML標籤內容 Jul 14, 2023 pm 01:18 PM

如何在Go語言中使用正規表示式擷取HTML標籤內容導讀：正規表示式是一種強大的文字比對工具，它在Go語言中也有著廣泛的應用。在處理HTML標籤的場景中，正規表示式可以幫助我們快速擷取所需的內容。本文將介紹如何在Go語言中使用正規表示式擷取HTML標籤的內容，並給予相關程式碼範例。一、引入相關套件首先，我們需要導入相關的套件：regexp和fmt。 regexp包提供

如何使用Python正規表示式去除HTML標籤 Jun 22, 2023 am 08:44 AM

HTML（HyperTextMarkupLanguage）是用於建立Web頁面的標準語言，它使用標籤和屬性來描述頁面上的各種元素，例如文字、圖像、表格和連結等等。但是，在處理HTML文字時，很難將其中的文字內容快速地提取出來用於後續的處理。這時，我們可以使用Python中的正規表示式來移除HTML標籤，以達到快速擷取純文字的目的。在Python中，正規表

PHP如何去除字串中的HTML標籤？ Mar 23, 2024 pm 09:03 PM

PHP是一種常用的伺服器端腳本語言，廣泛應用於網站開發和後端應用程式開發。在開發網站或應用程式時，經常會遇到需要處理字串中的HTML標籤的情況。本文將介紹如何使用PHP去除字串中的HTML標籤，並提供具體的程式碼範例。為什麼需要移除HTML標籤？在處理使用者輸入或從資料庫中取得的文字時，經常會包含HTML標籤。有時我們希望在顯示文字時移除這些HTML標籤

php中怎麼轉義html標籤 Feb 24, 2021 pm 06:00 PM

在PHP中，可以使用htmlentities()函數來轉義html，能把字元轉換成HTML實體，語法「htmlentities(string,flags,character-set,double_encode)」。 PHP中也可以使用html_entity_decode()函數來反轉義html，把HTML實體轉換成字元。

如何在Java中從給定的字串中刪除HTML標籤？ Aug 29, 2023 pm 06:05 PM

String是Java中的final類，它是不可變的，這意味著我們不能改變物件本身，但我們可以更改物件的引用。可以使用String類別的replaceAll()方法從給定字串中刪除HTML標籤。我們可以使用正規表示式從給定字串中刪除HTML標記。從字串中刪除HTML標籤後，它將傳回一個字串作為普通文字。語法publicStringreplaceAll(Stringregex,Stringreplacement)範例publicclassRemoveHTMLTagsTest{&nbs

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何在HTML表格中使用HTML標籤？ Sep 08, 2023 pm 06:13 PM

我們可以輕鬆地在表格中新增HTML標籤。 HTML標籤應放置在<td>標籤內。例如，在<td>標籤內新增段落<p>…</p>標籤或其他可用標籤。語法以下是在HTML表格中使用HTMl標記的語法。 <td><p>Paragraphofthecontext</p><td>範例1下面給出了在HTML表格中使用HTML標籤的範例。 <!DOCTYPEhtml><html><head&g

PHP正規表示式驗證基本的HTML標籤的方法 Jun 24, 2023 am 08:07 AM

PHP是一種高效率的網頁開發語言，其支援正規表示式功能，能夠快速驗證輸入資料的有效性。在網頁開發中，HTML是常見的標記語言，而對HTML標籤進行驗證，是網頁表單驗證的非常重要的方法。本文將介紹基本的HTML標籤驗證方法，以及如何使用PHP正規表示式進行驗證。一、HTML標籤基本結構HTML標籤由尖括號包圍的元素名稱和屬性組成，常見的標籤包括p、a、div

See all articles

html標籤詳解（1）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題