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