02HTML+CSS

今天下午学习了列表,表格和表单。

列表:

列表分为无序列表,有序列表,定义列表。无序列表没有加样式,界面显示出来前面都是一个点,有序列表显示是带有数字1,2,3的列表,而定义列表,可以给出列表的标题和内容。一般来说,我们用到无序列表多,也是重点。

无序列表格式:父标签<ul><li></li></ul>,里面是子标签li,用来放置每一行的内容。

有序列表格式:与无序列表只有一个区别就是把ul换成ol。

定义列表:相对来说麻烦一些,所有东西包裹在<dl></dl>中,在这里面有<dt></dt>里面存放列表的标题,<dd><dd>里面存放内容。

 

表格:

基本使用:表格的主要格式为<table></table>,在里面有<tr></tr>这个是表格中的每一行,每一行中还有th和td,<th></th>这个是一列的标题,自带这加粗和剧中,<td></td>是表格中具体写内容的地方。table上面可以加属性,border="1"是让表格的边框显示出来,不加则边框不会显现出来。

结构标签:结构标签是给浏览器看到,加上对人的观看没影响,只是电脑更清楚结构。结构标签有<thead>来加到第一行上,表示这是头,<tbody>加到内容上,表示里面都是表格的内容,<tfoot>表示表格的结尾。一般来说是不需要加上这些东西的。

合并单元格:表格中存在相同的数据,我们可以将表格合并,采取原则是保留左上的数据,会在表格中的左或上的数据中加入rowspan="数字",colspan="数字"。然后将重复的表格删掉。数字表示合并几行或几列数据。

 

表单:

input基本使用:格式为 <input type="类型">,类型有text:文本框,password:密码框,radio:单选框,checkbox:复选框,file:上传文件。

占位文本:input的属性,可以让表单中提示用户干什么,placeholder=“内容”。

单选框:要想实现单选框只能选择一个的功能,需要给input中设置相同的name=“ ”值,才可以,另外加入checked的属性,可以让进入页面时默认选择这个值。

上传多个文件:需要在input属性中加入multiple。

多选框:默认选择的加入属性和单选框相同。

下拉菜单:标签为 <select><option selected>河北</option></select>selectd表示默认选择的菜单值为河北。

文本域:可以让用户输入大片的文字,同时也可以换行,标签为<textarea>

lable标签:可以扩大用户的点击范围,有两种方式,一种直接把表单用lable标签包裹起来,一种是给表单添加一个id值,lable标签有一个相同的for值。就可以实现。

按钮:

    <form action="">
        账号:<input type="text">
        <br><br>
        密码:<input type="password">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>
按钮要想生效,需要被包裹在form表单中,同时按钮有三个状态,分别是提交,重置,普通按钮。什么也不写默认是提交按钮。
无语义:无语意标签<div>可以换行,<span>不换行。
字符实体:就是想要界面显示出特殊的符号,像空格,<,>等,不会被HTML当作标签,可以用&nbsp;代替空格,&lt;代替小于号,&gt;代替大于号。
 

 

posted @   新晋软工小白  阅读(3)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
点击右上角即可分享
微信分享提示