CSS基础之有序，无序，定义列表，div+span+表单元素

作者: Owen270 | 来源:发表于2017-12-14 13:47 被阅读51次

CSS基础之有序，无序，定义列表，div+span+表单元素
html列表的使用
CSS 列表属性
HTML列表
列表长度单位颜色单位字体样式
HTML 列表
Html第二节
HTML5学习笔记（六）
HTML基本知识（二）
列表元素 <ul> <li> 表格 &l

1.列表

1.1无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。ul就是英语unordered list，“无序列表”的意思。li 就是英语list item ， “列表项”的意思。所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

<body>
    <h3>中国主要城市</h3>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>铁岭</li>
    </ul>
</body>

image.png

但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。li是一个容器级别的标签，里面什么都可以放

<body>
    <h3>习大大专著</h3>
    <ul>
        <li>
            <h4>习近平谈治国理政</h4>
            <p>¥49.00</p>
            <p>《习近平谈治国理政》谈中国、论世界，为各国读者开启了一扇观察和感知中国的窗口。阅读这本书，可以了解以习近平同志为总书记的党中央治国理念和执政方略，品味悠长醇厚的中国历史文化，感受当</p>
        </li>
        <li>
            <h4>习近平用典</h4>
            <p>¥23.60</p>
            <p>人民日报社社长杨振武主持编写并作序，人民日报社副总编辑卢新宁组织撰写解读文字，旨在对习近平总书记重要讲话（文章）引用典故的现实意义进行解读，对典故的背景义</p>
        </li>
        <li>
            <h4>摆脱贫困</h4>
            <p>26.00</p>
            <p>追本溯源 融会贯通    深入学习贯彻习近平总书记系列重要讲话精神    推动学习贯彻向广度深度拓展   习近平总书记**部个人专著   时隔22年后重印发行</p>
        </li>
    </ul>
</body>


下面的也是错误的，因为ul里面只能有li标签，而不能有别的：
1       <ul>
2           <h3>中国主要城市</h3>
3           <li>北京</li>
4           <li>上海</li>
5           <li>广州</li>
6           <li>铁岭</li>
7       </ul>

image.png

甚至于可以再放一个ul：

<body>
    <h3>去超市要买的东西</h3>
    <ul>
        <li>
            吃的
            <ul>
                <li>饼干</li>
                <li>面包</li>
                <li>
                    巧克力
                    <ul>
                        <li>德芙</li>
                        <li>费列罗</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            用的
            <ul>
                <li>笔记本</li>
                <li>圆珠笔</li>
            </ul>
        </li>
        <li>
            喝的
            <ul>
                <li>牛奶</li>
                <li>可乐</li>
            </ul>
        </li>
    </ul>
</body>

image.png

1.2有序列表

ordered list 有序列表，用ol表示，也就是说，ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。

<body>
    <h4>中国歌曲排行榜</h4>
    <ol>
        <li>小苹果</li>
        <li>月亮之上</li>
        <li>最炫民族风</li>
    </ol>
</body>

image.png

1.3定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：dl表示definition list定义列表；dt表示definition title 定义标题；dd表示definition description 定义表述词儿；dt、dd只能在dl里面，dl里面只能有dt、dd 。

<body>
    <h3>中国主要城市</h3>
    <dl>
        <dt>北京</dt>
        <dd>国家首都，政治文化中心</dd>
        <dd>污染很严重，PM2.0天天报表</dd>
    </dl>

    <dl>
        <dt>上海</dt>
        <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
    </dl>

    <dl>
        <dt>广州</dt>
        <dd>中国南大门，有珠江、小蛮腰</dd>
    </dl>
</body>

image.png

2.div和span

2.1 div

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。

<body>
    <div>
        <h3>中国主要城市</h3>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </div>
    <div>
        <h3>美国主要城市</h3>
        <ul>
            <li>纽约</li>
            <li>洛杉矶</li>
            <li>华盛顿</li>
            <li>西雅图</li>
        </ul>
    </div>
</body>

image.png

2.2 span

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。span里面是放置小元素的，div里面放置大东西的。

<body>
    <h3>书</h3>
    <ul>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
    </ul>
</body>

image.png

3.表单

3.1文本框

<input type="text" value="默认有的值" />

表示“输入”，指的是这是一个“输入小部件”，type表示“类型”，text表示“文本”，指的是类型是一个文本框的输入小部件。

image.png

3.2密码框

<input type="password" />

input标签很神奇，又是文本框，又是密码框。到底是啥？看type属性的值是什么，来决定。如果type=”text” 文本框如果type=”password” 密码框。

image.png

3.3单选按钮

<input type="radio" name="xingbie" /> 男

<input type="radio" name="xingbie" /> 女

只能选一个，术语叫做“互斥”，radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。默认被选择，就应该书写checked=”checked”。

image.png

3.4 复选框

也是input标签，type是checkbox,复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

1   <p>
2       请选择你的爱好：
3       <input type="checkbox" name="aihao"/> 睡觉
4       <input type="checkbox" name="aihao"/> 吃饭
5       <input type="checkbox" name="aihao"/> 足球
6       <input type="checkbox" name="aihao"/> 篮球
7       <input type="checkbox" name="aihao"/> 乒乓球
8       <input type="checkbox" name="aihao"/> 打豆豆
9   </p>

image.png

3.5下拉列表

select就是“选择”，option“选项”，select标签和ul、ol、dl一样，都是组标签

    <select>
        <option>北京</option>
        <option>河北</option>
        <option>河南</option>
        <option>山东</option>
        <option>山西</option>
        <option>湖北</option>
        <option>安徽</option>
    </select>

[图片上传中...(image.png-d4416e-1513236989605-0)]

3.6多行文本域

text就是“文本”，area就是“区域”，这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。cols属性表示columns“列”，rows属性表示rows“行”，值就是一个数，表示多少行，多少列。

<textarea cols="4" rows="10"></textarea>

image.png

3.7三种按钮

3.7.1普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

image.png

3.7.2提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字

image.png

3.7.3重置按钮

<input type="reset"/>

reset就是“复位”的意思

image.png

<body>
    <div>
        <h3>欢迎注册本网站</h3>
        <form action="1.php">
            <p>
                请输入您的姓名:
                <input type="text" value="默认有的值，(*^__^*) 嘻嘻……" />
            </p>
            <p>
                请输入您的密码：
                <input type="password" />
            </p>
            <p>
                请选择你的性别：
                <input type="radio" name="xingbie" id="male"/><label for="male">男</label>
                <input type="radio" name="xingbie" /> 女
                <input type="radio" name="xingbie" /> 保密
            </p>
            <p>
                请选择你的学历：
                <input type="radio" name="xueli" /> 幼儿园
                <input type="radio" name="xueli" /> 小学
                <input type="radio" name="xueli" /> 初中
                <input type="radio" name="xueli" /> 高中
                <input type="radio" name="xueli" /> 大学
                <input type="radio" name="xueli" /> 硕士
                <input type="radio" name="xueli" /> 博士
                <input type="radio" name="xueli" /> 更高
            </p>
            <p>
                请选择你的爱好：
                <input type="checkbox" name="aihao"/> 睡觉
                <input type="checkbox" name="aihao"/> 吃饭
                <input type="checkbox" name="aihao"/> 足球
                <input type="checkbox" name="aihao"/> 篮球
                <input type="checkbox" name="aihao"/> 乒乓球
                <input type="checkbox" name="aihao"/> 打豆豆
            </p>
            <p>
                请选择你的技能：
                <input type="checkbox" name="jineng" /> HTML
                <input type="checkbox" name="jineng" /> CSS
                <input type="checkbox" name="jineng" /> JS
            </p>
            <p>
                请选择你的籍贯：
                <select>
                    <option>北京</option>
                    <option>河北</option>
                    <option>河南</option>
                    <option>山东</option>
                    <option>山西</option>
                    <option>湖北</option>
                    <option>安徽</option>
                </select>
            </p>
            <p>
                签名：
                <textarea rows="4" cols="10"></textarea>
            </p>
            <p>
                普通按钮：
                <input type="button" value="我是一个普通按钮" />
            </p>
            <p>
                提交按钮：
                <input type="submit" />
            </p>
            <p>
                重置按钮:
                <input type="reset" />
            </p>
        </form>
    </div>
</body>

image.png

3.8 label标签

本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
1   <input type="radio" name="sex" /> 男
2   <input type="radio" name="sex" /> 女

label就是解决这个问题的。
1   <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
2   <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。

复选框也有label：
1   <input type="checkbox" id="kk" />
2   <label for="kk">10天内免登陆</label>  
什么表单元素都有label。
<body>
    <p>
        请选择你的性别：
        <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
        <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
    </p>
    <p>
        <input type="checkbox" id="kk" />
        <label for="kk">10天内免登陆</label>  
    </p>
    <p>
        <label for="xingming">姓名：</label>
        <input type="text" id="xingming" />
    </p>
</body>

image.png

4 .字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。
1   好高兴啊，今天我们学习了<h1>标签，老师说这个标签是主标题的语义。
所以，
1   &lt;
就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；

1   &gt;
就是>的字符实体。
gt就是greater than 大于的意思。

1   &copy;
就是©  版权符号。

1   &nbsp;
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

所以：
1   哈&nbsp;&nbsp;&nbsp;&nbsp;哈
空出了4个字的格，可以防止空白折叠现象。

<body>
    <p>
        &lt;
    </p>
    <p>
        标签&lt;h1>就是主标题
    </p>
    <p>
        &gt;
    </p>
    <p>
        &copy;
    </p>
    <p>
        哈&nbsp;&nbsp;&nbsp;&nbsp;哈
    </p>
</body>

image.png

5.HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。
这些样式的标签，都已经被废弃。

2004年之前的东西了：
1   <font size="9" color="red">哈哈</font>

这些标签都是css钩子，而不是原意：
1       <b>加粗</b>
2       <u>下划线</u>
3       <i>倾斜</i>
4       <del>删除线</del>
5       <em>强调</em>
6       <strong>强调</strong>
这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

水平线：
1   <hr />

换行：
1   <br />
不另起一个段落，进行换行。
1       <p>
2           哈<br />哈哈
3       </p>
网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用<br />
br是英语break打断的意思。

标准的div+css页面，用的标签种类很少：
1   div  p  h1  span   a   img   ul   ol    dl    input
知道每个标签的特殊用法、属性。比如a标签，img的属性。

<body>
    <font size="9" color="red">哈哈</font>

    <b>加粗</b>
    <u>下划线</u>
    <i>倾斜</i>
    <del>删除线</del>

    <hr />

    <em>强调</em>
    <strong>强调</strong>

    <p>
        哈<br />哈哈
    </p>
</body>

image.png

CSS基础之有序，无序，定义列表，div+span+表单元素
1.列表 1.1无序列表无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。ul就是英语...
html列表的使用
列表元素 1.有序列表 ol/li 2.无序列表 ul/li 3.自定义列表 dl/dt/dd 元素css属性 l...
CSS 列表属性
列表属性 CSS列表属性用于设置HTML列表元素的样式，包括无序列表和有序列表。 CSS列表的所有属性： list...
HTML列表
HTML支持有序、无序和定义列表无序列表: 有序列表：嵌套列表：自定义列表: HTML 列表标签定义有序列表...
列表长度单位颜色单位字体样式
1、列表(可以互相嵌套)：无序列表 :ul(块元素) li(块元素)有序列表:ol li定义列表:dl dt ...
HTML 列表
HTML支持有序、无序和定义列表实例无序列表本例演示无序列表。有序列表本例演示有序列表。无序列表无序...
Html第二节
无序列表上海成都有序列表上海成都自定义列表创建表格表单 //table表示一个表格...
HTML5学习笔记（六）
1、被安排得明明白白 1.1 无序列表和有序列表：无序列表(Unordered List):使用ul元素来定义，...
HTML基本知识（二）
列表无序列表标签, 项有序列表标签, 项自定义列表 -嵌套列表块块级元素，可用于组合其他HTML元素...
列表元素 <ul> <li> 表格 &l
列表元素有序列表ol，直接元素只能用li 无序列表ul，直接子元素只能是li 定义列表 dl 直接子元素只能是d...

CSS基础之有序，无序，定义列表，div+span+表单元素

1.列表

1.1无序列表

但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。li是一个容器级别的标签，里面什么都可以放

甚至于可以再放一个ul：

1.2有序列表

ordered list 有序列表，用ol表示，也就是说，ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。

1.3定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：dl表示definition list定义列表；dt表示definition title 定义标题 ；dd表示definition description 定义表述词儿；dt、dd只能在dl里面，dl里面只能有dt、dd 。

2.div和span

2.1 div

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。

2.2 span

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。span里面是放置小元素的，div里面放置大东西的。

3.表单

3.1文本框

<input type="text" value="默认有的值" />

表示“输入”，指的是这是一个“输入小部件”，type表示“类型”，text表示“文本”，指的是类型是一个文本框的输入小部件。

3.2密码框

<input type="password" />

input标签很神奇，又是文本框，又是密码框。到底是啥？看type属性的值是什么，来决定。如果type=”text” 文本框如果type=”password” 密码框。

3.3单选按钮

<input type="radio" name="xingbie" /> 男

<input type="radio" name="xingbie" /> 女

3.4 复选框

也是input标签，type是checkbox,复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

3.5下拉列表

select就是“选择”，option“选项”，select标签和ul、ol、dl一样，都是组标签

3.6多行文本域

text就是“文本”，area就是“区域”，这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。cols属性表示columns“列”，rows属性表示rows“行”，值就是一个数，表示多少行，多少列。

<textarea cols="4" rows="10"></textarea>

3.7三种按钮

3.7.1普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

3.7.2提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字

3.7.3重置按钮

<input type="reset"/>

reset就是“复位”的意思

3.8 label标签

4 .字符实体

5.HTML废弃标签介绍

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

定义列表也是一个组标签，不过比较复杂，出现了三个标签：dl表示definition list定义列表；dt表示definition title 定义标题；dd表示definition description 定义表述词儿；dt、dd只能在dl里面，dl里面只能有dt、dd 。