第二天 HTML基础

列表标签

ul 无序列表（只允许包含li标签）

li 可以包含任意内容

ol 有序列表（只允许包含li标签）

li 可以包含任意内容

dl 自定义列表（只允许包含dt/dd标签）

dt 自定义列表的主题
dd 可以包含任意内容

  <dl>
      <dt>帮助中心</dt>
      <dd>账户管理</dd>
      <dd>购物指南</dd>
      <dd>订单操作</dd>   
  </dl>

table表格标签

table 表格标签

caption 表格标题标签
tr 表格行标签（用来包裹td）
- th 表头单元格标签（第一行）（用来包裹内容）（th包裹的内容会自动加粗，且表格大小会自适应文字行高）
- td 单元格标签（用来包裹内容）
  - rowspan 属性
    
    跨行合并>垂直方向
  - colspan 属性
    
    跨列合并>水平方向

表格属性

border 边框宽度
width 表格宽度
height 表格高度

表格结构标签

thead 表格头部
tbody 表格主题
tfoot 表格底部

      <table border="1" width="350" height="350">
          <caption><h2>我是表格大标题</h2></caption>
          <!-- 表头 -->
          <thead>
              <tr>
                  <th>第1个单元格</th>
                  <th>第2个单元格</th>
                  <th>第3个单元格</th>
              </tr>
          </thead>
          <!-- 表身 -->
          <tr>
              <td>第1个单元格</td>
              <td rowspan="2">第2个单元格</td>
              <td>第3个单元格</td>
          </tr>
          tr>
              <td>第1个单元格</td>
              <!-- <td>第2个单元格</td> -->
              <td>第3个单元格</td>
          </tr>
          <!-- 表底 -->
          <tfoot>
              <tr>
                  <td>第1个单元格</td>
                  <td>第2个单元格</td>
                  <td>第3个单元格</td>
              </tr>
          </tfoot>
  
      </table>

input表单标签

input 标签

type 属性
- text 属性值
  
  文本框，用于输入单行文本
- password 属性值
  
  密码框，用于输入密码
- radio 属性值
  
  点选框，用于多选一
- checkbox 属性值
  
  多选框，用于多选多
- file 属性值
  
  文件选择，用于之后上传文件
- submit 属性值
  
  提交按钮
- reset 属性值
  
  重置按钮
- button 属性值
  
  普通按钮，默认无功能，之后配合js使用
placeholder 属性
- 占位符，配合输入框使用，提示用户输入内容，例文本框、密码框、文本域
name 属性
- 用于单选框分组，有相同name属性值的单选框为一组
checked 属性
- 默认选中，不需要属性值
multiple 属性
- 配合文件选择表单使用，用于选择多个文件，不需要属值

form 标签

使用form标签把所有的表单标签包裹起来时，表单的按钮功能才能生效

  
          <form>
        普通的input：<input />
        <hr />
  
  
        姓名：<input type="text" placeholder="请输入用户字" />
        <hr />
  
      
        密码：<input type="password" placeholder="请输入密码" />
        <hr />
  
       
        <input type="radio" name="gender" />男
        <input type="radio" name="gender" checked/>女
        <br />
        <input type="radio" name="merry" />已婚
        <input type="radio" name="merry" checked />未婚
        <hr />
  
        
        <input type="checkbox" checked />云顶之弈
        <input type="checkbox" />金铲铲
        <input type="checkbox" />大乱斗
        <input type="checkbox" checked />追剧
        <hr />
  
       
        <input type="file" />
        <br />
        <input type="file" multiple />
        <hr />
  
        <!-- 如果想要让按钮生效，就必须用form表单标签把所有内容包裹起来才行 -->
        <!--
          type="submit" => 提交按钮，会自动一个默认提交名字
          value="自定义的名字" => 如果不用自定义的名字就不要写value，如果要自定义就给value一个具体的内容，千万不能写了value又不写值
          -->
        <input type="submit" value="免费注册" />
        <!--
          type="reset" => 重置按钮，可以让表单的内容全部恢复成最初始的状态
          value="自定义的名字" => 如果不用自定义的名字就不要写value，如果要自定义就给value一个具体的内容，千万不能写了value又不写值
          -->
        <input type="reset" value="请重置"/>
  
        <!--
          type="button" => 普通按钮，没有任何功能，后期需要配合JS来写
          普通按钮没有默认的按钮名，所以必须使用value属性来定义名字
        -->
        <input type="button" value="普通按钮" />
      </form>

button按钮标签

button 标签

type 属性
- submit 属性值
  
  提交按钮
- reset 属性值
  
  重置按钮
- button 属性值
  
  普通按钮，默认无功能，之后配合js使用

  
          <form>
        昵称：<input type="text" />
        <hr/>
  
        <button type="submit">button提交按钮</button>
        <hr />
  
  
        <button type="reset">button重置按钮</button>
        <hr />
  
  
        <button type="button">button普通按钮</button>
  
        <button>没有type按钮</button>
      </form>

select下拉菜单标签

select 标签（下拉菜单）

option标签

下拉菜单的每一项
- selected 属性
  
  下拉菜单的默认选中项，无属性值

  
          所在城市：
          <select>
              <option>艾欧尼亚</option>
              <option>影流</option>
              <option>德玛西亚</option>
              <option>诺克萨斯</option>
              <option>安祖</option>
              <option selected>苍盐海</option>
          </select>

textarea文本域标签

textarea 标签

cols 属性

文本域可见宽度
rows 属性

文本域可见行数

lable标签

lable 标签

把表单和内容绑定在一起，扩大鼠标的点击范围
使用方法
- 用lable标签把内容（如：文本）和表单标签一起包裹起来
- 把label标签的for属性删除

  
          <label>
              <input type="radio" name="merry" />
              已婚
          </label>
          <label>
              <input type="radio" name="merry" checked />
              未婚
          </label>

语义化标签

div 标签

一行只显示一个（独占一行）

span 标签

一行可以显示多个

header 网页头部标签

nav 网页导航标签

footer 网页底部标签

aside 网页侧边栏标签

section 网页区块标签

article 网页文章标签

字符实体

显示结果	描述	实体名称
	空格	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
''	引号	&quot；
'	单引号	&apos；
￥	元	&yen；

标签：表格,标签,单元格,基础,value,HTML,按钮,属性
From： https://www.cnblogs.com/yuanfangmaimeng/p/16708392.html

HTML基础