亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Python開發(fā)【前端篇】HTML

番茄西紅柿 / 3071人閱讀

摘要:標簽行內(nèi)元素,表示一行中的一小段內(nèi)容,沒有具體的語義。表示當(dāng)前文件所在目錄下的上一級目錄,比如表示當(dāng)前目錄下的上一級目錄下的文件夾中的的圖片。標簽表示列表的整體。

1.html概述和基本結(jié)構(gòu)

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個個的標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm,一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。

html基本結(jié)構(gòu)

一個html的基本結(jié)構(gòu)如下:

DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>網(wǎng)頁標題title>
    head>
    <body>
          網(wǎng)頁顯示內(nèi)容
    body>
html>

第一行是文檔聲明,第二行“”標簽和最后一行“”定義html文檔的整體,“”標簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文,定義成中文是lang="zh-CN",不定義也沒什么影響,它一般作為分析統(tǒng)計用。 “”標簽和“”標簽是它的第一層子元素,“”標簽里面負責(zé)對網(wǎng)頁進行一些設(shè)置以及定義標題,設(shè)置包括定義網(wǎng)頁的編碼格式,外鏈css樣式文件和javascript文件等,設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上,標題的內(nèi)容會顯示在標題欄,“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。

HTML文檔類型

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

xhtml 1.0

xhtml 1.0 是html5之前的一個常用的版本,目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法: html:xt + tab
文檔示例:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文檔類型 title>
head>
<body>

body>
html>
html5

pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的
此版本文檔用sublime text創(chuàng)建方法: html:5 + tab 或者 ! + tab
文檔示例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文檔類型 title>
head>
<body>

body>
html>

兩種文檔的區(qū)別

1、文檔聲明和編碼聲明

2、html5新增了標簽元素以及元素屬性

html文檔規(guī)范

xhtml制定了文檔的編寫規(guī)范,html5可部分遵守,也可全部遵守,看開發(fā)要求。

1、所有的標簽必須小寫

2、所有的屬性必須用雙引號括起來

3、所有標簽必須閉合

4、img必須要加alt屬性(對圖片的描述)

html注釋:

html文檔代碼中可以插入注釋,注釋是對代碼的說明和解釋,注釋的內(nèi)容不會顯示在頁面上,html代碼中插入注釋的方法是:

html標簽特點:

html的標簽大部分是成對出現(xiàn)的,少量是單個出現(xiàn)的,特定標簽之間可以相互嵌套,嵌套就是指一個標簽里面可以包含一個或多個其他的標簽,包含的標簽和父標簽可以是同類型的,也可以是不同類型的:


<body>......body>
<p>......p>
<div>......div>
<b>......b>


<br />
<img src="..." />
<input type="..." />


<p>
    <span>...span>
    <a href="...">...a>
p>
<div>
      <h3>...h3>
      <div>
              <span>...span>
              <p>...p>
      div>
div>

2.html標題

通過

、

、

、

,標簽可以在網(wǎng)頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關(guān)系,比如說:

用作主標題(最重要的),其后是

(次重要的),再其次是

,以此類推。搜索引擎會使用標題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引,所以網(wǎng)頁上使用標題是很重要的。

<h1>這是一級標題h1>
<h2>這是二級標題h2>
<h3>這是三級標題h3>

3.html段落、換行與字符實體

html段落

標簽定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,代碼如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落title>
head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超
    文本指的是超鏈接,標記指的是標簽,是一種用來制作網(wǎng)頁的語言,這種語言由一個個的
    標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm。
    p>

    <p>一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方
    式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件渲染成網(wǎng)頁,顯示的網(wǎng)
    頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。p>
body>
html>

html換行

代碼中成段的文字,直接在代碼中回車換行,在渲染成網(wǎng)頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入
來強制換行,代碼如下:

<p>
一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br />
文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件<br />
渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。
p>

html字符實體

代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網(wǎng)頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體,代碼如下:


<p>
  一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用<br />
文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內(nèi)容將文件<br />
渲染成網(wǎng)頁,顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個網(wǎng)頁。p>

在網(wǎng)頁上顯示 “<” 和 “>” 會誤認為是標簽,想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實體,比如:


<p>
    3 < 5 <br>
    10 > 5
p>

4.html塊、含樣式的標簽

html塊

1、div標簽 塊元素,表示一塊內(nèi)容,沒有具體的語義。
2、span標簽 行內(nèi)元素,表示一行中的一小段內(nèi)容,沒有具體的語義。

含樣式和語義的標簽

1、em標簽 行內(nèi)元素,表示語氣中的強調(diào)詞
2、i標簽 行內(nèi)元素,原本沒有語義,w3c強加了語義,表示專業(yè)詞匯
3、b標簽 行內(nèi)元素,原本沒有語義,w3c強加了語義,表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、strong標簽 行內(nèi)元素,表示非常重要的內(nèi)容

語義化的標簽

語義化的標簽,就是在布局的時候多使用語義化的標簽,搜索引擎在爬網(wǎng)的時候能認識這些標簽,理解文檔的結(jié)構(gòu),方便網(wǎng)站的收錄。比如:h1標簽是表示標題,p標簽是表示段落,ul、li標簽是表示列表,a標簽表示鏈接,dl、dt、dd表示定義列表等,語義化的標簽不多。

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

html圖像

標簽可以在網(wǎng)頁上插入一張圖片,它是獨立使用的標簽,通過“src”屬性定義圖片的地址,通過“alt”屬性定義圖片加載失敗時顯示的文字,以及對搜索引擎和盲人讀屏軟件的支持。

<img src="images/pic.jpg" alt="產(chǎn)品圖片" />

絕對路徑和相對路徑

像網(wǎng)頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。

  • 絕對地址:相對于磁盤的位置去定位文件的地址
  • 相對地址:相對于引用文件本身去定位被引用的文件地址

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

  • “ ./ ” 表示當(dāng)前文件所在目錄下,比如:“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片,這個使用時可以省略。

  • “ ../ ” 表示當(dāng)前文件所在目錄下的上一級目錄,比如:“../images/pic.jpg” 表示當(dāng)前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

6.html鏈接

html鏈接

標簽可以在網(wǎng)頁上定義一個鏈接地址,通過src屬性定義跳轉(zhuǎn)的地址,通過title屬性定義鼠標懸停時彈出的提示文字框。

<a href="#">a> 
<a href="http://www.itcast.cn/" title="跳轉(zhuǎn)的傳智播客網(wǎng)站">傳智播客a>
<a href="2.html">測試頁面2a>

定義頁面內(nèi)滾動跳轉(zhuǎn)

頁面內(nèi)定義了“id”或者“name”的元素,可以通過a標簽鏈接到它的頁面滾動位置,前提是頁面要足夠高,有滾動條,且元素不能在頁面頂部,否則頁面不會滾動。

<a href="#mao1">標題一a>
......
......
<h3 id="mao1">跳轉(zhuǎn)到的標題h3>

7.html列表

有序列表

在網(wǎng)頁上定義一個有編號的內(nèi)容列表可以用

    、
  1. 配合使用來實現(xiàn),代碼如下:

    <ol>
        <li>列表文字一li>
        <li>列表文字二li>
        <li>列表文字三li>
    ol>

    在網(wǎng)頁上生成的列表,每條項目上會按1、2、3編號,有序列表在實際開發(fā)中較少使用。

    無序列表

    在網(wǎng)頁上定義一個無編號的內(nèi)容列表可以用

      、
    • 配合使用來實現(xiàn),代碼如下:

      <ul>
          <li>列表文字一li>
          <li>列表文字二li>
          <li>列表文字三li>
      ul>

      在網(wǎng)頁上生成的列表,每條項目上會有一個小圖標,這個小圖標在不同瀏覽器上顯示效果不同,所以一般會用樣式去掉默認的小圖標,如果需要圖標,可以用樣式自定義圖標,從而達到在不同瀏覽器上顯示的效果相同,實際開發(fā)中一般用這種列表。

      定義列表

      定義列表通常用于術(shù)語的定義。

      標簽表示列表的整體。
      標簽定義術(shù)語的題目。
      標簽是術(shù)語的解釋。一個
      中可以有多個題目和解釋,代碼如下:

      <h3>前端三大塊h3>
      <dl>
          <dt>htmldt>
          <dd>負責(zé)頁面的結(jié)構(gòu)dd>
      
          <dt>cssdt>
          <dd>負責(zé)頁面的表現(xiàn)dd>
      
          <dt>javascriptdt>
          <dd>負責(zé)頁面的行為dd>
      
      dl> 

      8.html表格

      table常用標簽

      1、table標簽:聲明一個表格

      2、tr標簽:定義表格中的一行

      3、td和th標簽:定義一行中的一個單元格,td代表普通單元格,th表示表頭單元格

      table常用屬性:

      1、border 定義表格的邊框

      2、cellpadding 定義單元格內(nèi)內(nèi)容與邊框的距離

      3、cellspacing 定義單元格與單元格之間的距離

      4、align 設(shè)置單元格中內(nèi)容的水平對齊方式,設(shè)置值有:left | center | right

      5、valign 設(shè)置單元格中內(nèi)容的垂直對齊方式 top | middle | bottom

      6、colspan 設(shè)置單元格水平合并

      7、rowspan 設(shè)置單元格垂直合并

       

      傳統(tǒng)布局:

       

      傳統(tǒng)的布局方式就是使用table來做整體頁面的布局,布局的技巧歸納為如下幾點:

       

      1、定義表格寬高,將border、cellpadding、cellspacing全部設(shè)置為0

       

      2、單元格里面嵌套表格

       

      3、單元格中的元素和嵌套的表格用align和valign設(shè)置對齊方式

       

      4、通過屬性或者css樣式設(shè)置單元格中元素的樣式

       

      傳統(tǒng)布局目前應(yīng)用:

       

      1、快速制作用于演示的html頁面

       

      2、商業(yè)推廣EDM制作(廣告郵件)

      表格常用樣式屬性

      border-collapse:collapse 設(shè)置邊框合并,制作一像素寬的邊線的表格

      9.html表單

      表單用于搜集不同類型的用戶輸入,表單由不同類型的標簽組成,實現(xiàn)一個特定功能的表單區(qū)域(比如:注冊),首先應(yīng)該用

      標簽來定義表單區(qū)域整體,在此標簽中再使用不同的表單控件來實現(xiàn)不同類型的信息輸入,具體實現(xiàn)及注釋可參照以下偽代碼:

      
      <form action="http://www..." method="get">
      
      
      <p>
      <label>姓名:label><input type="text" name="username" />
      p>
      
      
      <p>
      <label>密碼:label><input type="password" name="password" />
      p>
      
      
      <p>
      <label>性別:label>
      <input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" />p>
      
      
      <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>
      
      
      <p>
      <label>照片:label>
      <input type="file" name="person_pic">
      p>
      
      
      <p>
      <label>個人描述:label>
      <textarea name="about">textarea>
      p>
      
      
      <p>
      <label>籍貫:label>
      <select name="site">
          <option value="0">北京option>
          <option value="1">上海option>
          <option value="2">廣州option>
          <option value="3">深圳option>
      select>
      p>
      
      
      <p>
      <input type="submit" name="" value="提交">
      
      
      <input type="reset" name="" value="重置">
      p>
      
      form>

      html內(nèi)嵌框架

      html內(nèi)嵌框架