真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

前端基礎(chǔ)入門一(HTML)

學習大綱

  • 了解常用瀏覽器
  • 掌握WEB標準
  • 理解標簽語義化
  • 掌握常用的排版標簽
  • 掌握常用的文本格式化圖像鏈接等標簽
  • 掌握三種列表標簽
  • 掌握表格標簽
  • 掌握表格標簽
  • 掌握表單標簽

    創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷,產(chǎn)品發(fā)布一步更新,電腦網(wǎng)絡(luò)+移動網(wǎng)絡(luò)一網(wǎng)打盡,滿足企業(yè)的營銷需求!創(chuàng)新互聯(lián)公司具備承接各種類型的做網(wǎng)站、成都網(wǎng)站建設(shè)項目的能力。經(jīng)過十載的努力的開拓,為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù),并獲得了客戶的一致好評。

    • *

HTML

能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標簽和鏈接)

開發(fā)工具

我們主要用的開發(fā)工具有chrome、hbuilder、Photoshop

瀏覽器顯示

瀏覽器是網(wǎng)頁顯示、運行的平臺,常用的瀏覽器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我們平時稱為五大瀏覽器。

瀏覽器內(nèi)核(理解)

瀏覽器內(nèi)核又可以分成兩部分:渲染引擎(layout engineer 或者 Rendering Engine)和?JS 引擎。
渲染引擎?:它負責取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入 CSS 等),以及計算網(wǎng)頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。
JS 引擎?則是解析 Javascript 語言,執(zhí)行 javascript語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。


最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確,后來 JS 引擎越來越獨立,內(nèi)核就傾向于只指渲染引擎。有一個網(wǎng)頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多,如加上沒什么人使用的非商業(yè)的免費內(nèi)核,可能會有10多種,但是常見的瀏覽器內(nèi)核可以分這四種:Trident、Gecko、Blink、Webkit。


了解一點:移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機而言,使用率最高的就是Webkit內(nèi)核,大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核,基本上也是屬于webkit二次開發(fā)。

iOS以及WP7平臺上,由于系統(tǒng)原因,系統(tǒng)大部分自帶瀏覽器內(nèi)核,一般是Safari或者IE內(nèi)核Trident的>自己是個做了幾年開發(fā)的老碼農(nóng),希望本文對你有用! 這里推薦一下我的前端學習交流圈:767273102 ,里面都是學習前端的,從最基礎(chǔ)的HTML+CSS+JS【炫酷特效,游戲,插件封裝,設(shè)計模式】到移動端HTML5的項目實戰(zhàn)的學習資料都有整理,送給每一位前端小伙伴。2019最新技術(shù),與企業(yè)需求同步。好友都在里面學習交流,每天都會有大牛定時講解前端技術(shù)!


Web標準

web標準的好處
1、讓Web的發(fā)展前景更廣闊

2、內(nèi)容能被更廣泛的設(shè)備訪問

3、更容易被搜尋引擎搜索

4、降低網(wǎng)站流量費用

5、使網(wǎng)站更易于維護

6、提高頁面瀏覽速度


web標準的結(jié)構(gòu)

結(jié)構(gòu)標準:結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類,咱們主要學的是HTML。 最重要
表現(xiàn)標準:表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式,主要指的是CSS。
行為標準:行為是指網(wǎng)頁模型的定義及交互的編寫,咱們主要學的是 Javascript


HTML初識

HTML(英文Hyper Text Markup Language的縮寫)中文譯為“超文本標簽語言”。是用來描述網(wǎng)頁的一種語言。

所謂超文本,因為它可以加入圖片、聲音、動畫、多媒體等內(nèi)容,不僅如此,它還可以從一個文件跳轉(zhuǎn)到另一個文件,與世界各地主機的文件連接。

?我是一個大標題?

注意: 體會 文本 標簽 語言 幾個詞語

  • HTML 指的是超文本標記語言 (Hyper Text Markup Language)
  • HTML 不是一種編程語言,而是一種標記語言 (markup language)
  • 標記語言是一套標記標簽 (markup tag)

總結(jié): HTML 作用就是用標記標簽來描述網(wǎng)頁,把網(wǎng)頁內(nèi)容在瀏覽器中展示出來。


HTML骨架格式

   
         
        
    
    
    

骨架結(jié)構(gòu)解析
1 HTML標簽:
作用所有HTML中標簽的一個根節(jié)點。 最大的標簽 根標簽
2 head標簽: 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

注意在head標簽中我們必須要設(shè)置的標簽是title

3.title標簽: 文檔的標題
作用:讓頁面擁有一個屬于自己的標題。
4.body標簽:文檔的主體 以后我們的頁面內(nèi)容 基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容(比如文本、超鏈接、圖像、表格和列表等等。)


HTML標簽分類

在HTML頁面中,帶有“< >”符號的元素被稱為HTML標簽,如上面提到的 HTML、head、body都是HTML骨架結(jié)構(gòu)標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令,也稱為HTML標簽或 HTML元素

1.雙標簽

<標簽名>?內(nèi)容?

該語法中“<標簽名>”表示該標簽的作用開始,一般稱為“開始標簽(start tag)”,“” 表示該標簽的作用結(jié)束,一般稱為“結(jié)束標簽(end tag)”。和開始標簽相比,結(jié)束標簽只是在前面加了一個關(guān)閉符“/”。

比如?我是文字?

2.單標簽

<標簽名?/>

單標簽也稱空標簽,是指用一個標簽符號即可完整地描述某個功能的標簽。

比如?

HTML標簽關(guān)系

標簽的相互關(guān)系就分為兩種:

1.嵌套關(guān)系

???

2.并列關(guān)系



HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言,我們學的是結(jié)構(gòu),就只寫HTML標簽,認識標簽就可以了。 不會再給結(jié)構(gòu)標簽指定樣式了。

HTML標簽有很多,這里我們學習最為常用的,后面有些較少用的,我們可以查下手冊就可以了。

排版標簽

標題標簽(熟記)

單詞縮寫: head 頭部. 標題 title 文檔標題

為了使網(wǎng)頁更具有語義化,我們經(jīng)常會在頁面中用到標題標簽,HTML提供了6個等級的標題,即

、

、

、

、

其基本語法格式如下:

?標題文本?

段落標簽(熟記)

?文本內(nèi)容?


水平線標簽(認識)

是單標簽

換行標簽(熟記)


div span標簽(重點)

div span 是沒有語義的 是我們網(wǎng)頁布局主要的2個盒子 css+div

div 就是 division 的縮寫 分割, 分區(qū)的意思 其實有很多div 來組合網(wǎng)頁。

span, 跨度,跨距;范圍

語法格式:

?這是頭部?
?今日價格

文本格式化標簽(熟記)

在網(wǎng)頁中,有時需要為文字設(shè)置粗體、斜體或下劃線效果,這時就需要用到HTML中的文本格式化標簽,使文字以特殊的方式顯示。
前端基礎(chǔ)入門一(HTML)

b i s u 只有使用 沒有 強調(diào)的意思 strong em del ××× 語義更強烈


標簽屬性

使用HTML制作網(wǎng)頁時,如果想讓HTML標簽提供更多的信息,可以使用HTML標簽的屬性加以設(shè)置。其基本語法格式如下:

<標簽名?屬性1="屬性值1"?屬性2="屬性值2"?…>?內(nèi)容?

在上面的語法中,

1.標簽可以擁有多個屬性,必須寫在開始標簽中,位于標簽名后面。

2.屬性之間不分先后順序,標簽名與屬性、屬性與屬性之間均以空格分開。

3.任何標簽的屬性都有默認值,省略該屬性則取默認值。

采取 鍵值對 的格式 key="value" 的格式

比如:

屬性 是 寬度

值 是 400


圖像標簽img (重點)

單詞縮寫: image 圖像

HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽,要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽,接下來將詳細介紹圖像標簽以及和他相關(guān)的屬性。其基本語法格式如下:

該語法中src屬性用于指定圖像文件的路徑和文件名,他是img標簽的必需屬性。

前端基礎(chǔ)入門一(HTML)


鏈接標簽(重點)

單詞縮寫: anchor 的縮寫 [???k?(r)] ?;窘忉?錨, 鐵錨 的

在HTML中創(chuàng)建超鏈接非常簡單,只需用標簽環(huán)繞需要被鏈接的對象即可,其基本語法格式如下:

文本或圖像

href:用于指定鏈接目標的url地址,當為標簽應(yīng)用href屬性時,它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用

target:用于指定鏈接頁面的打開方式,其取值有self和blank兩種,其中self為默認值,blank為在新窗口中打開方式。

注意:

1.外部鏈接 需要添加?http://?www.baidu.com

2.內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href="index.html"> 首頁

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

4.不僅可以創(chuàng)建文本超鏈接,在網(wǎng)頁中各種網(wǎng)頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接。


錨點定位 (難點)

通過創(chuàng)建錨點鏈接,用戶能夠快速定位到目標內(nèi)容。

創(chuàng)建錨點鏈接分為兩步:

1.使用“a href=”#id名>“鏈接文本"創(chuàng)建鏈接文本(被點擊的)
     

2.使用相應(yīng)的id名標注跳轉(zhuǎn)目標的位置。
  

第2集


base 標簽 基本的

base 可以設(shè)置整體鏈接的打開狀態(tài)

base 寫到 之間

把所有的連接 都默認添加 target="_blank"


特殊字符標簽 (理解)

前端基礎(chǔ)入門一(HTML)


注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字,就需要使用注釋標簽。其基本語法格式如下:

?ctrl + / 或者 ctrl +shift + /

注釋內(nèi)容不會顯示在瀏覽器窗口中,但是作為HTML文檔內(nèi)容的一部分,也會被下載到用戶的計算機上,查看源代碼時就可以看到。


路徑(重點、難點)

前端基礎(chǔ)入門一(HTML)

實際工作中,通常新建一個文件夾專門用于存放圖像文件,這時再插入圖像,就需要采用“路徑”的方式來指定圖像文件的位置。

根目錄 當前目錄

路徑可以分為: 相對路徑和絕對路徑


相對路徑

以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ),而建立出的目錄路徑。因此,當保存于不同目錄的網(wǎng)頁引用同一個文件時,所使用的路徑將不相同,故稱之為相對路徑。

  1. 圖像文件和HTML文件位于同一文件夾:只需輸入圖像文件的名稱即可,如img src="logo.gif" /。
  2. 圖像文件位于HTML文件的下一級文件夾:輸入文件夾名和文件名,之間用“/”隔開,如img src="img/img01/logo.gif" /。
  3. 圖像文件位于HTML文件的上一級文件夾:在文件名之前加入“../” ,如果是上兩級,則需要使用 “../ ../”,以此類推,如img src="../logo.gif" /。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對,意指當所有網(wǎng)頁引用同一個文件時,所使用的路徑都是一樣的

“D:webimglogo.gif”,或完整的網(wǎng)絡(luò)地址,例如“http://www.itcast.cn/images/l...”。


思路貫穿線

前端基礎(chǔ)入門一(HTML)


列表標簽

無序列表 ul (重點)

無序列表的各個列表項之間沒有順序級別之分,是并列的。其基本語法格式如下:

  • 列表項1
  • 列表項2
  • 列表項3
  • ......

注意:

    • 中只能嵌套
    • ,直接在
        標簽中輸入其他標簽或者文字的做法是不被允許的。
      • 之間相當于一個容器,可以容納所有元素。
      • 無序列表會帶有自己樣式屬性,放下那個樣式,一會讓CSS來!

      有序列表 ol (了解)

      有序列表即為有排列順序的列表,其各個列表項按照一定的順序排列定義,有序列表的基本語法格式如下:

      1. 列表項1
      2. 列表項2
      3. 列表項3
      4. ......

      所有特性基本與ul 一致。

      但是實際工作中, 較少用 ol img src="media/1.jpg" />


      自定義列表(理解)

      定義列表常用于對術(shù)語或名詞進行解釋和描述,定義列表的列表項前沒有任何項目符號。其基本語法如下:

      名詞1
      名詞1解釋1
      名詞1解釋2
      ...
      名詞2
      名詞2解釋1
      名詞2解釋2
      ...

      表格 table(會使用)

      創(chuàng)建表格

      在HTML網(wǎng)頁中,要想創(chuàng)建表格,就需要使用表格相關(guān)的標簽。創(chuàng)建表格的基本語法格式如下:

      
          ...
        
        ...
      
      單元格內(nèi)的文字

      在上面的語法中包含三對HTML標簽,分別為 table1.table用于定義一個表格。

      2.tr 用于定義表格中的一行,必須嵌套在 table標簽中,在 table中包含幾對 tr,就有幾行表格。

      3.td /td:用于定義表格中的單元格,必須嵌套在標簽中,一對 中包含幾對,就表示該行中有多少列(或多少個單元格)。


      注意:

      1\. 中只能嵌套
      2\. 標簽,他就像一個容器,可以容納所有的元素

      表格屬性

      前端基礎(chǔ)入門一(HTML)


      表頭標簽

      表頭一般位于表格的第一行或第一列,其文本加粗居中,如下圖所示,即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單,只需用表頭標簽th前端基礎(chǔ)入門一(HTML)


      表格結(jié)構(gòu)(了解)

      在使用表格進行布局時,可以將表格劃分為頭部、主體和頁腳(頁腳因為有兼容性問題,我們不在贅述),具體 如下所示:

      :用于定義表格的頭部。

      必須位于

      標簽中,一般包含網(wǎng)頁的logo和導航等頭部信息。

      :用于定義表格的主體。

      位于

      標簽中,一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。


      表格標題

      表格的標題: caption
      定義和用法

      caption 元素定義表格標題。

      我是表格標題

      caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。


      合并單元格(難點)

      跨行合并:rowspan 跨列合并:colspan

      合并單元格的思想:

       將多個內(nèi)容合并的時候,就會有多余的東西,把它刪除。    例如 把 3個 td 合并成一個, 那就多余了2個,需要刪除。
      
       公式:  刪除的個數(shù)  =  合并的個數(shù)  - 1   
      

      合并的順序 先上 先左


      總結(jié)表格

      1. 表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
      2. 表格中由行中的單元格組成。
      3. 表格中沒有列元素,列的個數(shù)取決于行的單元格個數(shù)。
      4. 表格不要糾結(jié)于外觀,那是CSS 的作用。

      表格的學習要求: 能手寫表格結(jié)構(gòu),并且能合并單元格。


      表單標簽(掌握)

      表單控件:

         包含了具體的表單功能項,如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
      

      提示信息:

          一個表單中通常還需要包含一些說明性的文字,提示用戶進行填寫和操作。
      

      表單域:

        他相當于一個容器,用來容納所有的表單控件和提示信息,可以通過他定義處理表單數(shù)據(jù)所用程序的url地址,以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域,表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。
      

      input 控件(重點)

      在上面的語法中,input /標簽為單標簽,type屬性為其最基本的屬性,其取值有多種,用于指定不同的控件類型。除了type屬性之外,input /標簽還可以定義很多其他的屬性,其常用屬性如下表所示。
      前端基礎(chǔ)入門一(HTML)


      label標簽(理解)

      label 標簽為 input 元素定義標注(標簽)。

      作用: 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

      如何綁定元素呢?

      for 屬性規(guī)定 label 與哪個表單元素綁定。

      
      

      textarea控件(文本域)

      如果需要輸入大量的信息,就需要用到textarea/textarea標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框,其基本語法格式如下:

      前端基礎(chǔ)入門一(HTML)


      下拉菜單

      使用select控件定義下拉菜單的基本語法格式如下

      注意:

      1. select
      2. 在option 中定義selected =" selected "時,當前項即為默認選中項。

      表單域

      在HTML中,form標簽被用于定義表單域,即創(chuàng)建一個表單,以實現(xiàn)用戶信息的收集和傳遞,form中的所有內(nèi)容都會被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下:

      各種表單控件

      常用屬性:

      1. Action
        在表單收集到信息后,需要將信息傳遞給服務(wù)器進行處理,action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
      2. method
        用于設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post。
      3. name
        用于指定表單的名稱,以區(qū)分同一個頁面中的多個表單。

      注意: 每個表單都應(yīng)該有自己表單域。


      網(wǎng)頁名稱:前端基礎(chǔ)入門一(HTML)
      本文網(wǎng)址:http://weahome.cn/article/jphphi.html

      其他資訊

      在線咨詢

      微信咨詢

      電話咨詢

      028-86922220(工作日)

      18980820575(7×24)

      提交需求

      返回頂部