HTML基礎(chǔ)和實例-創(chuàng)新互聯(lián)

豆子最近在學前端的基礎(chǔ)知識，主要包括Html, CSS, Javascript, Dom, JQuery等內(nèi)容。豆子沒打算做專業(yè)的前端開發(fā)，不過學會一些常見的界面設(shè)計，對于學習Python的web框架還是很有必要的。這篇博客通過各種簡單例子的迅速過一遍HTML的常見使用。

創(chuàng)新互聯(lián)是專業(yè)的江華網(wǎng)站建設(shè)公司，江華接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行江華網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

例1. 首先看看<head>標簽的內(nèi)容

    <head>
        <!-- 自閉合標簽 -->
        <meta charset="UTF-8" />
        <!--<meta http-equiv="Refresh" Content="2"/>-->
        <!--<meta http-equiv="Refresh" Content="2; Url=http://www.autohome.com.cn" />-->
        <!--標簽屬性 name="alex" -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>老男人</title>
        <link rel="shortcut icon" href="favicon.ico">
    </head>

<meta>里面指定字符集，IE兼容模式
<tite>顯示標題
<link>顯示標題的圖標
效果如下：

例2：<body>里面一些常見的標簽

<!--內(nèi)聯(lián)和塊級-->
        <div >12</div>
        <span >12</span>

標簽分為內(nèi)聯(lián)標簽和塊級標簽，比如<div>就是塊級，可以看見顏色是應(yīng)用到整行，<span>就是內(nèi)聯(lián)標簽，顏色只是應(yīng)用到文字上面。

HTML 基礎(chǔ)和實例

<!--符號-->
        &lt;a&nbsp;b&gt;

&lt 小于符合； &gt大于符號； &nbsp 空格

<!--段落和換行-->
        <p>asdfuo<br />iuasdkfjlkjasdfkj<br />alskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>
        <p>asdfuoiuasdkfjlkjasdfkjalskdjfas;dlfj</p>

<p>是段落標簽，他和直接敲文字的區(qū)別是他可以自動換行，如果要手動換行，可以通過<br>實現(xiàn)

HTML 基礎(chǔ)和實例

<!--標題-->
        <h2>a</h2>
        <h3>a</h3>
        <h4>a</h4>
        <h5>a</h5>
        <h6>a</h6>
        <h7>a</h7>
        <h7 >a</h7>

<h2>，<h3>等等是設(shè)置字體的大小，數(shù)字越小，字體越大；當然也可以通過style來指定大小

HTML 基礎(chǔ)和實例

 <!--a標簽-->
        <a >跳轉(zhuǎn)1</a>
        <a >跳轉(zhuǎn)2</a>
        <!--<div >阿薩德發(fā)送到</div>-->
        <!--尋找頁面中id=i1的標簽，講其標簽放置在頁面頂部-->
        <a href="#i1">第一章</a>
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>
        <!--id沒有一個標簽的id屬性值不允許重復；id屬性可以不寫-->
        <div id="i1" >第一章內(nèi)容</div>
        <div id="i2" >第二章內(nèi)容</div>
        <div id="i3" >第三章內(nèi)容</div>

<a> 標簽是跳轉(zhuǎn)，可以通過href指定跳轉(zhuǎn)的對象，這個對象可以是一個網(wǎng)頁的Url，也可以是其他標簽的

如果不指定target=_blank, 會從當前tab跳轉(zhuǎn)，否則新開一個tab頁面跳轉(zhuǎn)

HTML 基礎(chǔ)和實例

例3 嵌套div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div >
        asdfasdf
        <div >
            <div>
                <a>asdf</a>
            </div>
        </div>
        <div >asdfas\</div>
        asdf
    </div>
</body>
</html>

HTML 基礎(chǔ)和實例

例4 表格和各種輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        <input type="text" />
    </form>
    <form action=" method='post' >
        <div >
            <p>用戶名：<input type="text" /> </p>
            <p>密碼：<input type="password" /> </p>
            <p>郵箱：<input type="email" /> </p>
            <p>性別(單選框)：
                <br /> 男<input type="radio" name="ee" />
                <br /> 女<input type="radio" name="ee"/>
            </p>
            <p>愛好（復選框）：
                <br /> 男1<input type="checkbox" />
                <br /> 男2<input type="checkbox" />
                <br /> 男3<input type="checkbox" />
                <br /> 男4<input type="checkbox" />
                <br /> 男5<input type="checkbox" />
            </p>
            <p>城市：
                <select>
                    <option>上海</option>
                    <option>北京</option>
                    <option>廣州</option>
                </select>
                <select multiple size="10">
                    <option>上海</option>
                    <option>北京</option>
                    <option>廣州</option>
                </select>
                <select>
                    <optgroup label="AAA">
                       <option>上海</option>
                        <option>北京</option>
                    </optgroup>
                    <optgroup label="BBB">
                       <option>廣州</option>
                    </optgroup>
                </select>
            </p>
            <p>文件：<input type="file" /></p>
            <p>備注 ： <textarea></textarea> </p>
            <input type="submit" value="submit"/>
            <input type="button" value="button"/>
            <input type="reset" value="reset"/>
        </div>
    </form>
</body>
</html>

文本框很直接，就是輸入值
密碼框，郵箱自動隱藏密碼和判斷郵件格式；
單選框，復選框都是通過指定name聯(lián)系在一起
下拉列表框可以指定默認的選項，調(diào)整大小，甚至通過<optgroup>分組
所有的這些數(shù)據(jù)可以通過form的submit來提交給后臺, form的屬性比較重要的是action，這個是提交給哪個url，method，這個分為get和post，get會在url后面顯示提交的內(nèi)容，而post會隱藏這些內(nèi)容

HTML 基礎(chǔ)和實例

例5：列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li>1asdfasdf1</li>
        <li>2asdfasdf</li>
        <li>2asdfasdf</li>
    </ul>
    <ol>
        <li>1asdfasdf1</li>
        <li>2asdfasdf</li>
        <li>2asdfasdf</li>
    </ol>
    <dl>
        <dt>DT</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dt>DT</dt>
        <dd>dd</dd>
    </dl>
</body>
</html>

<ul>和<li>是星點隔開；
<ol>和<li>是數(shù)字隔開；
<dl>和<dt>是縮進格式隔開

HTML 基礎(chǔ)和實例

列6 表格

<body>
    <table border="1";background-color="red">
        <tr>
            <th colspan="3">標題一</th>
            <th>標題二</th>
        </tr>
        <tr>
            <td>內(nèi)容一</td>
            <td>內(nèi)容二</td>
            <td>內(nèi)容三</td>
            <td>內(nèi)容三</td>
        </tr>
        <tr>
            <td>內(nèi)容一</td>
            <td rowspan="2">內(nèi)容二</td>
            <td>內(nèi)容三</td>
            <td>內(nèi)容三</td>
        </tr>
        <tr>
            <td>內(nèi)容一</td>
            <td>內(nèi)容三</td>
            <td>內(nèi)容三</td>
        </tr>
        <tr>
            <td>內(nèi)容一</td>
            <td>內(nèi)容二</td>
            <td>內(nèi)容三</td>
            <td>內(nèi)容三</td>
        </tr>
    </table>
    <hr />
    <table  border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
             <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
</body>

注意事項：

<table>里面分<thead>和<tbody>,前者是標題，后者是內(nèi)容；<tr>是一行；<td>是列，<th>是自動加粗的標題
橫跨可以指定 colspan的屬性，豎跨可以指定rowspan的屬性

HTML 基礎(chǔ)和實例

例7 iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h2>sina</h2>
    <iframe  src="http://www.sina.com.cn"></iframe>
</body>
</html>

HTML 基礎(chǔ)和實例

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標題名稱：HTML基礎(chǔ)和實例-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.com/article10/cdphgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站設(shè)計公司、微信小程序、企業(yè)網(wǎng)站制作、虛擬主機、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

HTML基礎(chǔ)和實例-創(chuàng)新互聯(lián)