HTML基础知识总结2

1 列表标签
1.1无序列表
<ul>:unordered list，定义一个无序列表
<li>:list item，定义一个列表项
<!--列表默认的符号是实心圆点disc，还有两个是square方形，circle空心圆-->
<ul type="circle">
    <li>河南</li>
    <li>深圳</li>
    <li>上海</li>
    <li>北京</li>
</ul>
注：复制上一行的时候可以使用ctrl+d（d，duplicate重复）
       li*3按Tab可以有三个<li></li>
1.2 有序列表
<ol>ordered list,有序列表，列表项带有序号
<!--默认符号为"1"123，还有"A"  ABC,"a"  abc,"i"  i ii iii,"I" I II III-->
<!--start是从第几个开始，当取值为0或者为负数时，从0或者负数开始，type类型为应为或者罗马技术也是从0或者负数开始-->
<ol type="A" start="2">
    <li>上海</li>
    <li>深圳</li>
    <li>新疆</li>
</ol>

1.3 列表的嵌套

<ul>
    <li>人种</li>
       <ul>
           <li>黄种人</li><li>黑种人</li>
       </ul>
    <li>动物</li>
        <ol>
            <li>小猫</li><li>小狗</li>
        </ol>
</ul>

1.4 自定义列表
<dl>defined list自定义列表
<dt>defined title自定义标题
<dd>defined description列表项的描述
<dl>
    <h3 align="center">各国介绍</h3>
    <dt>中国</dt>
    <dd>...... </dd>
    <dt>俄罗斯</dt>
    <dd>...... </dd>
</dl>
2表单
2.1 什么是表单？
收集用户填写的信息将其提交到后台服务器。
<form>
action,指定提交的地址。
method，指定提交的方式（①get有长度的限制为2k，且参数会在地址栏中显示；②post没有长度限制，参数不会在地址栏中显示）。
2.2 文本框
<input type="text">
maxLength，指定文本框输入最大字符
size，指定文本框的宽度
value,指定初始值
<inputtype="text" maxLength="10" size="40" value="qwer">
2.3 密码框
<inputtpye="password" maxLength="10">
密码框和文本框是一样的，属性同样适用，唯一不同的是密码框使用掩码。
2.4 lable
<lable>的作用：
（1）可以单独对其设定样式。
（2）for属性可以和某个<input>进行关联，即单击文本会激活对应的<input>。
<label for="username">账号：</label><inputid="username">
2.5 单选框按钮
<input type="radio" name="role">教师
<input type="radio"name="role"checked>学生
<input type="radio"name="role">管理员
如果单选框有多个checked则默认最后一个。
如果需要将若干个单选按钮编为一组（一组只有一个被选中），则需要设置相同的name属性。
如果需要人默认选中某个选项，加上checked属性
标签属性的表示形式：
（1）键值对，type="text"、maxLength="10"
（2）一些取值为boolean类型的属性直接使用属性名。checked、readonly
2.6 多选框
<form>
    兴趣爱好：
    <input type="checkbox" checked>篮球
    <input type="checkbox">看度
    <input type="checkbox" checked>跑步
    <input type="checkbox">骑行
</form>
2.7 提交按钮
<input type="submit" value="登录"/>
（1）点击之后跳转到form表单指定的action。
（2）value，对应的值就是按钮上显示的文字。
（3）点击按钮，将form表单中的input中name属性值（键）和值组成键值对，并凭借到form表单中action
file:///E:/H5/HTML/chapter4/result.html?name=huadian&password=123456
2.8 重置按钮
<inputtype="reset"/>
重置表单内部的，非默认的。Value属性同sunmit。
2.9 button键
<inputtype="button"value="button">
点击之后没有反应，可以与onclick配合使用，之后会说道，这里先提一下。
<inputtype="button"value="button"onclick="alert('点击成功')">
2.10 图片按钮
<inputtype="image"src="img2.jpg"alt="点击">
（1）作用同submit
（2）当type属性为image时，要设置src，如果没有找到该图片并且没有设置alt，按钮显示默认值“提交”，如果alt="xxx",则按钮显示xxx。(类似img标签)
2.11 <button></button>标签
（1）标签里可以放任何资源，如文字，图片，视频音频。
（2）<button></button>标签放在表单内部才和submit效果一样。