大前端笔记02

HTML第一阶段day02-表单、表格标签

一、链接 a （行内标签）

• 1、当前项目的不同页面之间的跳转

    <a href="目标页面的相对路径">链接文本</a>

• 2、跳转到其他的网站中的页面 （友情链接）

    <a href="网址">跳转其他网站</a>

• 3、锚点链接： 定位到页面中的指定位置

  • a ：在需要定位的位置添加id属性

      <h1 id="top"></h1>
  

  • b ：在a标签的href里面添加 # + id属性名

      <a href="#top">回顶部</a>
  

• 4、页面跳转和锚点结合

      <a href="./1、链接.html#h2"> 跳转</a>
  

• 5 、target="_blank" ： 在新窗口中打开目标链接

    <a href="目标页面的相对路径" target="_blank">链接文本</a>

• 6、title="提示文字" 属性用来定义提示文本，鼠标悬停在标签上显示

    <img src="" alt=""  title="">
    <a href="" title=""> </a>

二、表格

1、标签

• table 表格

• tr 行

• td 标准单元格

• th 表头单元格

• caption: 表格标题

• thead :表格头部

• tbody ：表格主体

• tfoot ：表格的脚注

• thead,tbody,tfoot:这三个标签用来增强表格的结构化和语义，对布局没影响

    <table border="2" width="300" height="150">
        <caption>表格标题</caption>
        <thead>  
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 1 </td>
                <td> 2 </td>
                <td> 3 </td>
            </tr>
            <tr>
                <td> 4 </td>
                <td> 5 </td>
                <td> 6 </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总计</td>
                <td>80人</td>
                <td>99分</td>
            </tr>
        </tfoot>
    </table>

2、属性

• border="1" : 给表格添加边框
• width="300": 设置整个表格的宽度
• height="150": 设置整个表格的高度
• style="border-collapse: collapse;" ：去除单元格间距，合并相邻边框

   <table border="1" width="300" height="150" style="border-collapse: collapse;">
       ...
   </table>

3、单元格合并

• colspan=“2” : 合并列
• rowspan=“2” : 合并行

• 表格设置了宽度和高度，默认情况列宽和行高根据内容的比例进行分配，也可以给单元格设置宽度和高度

三、表单

• 用于收集用户信息，表单为网页提供各种用户输入控件
• form : 表单域
• 表单元素:
• input:

  • type属性用来定义不同的输入类型

    • text : 普通文本框 <input type="text" name="username">

    • password : 密码框 <input type="password" name="password">

    • submit : 提交按钮 <input type="submit" value="注册">

    • radio : 单选按钮 <input type="radio" name="gender" value="male">

      • 多个单选按钮需要把name属性设置为相同的值，才会有选择互斥效果
      • value属性用来定义选项所代表的值

    • checkbox: 复选框 <input type="checkbox" name="hobby" value="rap">

    • reset : 重置按钮 <input type="reset" value="清空">

    • button :普通按钮 <input type="button" value="普通按钮">

    • file : 文件域 <input type="file" name="file">

    • image : 图片提交按钮 <input type="image" src="">

    • hidden : 隐藏域 <input type="hidden" name="hid" value="aaa">

• select : 下拉列表
• option ： 下拉列表选项

      <select name="city">
              <option value="beijing">北京</option>
              <option value="shanghai">上海</option>
              <option value="guangzhou">广州</option>
      </select>
  

• textarea : 文本域（多行文本）

      <textarea cols="30" rows="10" name="txt"> ... </textarea>
  

注意

• 表单元素的name属性: 除了按钮以外，其他需要携带数据的控件都需要设置name属性
• value属性： 默认情况用户选择的控件（单选按钮、复选框、下拉列表的选项）都需要设置value属性值，用来表示选项所代表的值

表单元素常用属性

• name

• value

• type

• checked=“checked” : 设置单选或者复选的默认选中项

      <input type="radio" name="gender" value="male" checked="checked"> 男
  

• selected=“selected” : 设置下拉列表选项的默认选中项

      <option value="shanghai" selected="selected">上海</option>
  

• readonly=“readonly” : 把表单元素设置为只读状态,不能编辑，能被提交

• disabled=“disabled” : 把表单元素设置为禁用状态,既不能编辑也不能提交

• size=“2”: 设置下拉列表默认显示的选项个数

      <select name="city" size="2" style="width: 100px;height: 100px;">
                  <option value="beijing">北京</option>
                  <option value="shanghai">上海</option>
                  <option value="guangzhou">广州</option>
      </select>
  

• maxlength=“10” : 设置输入框输入的最大字符个数

form表单域常用属性

• action=“地址” : 用来规定表单提交的地址，默认是当前页面

• method = “get/post” : 用来定义表单的提交方式

  • get : 默认提交方式 ，通常用来获取数据
  • post : 通常用来提交数据

• get和post的区别

  • get 把数据放在地址栏上进行提交 ，因为地址栏长度有限制，所以可能造成数据丢失 ，并且从地址栏上提交数据是不安全的
  • post 通过相对安全方式提交，大小理论没有限制