【HTML】---經常使用標籤(1)

時間 2019-11-06

標籤 HTML 經常使用標籤欄目 HTML 简体版

原文原文鏈接

Html經常使用標籤(1)

從新整理學習下前端知識從Html標籤開始。咱們先看HTML 骨架格式：css

<!DOCTYPE html>               <!--這句話就是告訴咱們使用哪一個html版本-->
<html>                         <!--表示建立一個html文檔-->
    <head>                     <!--設置文檔標題和其它在網頁中不顯示的信息-->
        <title>標題</title>     <!--讓頁面擁有一個屬於本身的標題-->
    </head>
    <body>                     <!--元素包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等。）-->
        <p>雨點的名字</p>
   </body>
</html>

1）head能夠存放的標籤：title , meta , base , style , script , linkhtml

2）body能夠存放的標籤：p , h , a , b , u , i , s , em , del , ins , strong , img等等前端

1、head內標籤

一、meta標籤

概念 meta可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。瀏覽器

1)、charset屬性服務器

單獨使用，設置文檔字符及編碼格式佈局

<meta charset="UTF-8">

2）、name屬性學習

需配合content屬性使用，主要用於給搜索引擎提供必要信息字體

寫法：<meta name="屬性值" content="屬性值詳細內容">

重要屬性值：
author 做者。聲明網站做者，經常使用公司網址表示
keywords 網站關鍵字。多個關鍵字，用英文逗號分隔
description 網頁描述。搜索引擎顯示在title下的描述內容網站

示例搜索引擎

<!--charset屬性-->
<meta charset="UTF-8">
<!--做者-->
<meta name="anthor" contet="雨點的名字" />
<!--網頁關鍵字-->
<meta name="keywords" content="HTML5,網頁，個人">
<!--網頁描述-->
<meta name="description" content="個人網頁" />

二、base 標籤

base做用：他能夠設置總體連接的打開狀態。

<base target="_self"></base>     <!-- 表示該頁面的全部超連接均在原窗口顯示 -->
<base target="_blank"></base>    <!--  表示該頁面的全部超連接均在新窗口顯示 -->

head還有一些其它標籤這裏先先不寫。

2、body內標籤

一、排版標籤

概念：排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最經常使用的標籤。

<h1></h1> <!-- 標題標籤：分爲h1到h6字體依次遞減 -->
 <p></p>  <!-- 段落標籤：默認狀況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行 -->
 <hr />   <!-- 水平線標籤：是單標籤。水平線將段落與段落之間隔開，使得文檔結構清晰，井井有條。 -->
 <br />   <!-- 換行標籤：是單標籤。若是但願某段文本強制換行顯示，就須要使用換行標籤。 -->
<div></div> <!-- div和span 是沒有語義的 是咱們網頁佈局主要的2個盒子,它們做用主要是結合CSS改變頁面樣式。 -->
<span></span>

二、文本格式化標籤

概念 : 在網頁中，有時須要爲文字設置粗體、斜體或下劃線效果，這時就須要用到HTML中的文本格式化標籤，使文字以特殊的方式顯示。

<b></b>和<strong></strong> <!-- 文字加粗 推薦使用strong -->
    <i></i>和<em></em>         <!-- 文字斜體 推薦使用em -->
    <s></s>和<del></del>       <!-- 文字加刪除線 推薦使用del -->
    <u></u>和<ins></ins>       <!-- 文字加下劃線 推薦使用ins -->

b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈

三、圖像標籤img

概念 HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示圖像就須要使用圖像標籤。

<img src="圖像路徑url" />  <!-- src屬性用於指定圖像文件的路徑和文件名，他是img標籤的必需屬性。 -->

圖片標籤一些經常使用屬性

屬性	值	描述
src	topbottommiddleleftright	規定顯示圖像的 URL。
alt	Text	圖像不能顯示的的替代文本。
title	文本	定義圖像的高度。
width	pixels%	設置圖像的寬度。
height	pixels%	設置圖像的高度。
border	數字	定義圖像周圍的邊框
ismap	URL	將圖像定義爲服務器端圖像映射。
longdesc	URL	指向包含長的圖像描述文檔的 URL。
usemap	URL	將圖像定義爲客戶器端圖像映射。

四、連接標籤

1)實現連接跳轉

基本語法格式以下：

<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用於指定連接目標的url地址，當爲標籤應用href屬性時，它就具備了超連接的功能。

target：用於指定連接頁面的打開方式，其取值有 _self 和 _blank 兩種，其中 _self 爲默認值，_blank爲在新窗口中打開方式。

<a href="http://www.baidu.com" title="百度一下，你就知道" target="_self">百度</a>
<a href="http://www.163.com"  title="網易新聞" target="_blank">網易</a>

title屬性設置當鼠標放到超連接上時顯示的文字。

2)經過a標籤實現錨點定位

概念 經過建立錨點連接，用戶可以快速定位到目標內容。

建立錨點連接分爲兩步：

1.使用「a href=」#id名>「連接文本"</a>建立連接文本。
2.使用相應的id名標註跳轉目標的位置。

示例

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

body內還有其它標籤下篇補上。

你若是願意有所做爲，就必須善始善終。(1)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。