HTML基础

第二天 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；