H5網頁設計基礎,一位在校大學生的學習筆記以及體會心得(一)


哈嘍!大家好,我是一個熱愛編程的在校大學生,雖說不是純正的軟件專業,但也多多少少對編程能力有一定的要求吧,再加上我本人比較喜歡編程這門課程(雖說還是一個地地道道的入門級小白),所以我在老師和學長的推薦下加入了博客園這個大家庭,希望可以提升自己,也提供一些力所能及的幫助。看膩了那些高深莫測的文章,來這里尋找一下剛剛入門時的新鮮感也是不錯的選擇,嘿嘿。

H5這門語言呢,我從大一就開始學習,包括課上以及課下自學的,到現在我們的實訓課使我再一次接觸到了這門打開我編程思想大門的課程。所以,我准備在博客園分享一些基礎的筆記以及我自己的學習心得,這些文章可能比較新手向,一些代碼可能比較繁瑣,還希望大佬們多多指點,讓我也能進一步認識到自己的不足並加以改正。

 

先來說說H5的一些基礎標簽吧

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

            
</body>
</html>

1,上面就是一個H5的基本框架了,(!DOCTYPE html) 是html5的標識,告訴瀏覽器這是按照html5的標准寫的代碼,因為代碼是瀏覽器能夠聽懂的語言,我們想讓瀏覽器按照我們的要求實現效果,就必須使用代碼來讓它聽懂並按照我們的要求去做

2,<head> 標簽用於定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

下面這些標簽可用在 head 部分: <link>, <meta>, <script>, <style>, 以及 <title>,這些標簽咱們以后用到再說。

<title> 定義文檔的標題,它是 head 部分中唯一必需的元素。

需要注意的是,head一般放置在緊跟隨html標簽之后,body標簽之前。

3,meta charset="utf-8" 是元標簽,charset是編碼格式,"utf-8"是現代最常用的字符集,絕大多數的語言都收集在里面。

4,<meta name="viewport" content="width=device-width, initial-scale=1">這行代碼簡單來說就是一個基礎的頁面定義吧

width:可視區域的寬度,值可為數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,
maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放,no 禁止縮放。
5,title,顧名思義就是標題題目,這里是指瀏覽器標簽頁上的文字。
6,body,我們可以聯想到軀體,這里就是代碼的填充內容部分了,比如文字,超鏈接,圖片等等。
OK我們說完了整個的html的構架,下面可以看看一些具體的基礎標簽。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我是標題</title>
</head>
<body>
<div>我是一個div</div>
<img src="">
<ul type="">
    <li>我是無序列表</li>
        <li>我也是無序列表</li>
            <li>天哪我還是無序列表</li>
</ul>
<ol type="">    
    <li>我是有序列表</li>
        <li>我也是有序列表</li>
            <li>沒想到吧我也是</li></ol>
            <p>下面是text框</p>
            <input type="" name="11">
            <p>下面是數字框</p>
            <input type="number" name="11">
            <p>下面是密碼框</p>
            <input type="password" name="">
            <p>下面是單選框</p>
            <input type="radio" name="gender"><input type="radio" name="gender"><p>下面是復選框</p>
            <input type="checkbox" name=""><input type="checkbox" name=""><input type="checkbox" name=""><p>下面是按鈕</p>
            <input type="button"name="">我就是按鈕</input>
            <p>下面是a(超鏈接)標簽</p>
            <a href="超鏈接">可以點擊的文字(跳轉到超鏈接)    
            </a>
</body>
</html>    

讓我們一個一個的來看:
1,div標簽,可定義文檔中的分區或節,類似於在頁面中分隔開一塊區域用來填充div的內容,div的樣式可以進行自定義。
2,img標簽,在網頁中嵌入一張圖片,注意,這是通過圖片鏈接進行嵌入的,src后面中的內容就是引用的圖片的鏈接。img標簽十分方便,我們可以在鏈接后面直接加入屬性進行定義,如:height,width來改變圖片的高和寬。
3,ul標簽,這是一個無序列表,列表標簽一般都伴隨着li標簽,無序列表會生成每行文本前帶有一個小圓點(默認)的列表,這個小圓點是可以更換的,在type中可以更改,square是小方點circle是空心小圓點,不過不建議使用。
4,ol標簽,說完了無序列表,這個就是有序列表,有序列表會生成每行文字前帶有自動排好的序號的列表,默認是從1開始往后排列,可以在type中更改a,b,c....等等。也可以通過加上reversed來使升序變為降序。
5,input標簽,<input> 標簽用於搜集用戶信息。根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段(text)、復選框(checkbox)、單選按鈕(radio)、按鈕(button)等等。
6,a標簽,<a> 標簽定義超鏈接,用於從一張頁面鏈接到另一張頁面。<a> 元素最重要的屬性是 href 屬性,它指示鏈接的目標。
以上就是一些簡單的基礎H5標簽啦,代碼可以復制下來看一看頁面效果。我在這里做一個分享,有什么整理出錯或者不足的地方,還請多多指教。
如果您喜歡這篇文章,請留下一個寶貴的贊,衷心感謝啦。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM