在上一篇博客中，我們已經(jīng)一起學(xué)習(xí)了HTML這門標(biāo)記語言的基本語法和使用，是不是躍躍欲試想要小露一手呢？這篇博客以例子為主導(dǎo)，每個例子側(cè)重點不同，循循善誘，實踐了大多數(shù)的標(biāo)簽，大量涉及到標(biāo)簽的嵌套、HTML分塊等用法，是新手小白不得不嘗試的實踐練習(xí)。
一、復(fù)雜列表的實現(xiàn)
目標(biāo)效果
復(fù)雜列表
分析
HTML中列表一共有三種：有序列表、無序列表和定義列表。有序列表是一列使用數(shù)字進(jìn)行標(biāo)記的項目；無序列表是一組使用黑點狀進(jìn)行標(biāo)記的項目；定義列表語義上表示項目及其注釋的組合。分析目標(biāo)圖可以得出以下想法：
- 主要涉及到的標(biāo)簽：有序列表
<ol>、無序列表<ul>、列表項<li> - 涉及到中文，需要設(shè)置字符集，在
<head>中用<meta> - 多次用到標(biāo)簽的嵌套：最外層為兩個無序列表，每個無序列表中嵌套兩個有序列表，每個有序列表中嵌套兩個無序列表
- 注意到兩次使用無序列表時，前面的黑點狀形狀不一樣，可以通過設(shè)置
<ul>的屬性type，“disc“黑色圓點，“circle“白色圓點，“square‘黑色方塊。但通過實踐發(fā)現(xiàn)不需要使用這個屬性設(shè)置就可以實現(xiàn)目標(biāo)效果
我的效果
my復(fù)雜列表
代碼
代碼可以進(jìn)入我的GitHub進(jìn)行查看
二、復(fù)雜表格的實現(xiàn)
目標(biāo)效果
復(fù)雜表格
分析
- 主要涉及的標(biāo)簽：表格
<table>、表格行<tr>、表格列<td> - 涉及到中文，需要設(shè)置字符集，在
<head>中用<meta> - 復(fù)雜表格涉及到跨行
rowspan、跨列colspan - 表格標(biāo)題用
<caption>，必須緊隨 table 標(biāo)簽之后。只能對每個表格定義一個標(biāo)題。通常這個標(biāo)題會被居中于表格之上。 - 表格使用屬性：主體主體有邊框，使用屬性
border；有內(nèi)容加粗，使用屬性<b>(應(yīng)該算作標(biāo)簽類)；有內(nèi)容居中，使用屬性align
我的效果
my復(fù)雜表格
代碼
代碼可以進(jìn)入我的GitHub進(jìn)行查看
三、考試頁面的實現(xiàn)
目標(biāo)效果
考試頁面
分析
- 主要分為三部分：標(biāo)題部分、試卷信息、試卷內(nèi)容
- 主要涉及到的標(biāo)簽：標(biāo)題
<h1> <h3>、塊分割<div>、行內(nèi)分割<span>、輸入<input>、有序列表<ol>、文本輸入框<input>、表單<form>，其中輸入<input>可以通過改變type屬性設(shè)置文本框text、單選radio、多選checkbox、提交按鈕submit - 涉及到分塊
<div>和<span>的使用和區(qū)分，二者都是為了邏輯分塊，<div>表示一個單獨的塊，<span>表示一個行內(nèi)的塊。要注意開發(fā)中推薦使用<div>，使得代碼結(jié)構(gòu)上和邏輯上更清楚
我的效果
my考試頁面
代碼
代碼可以進(jìn)入我的GitHub進(jìn)行查看
