WEB前端学习day2-HTML_1、掌握无序列表、有序列表的制作,了解自定义列表的制作2、掌握表格、行、单元格

HTML基础知识

1.表格标签

表格的主要作用：表格不是用来布局页面的,而是用来展示数据的数据;
表格的基本语法：<table><tr><td></td></tr></table> 表格，行，单元格 <th></th>是表格首行元素，可加粗显示

表格的相关标签：
<table></table>表格标签
<tr></tr>: 每一行
<td></td>:每一个单元格
<th></th>:表头
<caption>表格标题</caption>
<thead></thead>表头标签
<tbody></tbody>主体标签
表格的属性：
1.cellspacing:单元格与单元格之间的距离
2.cellpadding:单元格与内容之间的距离
3.align:对齐方式
4.border:边框
5.rowspan:跨行合并
6.collspan:跨列合并

2.表格结构标签

thead ：头部标签
tbody：主体内容标签
tfoot：表格底部标签
可便于代码的查看

3.合并单元格

跨行合并单元格 rowspan
跨列合并单元格 colspan

<td rowspan="2"></td>   //数字代码合并的数目，合并后删掉多余的单元格
1

4.无序列表，有序列表

无序列表：ul>li 里面只能包含li 没有顺序 使用较多

<ul>
        <li>福鼎肉片</li>
        <li>四果汤</li>
        <li>香骨鸡腿</li>
    </ul>
1
2
3
4
5

有序列表：ol>li 里面只能包含li 有顺序 使用相对较少

<ol>
        <li>朱一龙9999999</li>
        <li>王一博8888888</li>
        <li>龚俊7777777</li>
    </ol>
1
2
3
4
5

自定义列表：dl>dt+dd 里面只能包含dt与dd

<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>微信公众号</dd>
        <dd>贴吧</dd>
    </dl>
1
2
3
4
5
6

要点是掌握什么使用用无序 什么时候用自定义列表
无序列表最常见，有序列表有顺序之分，自定义列表有一个总结性标题，然后下面的列表是属于它的。

5.表单标签

表单的目的是为了收集用户
文本框：<input type=”text” />
密码框：<input type=”password”/>
单选按钮：<input type=”radio” />
多选按钮:<input type=”checkbox”/>
表单控件的名字：name
默认选中项：checked=”checked”
最大长度：maxlength=“…”
默认显示的文字：value=”…”
要点提示：name和value是每个元素都要有的属性 主要是后台使用
name表单元素的名字 要求 单选按钮和复选按钮要有相同的name值

<!-- 表单域  form action="url地址" method="提交方式" name="表单域名称"-->
    <form action="xxx.php" method="get">
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br> 密码：
        <input type="password" name="pwd"><br>
        <!-- 单选按钮 radio 实现多选一-->
        <!-- name 是表单元素的名字，这里性别按钮必须有相同的名字才可以实现多选一 -->
        <!-- value 在单选复选框为后台提供数据 -->
        <!-- 单选按钮和复选框可以设置默认值checked -->
        性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女">人妖<input type="radio" name="sex" value="人妖"> <br>
        <!-- 复选框 CheckBox -->
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">睡觉<input type="checkbox" name="hobby" checked="checked" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
        <!-- 点击提交按钮可以把 表单域form 里的表单元素的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 点击重置按钮可以还原表单元素的初始状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button 后期结合 js 搭配使用 -->
        <input type="button" value="获取短信验证码"><br>
        <!-- 文件域 使用场景 上传文件使用 -->
        上传头像：<input type="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

下拉列表：

<form>
        籍贯：
        <select>
            <option selected="selected">福建</option>
            <option>深圳</option>
            <option>上海</option>
            <option>广州</option>
            <option>海南</option>

        </select>
    </form>
1
2
3
4
5
6
7
8
9
10
11

 <textarea rows="5" cols="50">我知道文本域

        </textarea>
1
2
3

总结：

label：绑定input两种方式：
<label><input type=”text”></label>
<label for= ”sex” ></label> <input type = ”text” id= ”sex” />
下拉列表：
<select>
<option></option>
</select>
文本域：
<textarea><textarea>

6.表格表单总结

表格标签: table tr th thead tbody td caption可以让内容排列整齐！
表格属性：cellspacing cellspadding border rowspan colspan width height
列表标签：ul>li ol>li dl>dt+dd
input的属性： text password radio checkbox file submit reset
表单的标签： label select textarea