笔记2--html基础知识

3.列表标签

1. 江西

2. 河南

3.浙江

4.江苏

3.1无序列表

<ul>:unordered list，定义一个无序列表（没有顺序的）

<li>:list item，定义一个列表项

ctrl+d 复制当前行

li*3+tab键，产生三个li，效果如下：

<li></li>
<li></li>
<li></li>

 

type属性用来指定无序列表的符号，取值有：

disc：实心的圆点，默认值；

circle：空心的圆圈；

square：实心的正方形。

<ul type="disc">
<li>浙江</li>
<li>江苏</li>
<li>江西</li>
<li>河南</li>
</ul>

 

3.2有序列表

<ol> ordered list,有序列表，（列表项带有序号）

Type属性指定序号的类型，其取值：

1：序号为1,2,3.....默认值

A：序号为A,B,C.....

a：序号为a,b,c.....

I：序号为I,II,III,IV....

i：序号为i,ii,iii,iv....等等

start属性指定从第几个开始，当取值为0或负数时，会优先列出到0之前的所有数，然后才继续列出start开始的数

<ol type="A"start="-2">
    <li>浙江</li>
    <li>江苏</li>
    <li>江西</li>
    <li>河南</li>
</ol>

 

3.3列表的嵌套

<ul type="square">
    <li>树叶</li>
    <li>树
        <ol>
            <li>枫树
                <dl>
                    <dt>枫树叶</dt>
                    <dd>红色的树叶</dd>
                </dl>
            </li>
            <li>杨树叶</li>
        </ol>
    </li>
    <li>还有什么</li>
</ul>

效果如下：

 

3.4自定义列表

<dl> defined list定义一个自定义列表

<dt> defined title列表项的标题

<dd> defined description列表项的描述

<dt>江苏</dt>
<dd>
    江苏，简称“苏”，省会南京，位于中国大陆东部沿海，介于东经116°18′～121°57′，北纬30°45′～35°20′之间。
    江苏地形以平原为主，陆地边界线3383公里，面积10.72万平方公里，占中国的1.12%，人均国土面积在中国各省中最少。
    [1-2]  公元1667年因江南省东西分置而建省，得名于“江宁府”与“苏州府”之首字。
</dd>
<dt>河南</dt>
<dd>
    河南（略）。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</dd>

 

 

 

4.表单

4.1表单

什么是表单？收集用户填写的信息并将其提交到后台服务器。

<form>

action属性:指定提交的地址；

Method属性:指定提交的方式,get/post。

get和post方式的区别:

（1）长度的限制，get方式限制为2k以内；

（2）安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获。

4.2 文本框

文本框

<input type="text">

maxlength：指定文本框能接受的最大字符个数

size：指定文本框的大小（宽度）

value:指定初始值

4.3 密码框

<input type="password"maxlength="6">
</form>

密码框和文本框是一样的，文本框的属性同样适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。

4.4 label

（1）可以单独对其应用相应的样式

（2）For属性可以使之和某个<input>关联，即当单击文本会激活对应的<input>。

<label for="userId">账号：</label>
    <input id="userId"type="text"maxlength="10"size="10"value="adc">
    <br>
<label for="password">密码：</label>
<input id="password"type="password"maxlength="10"placeholder="密码">

4.5单选按钮框

<input type="radio"name="role">学生
<input type="radio"name="role"checked>教师
<input type="radio"name="role">管理员

如果需要将若干个单选按钮编为一组(一组最多只有一个被选中)，需要设置相同的name属性。

如果需要默认选中某个选项，需要加上checked属性

标签属性的表示形式：

（1）键值对：属性名=属性值

type=“true”、maxLength=“6”

（2）一些取值为布尔类型的属性直接使用属性名

checked、readonly

4.6多选按钮框

你的兴趣爱好是：
<input type="checkbox"checked>音乐
<input type="checkbox"checked>阅读
<input type="checkbox">游戏
<input type="checkbox">电影
<input type="checkbox">睡觉

4.7提交按钮

<input type="submit">

（1）点击按钮之后跳转到form表单指定的Action

（2）Value属性：value对应的值就是按键上显示的文字。

（3）点击按钮，将form表单中的input中的name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）。并拼接到form表单Action属性值的后面。

 

4.8重置按钮

<input type="reset"value="刷新">

（1）点击按钮，重置表单内部的输入框（单选按钮）

（2）value属性：value对应的值就是按键上显示的文字。

 

4.9普通按钮

<input type="button"value="普通按钮">

点击按钮没有反应。

4.10图片按钮

<input type="image"src="按钮logo.jpg"alt="登陆">

（1）作用和submit按钮是一样的

（2）需要设置src属性的值，如果src对应的路径没有找到图片(又没有设置alt属性， 那么显示默认值“提交”，如果设置了alt属性，则显示alt的值)。(类似img标签)。

4.11 <button>标签

（1）内容可以是任意资源（例：图片，段落，视频..）

当<button>标签放置在form内部，作用和实现的效果与submit一样。