网页设计（一）——HTML基础概念
前言：好久沒更新過CSDN博客了，現在從原來的OI，變成了一個科研工作者。最近打算把原來的一些資料整理一下，作為經驗公開分享，希望能幫到更多默默努力耕耘的人~
網頁設計系列源于早幾年在學校網站工作做入門培訓時的一些講稿，有關HTML+CSS框架的編程，比較基礎。當時為了給入門的同學更多感性認識，提供了很多小實例，這里也都給出來了。
?
目錄
HTML基礎概念
HTML是什么
HTML標簽
HTML標簽——實例1
建立一個HTML文檔——實例2
HTML標簽的屬性和樣式——實例2.5
總結
?
HTML基礎概念
HTML是什么
首先我們來了解一下html：
html(Hyper Text Markup Language)是超文本標記語言的簡稱（也可簡稱為htm）
html是一種規范，一種標準，它通過標記標簽來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。也就是說，在TXT文檔中即可編寫html文檔，不過，需要在編寫完后將后綴名改成html（或htm）
?
通俗一點，我們常說的網頁，其實質就是一個html文檔。瀏覽器的作用就是讀取html文檔，并以網頁的形式顯示出它們（html作用就是告訴瀏覽器文檔中的內容哪個是標題，哪個是段落……）
標記語言的說法是區分于編程語言而言的，前者不具有行為能力，是被動的；后者具有邏輯性和行為能力，是主動的。如C語言中有if、else等邏輯判斷，有for、while等行為。
?
HTML標簽
前面說過html是一套標記標簽，那么我們的重點就落在如何使用這些標簽上面了。
html標簽是由尖括號包圍的關鍵詞，如<body>
html標簽通常成對出現，如<body>...</body>中，第一個為開始標簽，第二個為結束標簽
html的標簽有許多種，比如：
???? <html>...</html>????? 所有html文檔都有的標簽，用途為定義html文檔
???? <body>...</body>?? 也是html文檔都有的標簽，用于定義主體
???? <p>...</p>??????????????? 用于定義段落
???? <ul>...</ul>?????????????? 用于定義列表
???????????????? ·····
?????? 還有許多其他類型的html標簽，可以通過html手冊或在網上找到相關的資料
html的標簽中有兩大類，一種成為塊級元素，另一種是內聯元素。
這兩種標簽最大的區別是在瀏覽器中顯示數，是否會以新行來開始。(見實例1)
塊級元素通常會以新行來開始。形象來說就是，塊級元素在頁面中是一塊板，內聯元素在頁面中是一條棍子。可以通過display屬性（具體怎么用學完后面的就知道了）來改變標簽的類型，block對應塊級元素，inline對應內聯元素。
常見的塊級元素有：<h1>,<p>,<div>,<ul>
常見的內聯元素有：<b>,<span>,<a>,<img>
?
HTML標簽——實例1
第1個實例先把剛才留的一個坑補完，看看兩類元素的區別。下方代碼為一個例子，有興趣嘗試的可以參考實例2中的方法實現一下。
<html> <head> <link rel="stylesheet" type="text/css" href="simple_style.css" /> </head> <body> <span>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</span> <span>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</span> <span>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</span> <hr/><!--創建水平線--> <p>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</p> <p>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</p> <p>國務院教育督導委員會辦公室主任、教育部教育督導局局長何秀超，教育部基礎教育一司司長呂玉剛，湖南省人民政府副省長、秘書長向力力，中南大學黨委書記高文兵、校長張堯學，教育部和湖南省相關部門負責人參加督查。</p> </body> </html>這段代碼的效果圖為：
此例中使用的內聯元素為<span>,塊級元素為<p>
效果圖中，灰色水平線的上方為內聯元素效果，下方為塊級元素效果，由此可見之前所述的：塊級元素、內聯元素最大的區別是在瀏覽器中顯示數、是否會以新行來開始
?
建立一個HTML文檔——實例2
前面我們大致了解了html的相關信息，下面開始我們就正式使用這種語言來編輯一個網頁。
首先我們需要建立一個文件夾來存放我們的項目，這是一個好習慣，這樣做可以很好的簡化關于文件路徑修改的問題并大大提高文件的可遷移性；
接著我們打開記事本，在里面鍵入：
<html> <body> <h1>This is a title</h1> <p>I</p> <p>Love</p> <p>CSU</p> </body> </html>然后保存文件，之后將文件的后綴要改成html或htm
雙擊打開后，效果如下圖所示：
?
HTML標簽的屬性和樣式——實例2.5
通過剛剛的嘗試，你就會有疑問了，這樣子根本不可能做出我們平常看到炫酷的頁面。這是因為我們沒有為標簽加上“外衣”，每一個標簽都可以給它加上屬性和樣式來改變標簽的外觀，內容樣式等。
再來試試，用記事本打開剛剛的html文檔，改成：
<html> <body> <h1 align="center">This is a title</h1> <!--添加了 文本居中屬性--> <p>I</p> <p style="color:red">Love</p><!--添加了字體顏色樣式--> <p><a href="*">CSU</a></p><!--給鏈接標簽添加了地址屬性--> </body> </html>打開后效果如下圖，是不是有了一些變化：
要想獲得更加好的效果，注意從平時一點一滴地積累相關語句的用法
另外，此處“<!--(中間部分)-->”標簽為HTML中的注釋標簽，不參與瀏覽器的執行，僅起到方便編代碼者的檢查或提醒，“(中間部分)”可以寫任意漢字或英文字符等
總結
html通過定義不同的標簽告訴瀏覽器文檔中不同的部分是什么功能的，通過給標簽加上不同的屬性和樣式可使對頁面布局進行設計，使其變得美觀。
但是，現在人們往往很少用這種內聯樣式來設計頁面布局，因為這種傳統的樣式設計使得頁面代碼變多，加載速度變慢，而且完全沒有重載性，網頁需要修改時也會因為源碼的存在造成不便。
后來出現的DIV+CSS樣式布局，就很好地解決了上述的問題。
?
附網頁設計系列的文章鏈接：
網頁設計（一）——HTML基礎概念：https://blog.csdn.net/csyzcyj/article/details/107283767
網頁設計（二）——DIV+CSS布局1：https://blog.csdn.net/csyzcyj/article/details/107284087
網頁設計（三）——DIV+CSS布局2：https://blog.csdn.net/csyzcyj/article/details/107284655
網頁設計（四）——DIV+CSS布局3：https://blog.csdn.net/csyzcyj/article/details/107285198
網頁設計（五）——marquee標簽：https://blog.csdn.net/csyzcyj/article/details/107285901
網頁設計（六）——基于HTML+CSS框架的網頁設計實例：https://blog.csdn.net/csyzcyj/article/details/107286067
?
轉載注明出處：https://blog.csdn.net/csyzcyj/
總結
以上是生活随笔為你收集整理的网页设计（一）——HTML基础概念的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： XCP简介
- 下一篇： HTML基础 - HTML表格