首頁 web前端 html教學 html標籤詳解(1)

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)

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
如何在Go語言中使用正規表示式擷取HTML標籤內容 如何在Go語言中使用正規表示式擷取HTML標籤內容 Jul 14, 2023 pm 01:18 PM

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

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

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

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

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

php中怎麼轉義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標籤? 如何在Java中從給定的字串中刪除HTML標籤? Aug 29, 2023 pm 06:05 PM

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

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

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

如何在HTML表格中使用HTML標籤? 如何在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標籤的方法 PHP正規表示式驗證基本的HTML標籤的方法 Jun 24, 2023 am 08:07 AM

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

See all articles