python之 前端HTML/CSS基礎知識學習筆記
1. 文件結構: HTML文件的固定結構: <html> <head>...</head> <body>...</body> </html> html是根標簽 head定義文檔頭部,包含: title, script, style, link, meta body是網頁主要內容,包含:h1,h2-h6, p, a, img 2. 認識head標簽: <head> <title>...</title> 網頁標題 <meta> <link> <style>...</style> <script>...</script> </head> 3. 語義化: 明白每個標簽的用途(在什麽情況下我可以使用這個標簽才合理) 比如,網頁上的文章的標題就可以用標題標簽, 網頁上的各個欄目的欄目名稱也可以使用標題標簽。 文章中內容的段落就得放在段落標簽中,在文章中有想強調的文本,就可以使用em標簽表示強調等等。 4. 認識body標簽: <p>段落文本</p> 有三段就放三個<p></p> <h1>標題文本</h1> h1-h6共6個標題分級 <em>斜體文本(強調)</em> 斜體文本內容 <strong>粗體文本</strong> 粗體顯示文本內容 <span>單獨樣式文本</span> 沒有語義的,它的應用就是為了 設置單獨的格式用的 <q>引用的文本</q> 引用的文本內容,會自動加上雙引號 <blockquote>大段引用</blockquote> 引用大段的文本內容,文本前後會加上縮進 <br/> 換行 <hr/> 水平橫線 空格 <address>地址信息</address> 地址信息,通常用於公司地址顯示 <code>代碼內容</code> 代碼,通常是一行內 <pre>多行代碼</pre> 多行代碼,你需要在網頁中預顯示格式時都可以使用它 <ul> ul-li 列表信息,以圓點顯示 <li>信息1</li> <li>信息2</li> ...... </ul> <ol> ol-li 列表信息,帶上序號 <li>信息</li> <li>信息</li> ...... </ol> <div>排版內容<div> 排版中使用,相當於一個容器 確定邏輯部分:邏輯部分是頁面上相互關聯的一組元素,如欄目版塊 <div id="版塊名稱">…</div> div 帶上ID號,使之更清晰 <table>表格內容</table> 創建表格 <caption>標題文本</caption> 為表格添加標題文本 <tbody>...</tbody> 若加此標簽後,表格會一次性顯示出來(而非網頁加載一點顯示一點) <tr>表格一行</tr> 表格中的一行 <td>表格單元格</td> 表格中的一個單元格 <th>表格表頭</th> 表格頭部的一個單元格,表格表頭 <table summary="表格摘要">...</table> 為表格添加摘要,但不會被瀏覽器顯示出來 <a href="目標網址" title="鼠標滑過時顯示文本">鏈接顯示文本</a> 鏈接標簽 target="_blank" 網頁將在新窗口中打開 mailto: 網頁中郵件地址,可帶多個參數 mailto: 郵箱地址 cc= 抄送地址 bcc= 密抄地址 ; 多個郵箱地址 subject=郵件主題 body= 郵件內容 完整舉例: <a href="mailto:[email protected]
python之 前端HTML/CSS基礎知識學習筆記