HTML基礎

網絡前端最核心三大技術HTML、CSS、JavaScript。HTML全稱超文本標記語言(hyper text Markup language)是一種在網頁上展示內容的語言(非編程語言,是一種描述內容並定義其表徵的標記語言)。HTML是樹狀結構,從內容上就是標籤、元素、屬性,需注意HTML註釋方式,保留字符和文檔定義

1.標籤、元素和屬性

標籤指的是會指定其中包裝的文本作爲在瀏覽器分頁的標題欄顯示的標題,實際語法中標籤通常以一個< >符號包括起來,起始標籤、內容和終止標籤組合起來稱爲元素,如下代碼所示:

<title> Chinars | 統計之都 </title>

一般而言每個元素都有一個起始標籤和終止標籤,但也不是全部。比如<br>標籤表示換行,就不需要一個</br>標籤來表示終止

常用HTML標籤

標籤

描述

<a>

定義錨

<meta>

定義關於HTML文檔元信息

<link>

定義文檔與外部資源關係

<code>

定義計算機代碼文本

<p>

定義段落

<h1>-<h6>

定義HTML標題

<div>

定義文檔中的節

<span>

定義文檔中的節

<form>

定義供用戶輸入的HTML表單

<script>

定義客戶端腳本 

標籤最重要的一個特性是屬性

<a href="/chinar/chinar-2013/">第六屆中國R語言會議</a>

錨標籤<a>能夠把相關文本(第六屆中國R語言會議)和一個指向地址的超鏈接關聯起來。href="/chinar/chinar-2013/"這個屬性指定錨鏈接,瀏覽器會自動把這類元素轉化爲帶有下劃線並且可以點擊的樣式。屬性就是讓標籤能夠描述其內容處理方式的選項。屬性總是處於起始標籤內部,標籤名右側,一個標籤可擁有多個屬性(用空格分開)

<div><img src="https://uploads.cosx.org/2010/10/SHUFE_map.jpg" alt="Thumbnail" /></div>

2.樹狀結構

<!DOCTYPE html>
    <html>
       <head>
          <title> Chinars | 統計之都 </title>
      </head>
        <body>
           第10屆中國R會議簡介
        </body>
    </html>

<!DOCTYPE html>是文檔定義類型標籤,忽略這個的話第一個元素是<html>,在這個元素的起始和終止標籤內,又有幾個標籤分別起始和終止:<head><title>和<body>。<head>和<body>標籤是直接被<html>元素包含的,<title>標籤則包含在<head>標籤內,一個典型樹形結構就被描述出來。在結構良好且合法的HTML文件中,所有元素相互之間必須是嚴格嵌套的。一對起始標籤和終止標籤必須完全包含在另一對起始和終止標籤內

3.meta標籤及用法詳解

<meta>元素可提供有關頁面的元信息(meta-information),比如針對搜索引擎、更新頻度的描述、關鍵詞(網頁需要有關鍵詞能夠讓搜索引擎來識別)

<head>
<title>mate</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
</head>

標籤寫在<head>中,不會被用戶看到,屬性主要有http-equiv(像http頭文件,可以向瀏覽器response有用信息,http-equiv屬性值有content-type、expires、refresh等)和name(描述網頁,name屬性值有author、description、keywords、generator等)

name屬性應用:比如keywords、description,搜索引擎首先自動檢索頁面中的keywords和description,並加入自己的數據庫,然後根據關鍵詞密度將關鍵詞排序。注意:keywords中content內容要限制在36字之內;description中的content內容限制在76字之內

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章