整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          這些常用的HTML標簽,你還不知道嗎?

          著互聯網的不斷發(fā)展與前端開發(fā)技術的不斷進步,越來越多的人想在前端開發(fā)市場中分一杯羹,而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢?

          什么是HTML

          HTML,即超文本標記語言,是一種標識性的語言。它包括一系列標簽,通過這些標簽可以將網絡上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

          使用HTML語言,將所需要表達的信息按某種規(guī)則寫成HTML文件,通過專用的瀏覽器來識別,并將這些HTML文件“翻譯”成可以識別的信息,即現在所見到的網頁。而HTML標簽是HTML語言中最基本的單位,是HTML最重要的組成部分。

          什么是HTML標簽

          • HTML標簽是由一對尖括號括起來的關鍵詞,像<html>、<body>等。
          • HTML標簽通常是成對出現的,第一個標簽是開始標簽,第二個標簽是結束標簽。
          • 標簽不區(qū)分大小寫,最好用小寫。
          • 標簽可以嵌套,但是不可以交叉嵌套,如<a><b></a></b>。
          • 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉合標簽.如<br/> <hr/> <img />等。

          標簽分類

          標簽一般分為兩種:

          1. 塊級標簽

          占一整行的標簽。如<h>、<p>、<div>、<form>等

          2. 行內標簽

          可以多個標簽共同占用一行的標簽。比如:<span>,<a>,<input>,<img>,<label>等

          3. 塊級標簽特點

          • 總是在新行上開始
          • 寬度缺省是它的容器的100%,除非設定一個寬度
          • 它可以容納內聯元素和其他塊元素

          4. 行內標簽特點

          • 和其他元素都在一行上
          • 寬度就是它的文字或圖片的寬度,不可改變
          • 內聯元素只能容納文本或者其他內聯元素

          HTML特殊字符

          平時寫代碼很少用到HTML的特殊字符,最常用的可能是 (空格)了,但有時在移動端為了節(jié)省時間,可能會用這些字符實現某種特殊效果。

          使用方法:

          • 這些字符屬于unicode字符集,所以,你的文檔需要聲明為UTF-8;
          • 編號用在HTML中時,需要在前面加上&#符號;
          • 用于CSS文件中,但是需要用反斜杠\轉義;
          • 用于JavaScript,和CSS用法一樣,不過要用\u來轉義。

          常用HTML特殊字符

          HTML基本標簽簡介

          1. <!DOCTYPE html>標簽

          作用:聲明文檔的解析類型(document .compatMode),避免瀏覽器的怪異模式。

          瀏覽器有怪異模式(BackCompat)和標準模式(CSS1Compat)兩種模式,那么何為怪異模式和標準模式呢?

          • BackCompat:怪異模式,瀏覽器使用自己的怪異模式解析渲染頁面。
          • CSS1Compat:標準模式,瀏覽器使用W3C的標準解析渲染頁面。

          如果你的頁面沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat,,如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面,即在不同的瀏覽器顯示不同的樣式。

          但是如果你的頁面添加了<!DOCTYPE html>,那么就等同于開啟了標準模式,瀏覽器就得老老實實的按照W3C的標準解析渲染頁面,這樣一來,你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。

          這就是<!DOCTYPE html>的作用。

          1. <meta>標簽

          <meta>標簽用于提供關于 HTML 文檔的元數據(元數據是關于數據的信息),元數據不會顯示在頁面上,但是對于機器是可讀的。例如meta被用于設置關鍵字設置頁面描述設置作者設置字符集設置頁面定時跳轉等等。meta標簽放置在head標簽中,對meta的設置對搜索引擎注冊、搜索引擎優(yōu)化排名等有至關重要的作用。

          <meta>有兩個屬性,分別是http-equiv屬性和name屬性,不同屬性有不同的參數,這些不同的參數使得名,meta標簽有不同的功能:

          http-equiv屬性

          顧名思義,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。

          • 頁面編碼:

          • 頁面刷新和跳轉

          • 解決IE瀏覽器兼容性問題

          name屬性

          name屬性主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

          • 供搜索引擎使用(關鍵詞)


          • 網站信息描述

          1. <title>標簽
          • title標簽寫網站頭部信息,即網頁標簽的名稱:

          <title>開云見日</title>

          1. <link>標簽

          link標簽有兩個作用:

          1.設置標簽頁圖標:


          2.外聯CSS文件:


          1. <style>標簽

          用于存放或編寫css文件:

          <style type="text/css"></style>

          1. <script>標簽

          1.引進文件

          <script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>

          2.寫js代碼

          <script type="text/javascript">...</script>

          1. 常用標簽
          • <hn>:n的取值范圍是1~6; 從大到小. 用來表示標題.
          • <p>:段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.
          • <b> <strong>:加粗標簽.
          • <strike>:為文字加上一條中線.
          • <em>:文字變成斜體.
          • <sup>和<sub>:上角標 和 下角表.
          • <br>:換行.
          • <hr>:水平線
          • <div>:白板,本身沒有特性,塊級標簽。
          • <span>:白板,本身沒有特性,行內標簽。

          <sup>和<sub>的使用

        1. <p>這個文本包含 <sub>下標</sub>文本。</p>
        2. <p>這個文本包含 <sup>上標</sup> 文本。</p>
          1. <a>標簽
          • 作超鏈接:跳轉到指定url

          • 作錨點:條轉到指定id

          1. <img>標簽

          屬性如下:

        3. src: 要顯示圖片的路徑.
        4. alt: 圖片沒有加載成功時的提示.
        5. title: 鼠標懸浮時的提示信息.
        6. width: 圖片的寬
        7. height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放
        8. HTML還有很多標簽,像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應用開發(fā)大潮下,使用web技術進行移動應用開發(fā)正變得越來越流行,慢慢會變成以HTML為核心的技術棧配合數據庫的天下。讓我們找準時代發(fā)展方向,努力學習,成為時代的弄潮兒吧!

          TML

          本文,有很多很棘手的問題,例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁,可以群(526929231)使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用!很好用!很好用! SublimeText、Webstorm推薦這兩個編輯器

          HTML起源

          剛開始設計HTML語言是為了將文字圖像關聯在一起,用另一臺發(fā)送或接收

          HTML(HyperTextMark-up Language)超文本標記語言

          HTML 不是一種編程語言,而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)

          HTML標簽

          標簽是由尖括號 < > 把關鍵詞括起來,標簽通常是成對出現的

          Web瀏覽器

          讀取 HTML 文檔,使用標簽來解析頁面的內容,以網頁的形式現實,瀏覽器不會現實HTML標簽

          現在市場上主流五大瀏覽器

          每種瀏覽器都有自己的內核(引擎)(解析網頁的一個程序,io以什么方式去渲染它都要通過引擎去執(zhí)行)

          目前主流的瀏覽器分為五種

          • Chrome谷歌瀏覽器 (Webkit內核,V8 js引擎)

          • Firefox火狐瀏覽器 (Gecko內核)

          • Internet Explorer IE瀏覽器( Trident內核)

          • Opera 歐朋瀏覽器 (Presto內核) 主要市場:移動端

          • Safari 蘋果瀏覽器 (Webkit內核,但JS引擎為Nitro)

            不需要去記,簡單了解下

          標簽使用規(guī)范

          1. 標簽必須閉合

          2. 所有標簽名一律小寫

          3. 代碼縮進,使閱讀代碼更加易懂

          4. 特殊符號規(guī)范使用

          5. 命名規(guī)范,見名之意

          PS: 所有的標記符號都是半角英文

          編輯器

          眾說紛紜編輯器太多,最終只是一個工具,希望同學們能從萬千世界中找到適合自己的編輯器伙伴

          編輯器描述
          EditPlus手寫模式,適合初學手寫,無代碼提示(有IE調試視圖)
          Sublime 插件特別多,占用內存小,啟動速度快,打開大項目較慢,管理文件方式有些缺陷
          webstorm集成插件特別多,啟動較慢,占用內存大,開發(fā)和管理視圖都很方便
          Dreamweaver 適合初學,主要代碼提示和代碼插入功能強大,主要偏向于設計(有設計視圖)

          Sublime插件列表

          插件名描述詳情請戳
          emmet前端自動補全,提供快捷補全方式
          ColorPicker調色板,顏色選擇器
          SublimeTmplsublime模板,可以快速創(chuàng)建一個HTML模板
          view in browser用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁)
          LiveReload實時刷新HTML(編輯器里按下保存ctrl+s的時候,已經打開的HTMl會自動刷新)谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載
          Color HighlighterCSS顏色代碼高亮及顏色預覽提示
          CSS3CSS3的代碼高亮提示還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮
          JavaScript Completions原生js 代碼提示
          Sublime-Better-Completion可自選開啟代碼提示,支持jQ、js、bootstrap、php、sql ...倉庫地址此插件只能通過Github克隆下載安裝安裝方法

          注:Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法,還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~

          模板的配置

          配置描述
          !DOCTYPE html不是標簽,主要用于文檔類型的聲明
          charset="utf-8"聲明字符編碼集
          http-equiv="Content-Type"把Content屬性關聯到HTTP頭部(協(xié)議頭)

          HTML模板

          簡單了解,并不需要熟練掌握

          HTML樹狀結構

          Dom節(jié)點樹

          HTML網頁擴展名

          .html .htm這兩種是比較常見的

          在早期系統(tǒng)中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm

          現在通常使用.html作為擴展名


          標簽的學習

          接下來所有的標簽元素學習都在body標簽里面去敲打實現、

          H標簽

          為了突出標題,字體大小和加粗發(fā)生相應的改變

          <h1>我是大主題</h1>
          <h2>我是大主題</h2>
          <h3>我是大主題</h3>
          <h4>我是大主題</h4>
          <h5>我是大主題</h5>
          <h6>我是大主題</h6>
          <!doctype html><!-- 讓瀏覽器使用html5的標準解析 -->
          <html>
           <head>
           <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 -->
           <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
           <meta name="keywords" content="SEO搜索引擎,關鍵詞,多個請用逗號分開" />
           <meta name="description" content="網頁描述,八十字內" />
           <title>瀏覽器標簽頁上的網頁標題</title>
           </head>
           <body> <!-- 所有的標簽學習都在這body里面去敲,上面head元素里面的內容做個了解就可以了 -->
           
           <h1>我是大標題</h1>
           <h2>我是主題2</h2>
           <h3>我是主題3</h3>
           <h4>我是主題4</h4>
           <h5>我是主題5</h5>
           <h6>我是主題6</h6>
           
           </body>
          </html>

          可以發(fā)現h標簽從h1到h6會隨著數值越小字越小,并且都是會加粗和各占一行的狀態(tài)(前后的元素都會被換行)

          h1標簽一般一個頁面里面只會寫一次,為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)

          p段落標簽

          <p>
           冬著一身素衣,緩緩而來,季節(jié)沒有了往日的姹紫嫣紅,卻用簡單的線條,勾勒出一幅潔白的畫,純潔通透,輕盈自然。
          </p>

          特殊符號

          剛我們了解到了瀏覽器是識別尖括號的,如果要在頁面中顯示html標記那要怎么做呢?這時候就需要特殊符號的表示來顯示

          符號描述
          空格&nbsp;
          小于&lt;
          大于&gt;
          引號&quot;
          版權&copy;
          ×叉&times;
          &&amp;

          加粗標簽

          符號描述
          B標簽物理加粗,頁面呈現加粗狀態(tài).
          Strong標簽不僅能加粗,還利于搜索引擎優(yōu)化
          <b>物理加粗,頁面呈現加粗狀態(tài).</b>
          
          <strong>不僅能加粗,還利于搜索引擎優(yōu)化,就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優(yōu)化顯示網頁的排名</strong>

          可以根據word文檔上面發(fā)現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽

          <i>我是傾斜</i> <u>我加了下劃線</u>

          A標簽

          • 鏈接一個頁面,點擊則會跳轉這個鏈接頁面

          • 使用錨點滾動到設定的位置

          <a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面
          
          
          <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部)
          
          
          <a href="javascript: void(0);"></a> 死鏈接,不會跳轉,一般用于js特效
          
          
          <a href="#name">錨點到一個標簽上所對應的ID名字,點擊則跳到那個標簽位置</a>
          
          
          <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協(xié)議不能少

          點擊#flag的a標簽的時候會跳到到上面h2標簽

          只有擁有name屬性的

          a標簽

          才能錨點,還有一種方式是通過ID標識唯一元素,也可以跳轉(不僅僅是a標簽)

          補充標簽

          描述標簽
          滾動標簽marquee
          字體標簽font
          定義水平線hr

          滾動標簽

          marquee

          屬性描述
          direction滾動方向
          behivior行為

          behivior

          描述
          alternate交替滾動
          scroll滾動
          slide滑落

          Font標簽

          屬性描述
          color顏色
          size0-7
          face字體

          hr水平線

          與font相似,擁有color和size屬性

          hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統(tǒng)一會加一個反斜杠表示結束這個標簽,不加也能夠正確顯示,但是養(yǎng)成一個良好的習慣確實重要,比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、


          練習一、

          結合今天所學,寫一個簡單的網頁

          內容如下:

          • 寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫,網上一大把哈哈,可以自己寫下,鍛煉下思維

          • 需要包括h、p、a、加粗

          • 題材不限,至少200字

          練習二、

          在習題一的文章底部,使用滾動標簽進行滾動方向為45°

          可以在頭部找到我,如有勘誤、錯別字、盡情見諒很用心的檢查了 碼了這么久

          過web前端開發(fā)的都知道,每個標簽都自帶樣式,比如body自帶margin,a標簽自帶下劃線,li標簽自帶小圓點,但是你知道更具體的嗎?以下的文檔還原了w3c對每個標簽最初的定義,收藏一下,對你一定有幫助。

          @charset "utf-8";/*@charset "gb2312";*//**
          * ============================================================================
          * 版權所有: 切版
          * 網站地址: http://www.qieban.cn
          * 該文件為W3C為標簽賦予最原始樣式規(guī)則、制作參考無實際作用
          * ----------------------------------------------------------------------------
          **/ 
          html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3,
          h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }

          切版,切圖網旗下靠譜的web前端外包服務切圖客群體。http://www.qieban.cn/


          主站蜘蛛池模板: 日韩一区二区三区免费体验| 国产在线不卡一区二区三区| 国产日韩精品一区二区三区在线| 福利一区二区三区视频在线观看| 色婷婷香蕉在线一区二区| 激情综合一区二区三区| 一区二区三区在线播放| 国产色欲AV一区二区三区| 日韩精品一区二区三区中文| 国产午夜精品一区二区| 日韩社区一区二区三区| 国产乱子伦一区二区三区| 99偷拍视频精品一区二区| 亚洲综合激情五月色一区| 亚洲一区中文字幕| 精品一区二区三区波多野结衣 | 国产一区二区视频免费| 亚洲国产一区国产亚洲 | 国产乱人伦精品一区二区| 亚洲一区二区三区电影| 日本不卡一区二区视频a| 国产精品视频第一区二区三区| 国产精品 一区 在线| 变态拳头交视频一区二区| 丰满人妻一区二区三区视频53| 97精品国产福利一区二区三区| 中文字幕精品一区| 日韩免费视频一区二区| 精品无码一区二区三区爱欲九九| 亚洲国产福利精品一区二区| 亚洲国产欧美日韩精品一区二区三区| 午夜影院一区二区| 国产成人综合亚洲一区| 99精品国产高清一区二区麻豆| 国精产品999一区二区三区有限| 国产高清视频一区二区| 久久久精品日本一区二区三区 | 中文字幕亚洲乱码熟女一区二区| 福利国产微拍广场一区视频在线 | 国产精品无码一区二区在线观一| 精品无码人妻一区二区三区不卡|