码迷,mamicode.com
首页 > Web开发 > 详细

HTML第二天

时间:2018-06-30 23:01:18      阅读:364      评论:0      收藏:0      [点我收藏+]

标签:png   最简   input   image   北京   第一部分   css   put   下拉列表   

1、无序列表

1         <ul>

2            <li>苹果</li>

3            <li>华为</li>

4            <li>小米</li>

5            <li>诺基亚</li>

6         </ul>

 

2、有序列表

1         <ol>

2            <li>html成绩</li>

3            <li>css成绩</li>

4            <li>js成绩</li>

5            <li>node成绩</li>

6         </ol>

3、自定义列表

自定义列表涉及三个标签dl,dt,dd

1         <dl>

2            <dt>苹果</dt>

3            <dd>苹果手机价格昂贵,功能强大,市场份额有点减少</dd>

4      

5            <dt>华为</dt>

6            <dd>华为手机价格适中,功能强大,市场份额在变多</dd>

7      

8            <dt>小米</dt>

9            <dd>小米手机价钱亲民,功能还行。</dd>

10       </dl>

4、div和span

语义:div表示大区域,大范围。span表示小区域,小范围。

div:division。范围,区域。

我们会把相近,或者结构相似的内容放在一个div。

div本身没有任何默认样式。div自己独占一行。

div是容器级标签。

span:表示小区域小范围。

span是文本级标签。所有的内容会一行显示。

div>span

p>span>a

5、表格

最简单的案例:每行里的单元格个数一样。

1         <table border="1">

2            <tr>

3                <td>第1行第1个单元格</td>

4                <td>第1行第2个单元格</td>

5                <td>第1行第2个单元格</td>

6            </tr>

7            <tr>

8                <td>第2行第1个单元格</td>

9                <td>第2行第2个单元格</td>

10              <td>第2行第3个单元格</td>

11          </tr>

12          <tr>

13              <td>第3行第1个单元格</td>

14              <td>第3行第2个单元格</td>

15              <td>第3行第3个单元格</td>

16          </tr>

17       </table>

如果表格有表头的概念,只需要将td换成th

1         <table border="1">

2            <tr>

3                <th>姓名</th>

4                <th>性别</th>

5                <th>年龄</th>

6            </tr>

7            <tr>

8                <td>赵武</td>

9                <td>男</td>

10              <td>20</td>

11          </tr>

12          <tr>

13              <td>小红</td>

14              <td>女</td>

15              <td>10</td>

16          </tr>

17          <tr>

18              <td>小明</td>

19              <td>男</td>

20              <td>15</td>

21          </tr>

22       </table>

技术分享图片

6、合并单元格

td有两个属性,设置合并单元格的。

rowspan:跨行合并,属性值是几就表示跨几行。

colspan:跨列合并,属性值是几就表示合并几个单元格。

案例;

技术分享图片

1         <table border="1">

2            <tr>

3                <td colspan="2">1</td>

4                <td>2</td>

5                <td>3</td>

6            </tr>

7            <tr>

8                <td>4</td>

9                <td rowspan="2">5</td>

10              <td colspan="2">6</td>

11          </tr>

12          <tr>

13              <td>7</td>

14              <td>8</td>

15              <td>9</td>

16          </tr>

17       </table>

7、三个划分区域的标签

caption:表格标题

thead:表头

tbody:表格主体

1         <table border="1">

2            <!-- 第一部分表格标题 -->

3            <caption>学生信息表</caption>

4            <!-- 表头 -->

5            <thead>

6                <tr>

7                   <th>姓名</th>

8                   <th>性别</th>

9                   <th>年龄</th>

10              </tr>

11          </thead>

12          <!-- 表格主体 -->

13          <tbody>

14              <tr>

15                 <td>赵武</td>

16                 <td>男</td>

17                 <td>20</td>

18              </tr>

19              <tr>

20                 <td>小红</td>

21                 <td>女</td>

22                 <td>11</td>

23              </tr>

24              <tr>

25                 <td>小明</td>

26                 <td>男</td>

27                 <td>15</td>

28              </tr>

29          </tbody>

30       </table>

技术分享图片

 

8、表单元素

1)单行文本输入框

1     姓名:<input type="text" value="小红" />

2)密码框

1     密码:<input type="password" />

3)单选框

type=”radio”

一组单选框必须设置name,同时name属性值必须相同

1                性别:<input type="radio" name="sex" />女

2                     <input type="radio" name="sex" />男

3                     <input type="radio" name="sex" />保密

4)复选框

type=“checkbox”

一组复选框必须设置name属性,同时name属性值必须相同

           爱好:

           <input type="checkbox" name="fav" />吃饭

           <input type="checkbox" name="fav" />睡觉

           <input type="checkbox" name="fav" />打豆豆

5)文本框

textarea标签是双标签。

标签之间的内容表示默认文本。

1     <textarea cols="30" rows="10">请输入您的建议</textarea>

6)下拉列表

select>option,他们是一组标签

1                <select name="city">

2                   <option value="">北京市</option>

3                   <option value="">上海市</option>

4                   <option value="">重庆市</option>

5                   <option value="">天津市</option>

6                </select>

7)按钮

button:普通的按钮

submit:提交按钮

reset:重置按钮

1                <input type="button" value="普通按钮" />

2                <input type="submit" value="提交按钮" />

3                <input type="reset" value="重置按钮" />

提交按钮和重置按钮会清空我们输入内容

HTML第二天

标签:png   最简   input   image   北京   第一部分   css   put   下拉列表   

原文地址:https://www.cnblogs.com/h5css/p/9248857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!