HTML概括

範小飯。發表於2018-09-09
HTML

不知道什麼時候被‘掘金’吸引，希望在此也能與各位大神切磋。

本人的簡書賬號：範小飯。

可能遇見越來越多的大神，也越來越感覺到自身的不足，所以準備系統化的整理和複習，就讓‘掘金’成為新的起點吧。

html

html基本標籤

表格與表單

html5新標籤

一個html5標籤的小李子

<!doctype html>
<html>
    <head>
        <style>

            /* 頁面頭部 header*/
            header {height:50px; background: pink}
            nav {height:30px; background: red;}
            nav ul li {width: 100px; height:30px; float: left; line-height: 30px}

            /* 頁面中部div*/
            div {margin-top: 10px; height: 550px}
            section {height: 550px; background: pink; width:  70%; float: left}
            article {background: green; width: 200; margin: 0 auto; text-align: center}

            aside {height: 550px; background: pink;width: 28%; float: right}

            /* 頁面底部 footer*/
            footer {height: 50px; background: pink; clear: both; margin-top: 10px}

        </style>        
    </head>
    <body>
        <header>
            <p>這是一個header標籤</p>
            <nav>
                <ul>
                    <li>nav標籤</li>
                    <li>css</li>
                    <li>javaScript</li>
                    <li>vue</li>
                </ul>
            </nav>
        </header>
        <div>
            <section>
                <p>這是一個section標籤</p>
                <article>
                    <h2>戰況1</h2>
                    <p>魯班前線為何頻頻送死？</p>
                </article>
                <article>
                    <h2>戰況2</h2>
                    <p>阿珂打野為何至今未歸？</p>
                </article>
                <article>
                    <h2>戰況3</h2>
                    <p>法師中路為何接連送塔？</p>
                </article>

                <figure>
                    <figcaption>原因</figcaption>
                    <p>這誰也不知道</p>
                </figure>  
    
                <dialog>
                    <dt>問題1</dt>
                    <dd>拒絕回答</dd>
                    <dt>問題2</dt>
                    <dd>再次拒絕回答</dd>
                </dialog> 
    
                <menu>
                    <li>menu1</li>
                    <li>menu2</li>
                </menu>   

				<p>
					範小飯<mark>最喜歡吃的食物</mark>
				</p>
                <details>
                    <dt>魯班七號</dt>
                    <dd>老夫子</dd>              
                </details>
    
            </section>

            <aside>
                <p>這是一個aside標籤</p>
                <hgrounp>
                    <h3>魯班前線為何頻頻送死？</h3>
                    <h3>阿珂打野為何至今未歸？</h3>
                    <h3>法師中路為何接連送塔？</h3>
                </hgrounp>
            </aside>
        </div>
        <footer>
            <p>這是一個footer標籤</p>
        </footer>
    </body>

</html>
複製程式碼

效果

HTML概括

相關文章