天天看點
傳回

HTML

html概述和基本結構

1.html概述

  • HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本标記語言，超文本指的是超連結，标記指的是标簽，是一種用來制作網頁的語言
  • 這種語言制作的檔案儲存的是一個文本檔案，檔案的擴充名為html或者htm，一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它
  • 如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。

2.html基本結構

        一個html的基本結構如下：

        <!DOCTYPE html>
        <html lang="en">
            <head>            
                <meta charset="UTF-8">
                <title>網頁标題</title>
            </head>
            <body>
                  網頁顯示内容
            </body>
        </html>
  • 第一行是文檔聲明
  • 第二行“<html>”标簽和最後一行“</html>”定義html文檔的整體
  • “<html>”标簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是'lang="zh-CN"',不定義也沒什麼影響，它一般作為分析統計用。
  • “<head>”标簽和“<body>”标簽是它的第一層子元素，“<head>”标簽裡面負責對網頁進行一些設定以及定義标題，設定包括定義網頁的編碼格式，外鍊css樣式檔案和javascript檔案等，設定的内容不會顯示在網頁上，标題的内容會顯示在标題欄，
  • “<body>”内編寫網頁上顯示的内容

3.HTML文檔類型

        目前常用的兩種文檔類型是xhtml 1.0和html5

  • xhtml 1.0

        xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。

        此版本文檔用sublime text建立方法： html:xt + tab

  • html5

        pc端可以使用xhtml 1.0，也可以使用html5，html5是向下相容的

        此版本文檔用sublime text建立方法： html:5 + tab 或者 ! + tab

  • 兩種文檔的差別

        文檔聲明和編碼聲明

        html5新增了标簽元素以及元素屬性

4.html文檔規範

        xhtml制定了文檔的編寫規範，html5可部分遵守，也可全部遵守，看開發要求。

  • 所有的标簽必須小寫
  • 所有的屬性必須用雙引号括起來
  • 所有标簽必須閉合
  • img必須要加alt屬性(對圖檔的描述)

5.html注釋：

        html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的内容不會顯示在頁面上，html代碼中插入注釋的方法是：

        <!-- 這是一段注釋  -->

 html标題

        通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标簽可以在網頁上定義6種級别的标題。6種級别的标題表示文檔的6級目錄層級關系，比如說：<h1>用作主标題（最重要的），其後是 <h2>（次重要的），再其次是 <h3>，以此類推。搜尋引擎會使用标題将網頁的結構和内容編制索引，是以網頁上使用标題是很重要的。

html段落、換行與字元實體

1.html段落

        <p>标簽定義一個文本段落，一個段落含有預設的上下間距，段落之間會用這種預設間距隔開

2.html換行

        代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入<br />來強制換行

3.html字元實體

空格：&nbsp;

  • '<'：&lt;
  • '>'：&gt;

html塊、含樣式的标簽

1.html塊

  • div标簽塊元素，表示一塊内容，沒有具體的語義。
  • span标簽行内元素，表示一行中的一小段内容，沒有具體的語義。

2.含樣式和語義的标簽

  • em标簽行内元素，表示語氣中的強調詞
  • i标簽 行内元素，原本沒有語義，w3c強加了語義，表示專業詞彙
  • b标簽 行内元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者産品名
  • strong标簽 行内元素，表示非常重要的内容

3.語義化的标簽

  • 語義化的标簽，就是在布局的時候多使用語義化的标簽，搜尋引擎在爬網的時候能認識這些标簽，了解文檔的結構，友善網站的收錄。
  • 比如：h1标簽是表示标題，p标簽是表示段落，ul、li标簽是表示清單，a标簽表示連結，dl、dt、dd表示定義清單等，語義化的标簽不多。

   html圖像、絕對路徑和相對路徑

1.html圖像

        <img>标簽可以在網頁上插入一張圖檔，它是獨立使用的标簽，通過“src”屬性定義圖檔的位址，通過“alt”屬性定義圖檔加載失敗時顯示的文字，以及對搜尋引擎和盲人讀屏軟體的支援。

<img src="images/pic.jpg" alt="産品圖檔" />

2.絕對路徑和相對路徑

        像網頁上插入圖檔這種外部檔案，需要定義檔案的引用位址，引用外部檔案還包括引用外部樣式表，javascript等等，引用位址分為絕對位址和相對位址。

  • 絕對位址：相對于磁盤的位置去定位檔案的位址
  • 相對位址：相對于引用檔案本身去定位被引用的檔案位址

        絕對位址在整體檔案遷移時會因為磁盤和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：

  • “ ./ ” 表示目前檔案所在目錄下，比如：“./pic.jpg” 表示目前目錄下的pic.jpg的圖檔，這個使用時可以省略。
  • “ ../ ” 表示目前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示目前目錄下的上一級目錄下的images檔案夾中的pic.jpg的圖檔。

html連結

1.html連結

        <a>标簽可以在網頁上定義一個連結位址，通過src屬性定義跳轉的位址，通過title屬性定義滑鼠懸停時彈出的提示文字框，通過target屬性設定是否建立新的視窗，預設是_self，可設定成_blank。

        <a href="#"></a> <!--  # 表示連結到頁面頂部   -->
        <a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
        <a href="2.html">測試頁面2</a>
        <a href="http://www.baidu.com" title="連結到百度網" target="_blank">百度網</a>

2.定義頁面内滾動跳轉

        頁面内定義了“id”或者“name”的元素，可以通過a标簽連結到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。

        <a href="#mao1">标題一</a>
        ......
        ......
        <h3 id="mao1">跳轉到的标題</h3>

html清單

1.有序清單

        在網頁上定義一個有編号的内容清單可以用<ol>、<li>配合使用來實作，可以使用快捷鍵ol>li*n+tab，代碼如下：

        <ol>
            <li>清單文字一</li>
            <li>清單文字二</li>
            <li>清單文字三</li>
        </ol>

        在網頁上生成的清單，每條項目上會按1、2、3編号，有序清單在實際開發中較少使用。

2.無序清單

        在網頁上定義一個無編号的内容清單可以用<ul>、<li>配合使用來實作，可以使用快捷鍵ul>li*n+tab代碼如下：

        <ul>
            <li>清單文字一</li>
            <li>清單文字二</li>
            <li>清單文字三</li>
        </ul>

        在網頁上生成的清單，每條項目上會有一個小圖示，這個小圖示在不同浏覽器上顯示效果不同，是以一般會用樣式去掉預設的小圖示，如果需要圖示，可以用樣式自定義圖示，進而達到在不同浏覽器上顯示的效果相同,實際開發中一般用這種清單。

3.定義清單

        定義清單通常用于術語的定義。<dl>标簽表示清單的整體。<dt>标簽定義術語的題目。<dd>标簽是術語的解釋。一個<dl>中可以有多個題目和解釋，可以使用快捷鍵dl>(dt+dd)*n代碼如下：

        <h3>前端三大塊</h3>
        <dl>
            <dt>html</dt>
            <dd>負責頁面的結構</dd>

            <dt>css</dt>
            <dd>負責頁面的表現</dd>

            <dt>javascript</dt>
            <dd>負責頁面的行為</dd>

        </dl>

html表格

1.table常用标簽

  • table标簽：聲明一個表格
  • tr标簽：定義表格中的一行
  • td和th标簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格

2.table常用屬性：

  • border 定義表格的邊框
  • cellpadding 定義單元格内内容與邊框的距離
  • cellspacing 定義單元格與單元格之間的距離
  • align 設定單元格中内容的水準對齊方式,設定值有：left | center | right
  • valign 設定單元格中内容的垂直對齊方式 top | middle | bottom
  • colspan 設定單元格水準合并
  • rowspan 設定單元格垂直合并

3.傳統布局：

        傳統的布局方式就是使用table來做整體頁面的布局，布局的技巧歸納為如下幾點：

  • 定義表格寬高，将border、cellpadding、cellspacing全部設定為0
  • 單元格裡面嵌套表格
  • 單元格中的元素和嵌套的表格用align和valign設定對齊方式
  • 通過屬性或者css樣式設定單元格中元素的樣式

4.傳統布局目前應用：

  • 快速制作用于示範的html頁面
  • 商業推廣EDM制作(廣告郵件)

5.表格常用樣式屬性

        border-collapse:collapse 設定邊框合并，制作一像素寬的邊線的表格

    html表單

        表單用于搜集不同類型的使用者輸入，表單由不同類型的标簽組成，實作一個特定功能的表單區域（比如：注冊），首先應該用<form>标簽來定義表單區域整體，在此标簽中再使用不同的表單控件來實作不同類型的資訊輸入，具體實作及注釋可參照以下僞代碼

        <!-- form定義一個表單區域,action屬性定義表單資料送出的位址，
        method屬性定義送出的方式。   -->
        <form action="http://www..." method="get">

        <!-- label标簽定義表單控件的文字标注，input類型為text定義了
        一個單行文本輸入框  -->
        <p>
        <label>姓名：</label><input type="text" name="username" />
        </p>

        <!-- input類型為password定義了一個密碼輸入框  -->
        <p>
        <label>密碼：</label><input type="password" name="password" />
        </p>

        <!-- input類型為radio定義了單選框  -->
        <p>
        <label>性别：</label>
        <input type="radio" name="gender" value="0" /> 男
        <input type="radio" name="gender" value="1" /> 女
        </p>

        <!-- input類型為checkbox定義了單選框  -->
        <p>
        <label>愛好：</label>
        <input type="checkbox" name="like" value="sing" /> 唱歌
        <input type="checkbox" name="like" value="run" /> 跑步
        <input type="checkbox" name="like" value="swiming" /> 遊泳
        </p>

        <!-- input類型為file定義上傳照片或檔案等資源  -->
        <p>
        <label>照片：</label>
        <input type="file" name="person_pic">
        </p>

        <!-- textarea定義多行文本輸入  -->
        <p>
        <label>個人描述：</label>
        <textarea name="about"></textarea>
        </p>

        <!-- select定義下拉清單選擇  -->
        <p>
        <label>籍貫：</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
        </p>

        <!-- input類型為submit定義送出按鈕  
             還可以用圖檔控件代替submit按鈕送出，一般會導緻送出兩次，不建議使用。如：
             <input type="image" src="xxx.gif">
        -->
        <p>
        <input type="submit" name="" value="送出">

        <!-- input類型為reset定義重置按鈕  -->
        <input type="reset" name="" value="重置">
        </p>

        <input type="button" name="" value=按鈕>
        <!-- hidden可以存一些值在頁面上 -->
        <input type="hidden" name="hid" value="10000">
        <!-- 圖檔的方式做送出 -->
        <input type="image" name=""    src="images/box02.jpg">

        <!-- lable的for屬性可以增加使用者體驗 -->
        <label for="user">使用者名:</label>
        <!-- text類型單行文本輸入框 -->
        <input type="text" name="username" id="user" value="jack">

         </form>

html内嵌架構

1.html内嵌架構

        <iframe>标簽會建立包含另外一個html檔案的内聯架構（即行内架構），src屬性來定義另一個html檔案的引用位址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，代碼如下：

        <iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

2.内嵌架構與a标簽配合使用

        a标簽的target屬性可以将連結到的頁面直接顯示在目前頁面的iframe中，代碼如下：

        <a href="01.html" target="myframe">頁面一</a>
        <a href="02.html" target="myframe">頁面二</a>
        <a href="03.html" target="myframe">頁面三</a>
        <iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>

        更多标簽元素

  • 根元素

<html> (HTMLHtmlElement)

  • 檔案資料元素

<head> (HTMLHeadElement)

<title> (HTMLTitleElement)

<base> (HTMLBaseElement)

<link> (HTMLLinkElement)

<meta> (HTMLMetaElement)

<style> (HTMLMetaElement)

<script> (HTMLStyleElement)

<noscript> (HTMLElement)

  • 檔案區域元素

<body> (HTMLBodyElement)

 <section> (HTMLElement)

 <nav> (HTMLElement)

 <article> (HTMLElement)

 <aside> (HTMLElement) (HTMLHeading Element)

 <hl> <h2> <h3> <h4> <h5> <h6>

 <hgroup> (HTMLElement)

 <header> (HTMLElement) ar

 <footer> (HTMLElement)

 <address> (HTMLElement)

  •  群組元素

 <p> (HTMLParagraphElement)

 <hr> (HTMLHRElement)

 <pre> (HTMLPreElement)

 <blockquote> (HTMLQuoteElement)

 < ol > 〈HTMLOListElement )

 <ul> (HTMLUListElement)

 <li> (HTMLLIElement)

 <dl> (HTMLDLístElement )

 <dt> (HTMLElement)

 <dd> (HTMLElement)

 <div> (HTMLDivElement)

  •  文字層級元素

 <a> (HTMLAnchorElement)

 <em> (HTMLElement)

 <strong> (HTMLElement)

 small > ( HTMLElement )

 <i> (HTMLElement)

 <b> (HTMLElement)

 <span> (HTMLSpanElement)

 <br> (HTMLBRElement)

  •  編修記錄元素

 <ins> (HTMLModElement)

 <del> ( HTMLModElement)

  •  内嵌媒體元素

 <img> (HTMLImageElement)

<i frame> (HTML,IFrameElement)

<embed> (HTMLEmbedElement)

<object> (HTMLObjectElement)

<param> (HTMLParamElement)

<video>(HTMLVideoElement)

<audio> (HTMLAudi oElement)

<source> (HTMLSourceElement)

<canvas> (HTMLCanvasElement)

  • 表格元素

<table> (HTMLTableElement)

<caption> (HTMLTableCaptionElement)

<tbody> (HTMLTabl eSecti onElement)

<thead> (HTMLTableSect ionElement)

<tfoot> (HTMLTableSectionElement)

<tr> (HTMLTableRowElement)

<td> (HTMLTableDatacellElement)

<th> (HTMLTableHeaderCellElement)

  • 窗體元素

<form> (HTMLFO rmE lement)

<fieldset> (HTMLFieldSetElement)

<legend> (HTMLLegendElement)

<label> (HTMLLabel E1 ement)

<input> (HTMLInputElement)

<button> (HTMLButtonElement)

<select> (HTMLSelectElement)

<datalist> (HTMLDataListElement)

<option> (HTMLopt ionElement)

<textarea> (HTMLTextAreaElement)

  • 互動式元素

<details> (HTMLDetailsElement)

<sursummary> (HTMLElement)

<command> (HTMLCommandEl ement)

<menu> (HTMLMenuEl ement)

Web App開發 移動開發 前端開發 搜尋推薦 html5 html效果 html不用 HTML問題 html引用 節點html
上一篇: ubuntu安裝wps出現的系統字型缺失問題
下一篇: sublime常用插件

繼續閱讀