前端三件套——HTML基础知识笔记

<p><a href="#C4">查看 Chapter 4</a></p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

• HTML超链接——target属性
  使用target属性可以定义被链接的文档在何处显示
  例如下面target可以从新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML的表单元素

• 表单
  1.作用：主要负责数据采集功能，例如用户提交个人信息、账号密码等
  2.构成
  * 最外侧容器：表单标签form
  输入框--单行输入框input
  多行输入框/文本域textarea
  3.属性
  1）type属性
  作用：控制控件类型
  2）单选/多选按钮的默认选中checked属性
  语法：checked="checked"或者checked
  4.常见的type控件类型
  1）type="text"普通文本
  2）type="password"密码类型，输入的内容不会明文显示，而是显示为实心圆点或者**
  3）type="number"纯数字类型
  4）type="tel"手机号码
  5）type="file"文件类型
  6）type="radio"单选按钮
  7）type="checkbox"多选按钮 注意：多选需要保证同组name值的一致
  5.单选互斥
  1）给同组的单选按钮添加name值
  2）保证同组互斥元素的name值一致

   <form>
        用户名：<input type="text" name="username"><br>
        密码：<input type="password"><br>
        年龄：<input type="number"><br>
        手机号：<input type="tel"><br>
        头像：<input type="file"><br>
        <!-- 快速编辑多行Ctrl+D，可以选中同样的元素，从而快速编辑 -->
        性别：
            男<input type="radio" name="sex" checked="checked">
            女<input type="radio" name="sex">
            未知<input type="radio" name="sex">
        <br>
        <!-- 注意：多选需要保证同组name值的一致 -->
        爱好：
            游泳<input type="checkbox" name="hobbies" id="">
            爬山<input type="checkbox" name="hobbies" id="">
            唱歌<input type="checkbox" name="hobbies" id="">
            跳舞<input type="checkbox" name="hobbies" id="">
            rap<input type="checkbox" name="hobbies" id="">
            篮球<input type="checkbox" name="hobbies" id="">
        <br>
        个人评价：
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        普通按钮：<input type="button"><br>
        提交按钮:<input type="submit"><br>
        重置按钮：<input type="reset"><br>
    </form>

表格属性

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义列）。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
 <table border="1" width="600" height="300">
        <caption>
            <h3>优秀学生信息表</h3>
        </caption> <!-- 定义表格标题 -->
        <tr>  ///tr标签 定义行
            <th>年级</th> <!-- th是表格首行单元格 表头 -->
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高一</td> <!-- rowspan 跨行居中 -->
            <td>阳光</td> <!-- td表格单元格 -->
            <td>170</td>  ///td标签定义列 有几个td就有几列
            <td>三年二班</td>
        </tr>
        <tr>
            <td>林娜</td>
            <td>175</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td> <!-- colspan跨列居中 -->
        </tr>
    </table>
<table border="1" cellpadding="100">
    </table>  ///cellpadding设置单元格边距
如果向表格添加图像或颜色要在Table之下，单元格要在对应的td属性内定义
表格单元格内容的排列方式:align;