HTML基础知识(三)

简介: HTML基础知识(三)

表格(Tables)

<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
<table border="5px" align="center">
      <caption>课程表</caption>
      <tr>
        <th>项目</th>
      </tr>
      <tr>
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期天</td>
      </tr>
      <tr>
        <td rowspan="4">上午</td>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
        <td rowspan="4">休息</td>
      </tr>
      <tr>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
      </tr>
      <tr>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
      </tr>
      <tr>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
      </tr>
      <tr>
        <td rowspan='2'>下午</td>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
      </tr>
      <tr>
        <td><a href="5.html">语文</a></td>
        <td><a href="5.html">数学</a></td>
        <td><a href="5.html">英文</a></td>
        <td><a href="5.html">化学</a></td>
        <td><a href="5.html">历史</a></td>
        <td><a href="5.html">生物</a></td>
      </tr>
    </table>

框架(Iframe)

<iframe src="demo_iframe.htm"></iframe>

表单(Forms)

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
<form action="" method="post">
  用户名:<input type="text"><br>
  密码:<input type="password"><br>
  性别:<input type="radio">男<input type="radio">女<br>
  兴趣:<input type="checkbox">恋情<input type="checkbox">朗秋<input type="checkbox">贫穷<br>
  选择文件:<input type="file"><br>
  图片:<input type="image" src="https//">
  <input type="reset"><br>
  <input type="submit"><br>
  <input type="button" value="自定义"><br>
  <input type="button">
  <label for="username">用户名:</label><input id="username" type="text"><br>
  <label>密码:<input type="password"></label><br>
</form>
    <!--select kongj-->
  <form action="" method="post">
    你的出生地?
  <select size="4" multiple="multiple">
    <option value="beijing" selected="selected">1</option>
    <option value="hebei">2</option>
    <option value="hennan">3</option>
    <option value="shanhai">4</option>
    <option value="shandong">5</option>
  </select><br>
    <br>
    你的居住地是?
    <select size="2">
      <option value="beijing">1</option>
      <option value="hebei">2</option>
      <option value="hennan">3</option>
      <option value="shanhai">4</option>
      <option value="shandong">5</option>
    </select>
    你去过的地方?
    <select multiple="multiple">
      <option value="beijing">1</option>
      <option value="hebei">2</option>
      <option value="hennan">3</option>
      <option value="shanhai">4</option>
      <option value="shandong">5</option>
    </select>
    你吃过的菜在哪里?
    <select size="7" multiple="multiple">
      <optgroup label="11233">
        <option value="beijing">1</option>
        <option value="hebei">2</option>
        <option value="hennan">3</option>
      </optgroup>
      <optgroup label="333333">
        <option value="beijing">1</option>
        <option value="hebei">2</option>
        <option value="hennan">3</option>
        <option value="shanhai">4</option>
        <option value="shandong">5</option>
      </optgroup>
    </select>
    <button type="submit">提交</button><br>
    <button type="reset">重置</button><br>
    <textarea cols="50" row="5"></textarea><br>
    <textarea cols="60" rows="6" readonly="readonly">这个文本只读的领域</textarea>
    <hr>
    <input type="color " name="color" id="" value="#ff0000"><br>
    <input type="submit" id="name">
    <hr>
    <input type="time" name="time" id= value=""><br>
    <input type="submit" id="  " name="">
    <br>
    <input type="datetime-local" name="date"  id=" " value=" "><br>
    <input type="submit" this.id="" name="">
    <br>
    <input type="month" name="month" this.id="" value="" min="2021-02" max="2030-04">
    <input type="submit" this.id=""  name="">
    <br>
    <input type="week" name="week" this.id="" value="" min="2021-w01" max="2030-w12">
    <input type="submit" this.id=""  name="">
    <br>
    <input type="number" name="number" this.id="" value="" min="0" max="100" step="10">
    <input type="submit" this.id=""  name="">
    <br>
    <input type="range" name="range" this.id="" value="" min="0" max="100" step="10">
    <input type="submit" this.id=""  name="">
    <br>
</form>

实体(Entities)

< 等同于 <

> 等同于 >

© 等同于 ©

22 HTML5 语义元素

HTML5 添加了很多语义元素如下所示:

<!--表格属性记忆-->
<table border="5" cellpadding="20" cellspacing="3" width="500px" align="center" bgcolor="#7fff00">
    <tr>
    <th>表格</th>
    <th colspan="5" bgcolor="#1e90ff">表格属性</th>
    </tr>
    <tr bgcolor="#ff69b4" valign="top">
        <td>11</td>
        <td colspan="3">12</td>
        <td>15</td>
    </tr>
    <tr bgcolor="#8a2be2">
        <td>21</td>
        <td>22</td>
        <td rowspan="3">23</td>
        <td>24</td>
        <td>25</td>
    </tr>
    <tr bgcolor="#1e90ff">
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
    </tr>
    <tr bgcolor="#8b008b">
        <td align="center">131</td>
        <td>132</td>
        <td>133</td>
        <td>134</td>
        <td>135</td>
    </tr>
    <tr>
        <td>231</td>
        <td>232</td>
        <td>233</td>
        <td>234</td>
        <td>235</td>
    </tr>
</table>
    <p> ====================================input 属性</p>
<form>
   1<input type="text" value="11111"><br>
    2<input type="color" value="2222"><br>
   3<input type="submit" value="33"><br>
    4<input type="checkbox" value="444"><br>
    5<input type="date" value="5555"><br>
    6<input type="email" value="666"><br>
    7<input type="hidden" value="777"><br>
    8<input type="month" value="888"><br>
    9<input type="number" value="999"><br>
    10<input type="time" value="1000"><br>
    11<input type="week" value="123"><br>
    12<input type="url"><br>
    14<input type="datetime-local"><br>
    15<input type="file"><br>
    16<input type="range"><br>
    17<input type="file"><br>
    18<input type="image">
    <form action="#" method="get">留言:<br>
        <textarea cols="70" rows="10">
            huafu
        </textarea>
        <input type="submit" value="tijiao">
    </form>
    <form action="#" method="post">留言2:<br>
        <textarea cols="70" rows="10">
            huafu
        </textarea>
        <input type="submit" value="tijiao">
    </form>
        空格&nbsp; &lt;; &gt; &amp; &yen; &copy; &reg; &deg; &plusmn; &times;;&divide;4 &sup2;5&sup3;
    </font>
</form>
<p> ========================padding border margin </p>
</html>
相关文章
|
9月前
|
移动开发 JavaScript 前端开发
Vue系列教程(05)- 基础知识快速补充(html、css、js)
Vue系列教程(05)- 基础知识快速补充(html、css、js)
131 0
|
3月前
|
移动开发 前端开发 JavaScript
HTML语言基础知识入门
HTML语言基础知识入门
|
12月前
|
移动开发 前端开发 JavaScript
web前端基础知识——HTML/HTML5
HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 文档包含了HTML 标签及文本内容 HTML文档也叫做 web 页面
131 2
|
移动开发 前端开发 HTML5
HTML基础知识(一)
HTML基础知识(一)
42 0
|
安全 数据安全/隐私保护
HTML基础知识
HTML基础知识
|
JavaScript 前端开发
HTML基础知识(二)
HTML基础知识(二)
71 0
|
移动开发 前端开发 JavaScript
【JavaEE】HTML基础知识
【JavaEE】HTML基础知识
HTML基础知识
HTML基础知识
36 0
|
前端开发
HTML|前端网页的设计基础知识
HTML|前端网页的设计基础知识
155 0
|
前端开发 开发工具
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
180 0