任务
先给出一些小任务,看完文章内容可以写,答案在最下面
任务1:
使用无序列表标记ul。创建一个包含以下物品的列表:苹果,梨和香蕉
任务2: 制作这个图
任务3:制作这个图
DOM 树结构
上面是DOM树结构的一个示例,其中显示了一些元素和子元素。例如,您可以看到标题元素被允许在头部部分,而不允许在主体部分。
加粗的text-<strong
<strong>This text should be bold!</strong>
转行的text-<br
<p>
Here is some text in a paragraph.<br>
text can be broken over multiple lines using a linebreak.
</p>
加图片
<img src="./resources/cat.PNG" />
!这边没有closing tag
调整图片大小
<img src="./resources/cat.PNG" width="10%" alt="An image of a cat" />
width设置图片大小-可以用百分比或者设置px;alt如果图片显示不出来显示文本
图表制作
代表一个图表中的一行:
<tr> </tr>
代表一个图表行中的列元素:
<td></td>
<table>
<tr>
<td>Low</td>
<td>≤ 90/60 mmHg</td>
</tr>
<tr>
<td>Ideal</td>
<td>≥ 90/60 and ≤ 120/80 mmHg </td>
</tr>
<tr>
<td>High</td>
<td>≥ 140/90 mmHg</td>
</tr>
</table>
图表的列名:
<thead> </thead>
图表的行名:
<td colspan> </td>
图表的标注:
<tfoot> </tfoot>
图表的主体:
<tbody></tbody>
例子
<table>
<thead>
<tr>
<td>BP level</td>
<td>mmHg</td>
<tr>
</thead>
<tbody>
<tr>
<td>Low</td>
<td>≤90/60</td>
</tr>
<tr>
<td>Ideal</td>
<td>≥ 90/60 and ≤ 120/80</td>
</tr>
<tr>
<td>High</td>
<td>≥ 140/90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><strong>Source:</strong> https://www.nhs.uk/</td>
</tr>
</tfoot>
</table>
输入box
输入文本
<input type="text">
输入数字
<input type="number">
输入密码
<input type="password">
选择题
<p>Which types of excersize do you do?</p>
<div>
<input id="swimming" type="checkbox" checked>
<label for="swimming">Swimming</label>
</div>
<div>
<input id="martial-arts" type="checkbox">
<label for="martial-arts">Martial arts</label>
</div>
<div>
<input id="weight-lifting" type="checkbox">
<label for="weight-lifting">Weight lifting</label>
</div>
div:分割文本,跨行, type可以选择checkbox (方形)或者 ratio(圆形)name:设置标签名字(定位到标签后用name判断)
任务答案
任务一
<ul> <li>apples</li>
<li> pears </li>
<li> bananas </li></ul>
任务二
<table>
<thead>
<tr><td colspan> Name</td><td>Blood pressure</td><td>Heart rate</td></tr>
</thead>
<tr><td colspan> Alison Symmonds</td><td>120/62</td><td>101</td></tr>
<tr><td colspan> Paul Smith</td><td>155/72</td><td>65</td></tr>
<tr><td colspan> David Williams</td><td>134/64</td><td>62</td></tr>
<tr><td colspan> Pauline Smethic</td><td>144/63</td><td>76</td></tr>
</table>
任务三
%%html
<p>Which types of excersize do you do?</p>
<div>
<input id="apples" name="food" type="radio" checked>
<label for="apples">Apples</label>
</div>
<div>
<input id="oranges" name="food" type="radio">
<label for="oranges">Oranges</label>
</div>
<div>
<input id="cola" name="food" type="radio">
<label for="cola">Cola</label>
</div>