HTML5+CSS3学习笔记第二天

二、HTML 第二天（列表、表格、表单）

1.列表

• 无序列表：每行前面多一个小点

  <ul>
        <li>列表条目1</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
  </ul>
  

• 有序列表：每行前面自动加1.2.3.的序号

  <ol>
        <li>有序列表条目1</li>
        <li>有序列表条目2</li>
        <li>有序列表条目3</li>
  </ol>
  

• 定义列表：

  <dl>
        <dt>列表标题</dt>
        <dd>申请售后</dd> <!--自动缩进-->
        <dd>售后政策</dd>
  </dl>
  

2.表格

• 标签：table嵌套tr，tr嵌套 td /th

  标签名	说明
  table	表格
  tr	行
  th	表头单元格
  td	内容单元格

• 默认没有边框线，使用border属性增加边框线

<table  border="1">
     <tr>
         <th>姓名</th>
         <th>语文</th>
         <th>数学</th>
         <th>总分</th>
      </tr>
      <tr>
         <td>刘宇倩</td>
         <td>100</td>
         <td>100</td>
         <td>200</td>
      </tr>
 </table>

• 表格结构标签（了解即可）：让表格结构更清晰（对浏览器来说，效果不会变）

  标签名	含义	特殊说明
  thead	表格头部	表格头部内容
  tbody	表格主体	主要内容区域
  tfoot	表格底部	汇总信息区域

• 合并单元格：跨行合并和跨列合并——为最上方或最左方要合并的单元格添加属性
  ​ * 跨行合并：添加属性rowspan
  ​ * 跨列合并：添加属性colspan

3.表单：收集信息

• input标签：< input type=“…” >

  type属性值	说明
  text	文本框，用于输入单行文本
  password	密码框
  radio	单选框
  checkbox	多选框
  file	上传文件

  文本框：<input type="text"> <!--单行文本，不换行--> <br>
  密码框：<input type="password"> <!--以点的形式显示--> <br>
  单选框：<input type="radio"> <!--一个小圆圈--> <br>
  多选框：<input type="checkbox"> <!--小方块--> <br>
  上传文件：<input type="file" multiple>  <!--multiple表示可以上传多个文件-->

​ 占位文本:提示信息 (用于文本框及密码框提示用户输入什么信息)

​ < input type=“…” placeholder=“提示信息” >

• 单选框radio——必须加name属性才能实现单选功能

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

• 下拉菜单

城市：
    <select>
      <option>北京</option>
      <option selected>广州</option>  <!--默认显示广州这一选项-->
      <option>上海</option>
      <option>深圳</option>
    </select>

• 文本域（多行输入文本）

<textarea>请输入评论</textarea> 

• label标签：某个标签的说明文本、会增大表单控件的点击范围

<!-- 增大点击范围 -->
 <!--第一种写法：-->
    <label for="man">男</label>
    <input type="radio" id="man"> 
    <!--id与for要一样，实现点击男这个文字就选中单选框-->
 <!--第二种写法：-->
   <label><input type="radio">男</label>

• 按钮——button

  type属性值	说明
  submit	提交按钮，点击后可以提交数据到后台（默认功能）
  reset	重置按钮，点击后将表单控件恢复默认值
  button	普通按钮，默认没有功能，一般配合JavaScript使用

 <button type="reset">重置</button>

​ *要放在< form >表单标签中才能使用

4.无语义的布局标签：布局网页，划分区域

• div:独占一行

• span:不换行

  <div>这是div标签</div>
  <div>这是div标签</div> <!--换行-->
  <span>这是span标签</span> 
  <span>这是span标签</span><!--不换行-->
  

5.字符实体：在网页中显示预留字符