html第二天的学习

朱雀 2022-06-13 14:07 195阅读 0赞

**列表标签**  
首先看看word中的序表  
无序的  
·江西  
·河南  
·浙江  
·江苏  
有序的  
1.牛奶  
2.面包  
3.包子  
4.咖啡  
1.无序列表  
`<ul></ul>`这里有个小技巧当你只写出ul时按tab键就能自动补全`<ul></ul>`  
`<ul></ul>`:unordered list,他的作用是定义一个无序列表  
`<li></li>`:作用是定义一个列表的一项

type用来取值 像这里就可以用来觉得它的符号。  
2.有序列表  
`<ol></ol>`ordered list:有序列表，也就是每个列表前面有序号

这里的type用来选择类型 start是用来选择序号从哪里开始（这里的序号可以是负数）  
3.列表的嵌套（自学）

<h1><span>菜单</span></h1>
    <ul type="disc">
    <h3>卤味</h3>
        <li>鸭脖...鸡腿...鸡翅</li>
        <li>全鸡...鸡爪...大肠</li>
        <li>鸡蛋...豆干.......</li>
        <ul type="circle">
            <h3>烧烤</h3>
            <li>烤鱼.....45元</li>
            <li>羊肉串.....2元</li>
            <li>脆骨.....2元</li>
            <li>鲜豆腐.....2元</li>
            <li>鱼豆腐.....2元</li>
            <li>鸡胗.....2元</li>
            <ul type="square">
                <h3>滋补汤类</h3>
                <li>香菇排骨汤.....45元</li>
                <li>花旗参乌鸡汤.....45元</li>
                <li>莲子猪肚汤.....45元</li>
                <li>茶树菇老鸭汤.....45元</li>
                <li>花旗参鸽子汤.....45元</li>
            </ul>
        </ul>
    </ul>

结合以上的只是加百度探索进行的列表的嵌套  
小技巧alt键加鼠标往下拉可进行列表操作 如图：![这里写图片描述][SouthEast]或者使用ctrl+d复制上一列  
4.自定义列表

<dl>
     <h3>中国各省份介绍</h3>
         <dt>温州</dt>
         <dd>好得很</dd>
         <dt>江苏</dt>
         <dd>好得很</dd>
    </dl>

`<dl></dl>:定义一个自定义列表 <dt></dt> :每一个列表项的名字 <dd></dd>:每一个列表项要讲的东西`

**2.表单**  
1.表单  
表单就是用户填写账号信息密码提交  
`<form action="#"method="post">`  
`<form></from>`用于在html创建表单  
action属性：用来进入指定的网站  
method属性：指定提交的方式 post或者get  
post与get的区别：  
![这里写图片描述][SouthEast 1]  
2.账号框

maxlength:设置能打多少字给个上限  
size：大小长宽  
value：指定一个初始值  
3.密码框  
  
密码是被遮掩的  
4.label  
（1）可以单独对其应用相应的样式，相当于给它取个对应的名字  
（2）for属性可以使之和某个关联，即当单机文本会激活对应的。

设置了这个之后每点一下你对应的值账号密码框会变成蓝色  
5.单选按钮

<input type="radio"name="role">你
    <input type="radio"name="role">我
    <input type="radio"name="role"checked>他

如果要进行单选就要name将他们进行分类变成一组只能选一个  
checked是将这个选项变成默认的选项  
（1）属性名一般对应属性值  
type=“text”size=“6”  
（2）checked这种属于布尔类型的属性名直接使用  
6.多选按钮  
你的兴趣爱好

<input type="checkbox">打游戏
    <input type="checkbox">睡觉
    <input type="checkbox">看书
    <input type="checkbox">运动

checkbox可以将它设置为多选按钮  
7.提交按钮

点击了这个按钮就会调到form表单中action设置的网址  
value这里相当于将它命名为登录  
8.重置按钮

点了这个按钮就会重置表单里输入的东西 包括按钮  
9.普通按钮

其实这个按了没啥反应  
图片按钮

<input type="image"src="001.jpg">alt=“登录”
    作用跟sumbit类似 就是好看

设置图片按钮的属性值是image，src是其对应的路径  
如果设置了alt，没找到对应路径的图片则显示alt的属性值  
如果没设置alt则显示按钮的默认属性值“提交”  
10.`<button></button>`按钮  
（1）可以在里面设置任何东西包括图片，字体，视频…点击任何地方都有反应  
（2）但是button在form表单里面作用和sumbit按钮是一样的

[SouthEast]: /images/20220613/a17b88d8c40e4a9798a8acfc883ba00e.png
[SouthEast 1]: /images/20220613/1903489cb29044738744be8927b7bb02.png