自学无果 报班学习的每日知识点总结与回顾 0基础学前端的小伙伴可以进来看看 一起学习一起进步（三）

关于HTML几个常用标签

上次讲到锚点链接，我意识到光整理干巴巴的知识点有点小枯燥，那我从这个文章开始，每个知识点我会写一个小例子来帮助记忆~

img标签

代码展示

<img src="./1jpg" alt="" />

属性介绍

• src属性：这是img标签必须要有的属性，它的属性值代表的是要引入图片的URL。
• alt属性：这个属性用于图片不能正常正常显示时告诉浏览网页的人和浏览器的搜索引擎这张图片表示什么内容。
• width和height属性：既设置宽高。
  　* 注意：如果单独设置图片的宽度或者高度，图片将会等比例缩放。（保证图片不失真）。像素（px pixel）并不是自然界中的长度单位，它是一种图像中最小的点。

列表标签

无序列表

1.使用ul标签，包含列表中的内容
2.ul的子元素必须是li
3.每个li表示列表中的每一项
4.li中可以包含其他标签

<ul>
    <li>西瓜</li>
    <li>香蕉</li>
    <li><a href="#">梨子</a></li>
</ul>

有序列表

1.使用ol标签，包含列表中的内容
2.ol的子元素必须是li
3.每个li表示列表中的每一项
4.li中可以包含其他标签

<ol>
    <li>周杰伦</li>
    <li>林俊杰</li>
    <li><a href="#">蔡徐坤</a></li>
</ul>

定义列表

1.dl标签，定义列表
2.dt标签，列表的主题
3.dd标签，列表的解释和描述

<dl>
    <dt>联系我们</dt>
    <dd>QQ</dd>
    <dd>微信</dd>
    <dd>微博</dd>
</dl>

注意：dl标签只能包含dt和dd。dt和dd标签可以包含其他标签。dt与dd是并列关系

表格标签

<table border="1px" cellspacing="0">
        <caption>简单表格</caption>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>

table标签

作用

告诉浏览器在table标签内包含的内容属于表格。

常用属性

1.border属性：边框。
2.width属性：用来规定表格的宽度。
3.cell spacing属性：设置单元格与单元格之间的距离。

caption标签

作用

给表格添加标题

thead标签

作用

给表格添加表头

tbody标签

作用

给表格添加主题数据

tfoot标签

作用

表格的脚注部分

tr标签与th丶td标签

作用

1.在thead丶tbody丶tfoot中每一行都用tr标签表示。
2.如果在thead标签中，我们通常使用th标签来表示一个单元格，在tbody丶tfoot标签中，用td表示一个单元格。

tr标签常用属性

• align属性：设置对其方式

• left：默认值，左对齐
• right：右对齐
• center：居中

• valign属性：

• top：上对齐
• middle：居中对齐
• bottom：下对齐

• height属性：用来设置高度

td丶th常用属性

• colspan:规定单元格横跨的列数。
• rowspan：规定单元格横跨的行数。
  我来给大家做个例子：
  

 <table border="1px" cellspacing="0" style="background: yellow;">
        <thead>
            <tr>
                <th colspan="3">星期一菜谱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">素菜</td>
                <td>青草茄子</td>
                <td>花椒扁豆</td>
            </tr>
            <tr>
                <td>小葱豆腐</td>
                <td>炒白菜</td>

            </tr>
            <tr>
                <td rowspan="2">荤菜</td>
                <td>油焖大虾</td>
                <td>海参鱼翅</td>
            </tr>
            <tr>

                <td>红烧肉
                    <img src="./hsr.png" alt="">
                </td>
                <td>烤全羊</td>
            </tr>

        </tbody>
    </table>

内框架

<a href="http://www.baidu.com" target="one">百度一下</a>
<iframe src="#" frameborder="0" id="one"></iframe>
<!--默认情况下内框架显示的是空页面，当点击百度一下，在内框架中打开了百度页面-->

作用

创建包含另外一个文档的地址

常用属性

1.src属性：载入框架时要载入的文档的地址
2.frameborder属性：是否显示边框，当为0时不显示边框。
3.width丶height属性
4.name属性：给它设置一个名字可以配合a标签的target属性使用(例子看前面)

表单标签

form标签

作用

告诉浏览器在双标签内包含的内容是表单的内容

常用属性

1.action属性：它的值通常都是指定将表单的数据提交到的地址。
2.method属性：它指定了数据提交的方法。默认值为get，表示使用查询字符串在URL上面传值。还有一种方法为POST，这种方法会将值和URL分开传输。

input标签

作用

定义输入框

常用属性

• type属性：可以定义输入框的类型（根据type的值来配合其他属性）

• text值：表示一个输入文本框。

• name属性：表示该文本框传递到服务器上的标识。
• value属性：文本框里的默认值。
• maxlength属性：文本框可以输入的最大字符。
• disabled属性：表示禁用该文本框。
• readonly属性：只读。
  只读和禁用的区别在于：禁用的值不会传进服务器而只读的值会传入服务器

• passwor值：表示一个密码框。

• name属性：表示该密码框传递到服务器上的标识
  注意：提交密码框的值是使用明文提交的！

• submit值：表示一个提交按钮

• value属性：更改按钮显示的值。

• radio值：表示一个单选框，只能选择一个

• name属性：该单选框传递到服务器上的标识。（也用来进行分组）
• value属性：选中后传递到服务器上的值
• checked属性：默认选中的选项。

男：<input type="radio" name="sex" value="m" checked/> 
女：<input type="radio" name="sex" value="f" />

注意：同一组的多个单选框中，他们的name值必须相同，否则不能实现单选效果

• checkbox值：复选框，多选框，可以选择多个选项

• name属性：该多选框传递到服务器上的标识。
• value属性：选中后传递到服务器上的值
• checked属性：默认选中的选项。
  注意：用户不能输入，所以需要我们使用value属性给多选框指定一个值，方便上传服务器。
  复选框可以有多个默认选项。

• file值：上传框

• multiple属性：加上该属性后 按住Ctrl键可以选多个文件。

• reset值：重置表单。（用的少作为了解）

label标签

作用

用来为input标签定义标注

属性

for属性：用来和input进行绑定，值要跟input输入框的id值相同才能完成绑定。

select标签

作用

定义一个下拉列表

常用属性

1.name属性：给下拉列表定义一个名字。
2.disabled属性：禁用整个下拉列表。

option标签

作用

定义下拉标签的每一项

常用属性：

1.value属性：传给服务器的值
2.disable属性：禁用该option选项。
3.selected属性：默认选中。

optgroup标签

作用

对option进行分组

常用属性

1.label属性：说明这个分组的描述。
2.disable属性：禁用整个分组。

多选

multiple属性：可以多选
size 属性：用来控制选多少个

textarea标签

作用

用来输入大段的文字

常用属性

name：传输的标识。
它中间包含的内容会作为默认值存在(包括其中的空格也是一样)。

button标签

常用属性

type属性：button、submit、reset

最后给大家展示一个例题：

 <form action="" method="GET">
        <!-- action属性是规定表单数据要传输到哪里，它的属性值即为要传输到的地址 -->
        <!-- 而method属性是规定表单数据传输的方法，一般有两种取值，当值为GET（默认值）时，是通过查询字符串来传输到URL上 当值为POST时，传输方法是将值与URL分开传输-->
        <table width="800px">
            <tr>
                <td>邮箱地址</td>
                <td><input type="text" /></td>
                <!-- type属性的值取text时,说明这是一个文本框 -->
                <!-- 关于文本框的属性 -->
                <!-- 1.name属性：是该文本框上传到服务器上的标识 -->
                <!-- 2.value属性：它是默认值 -->
                <!-- 3.maxlength属性:文本框输入内容的最大值 -->
                <!-- 4.disabled属性:禁用该文本框 -->
                <!-- 5.readonly属性:只读 -->
                <!-- 禁用属性和只读属性最大的区别在与,禁用时的值不会被上传到服务器而只读时的值会被传到服务器 -->
            </tr>
            <tr>
                <td>密　　码</td>
                <td><input type="password"></td>
                <!-- 当type取值为password时,表示这是一个密码框 -->
                <!-- 密码框的属性 -->
                <!-- name属性:表示改密码框上传到服务器上的标识 -->
                <!-- 注意!:提交密码框到服务器上时是明文提交 -->
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password"></td>
            </tr>
            <tr>
                <td>上传头像</td>
                <td><input type="file"></td>
                <!-- 当type取file时是上传文件框 -->
                <!-- 上传文件框的属性 -->
                <!-- 1.multiple属性:加上该属性可以通过按住Ctrl键来选取多个文件 -->

            </tr>
            <tr>
                <td>性　　别</td>
                <td>男　<input type="radio" name="sex" value="m" checked/> 女　<input type="radio" name="sex" value="f" />
                    <!-- 当type取radio值时,说明这是一个单选框 -->
                    <!-- 单选框的属性: -->
                    <!-- 1.name:是该单选框传递到服务器上的标识(也用来进行分组) -->
                    <!-- 2.value:选中选项后传到服务器上的值 -->
                    <!-- 3.checked属性:加上该属性就是默认要选中的选项 -->
                    <!-- 注意!:同一组中多个单选框它们的name必须相同,否则不会实现单选效果 -->
                </td>
            </tr>
            <tr>
                <td>兴　　趣</td>
                <td><label for="dengshan">登山</label>　<input type="checkbox" name="dengshan[]" value="dengshan" id="dengshan">
                    <!-- label标签的作用: -->
                    <!-- label标签有一个属性为for,当它的值与input标签里面id属性的值一致时,用户点击被label标签标识的字符时就可以选中按钮  -->
                    钓鱼<input type="checkbox" name="diaoyu[]" value="diaoyu">
                    <!-- 12 -->

                    养鱼
                    <input type="checkbox" name="yangyu[]" value="yangyu"> 饲养宠物
                    <input type="checkbox" name="siyang[]" value="siyang"> 网络游戏
                    <input type="checkbox" name="wangluo[]" value="wangluo"> 郊游
                    <input type="checkbox" name="jiaoyou[]" value="jiaoyou"></td>
                <!-- 当type的值取checkbox时,为复选框 -->
                <!-- 复选框的属性 -->
                <!-- 1.name属性:该复选框传递到服务器上的标识 -->
                <!-- 2.value属性:每个选项传入服务器中的值 -->
                <!-- 3.checked属性:默认选中该多选框 -->
                <!-- 注意!:因为用户不能输入所以我们需要使用value属性给这个多选框指定一个值 -->
                <!-- 当上传时多选的内容重叠导致上传后的内容没显示齐全,处理方法:给每个name属性的值后面加[] -->
                <!-- checked可以是多个 -->
            </tr>
            <tr>
                <td>国　　家</td>
                <td>
                    <select name="country" id="">
                        <!-- select标签是定义一个下拉列表 -->
                        <!-- select标签的属性 -->
                        <!-- 1.name属性:它的值是给下拉列表定义一个名字 -->
                        <!-- 2.disabled属性:禁用整个下拉列表 -->
                        <option value="c">中国</option>
                        <option value="h">韩国</option>
                        <option value="j">日本</option>
                        <option value="u">美国</option>
                        <!-- option标签是定义下拉列表中的每一项 -->
                        <!-- option标签的属性 -->
                        <!-- 1.value属性:它的值是传给服务器的值 -->
                        <!-- 2.disabled属性:是禁用该项 -->
                        <!-- 3.selected属性:默认选中该项 -->
                    </select>

                </td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="submit" value="登录"></td>
                <!-- 当type取submit值时,代表这是一个提交按钮 -->
                <!-- 提交按钮的属性 -->
                <!-- value属性:更改按钮显示的值 -->
            </tr>
        </table>
    </form>

希望大家多多练习~
好啦 到这里我们的HTML就学完啦 接下来是装饰我们网页的CSS 了。