整合營銷服務商

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

          免費咨詢熱線:

          使用 Notepad 或 TextEdit 來編寫 HTML

          以使用專業的 HTML 編輯器來編輯 HTML:

          • Adobe Dreamweaver
          • Microsoft Expression Web
          • CoffeeCup HTML Editor

          不過,我們同時推薦使用文本編輯器來學習 HTML,比如 Notepad (PC) 或 TextEdit (Mac)。我們相信,使用一款簡單的文本編輯器是學習 HTML 的好方法。

          通過記事本,依照以下四步來創建您的第一張網頁。

          步驟一:啟動記事本

          如何啟動記事本:

          開始

          所有程序

          附件

          記事本

          步驟二:用記事本來編輯 HTML

          在記事本中鍵入 HTML 代碼:

          步驟三:保存 HTML

          在記事本的文件菜單選擇“另存為”。

          當您保存 HTML 文件時,既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別,完全根據您的喜好。

          在一個容易記憶的文件夾中保存這個文件。

          步驟四:在瀏覽器中運行這個 HTML 文件

          啟動您的瀏覽器,然后選擇“文件”菜單的“打開文件”命令,或者直接在文件夾中雙擊您的 HTML 文件。

          結果應該類似這樣:

          TML是什么

          HTML的全稱是超文本標記語言,英文全稱是HyperText Markup Language。如果您是零基礎的話,看到這個名字,即使是漢語的,估計也會不知所云。

          超文本指的是用超鏈接的方法,將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起,這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念,可以說網絡的精髓就在于"互聯"。

          這些相互關聯的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接,為人們查找,檢索信息提供方便。(孫素華編著.Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通:中國青年出版社,2014.10:第16頁)

          標記語言的概念比較復雜,簡單來說,HTML并不是程序語言(不同于C或Python),只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。

          如果讀的不太明白,在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示,如果您讀不懂可以盡情的跳過,畢竟我們的重點是怎么用。

          HTML基本框架

          HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面,就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下:

          <!DOCTYPE HTML><html> <head> </head> <body> </body> </html>

          第一行 <!DOCTYPE HTML>

          第二行 <html>

          第三行 <head>

          第四行 </head>

          第五行 <body>

          第六行 </body>

          第七行 </html>

          這七行代碼是所有HTML頁面所共有的,也就是HTML的框架了。不信我們來驗證一下。

          例子一,頭條的文章頁面(電腦版)網址:https://www.toutiao.com/i6785149184245760516/

          筆者使用Firefox(火狐)瀏覽器,輸入網址后點擊鍵盤上的F12,,如圖所示

          我們可以看到頁面下半部分出現了一個調控臺。

          點擊查看器即可看頁面代碼。代碼如下:

          放大一些,大家看看,<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少,只是中間多了很多內容而已。

          一個例子不具有普適性,下面我們再看一個例子,我隨便找了個新聞頁面,網址:https://mil.eastday.com/a/200125113254400.html

          使用同樣的方法打開查看器看代碼,如圖:

          是不是框架中的代碼一個也不少吧。

          所以,大家請在自己的電腦中新建一個txt文件,將HTML框架粘貼到txt文件中,并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。

          通過對框架中的代碼進行觀察,細心的讀者可能已經發現了HTML這種標記語言的書寫規律。

          規律1:每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一,大家一定記牢。

          規律2:除了<!DOCTYPE HTML>這個標簽外,其他標簽都是成對出現!例如<html>與</html>,<head>與</head>,<body>與</body>。

          規律3:這個規律通過觀察代碼也不難發現,即<html></html>兩個標簽中間夾著<head></head>和<body></body>,我們把<head></head>標簽稱為<html></html>標簽的子標簽,反過來<html></html>標簽是<head></head>標簽的父標簽,<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句,屬于六親不認的。

          各種關系如下圖所示:

          這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言",這種父子關系、兄弟關系就可以理解為一個頁面的"結構",這種結構又與頁面的排版有關。

          在下一期中,我們會通過練習來解釋"結構"與排版的關系。

          喜歡的小伙伴請加關注,有任何問題可以留言給我,歡迎指正批評,感激不盡!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 四虎一区二区成人免费影院网址| 无码囯产精品一区二区免费| 亚洲av无码一区二区三区在线播放 | 国产精品一区二区久久精品涩爱| 日韩一区二区三区精品| 国产精品区一区二区三在线播放| 国产一区二区三区在线观看免费| 亚洲AV无码一区二区一二区| 精品国产一区二区三区四区| 色婷婷AV一区二区三区浪潮| 中文字幕日本精品一区二区三区| 一区二区三区四区免费视频| 伊人久久精品无码av一区| 风间由美性色一区二区三区| 中文乱码精品一区二区三区 | 视频精品一区二区三区| 国产一区二区三区乱码| 国产成人精品一区二区三区| 一区二区三区在线播放视频| 无码毛片一区二区三区中文字幕| 日本一道高清一区二区三区| 伊人色综合网一区二区三区| 亚洲精品无码一区二区| 日本精品无码一区二区三区久久久| 伊人久久一区二区三区无码| 国产乱码精品一区二区三区香蕉| 亚洲国产欧美国产综合一区| 国产乱码精品一区二区三区香蕉 | 日韩免费无码视频一区二区三区| 精品一区二区在线观看| 亚洲福利视频一区| 无码国产伦一区二区三区视频 | 国产成人精品一区在线| 精品一区二区三区高清免费观看 | 鲁丝片一区二区三区免费| 2022年亚洲午夜一区二区福利| 波多野结衣一区视频在线| 精品国产福利在线观看一区| 国产激情精品一区二区三区| 日本免费电影一区二区| 亚洲AV无码一区二区乱子仑|