從零開始的H5生活

時間  2019-11-11
標籤 開始 h5 生活 欄目 悠閒生活 简体版
原文   原文鏈接

做爲一個新手，要從頭學習Html編程語言，須要從最基礎的開始。有耐心慢慢來，很容易就看懂了。我所使用的編程軟件是Hbuilder。html

1.Html文檔結構
正則表達式

包括head和body兩部分
編程

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

 

注意開頭必須有文檔類型強調！瀏覽器

 

2.Html標籤
標籤是Html最基本的單位和最重要的組成。
使用<>括起來。
全部的Html標籤必須是閉合標籤。能夠是成對的，好比<title> </title>；也能夠是自閉合標籤，好比：<img />; 也就是說/表示這一個或者一對標籤的閉合。標籤必須正確嵌套，不能交叉。
3.Html標籤屬性
是標籤的一部分，用於包含額外的信息
能夠有多個屬性。
如下爲head中經常使用的標籤及做用。 <!-- -->中內容爲註釋。 
<!DOCTYPE html>
<!--
    文檔聲明：必須有，並且必須在文檔頁面的第一行。
Html5已經簡化爲以上樣式
-->
<html>
    <head>
        <!--Head標籤內的信息用於描述網頁的基本信息，即元數據-->
        <title>個人世界</title>
        <!--網頁的標題，即網頁選項卡上的文字-->
        <link rel="icon"href="img/111.png" />
        <!--使用link標籤鏈接網頁圖標
            rel:聲明鏈接文件的類型
            type屬性可省略
            href屬性：表示圖片的路徑地址
        -->
        <meta charset="UTF-8">
        <meta name="keywords"content="你好,H5,高大上" />
        <!--網頁關鍵字，用半角逗號隔開-->
        <meta name="description"content="--helloword哈哈哈哈" />
        <!--meta標籤經常使用屬性
            1.charset 設置文檔字符集編碼格式》》》常見字符集編碼格式：utf-8萬國碼Unicode，GB-2312國標碼,gbk擴展的國標碼
            2.http-equiv將咱們的信息寫給瀏覽器看,可選屬性值Content-Type refresh set-cokie，配合content屬性.(http-equiv屬性只是代表須要設置那一部分，具體內容放到content屬性中)
            3.name屬性：使用方法與http-equiv相同，經常使用屬性值keywords  author description
            將信息寫給搜索引擎看
        -->
        
        
    </head>
    
    <body>
    </body>
</html>

 

 
4.標籤分類
塊級標籤：顯示爲塊狀， 先後隔一行（自動換行）
行級標籤：按行從左往右逐一顯示。
5.常見的塊級標籤
<h1>標題標籤</h1>
<h2></h2>
....<h6></h6>
h1最大，h6最小，自動加粗
<p></p>段落標籤
<hr />水平線標籤
<br/>換行標籤
<blockquote cite=" http://www.cnblogs.com">橫眉冷對千夫指</blockquote>引用標籤
cite屬性代表引用來源，通常代表引用網址。瀏覽器顯示默認首行縮進。
<pre></pre>預格式標籤，瀏覽器顯示樣式
1.爲等寬字體
2.代碼中的換行，空格等元素在瀏覽器直接顯示
6.基於佈局的塊級標籤
有序列表（order list）：<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
　　　　　　　　　　　</ol>
無序列表（unorder list）：
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
定義描述列表：
<dl>
<dt>定義列表標題</dt>........標題頂格顯示
<dd>描述項第一項</dd>......描述項相對標題進行縮進顯示
<dd>描述項第二項</dd>
</dl>
組合標籤：用於顯示圖片及圖片標題
有兩個子標籤：<img/>圖片
<figcaption></figcaption>圖片的標題
 
<figure>
<img src="img/000.jpg" />
<figcaption>圖片標題</figcaption>
</figure>
分區標籤：
<div></div>
7.常見的行級標籤
span（文本） <span></span> 無實際意義，用於包裹某部分文字，修改特定樣式
em（強調） <em></em> 表示強調，強調的樣式爲傾斜
strong（強調) <strong></strong>強調樣式加粗，強調程度比em高（Html5要求標籤儘量實現語義化）
q（短引用） <q></q> 顯示內容加引號
i（傾斜） <i></i>
b（加粗） <b></b>i標籤表示傾斜，沒有強調效果
small（縮小字體)<small></small> 使顯示的字體小一號，可多重嵌套直到字號達到下限
big(放大字體) <big></big> 與small相反
img（圖片） <img />
1.src:表示引用圖片的地址
（路徑地址寫法：1.相對路徑：以當前文件爲準去尋找圖片地址
a.與文件同一層直接寫圖片名
b.圖片在文件下一層：文件夾名/圖片名
c.圖片在文件上一層：../圖片名
2.絕對路徑：file:///E:/00.jpg 禁止使用
3.網絡地址：網絡上的圖片連接 通常不用
）
2.圖片的寬度高度。可用CSS代替
3.title：圖片標題，當鼠標指上去顯示的文字。
alt:圖片沒法顯示時候顯示的文字
a（超連接） <a href="" target=""></a>
1，target=「_blank」超連接在新頁面打開 _self在自身頁面打開
2.rel:指定當前文檔與與被連接文檔的關係.(rel="prev"被連接文檔前一篇文檔，rel="next"後一篇文檔 rel="prefetch"預加載，當前文檔加載完成後利用空餘時間預加載即將鏈接的文檔 rel="icon"被連接圖片是當前文檔的圖標。rel="stylesheet"被連接文檔是當前文檔的樣式表
3.錨連接：
本頁面錨連接
①設置錨點<a name="top"></a>
②在鏈接上使用#name跳到對應錨點，<a href"=#top" target="_self">超連接</a>
頁面間錨連接
①在即將跳轉頁面的指定位置設定錨點
②在超連接的href屬性中使用"頁面地址.html#name"
功能性鏈接
①mailto:// 用於給指定郵箱發送郵件
<a href="mailto:lyx02095211@126.com"target="_self">郵件</a>
②"tencent://message/?uin= 給指定QQ發送郵件
<a href="tencent://message/?uin=805216490"target="_self">扣扣</a>
<s>表示有誤文本刪除線</s>
<cite>cite表示引用，瀏覽器表示爲傾斜</cite>
<code>僅僅表示爲代碼，瀏覽器等寬顯示,可是不會保留代碼格式，須配合pre標籤使用</code>
sup上標文本
sub下標文本X<sup>2</sup>
版權符號© &copy..........這些不經常使用
示例見下方程序：
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
　　　　<a name="top"></a>
        <h1>這是標題標籤h1</h1>
        <h2>比h1小點</h2>
        <h6>標題標籤有6種h1最大，h6最小</h6>
        <hr />
        <!--hr 水平線-->
        <p>這是P標籤&nbsp;→空格）&copy;→版權    表明一個段落，<br/>兩個P標籤，中間隔一行。br（自閉和標籤）換行標籤</p><br />
        <p>這個也是一&nbsp;&nbsp;&nbsp;個段落，用P標籤包裹的</p>
        <blockquote cite="http://www.jredu100.com">
            這是引用標籤
        </blockquote>
        <pre>這是pre標籤。預格式
                  我被換行了。標籤內內容格式原封不動</pre>
        
            helloworld
        <!--body 網頁主題內容  註釋快捷鍵  ctrl+/--> 
        <!--有序列表OL-->
        <ol>
            <li>有序列表第一項</li>
            <li>有序列表第二項</li>
            <li>有序列表第三項</li>
        </ol>
        <!--無序列表UL -->
        <ul>
            <li style="list-style: none;">無序列表第一項</li>
            <li>無序列表第二項</li>
            <li>無序列表第三項</li>
        </ul>
        <!--定義描述列表-->
        <dl>
            <dt>這是DL的標題DT，一個DL通常只有一個</dt>
            <dd>這是DL的描述項dd</dd>
            <dd>這是DL的描述項dd2</dd>
        </dl>
        <a name="t"></a>
        <!--<img src="img/tour.png" alt-->
            *********分割線**************<br />
            <span style="color: red;font: '微軟雅黑';font-size: 24px;font-weight: bold;">我真帥</span>
            <em>em表示強調，強調的樣式爲傾斜</em>
            <strong>強調樣式加粗</strong>
            
            <i>i標籤表示傾斜，沒有強調效果</i>
            <b>b標籤表示加粗，沒強調效果</b>
            <q>表示短引用，自帶雙引號</q>
            <s>表示有誤文本刪除線</s>
            <cite>cite表示引用，瀏覽器表示爲傾斜</cite>
            <code>僅僅表示爲代碼，瀏覽器等寬顯示</code>
            
            <small>small比正常的標籤字體小一號，能夠多層嵌套，一直小到最小字體</small>
            <big>big標籤大一號</big>
　　　　　　　<img src="img/111.png"title="和尚"alt="這是一張圖"/>
　　　　　　　<!--img表示圖片
                src 圖片的地址，能夠是網絡圖片，相對路徑
                title 圖片標題
                alt 圖片不顯示時顯示的文字
                align 設置圖片文字對齊方式
            -->
　　　　　　　<a href="liebiao.html"target="_blank">
　　　　　　　<!--
                【a標籤】
                href表示跳轉的地址。1 跳轉的地址能夠是網絡鏈接
                2 能夠經過相對路徑站內其它HTML文件，
                相對路徑的肯定 
                 a,若是在贊成文件夾，直接寫文件名
                b 若是目標文件在當前文件夾下一層，直接寫「文件夾名/文件名」
                c  若是目標文件在當前文件上一層「../文件名」
                target表示頁面打開的位置：
                1  _self表明自身頁面打開
                2 _blank新頁面打開
                title 超連接標題，鼠標指上去顯示的提示
            -->


    </body>
</html>

 

 8.表格 table安全

表格的行：tr
每行中的列： td
表格的標題：th 默認加粗，單元格居中。
寫法：
<table>
　　　　　　　　<tr>
　　　　　　　　<th></th>
　　　　　　　　<th></th>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　<td></td>
　　　　　　　　<td></td>
　　　　　　　　</tr>
</table>
這是個兩行兩列的表格
經常使用屬性：
1.boder： 給表格添加邊框，當boder屬性增大時，只有外圍框線增長，單元格邊框始終爲1px
2.cellspacing： 單元格與單元格之間的距離。當cellspacing=0時，只會使單元格間距爲0，不會合並邊框線 （表格樣式合併，樣式：boder-collapse:collapse；）
3.cellpadding： 表示單元格里邊內容與邊框線的距離
4.width、height 表格的寬高
5.Align： 表格在屏幕的左中右顯示》》給表格加上align至關於給表格加上浮動
6.bgcolor: 背景色 等同於style=」background-color：「
7.background: 背景圖片 等同於style=」background-image「
8.bodercolor: 邊框顏色。
tr td th相關屬性:
1.width/height:單元格寬高
2.bgcolor:單元格背景顏色
3.align:left、ceter right單元格中的文字水平對齊方式
valign:top center bottom 單元格中的垂直對齊方式
4.nowrap:單元格中文字不換行
當表格屬性與單元格屬性衝突時，以行列屬性爲準（做用範圍越小，優先級越高）
表格的align屬性，是控制表格自己在瀏覽器的顯示位置
行和列的align屬性，是控制單元格中文字在單元格中的對齊方式
表格的align屬性並不影響表格內。tr的align屬性控制一行中全部單元格的水平對齊方式
9.表格的跨行與跨列
colspan 跨列，當某個格跨N行時，其右邊N-1個單元格須刪除
rowspan 跨行，當某個格跨N列時，其下方N-1個單元格須刪除

 

（看上邊線，有幾條就有幾個td) 
<!doctype html>
<html>
         <head>
            <mata charset="UTF-8">
        </head>
        <body>
           <table border="4" cellspacing="4"bordercolor="black">
            <tr>
                <th colspan="2">出賽，王昌齡</th>
            </tr>
            <tr>
                <td rowspan="4"background="img/002.png"width="120"></td>
                <td>秦時明月漢時關,</td>
            </tr>
            <tr>
                <td>萬里長征人未還。</td>
            </tr>
            <tr>
                <td>但使龍城飛將在，</td>
            </tr>
            <tr>
                <td>不教胡馬度淫官。</td>
            </tr>
            
        </table>
        </body>       
</html>

 

 

 

10.form表單
①兩個重要屬性：
action：表單提交的服務器地址
method：表單提交數據的方法（get/post）
②get和post的區別
get使用URL傳參：http://服務器地址?name1=value1&name2=value2(?表示傳遞參數，?後面用name=value的形式傳遞，多個參數之間用&鏈接）
url傳參不安全，全部信息可在地址欄看到，而且能夠經過地址欄隨意傳遞其餘數據
url傳參數據量有限，只能傳遞少許數據
 
 
 
post使用http請求傳遞數據。 url地址欄不可見，比較安全，且傳遞數據量沒有限制
 
綜上所述，經常使用post傳遞
③input標籤及屬性
type：表示input輸入框的類型
name：input輸入框的別名，通常狀況下必填，由於傳遞數據時候使用name=value的形式傳遞
value：input輸入框的默認值
placeholder：input的提示內容。若是用就不能指定value，不然提示內容消失
④input-type裏屬性值<input type="" name="" value="" />
text：文本輸入框
password:密碼輸入框。輸入內容是顯示小黑點。
radio：單選按鈕。name和value屬性須同時存在，提交時提交的是value裏的屬性值
radio憑藉name屬性區分是否爲同一組，name相同爲同組，同組中只能選一個
checked="checked"默認選中
checkbox：複選按鈕。↑↑↑↑↑↑↑↑↑checked="checked"可選多個，在radio裏只能選一個
file：文件上 傳按鈕。
submit：提交按鈕。提交表單數據。
reset：重置按鈕。重置表單數據爲初始狀態。
image：圖形提交按鈕。功能同submit
button：普通按鈕，沒有任何功能。
⑤input特殊屬性
checked=「checked」默認選中
disabled =「disabled」設置控件不能使用。用在按鈕上不能點擊，用在輸入框上不能修改。
並且若是輸入框disabled，則輸入框不能日後臺傳遞
hidden=「hidden」隱藏。等同於
<input type="text" name="uername" placeholder="請輸入"disabled="disabled"value="liyuxin"/>
<input type="hidden" name="uername" id="uername" value="liyuxin" />
經常使用於配合disabled,或其餘須要傳遞數據
11.智能表單
H5新增input的form屬性，用於指向form表單的ID，實現無需放在表單標籤之中，便可經過表單提交
<form id="foo">
</form>
<input .....form="foo">
Autocomplete：自動完成功能。記錄用戶以前輸入的內容，並在下次輸入時自動提示完成輸入》》》屬性值on /off。能夠在form表單上使用，對整張表單的全部控件進行自動完成的開關，也能夠在input上使用，對特定輸入框進行修改。絕大部分瀏覽器默認開啓
Autofocus：自動得到焦點。Autofocus=「autofocus」只能設置一個input元素自動得到焦點
Form：所屬表單。
Required：必填。required=「required」設置input必填，不然阻止提交
Pattern：驗證input的模式使用正則表達式驗證input模式
Placeholder：提示內容。
12.下拉選擇控件 select
<select name="">
<option></option>
<option></option> ...可有不少
</select>
①name 屬性應該寫在<select>上，全部選項只有一個name.
②option經常使用屬性：
value=「」 當option沒有value時，日後臺傳遞的是<option></option>中間的文字
當option中有value屬性時，日後臺傳遞的是value的屬性值
title=「」鼠標指上去顯示de文字。
selected=「selected」默認選中。
③multiple=「multiple」設置select控件爲多選，可在街面使用Ctrl+鼠標多選，通常不用
④<optgroup label=""><optgroup>:用於將option標籤進行分組，label屬性表示分組名。
13. 文本域 textarea
①寫法
<textarea>
</textarea>
②設置寬高，自身有 cols="" rows=""但不經常使用
③ readonly=「readonly」設置爲只讀模式，不容許編輯
④ style=「resize：none；」設置爲寬高不容許修改
⑤ style=「overflow： ；」設置當文字超出區域時如何處理。
》》 能夠經過overflow-x/overflow-y分別設置垂直方向的顯示方式
》》 經常使用屬性值：hidden 超出區域的文字隱藏，沒法顯示
scroll不管文字多少，均會顯示滾動條
auto 自動，默認樣式，根據文字多少自動顯示滾動條
如下是一個完整的表單程序 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action=""method="get">
            <fieldset>
                <legend>用戶註冊</legend>
            <table >
                <tr>
                    <td style="height: 30px">登陸名：</td>
                    <td>
                        <input type="text"name="name" />（可包含a-z,0-9和下劃線)
                    </td>
                    
                    <td>
                        <img src="img/read.gif" /><b>閱讀貴美網服務協議</b>
                    </td>
                </tr>
                <tr>
                    <td style="height: 30px">密碼：</td>
                    <td>
                        <input type="password"name="psw" />（至少包含6個字符）
                    </td>
                    
                    <td rowspan="8">
                        <textarea style="height: 250px;width: 220px;overflow-x: hidden;overflow-y: scroll;resize: none;"readonly="readonly">歡迎閱讀服務條款
                            
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td style="height: 30px">再次輸入密碼：</td>
                    <td>
                        <input type="password"name="psw" />
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td style="height: 30px">電子郵箱：</td>
                    <td>
                        <input type="text" name="mail" />(必須包含@字符）
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td style="height: 30px">性別：</td>
                    <td>
                        <input type="radio"name="sex"value="男" />
                        <img src="img/Male.gif" />男
                        <input type="radio"name="sex"value="女" />
                        <img src="img/Female.gif" />女
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td style="height: 30px">頭像：</td>
                    <td>
                        <input type="file"name="headpic" />
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td style="height: 30px">愛好：</td>
                    <td>
                        <input type="checkbox"name="hobby" value="運動"/>運動
                        <input type="checkbox"name="hobby" value="聊天"/>聊天
                        <input type="checkbox"name="hobby" value="玩遊戲"/>玩遊戲
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td style="height: 30px">喜歡的城市：</td>
                    <td>
                        <select name="city">
                            <option title="請選擇">請選擇</option>
                            <optgroup label="山東省">
                            <option title="青島">青島</option>
                            </optgroup>
                            <optgroup label="北京市">
                            <option title="海淀區">海淀區</option>
                            </optgroup>
                            
                        </select>
                    </td>
                    
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit"value="贊成右側條款，提交併註冊信息" disabled="disabled"/>&nbsp;<input type="reset"value="重填" />
                    </td>
                    
                    <td></td>
                </tr>
            </table>
            </fieldset>
        </form>
        
    </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程