前端學習第一課——HTML
阿新 • • 發佈：2020-11-28
學習網路前端知識的第一課，使用了一些HTML常用標籤，並簡單應用了下CSS主題設定。來記錄下自己的第一段html程式碼。
“1.html”中的程式碼：
<!doctype html> <html> <head> <title>第一個html頁面</title> <icon>...</icon> <link rel="stylesheet" type="text/css" href="1.css"> <style> ul,ol { list-style-type: none; } </style> <body> <h1 id="tit-one">一級標題：一起進步吧！</h1> <h2>二級標題</h2> <h3>三級標題...</h3> <h6>六級標題,小到看不到。</h6> <p>這是一個段落。</p><br> <strong>強調文字</strong> <hr><!--一條華麗麗的分割線--> <del>這是一條被刪除的文字。</del> <b>Bold text黑體文字</b><br> <i>italic text美麗的義大利斜體</i><br> <em>Emphasized text是不是和義大利體很像</em><br> <small>小小小小</small><br> <ins>這是一段插入的文字</ins><br> <q>引用一句話？</q><br> <img src="" width="" height="" alt="這是圖片載入失敗時的替代文字"/><!--後加斜槓表單標記--><br> <a href="chaoliajie" target="-blank"><img src=""/></a><br> <a href="mailto:[email protected]">Email to US</a><br> <a href="#faq">常見問題</a><br> <a href="#bottom-section">去底部,好像沒有用。</a><br> <ul> <li>“unorder list”無序列表</li> <li> <ol> <li>"order list"有序列表中的第一條list item </li> <li>list item 2</li> </ol> </li> </ul><br> <form action="/course/reg.do" method="post" enctype="multipart/form-data"> <p>姓名：<input type="text"/></p> <p>簡介：<textarea></textarea></p> <P>簡歷附件：<input type="file"/></P> <p><input type="submit" value="報名提交"/></p> </form><br> <footer> <a href="#">回到頂部</a><br> <a href="#tit-one">一級標題</a> </footer> </body> </html>
“1.css”中的程式碼：
a { text-decoration: none; color: red; background-color:yellow; } #tit-one { border: 3px solid red; } body { width: 1000px; margin: 0 auto; text-align: center; } .outline { color: red; font-weight: bold; font-style: italic; text-decoration: underline; } .out.abc{ background-color: yellow; }
效果預覽
一起進步吧！!