WEB前端学习day2-HTML

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>   //数字代码合并的数目,合并后删掉多余的单元格

4.无序列表,有序列表

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

<ul>
        <li>福鼎肉片</li>
        <li>四果汤</li>
        <li>香骨鸡腿</li>
    </ul>

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

<ol>
        <li>朱一龙9999999</li>
        <li>王一博8888888</li>
        <li>龚俊7777777</li>
    </ol>

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

<dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>微信公众号</dd>
        <dd>贴吧</dd>
    </dl>

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

5.表单标签

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

在这里插入图片描述
下拉列表:

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

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

        </textarea>

总结:

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

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值