HTML-Tags（text\图表\输入box）HTML完整教学

任务

先给出一些小任务，看完文章内容可以写，答案在最下面
任务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>&le; 90/60 mmHg</td>
    </tr>
    <tr>
        <td>Ideal</td>
        <td>&ge; 90/60 and &le; 120/80 mmHg </td>
    </tr>
    <tr>
        <td>High</td>
        <td>&ge; 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>&le;90/60</td>
       </tr>
       <tr>
           <td>Ideal</td>
           <td>&ge; 90/60 and &le; 120/80</td>
       </tr>
       <tr>
           <td>High</td>
           <td>&ge; 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>