整合營銷服務商

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

          免費咨詢熱線:

          HTML-1(study)

          *******HTML********

          **Web服務本質**

          import socket

          sk = socket.socket()

          sk.bind(("127.0.0.1", 8080))

          sk.listen(5)

          while True:

          conn, addr = sk.accept()

          data = conn.recv(8096)

          conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協議 簡化

          conn.send(b"<h1>Hello world!</h1>")#發送內容

          conn.close()

          sk.close()

          瀏覽器發送請求-->HTTP協議-->服務器接受請求-->服務端返回響應-->服務端把HTML文件內容發送給瀏覽器-->瀏覽器渲染頁面

          What HTML?

          *超文本標記語言(Hypertext Markup Language,HTML)是一種用于創建網頁標記語言

          *本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的頁面。

          對于不同的瀏覽器,對于同一個標簽可能會有不同的解釋。(兼容性問題)

          *網頁文件的擴展名:.html或.htm

          *HTML是一種標記語言,他不是一種編程語言,HTML使用標簽來描述網頁。

          ****HTML文檔結構****

          *最基本的HTML文檔**

          <!DOCTYPE html>

          <html lang = 'zh-CN'>

          <head>

          <meta chrset = 'UTF-8'>

          <title> 標題 </title>

          </head>

          <body>

          </body>

          </html>

          #解釋

          1.<!DOCTYPE html>聲明為HTML5文檔

          2.<html></html>是文檔的開始標記語言和結束標記,是HTML頁面的根本元素,在他們之間是文檔的頭部(head)和主題(body)

          3.<head></head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元(meta)數據

          4.<title></title>定義了網頁標題,在瀏覽器標題欄顯示

          5.<body></body>之間的文本是可見的網頁主體內容

          注意:

          對于中文網頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現亂碼。這些瀏覽器會設置GBK為默認編碼,則需要我們設為

          <meta charset='gbk'>

          ****HTML標簽格式****

          *HTML標簽是由尖括號包圍的關鍵字

          *HTML標簽通常是成對出現的,比如:<div>和</div>,第一個標簽是開始,第二個標簽是結束。結束標簽會有斜線。

          *也有一部分標簽是單獨呈現的,比如:<br/>、<hr/>、<img src="1.jpg" />等。

          *標簽里面可以有若干屬性,也可以不帶屬性。

          ****標簽的語法

          <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>

          <標簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />

          幾個很重要的屬性:

          id:定義標簽的唯一ID,HTML文檔樹中唯一

          class:為html元素定義一個或多個類名(classname)(CSS樣式類名)

          style:規定元素的行內樣式(CSS樣式

          ****HTML注釋

          <!--注釋內容-->

          ****<!DOCTYPE>標簽****

          <!DOCTYPE> 聲明必須是HTML文檔的第一行,位于<html>標簽之前

          <!DOCTYPE> 聲明不是HTML標簽,他是指示web瀏覽器關于頁面使用哪個HTML版本進行編寫的指令

          ****HTML常用標簽****

          **head內常用的標簽**

          1.<title></title> 定義網頁的標題

          2.<style></style> 定義內部樣式表

          3.<script><script>定義JS代碼或引入外部JS文件

          4.<link/> 引入外部樣式文件

          5.<meta/>定義網頁原信息

          ****Meta標簽

          Meta標簽介紹:

          <meta>元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。

          <meta>標簽位于文檔的頭部,不包含任何內容。

          <meta>提供的信息是用戶不可見的。

          meta標簽的組成:meta標簽共有兩個屬性,它們分別是http-equiv屬性和name 屬性,不同的屬性又有不

          同的參數值,這些不同的參數值就實現了不同的網頁功能。

          1.http-equiv屬性:相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確地顯示

          網頁內容,與之對應的屬性值為content,content中的內容其實就是各個參數的變量值。

          <!--2秒后跳轉到對應的網址,注意引號-->

          <meta http-equiv="refresh" content="2;URL=https://www.baidu.com">

          <!--指定文檔的編碼類型-->

          <meta http-equiv="content-Type" charset=UTF8">

          <!--告訴IE以最高級模式渲染文檔-->

          <meta http-equiv="x-ua-compatible" content="IE=edge">

          2.names屬性:主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于搜索引擎

          機器人查找信息和分類信息用的

          <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">

          <meta name="description" content="Python">

          ******body內常用表標簽******

          ****基本標簽(塊級標簽和內聯標簽)****

          <b>加粗</b>

          <i>斜體</i>

          <u>下劃線</u>

          <a>刪除</a>

          <p>段落標簽</p>

          <h1>標題1</h1>

          <h2>標題2</h2>

          <h3>標題3</h3>

          <h4>標題4</h4>

          <h5>標題5</h5>

          <h6>標題6</h6>

          <!--換行-->

          <br>

          <!--水平線-->

          <hr>

          ****特殊字符****

          空格------

          >-------->

          <--------<

          &--------&

          ¥--------¥

          版權(??)---?

          注冊(??)---?

          ****div標簽和span標簽****

          div標簽用來定義一個塊級元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

          span標簽用來定義內聯(行內)元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現。

          塊級元素與行內元素的區別:

          所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。

          這兩個元素是專門為定義CSS樣式而生的。

          注意:

          關于標簽嵌套:通常塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。

          p標簽不能包含塊級標簽,p標簽也不能包含p標簽。

          ****img標簽****

          <img src='圖片路徑' alt='圖片未加載成功時的提示' title='鼠標懸浮時提示信息' width='寬' height='高(寬高只有一個會等比縮放)'>

          ****a標簽****

          超鏈接標簽

          所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,

          也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,

          甚至是一個應用程序。

          什么是URL?

          URL是統一資源定位器(Uniform Resource Locator)的縮寫,也被稱為網頁地址,是因特網上標準的資源的地址。

          URL舉例

          http://www.baidu.com/stu/index.html

          http://111.13.100.91/stu/index.html

          URL地址由4部分組成

          第1部分:為協議:http://、ftp://等

          第2部分:為站點地址:可以是域名或IP地址

          第3部分:為頁面在站點中的目錄:stu

          第4部分:為頁面名稱,例如 index.html

          各部分之間用“/”符號隔開。

          <a target='_blank'>點擊我</a>

          href屬性指定目標網頁地址。該地址可以有幾種類型:

          1.絕對URL-指向另一個站點(不如 )

          2.相對URL-指向當前站點中確切的路徑(href = 'index.html')

          3.錨URL-指向頁面中的錨(href = '#top')

          target:

          1._blank表示在新標簽頁中打開目標頁面

          2._self表示在當前標簽頁中打開目標頁面

          ****列表*****

          1.無序列表

          <ul type="disc">

          <li>第一項</li>

          <li>第二項</li>

          </ul>

          type屬性:

          1.disc(實心圓點,默認值)

          2.circle(空心圓圈)

          3.square(實行方塊)

          4.none(無樣式)

          2.有序列表

          <ol type="1" start="2">

          <li>第一項</li>

          <li>第二項</li>

          </ol>

          type屬性:

          1.1數字列表,默認值

          2.A大寫字母

          3.a小寫字母

          4.I大寫羅馬

          5.i小寫羅馬

          3.標題列表

          <dl>

          <dt>標題1</dt>

          <dt>內容1</dt>

          <dt>標題2</dt>

          <dt>內容1</dt>

          <dt>內容2</dt>

          </dl>

          ****表格****

          表格是一個二維數據空間,一個表格由若干行組成,一行又有若干單元格組成,單元格里面可以

          包括文字。列表。圖案。表單。數字符號。預置文本和其它的表格等內容。

          表格最重要的目的是顯示表格類數據。

          表格類數據是值最適合組織為表格格式(即按行和列組織)的數據

          表格基本結構:

          <table>

          <thead>

          <tr>

          <td>序號</td>

          <td>姓名</td>

          <td>愛好</td>

          </tr>

          </theaf>

          <tbody>

          <tr>

          <td>1</td>

          <td>tom</td>

          <td>吃老鼠</td>

          </tr>

          <tr>

          <td>2</td>

          <td>Jacl</td>

          <td>吃奶酪</td>

          </tr>

          </tbody>

          </table>

          屬性:

          1.border:表格邊框

          2.cellpadding:內邊距

          3.cellspacing:外邊距

          4.width:像素百分比(最好通過css來設置長度)

          5.rowspan:單元格豎跨多少行

          6.colspan:單元格橫跨多少列(即合并單元格)

          ****form(表單)****

          功能;

          表單用于向服務器傳輸數據,從而實現用戶與web服務器的交互

          表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等

          表單還可以包含textarea、select、fieldest和lable標簽

          ***表單屬性

          1.accept-charset 規定在被提交表單中使用的字符集(默認:頁面字符集)

          2.action 規定在何處提交表單的地址(URL)(提交頁面)

          3.autocomplete 規定瀏覽器應該自動完成表單(默認:開啟)

          4.enctype 規定被提交數據的編碼(默認:url-encoded)

          5.method 規定在提交表單時所用的HTTP方法(默認GET)

          6.name 規定識別表單的名稱(對于DOM使用:document.forms.name)

          7.novalidate規定瀏覽器不驗證表單

          8.target規定action屬性中地址的目標(默認_self)

          ***表單元素

          基本概念:

          HTML表單是HTML元素中較為復雜的部分,表單往往和腳本、動態頁面、數據處理等功能相結合,因此它是制作動態網站很重要的內容。

          表單一般用來收集用戶的輸入信息

          表單工作原理:

          訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。

          服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。

          當數據完整無誤后,服務器反饋一個輸入完成的信息。

          ******input******

          <input>元素會根據不同的type屬性,變化為多種形態

          type屬性值表現形式對應代碼

          text單行輸入文本<input type="text" />

          password密碼輸入框<input type="password" />

          date日期輸入框<input type="date" />

          checkbox復選框<input type="checkbox" checked="checked" />

          radio單選框<input type="radio" />

          submit提交按鈕<input type="submit" value="提交" />

          reset重置按鈕<input type="reset" value="重置" />

          button普通按鈕<input type="button" value="普通按鈕" />

          hidden隱藏輸入框<input type="hidden" />

          file文本選擇框<input type="file" />

          屬性說明:

          1.name:表單提交時的“鍵”,注意和id的區別

          2.value:表單提交時對應項的值

          type = “button”,“reset”,“submit”時,為按鈕上顯示的文本信息

          type = “text”,“password”,“hidden“時,為輸入框的初始值

          type = ”checkbox“,”radio“,”file“時,為輸相關聯的值

          3.checked:radio和checkbox默認被選中的項

          4.readonly:text和password設置只讀

          5.disabled:所有input均適用

          ******select標簽******

          <from action="" method="post">

          <select name="city" id="city">

          <option value="1">北京</option>

          <option selected="selected" value="2">成都</option>

          <option value="3">西安</option>

          </select>

          </form>

          屬性說明:

          1.multiple:布爾屬性,設置后為多選,否則默認單選

          2.disabled:禁用

          3.selected:默認選中該項

          4.value:定義提交時的選項值

          ******lable標簽******

          定義:<lable>標簽為input元素定義標注(標記)

          說明:

          1.label元素不會向用戶呈現任何特殊效果

          2.<lable>標簽的for屬性值應當與相關元素的id屬性值相同

          <form>

          <lable for="username">用戶名</lable>

          <input type="text" id="username" name="username">

          </form>

          ******textarea多行文本******

          <textarea name="memo" id="memo" cols="30" rows="10">

          默認內容

          </textarea>

          屬性說明:

          1.name:名稱

          2.rows:行數

          3.cols:列數

          4.disable:禁用

          站的建站流程

          頁面圖例

          網頁的結構

          WEB標準

          WEB標準是網頁制作的標準,它不是一個標準,它是根據網頁的不同組成部分生成的一系列標準。這些標準大部分由W3C起草發布,也有部分標準由ECMA起草發布

          (1)W3C( World Wide Web Consortium )萬維網聯盟,創建于1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構;是專門負責網絡標準制定的非贏利組織。制定了結構標準和樣式標準; (2)ECMA:歐洲電腦網商聯合會(廠商協會),制定了行為標準;

          計算機語言

          HTML

          HTML 指的是超文本標記語言 (Hyper Text Markup Language) www萬維網的描述性語言。 XHTML指可擴展超文本標記語言(標識語言)(EXtensible HyperText Markup Language)是一種置標語言,表現方式與超文本標記語言(HTML)類似,不過語法上更加嚴格。 HTML5指的是HTML的第五次重大修改(第5個版本)

          HTML發展

          編輯器

          建立站點

          規劃網站的所有內容和代碼
          整合資源

          文件的命名規范

          • 小寫英文字母、數字、下劃線的組合,
          • 其中不得包含漢字、空格和特殊字符;
          • 必須以英文字母開頭。

          HTML開始

          1:HTML架構

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

          有三種:Strict(嚴格型)、

          Trasitional(過渡型)、

          Frameset(框架型)

          2:HTML5基本結構

          3:HTML語言

          • HTML語言組成

          (1)標簽

          txt 寫在尖角號<>里的第一個單詞,叫做標記,也叫做標簽,也稱作元素;

          (2)屬性

          標記和屬性用空格隔開,屬性和屬性值用等號連接,屬性值必須放在雙引號內 一個標記可以有多個屬性,屬性和屬性之間用空格隔開,屬性不分先后順序

          • HTML語法

          (1)常規標記(雙標記): <標記名稱 屬性1名="屬性1值" 屬性2名="屬性2值" ………… >

          (2)空標記(單標記):<標記名 屬性1名="屬性1值" />

          常用標簽

          1 : 文本標題標簽

          文本標題共有6個(h1-h6)
          <h1>一級標題</h1>(唯一性,放網站LOGO)
          <h2>二級標題</h2>
          ...
          <h6>六級標題</h6>

          2:字體傾斜&加粗標記

          文本傾斜:
              <i></i>
              <em></em>
          
          文本加粗:
              <b></b>
              <strong></strong>

          3:下劃線

          <u></u>

          4 : 換行&水平線

          <br>
          <hr>

          5:上標&下標

          <sup></sup>
          <sub></sub>

          6 : 段落標記

          <p></p>

          7 : 字符 ( 小段文本 )

          <span></span>

          8 : (1) 無序列表

          <ul>
               <li>列表項內容</li>
               <li>列表項內容</li>
               <li>列表項內容</li>
                 ........   
          </ul>

          ? (2)有序列表

          <ol>
              <li>列表項內容</li>
              <li>列表項內容</li>
              <li>列表項內容</li>
              ........   
          </ol>

          type:規定列表中的列表項目的項目符號的類型 語法:<ol type=“ a"></ol> 1 數字順序的有序列表(默認值)(1, 2, 3, 4)。 a 字母順序的有序列表,小寫(a, b, c, d)。 A 字母順序的有序列表,大寫(A,B,C,D) i 羅馬數字,小寫(i, ii, iii, iv)。 I 羅馬數字,大寫(i, ii, iii, iv)。 start 屬性規定有序列表的開始點。(start的屬性值必須是數字) 語法:<ol start="5"></ol>

          ? (3)自定義列表

          <dl>
               dt></dt>
               <dd></dd>
          </dl>

          9 : 超鏈接

          <a></a>
              屬性:
                  href = 'url'
                  target = "_blank  /  _self";
                  title = '文本提示'
          
              拓展:
                  rel = 'nofollow';

          10 : 圖片

          <img>
              屬性:
                  src = 'url';
                  alt = ' 標簽 實例 帶有指定替代文本的圖像'  
                  title = '文本提示'
                  width = ''
                  height = ''
                  border = ''

          圖片 title 和 alt區別:

          alt:

          1、alt屬性是考慮到不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶,

          以及視覺障礙的用戶和使用屏幕閱讀器的用戶。當圖片不顯示的時候,圖片的替換文字。

          2、alt屬性值的長度必須少于100個英文字符

          3、alt屬性是img標簽的必須屬性,如果沒有特別意義的圖片,可以寫alt=""

          4、alt屬性是搜索引擎判斷圖片與文字是否相關的重要依據, alt屬性添加到img主要的目的才是為了SEO

          title:

          1、title屬性并不是必須的。

          2、title屬性規定元素的額外信息,有視覺效果, 當鼠標放到文字或是圖片上時有文字顯示。

          3、title屬性并不作為搜索引擎抓取圖片的參考, 更多傾向于用戶體驗的考慮。

          11 : 相對路徑

          (同級)

          1)當當前文件與目標文件在同一目錄下, 直接書寫目標文件的文件名+擴展名;

          (上級找下級)

          2)當當前文件與目標文件所處的文件夾在同一目錄下,寫法如下:

          文件夾名/目標文件全稱+擴展名;

          (下級找上級)

          3)當當前文件所處的文件夾和目標文件在同一目錄下,寫法如下:

          ../目標文件文件名+擴展名;

          12 : DIV

          13 : HTML注釋

          <!-- 注釋 -->

          表格

          1 : 表格基本結構

          <table>
              <tr>
                  <td></td>
                  <td></td>
              </tr>
          </table>
          
          <!-- 
              table 為表格
              tr 行
              td 列(每一個單元格)
          -->

          2:表格的html屬性

          1)width="表格的寬度"
          2)height="表格的高度"
          3)border="表格的邊框"
          4)bordercolor="邊框色"
          5)cellspacing="單元格與單元格之間的間距"
          6)cellpadding=“單元格與內容之間的距離"
          7)align="表格水平對齊方式"
             取值:left、right、center、
             valign=“垂直對齊” top\bottom\middle
          8)合并單元格屬性:(td)
            合并列: colspan=“所要合并的單元格的列數"
            合并行: rowspan=“所要合并單元格的行數”

          3 : 數據行分組

          <thead></thead>
          <tbody></tbody>
          <tfoot></tfoot>

          4 : 數據列分組

          <colgroup span="value"></colgroup>
          <!--span屬性為把幾列分為一組-->

          5 : 列標題

          <th></th>

          6: 表格標題

          <caption></caption>

          7: 表格屬性

          1、單元格間距:border-spacing:value; 說明:單元格間距(該屬性必須給table添加) 表示單元格邊框之間的距離, 不可取負值 2、合并相鄰單元格邊框:border-collapse:separate/collapse; 說明:合并相鄰單元格邊框 (該屬性必須給table添加) separate(邊框分開)默認值; collapse(邊框合并) 3、無內容時單元格的設置:empty-cells:show/hide; 說明:定義當單元格無內容時,是否顯示該單元格的邊框區域;show:顯示 ;hide:隱藏; 4、顯示單元格行和列的算法(加快運行的速度): table-layout:auto/fixed;



          本文轉自知乎號:千鋒HTML5學院

          TML(英文Hyper Text Markup Language的縮寫)中文譯為“超文本標簽語言”,主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。

          1 HTML骨架格式

          日常生活的書信,我們要遵循共同的約定。

          同理:HTML 有自己的語言語法骨架格式:

          <HTML>   
              <head>     
                  <title></title>
              </head>
              <body>
              </body>
          </HTML>
          1. html結構:包括head body
          2. html標簽是以尖括號包圍的關鍵字
          3. html標簽通常是成對出現的,有開始就有結束,包含成對標簽、獨立標簽
          4. html通常都有屬性,格式:屬性名=“屬性值”(多個屬性之間空格隔開)
          5. html標簽不區分大小寫,建議小寫

          2 html基本標簽

          • HTML標簽

          作用:所有HTML中標簽的一個根節點。

          • head標簽

          作用:用于存放:title,meta,base,style,script,link

          注意:在head標簽中我們必須要設置的標簽是title

          • title標簽

          作用:讓頁面擁有一個屬于自己的標題。

          • body標簽

          作用:頁面在的主體部分,用于存放所有的HTML標簽:p,h,a,b,u,i,s,em,del,ins,strong,img

          3 顏色的表示方式

          1. color:文本的顏色
          2. bgcolor:背景色
          3. background:背景圖片

          第一種方式:使用顏色名稱: 僅僅有16種顏色名可用英文字母,其余的要用16進制值。

          aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

          第二種方式:RGB模式

          第三種:十六進制

          #000000 #ffffff #325687 #377405

          4 文檔類型<!DOCTYPE>(重點)

          <!DOCTYPE html>這句話就是告訴我們使用哪個html版本, 我們使用的是 html 5 的版本。 html有很多版本,那我們應該告訴用戶和瀏覽器我們使用的版本號。

          標簽位于文檔的最前面,用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范,必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型,只有這樣瀏覽器才能按指定的文檔類型進行解析。

          5 HTML標簽的語義化(重點)

          所謂標簽語義化,就是指標簽的含義。

          為什么要有語義化標簽:方便代碼的閱讀和維護,同時讓瀏覽器或是網絡爬蟲可以很好地解析,從而更好分析其中的內容,使用語義化標簽會具有更好地搜索引擎優化

          核心:合適的地方給一個最為合理的標簽。

          語義是否良好: 當我們去掉CSS之后,網頁結構依然組織有序,并且有良好的可讀性,不管是誰都能看懂這塊內容是什么。

          遵循的原則:先確定語義的HTML ,再選合適的CSS。

          6 總結:(重要知識點)

          • 雙標簽
          <html></html>
          <head></head>
          <title></title>
          <body></body>
          <table></table>
          <tr></tr>
          <td></td>
          <span></span>
          <p></p>
          <form></form>
          <h1></h1>
          <h2></h2>
          <h3></h3>
          <h4></h4>
          <h5></h5>
          <h6></h6>
          <object></object>
          <style></style>
          <b></b>
          <u></u>
          <strong></strong>
          <i></i>
          <div></div>
          <a></a>
          <script></script>
          <center><center>
          • 單標簽
          <br>
          <hr>
          <img>
          <input>
          <param>
          <meta>
          <link>
          • 排版標簽
          1.注釋標簽:<!–注釋–>
          -------------------------------------
          2.換行標簽:<br/>
          -------------------------------------
          3.段落標簽:<p>文本文字
             特點:段與段之間有行高
             屬性:align對齊方式
                     (left:左對齊 center:居中 right:右對齊)
          -------------------------------------
          4.水平線標簽:<hr/>
             屬性:
                  width:水平線的長度(兩種:第一種:像素表示;第二種,百分比表示)
                  size: 水平線的粗細 (像素表示,例如:10px)
                  color: 水平線的顏色
                  align:水平線的對齊方式(left:左對齊 center:居中 right:右對齊)
          -------------------------------------
          5.容器標簽(重點)
               <div>:塊級標簽,獨占一行,換行
               <span>:行級標簽,所有內容都在同一行作用
               <div>:主要是結合css頁面分塊布局
               <span>:進行友好提示信息
          • 標題標簽 (熟記)

          為了使網頁更具有語義化,我們經常會在頁面中用到標題標簽,HTML提供了6個等級的標題,隨著數字增大文字逐漸變小,字體是加粗的,內置字號,默認占據一行;

          <h1>、<h2>、<h3>、<h4>、<h5>和<h6>
          • 列表標簽

          容器里面裝載著文字或圖表的一種形式,叫列表。列表最大的特點就是 整齊 、整潔、 有序

          無序列表 ul (重點)

          無序列表標簽: <ul></ul>
              屬性:type :三個值,分別為:
                     circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
              列表項:<li></li>
          注意:
          <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
          <li>與</li>之間相當于一個容器,可以容納所有元素。
          
          無序列表會帶有自己樣式屬性,放下那個樣式,一會讓CSS來!

          有序列表 ol

          有序列表標簽:<ol>
                屬性:type:1、A、a、I、i(數字、字母、羅馬數字)
                列表項: <li></li>

          定義列表dl

          \dl>
          <dt>名詞1
          <dd>名詞1解釋1
          <dd>名詞1解釋2
          …
          <dt>名詞2
          <dd>名詞2解釋1
          <dd>名詞2解釋2
          …
          </dl>
          
          dl>
          名詞1
          名詞1解釋1
          名詞1解釋2
          ... 名詞2
          名詞2解釋1
          名詞2解釋2
          ...
          • 圖片標簽

          獨立標簽

          屬性:
          src:圖片地址: 相對路徑 (同一個網站) 絕對路徑 (不同網站)
          width:寬度height:高度border:邊框align:對齊方式,代表圖片與相鄰的文本的相當位置(有三個屬性值:top middle bottom)
          alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白,以免文字或其它圖片過于貼近

          鏈接標簽

          超鏈接可以是文本,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。(不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接)

          屬性:
          href:跳轉頁面的地址(跳轉到外網需要添加協議);
          name:名稱,錨點(回到錨點: 頂部,底部,中間),在訪問錨點的書寫格式:#name的值
          target:_self(自己) _blank(新頁面,之前頁面存在) _
          __parent top 默認
          self_search相等于給頁面起一個名字,如果再次打開時,如果頁面存在,則不再打開新的頁面。可以是任意名字。

          如果當時沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接。


          主站蜘蛛池模板: 精品国产免费观看一区| 国产乱码精品一区二区三区四川| 亚拍精品一区二区三区| 福利电影一区二区| 一区二区三区在线观看| 精品亚洲综合在线第一区| 美女视频一区二区| 国产一区二区三区美女| 在线视频国产一区| 糖心vlog精品一区二区三区 | 亚洲AV无码一区二区三区性色| 久久精品国产亚洲一区二区三区 | 一区二区三区四区无限乱码 | 大伊香蕉精品一区视频在线| 国产剧情一区二区| 日本精品一区二区三本中文| 色婷婷av一区二区三区仙踪林| 国产美女一区二区三区| 精品黑人一区二区三区| 国产福利一区二区三区视频在线| 亚洲综合一区二区精品导航| 一区二区视频在线| 韩国福利影视一区二区三区| 麻豆一区二区三区精品视频| 中文字幕一区二区精品区| 无码av免费一区二区三区试看| 亚洲A∨无码一区二区三区 | 精品国产日韩亚洲一区| 中文字幕Av一区乱码| 国产午夜精品一区二区三区漫画| 亚洲av一综合av一区| 国产在线一区二区三区| 久久精品无码一区二区无码 | 国偷自产Av一区二区三区吞精| 中文字幕在线观看一区二区 | 亚洲国模精品一区| 精品中文字幕一区二区三区四区| 国内精品视频一区二区八戒| 日本韩国黄色一区二区三区| 亚洲视频一区二区三区| 日本免费一区二区三区四区五六区|