小薇學院任務一

下面是任務一的代碼，寫起來雖然不難但還是先把html的標簽過了一遍，非常的蛋疼，因為我發(fā)現(xiàn)語義化太“嚴重”了，難以記憶，但還是把一些用到的標簽都仔細斟酌了一邊，就是<figure>標簽用的非常蠢，別人都是直接上列表<ul>標簽的（orz）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
    <title>人物一</title>
</head>
<body>
<header>
<h1>網(wǎng)站一級標題</h1>
<nav>
<ul>
    <li>導航鏈接一</li>
    <li>導航鏈接二</li>
    <li>導航鏈接三</li>
    <li>導航鏈接四</li>
</ul>
</nav>
</header>
<section>
<hgroup>
<h2>文章一級標題</h2>
<h3>文章二級標題</h3>
</hgroup>
<address>文章作者 文章發(fā)表時間</address>
<article>
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
    <br>換行了
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落<b>這里有個粗體字</b>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落,<a >這里有一個鏈接鏈接到http://ife.baidu.com</a>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
</article>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<article>
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
    <br>換行了
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落<b>這里有個粗體字</b>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落,<a >這里有一個鏈接鏈接到http://ife.baidu.com</a>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
</article>
</section>

<section>
<hgroup>
    <h2>另一篇文章一級標題</h2>
    <h3>文章二級標題</h3>
</hgroup>
<address>文章作者 文章發(fā)表時間</address>
<article>
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
    <br>換行了
    <p>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落<b>這里有個粗體字</b>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落,<a >這里有一個鏈接鏈接到http://ife.baidu.com</a>這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落這是一個很長很長的段落</p>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
</article>
</section>
<ul>
    <li>列表項目一</li>
    <li>列表項目二</li>
    <li>列表項目三</li>
</ul>
<h4>圖片</h4>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<figure>
    <img src="http://upload-images.jianshu.io/upload_images/3810664-f6bfa243424b1aeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
    <figcaption>好看的圖片</figcaption>
</figure>
<section>
    <hgroup>
        <h2>最后一篇文章標題</h2>
        <h3>文章二級標題</h3>
    </hgroup>
    <ol type="1">
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <table border: 1px>
        <p>下面是一個表格，給表格增加了一個border="e;1"e;好讓你看出是一個表格</p>
        <thead>
            <tr>
                <th>表頭</th>
                <th>表頭</th>
                <th>表頭</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>表內容單元格</th>
                <th>表內容單元格</th>
                <th><a href="#">操作</a></th>
            </tr>
            <tr>
                <th>表內容單元格</th>
                <th>表內容單元格</th>
                <th><a href="#">操作</a></th>
            </tr>
            <tr>
                <th>表內容單元格</th>
                <th>表內容單元格</th>
                <th><a href="#">操作</a></th>
            </tr>
            <tr>
                <th>表內容單元格</th>
                <th>表內容單元格</th>
                <th><a href="#">操作</a></th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>總計</th>
                <th colspan="2">1000</th>
            </tr>
        </tfoot>
    </table>
    <aside>
        <h3>這里以后是一個側欄，這是側欄的標題</h3>
        <h3>側欄注冊窗口標題</h3>
        <form name="" method="" action="">
            <label>請輸入一個郵箱:</label>
                <input type="email" name="email" placeholder="這是一個文本輸入框">
                <p>郵箱請按格式要求輸入</p><br/>
            <label>請輸入密碼：</label>
                <input type="password" name="password1" placeholder="這是一個文本輸入框">
            <label>請重復輸入密碼：</label>
                <input type="password" name="password2" placeholder="這是一個文本輸入框">
                <p>密碼請為6-16位英文數(shù)字</p><br/>
            <label>性別：</label>
                <input type="radio" name="sex" value="男" checked="checked"> 男
                <input type="radio" name="sex" value="女"> 女
            <label>城市：</label>
                <select>
                    <option value="北京">北京</option>
                    <option value="廣州">廣州</option>
                    <option value="上海">上海</option>
                </select>
            <label>愛好：</label>
                <input type="checkbox" name="yundong" name="運動"> 運動
                <input type="checkbox" name="yishu" name="藝術"> 藝術
                <input type="checkbox" name="kexue" name="科學"> 科學 
            <label>個人描述：</label>
                <textarea cols="30" rows="2">這是一個多行輸入框，輸入您的個人描述</textarea><button>確認提交</button>
        </form>
    </aside>
    <footer>版權所有</footer>
</section>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容