CSS基础之有序，无序，定义列表，div+span+表单元素
2017-12-14 本文已影响51人
Owen270
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 就是英语less than 小于的意思；
1 >
就是>的字符实体。
gt就是greater than 大于的意思。
1 ©
就是© 版权符号。
1
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。
所以：
1 哈 哈
空出了4个字的格，可以防止空白折叠现象。
<body>
<p>
<
</p>
<p>
标签<h1>就是主标题
</p>
<p>
>
</p>
<p>
©
</p>
<p>
哈 哈
</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
