HTML基础-黑马程序员-web前端零基础

羊羊的代码笔记本

已于 2022-12-19 16:16:48 修改

阅读量212

点赞数

文章标签： html 前端

于 2022-12-19 15:41:32 首次发布

本文链接：https://blog.csdn.net/weixin_73579310/article/details/128369500

版权

1.3.3input系列标签-单选框-单选功能和默认选中

Summary：
这里的name是为了将选项归为一组，只能选一个
只有在select下拉菜单时，默认选中用selected，其他的都用checked，比如checkbox， radio
在文本框中用placeholder--这时显示的是有透明度的字，输入时没有影响

value中的内容会呈现出来，对输入有影响
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 用来提示输入者输入的类型

1.1列表标签

1.1.1无序列表

标签名	说明
ul	表示无列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

列表的每一项前默认显示圆点标识

         <ul>
            <li>lll</li>
            <li>hhh</li>
         </ul>

1.1.2有序列表

标签名	说明
ol	表示有列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

列表的每一项前有序号标识(1，2，3）

1.1.3自定义列表

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进的效果

        <dl>
            <dt>个人信息</dt>
            <dd>姓名</dd>
            <dd>性别</dd>
        </dl>

1.2表格标签

table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

    <table border="1px" width="500px">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>98分</td>
        </tr>
    </table>

1.2.1表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

caption标签书写在table标签内部

th标签书写在tr标签内部

    <table border="1" width="300">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>99分</td>
            <td>真棒</td>
        </tr>
    </table>

一个快捷键 Tab Shift+Tab就是退回四个空格

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

用这些标签，其实并没有什么效果，只是让浏览器更好识别

1.2.2合并单元格

将水平或垂直的多个单元格合并成一个单元格

左上原则：

上下合并——只保留最上的，删除其他

左右合并——只保留最左的，删除其他

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

        <tr>
            <td>小明</td>
            <td rowspan="2">99分</td>
            <td>真棒</td>
        </tr>
        <tr>
            <td>小米</td>
            <td>真棒</td>
        </tr>

1.3表单标签

1.3.1input系列标签

input标签可以根据type属性值的不同，展示不同效果

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一 (圆圈）
checkbox	多选框，用于多选多（方块）
file	文件选择，用于之后上传文件
submit	提交按钮，点击之后提交数据给后端服务器
reset	重置按钮，点击之后恢复表单默认值
button	普通按钮，默认无功能，之后配合js添加功能

 文本框：<input type="text">

1.3.2input系列标签-文本框

text/password常用属性：

属性名	说明
placeholder	占位符。提示用户输入内容

   文本框：<input type="text" placeholder="请输入用户名">

1.3.3input系列标签-单选框-单选功能和默认选中

radio常用属性

属性名	说明
name	分组，有相同name属性值的单选框为一组
checked	默认选中

    性别: <input type="radio" name="sex">男 
          <input type="radio" name="sex" checked>女
    <br>
         <input type="checkbox" checked>

1.3.4input系列标签-文件选择

file常用属性

属性名	说明
multiple	多文件选择

 <input type="file" multiple>

1.3.5input系列标签-按钮

按钮标签需要配合form标签使用

form使用方法：用form标签把表单标签一起包裹起来即可

<form action="">
        文本框：<input type="text" placeholder="请输入用户名">
        <br>
        性别：<input type="radio" name="sex">男 
         <input type="radio" name="sex" checked>女
         <br>
         <input type="checkbox" checked>
         <br>
         <input type="file" multiple>
         <br>
        <input type="submit" value="">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>

action属性规定当提交表单时，向何处发送表单数据

1.3.6button按钮标签

    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>

1.3.7select下拉菜单

提供多个选项的下拉菜单

select	下拉菜单的整体
option	下拉菜单的每一项

selected：下拉菜单的默认选中

    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="" selected>苏州</option>
    </select>

1.3.8textarea文本域标签

提供可输入多行文本的表单控件

cols	规定了文本域内可见宽度
rows	规定了文本域内可见行数

colspan水平合并

rowspan垂直合并

文本域右下角

可进行拖拽，以此改变大小

<textarea name="" id="" cols="30" rows="10"></textarea>

1.3.9label标签

用于绑定内容与表单标签的关系

 性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <label><input type="radio" name="sex">女</label>
    <!-- 这里要把for删除掉 -->