HTML之表标签----------我的复习之路

1.1 表格的基础语法

<table>
   <tr>
       <td>单元内的文字<td>
        ......
    </tr>
       ......
</table>
  1. <table>适用于定义表格的标签
  2. <tr>标签用于定义表格中的行，必须嵌套在<table>标签
  3. <td>用于定义表格中的单元格，必须嵌套
  4. 字母 td 指表格数据（table data），即数据单元的内容

 

1.2 表头单元格标签

   一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

     <th>标签表示HTML表格的表头部分（table head）

<table>
   <tr>
       <th>名字</th>
        .....
  </tr> 
     .....
</table>
名字 性别
项王                  男                 
小明 男

 

 

 

 

1.3 表格属性

这些属性写到 table 里面去  比如  <table align="center">

 

 

 

 

 

 

1.4 表格结构标签 

  1.  <thead> :用于定义头部， <thead> 内部必须拥有 <tr> 标签，一般位于第一位
  2. <tbody>：用于定义表格主体，主要用于放数据主体
  3. 以上标签是放在<table>标签
  4. 内部可折叠，像盒子

 

 

1.5 合并单元格

  1. 先确定跨行还是跨列合并
  2. 找到目标单元格，写上合并方法=合并单元格数量，比如：<td colspan="2"></td>
  3. 删除多余单元格
  •   跨行合并：rowspan=”合并单元格个数“
  •   跨列合并：colapan="合并单元格个数"

 

 

1.6 无序列表（重点）

      <ul> 标签HTML页面的无序列表，一般以符号形式出现列表项，而列表项使用<li>标签定义

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    .....
</ul>

 

  1. <ul>只能嵌套<li>，直接在<ul>标签中输入其他标签是不允许的
  2. <li>之间相当于一个容器，可以容纳所有元素
  3. 无序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来设置
  4. 无序列表的各个列表之间没有顺序级别之分，是并列的

1.7 有序列表（理解）

  <ol>定义有序列表，以数字排列，用<li>来定义列表项

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
   .....
</ol>
  1. <ol>只能嵌套<li>，直接在<ol>标签中输入其他标签是不允许的
  2. <li>之间相当于一个容器，可以容纳所有元素
  3. 无序列表会带有自己的样式属性，但实际使用时，我们会使用CSS来设置

 

 

1.8 自定义列表（重点）

<dl>用于定义描述列表，该标签与 <dt>(定义项目/名字)和<dd>(描述每一个项目/名字)和<dd>(描述每一个项目/名字)一起使用

<dl>
  <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>
  1. <dl></dl>里面只能包含<dt>和<dd>
  2. <dt> 和<dd>个数没有限制，经常一个<dt>对应多个<dd>

 

 

 

1.9 表单

组成：一个表单通常用由  表单域， 表单控件 和 提示信息 组成

     表单域

     包含表单元素的区域

   <form>用于定义表单域，以实现用户信息的收集和传递

    它会把表单元素信息提交给服务器

 

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

 

常用元素：

 

 

 

2.1 <input>表单元素

       <input>标签用于收集用户信息 

  <input>标签包含一个type 属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）

       

<input type="属性值"  />

 

  • <input/>标签为单标签
  • type属性设置不同属性值用来指定不同的控件类型

 

 

 <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>

 

 

 

2.2 label标签

<label>标签为input元素定义标注（标签）

<label>用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应表元素用来增加用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的 for 属性应当与相关元素id 属性相同

 

 

2.3 <select>表单元素

有多个选项并想节约空间，我们可以用<select>标签控件定义下拉列表

<select>
    <option>选项1</option>   
    <option>选项2</option> 
    <option>选项3</option>
   ............
</select>
  1. <select>中至少包含一对<option>
  2. 在<option>中定义select="selected"时，当前项即为默认选中项

 

 

 

2.4 <textarea>表单元素

  

<textarea tows="3" cols="20">
   文本内容
</textarea>
  1. 通过<textarea>标签可以轻松地创建多行文本输入框
  2. rows="显示的行数" ， cols="每行中的字符数"，我们在实际开发中不会使用，都是用CSS来改变大小

 

posted on 2021-09-24 19:59  Zpring_CN  阅读(183)  评论(0)    收藏  举报

导航