列表
无序列表
无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。
ul 就是英语的 unordered list. ”无序列表“的意思
li 就是英语 list item. ”列表项“的意思
<ul>
<li>武汉</li>
<li>上海</li>
<li>成都</li>
</ul>
li 不能单独存在,必须包裹在 ul 里面;
反之,ul 的”儿子“不能是别的东西,只能是 li
li是一个容器级标签,li 里面什么都能放
有序列表
ordered list 有序列表,用ol表示
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>奇艺果</li>
</ol>
ol里面只能有li,li必须被ol包裹,li是容器级。
ol 用得不多,如果想表达顺序,一般用 ul;
<ul>
<li>1.苹果</li>
<li>2.香蕉</li>
<li>3.梨子</li>
</ul>
定义列表
定义列表也是一组标签,比较复杂,出现了三个标签
- dl 表示 definition list 定义列表
- dt 表示 definition title 定义标题
- dd 表示definition description 定义表述词
dt、dd 只能在 dl 里面,dl 里面只能有 dt,dd
<dl>
<dt>武汉</dt>
<dd>华中超级大城市,小吃很多</dd>
<dt>上海</dt>
<dd>魔都,迪斯尼等</dd>
</dl>
表达的语义是两层,
1. 是一个列表,列出了武汉,上海两个项目
2. 每个词都有自己的描述项
dd 是描述 dt的。
定义列表用法非常灵活,可以一个 dt 配多个 dd
<dl>
<dt>北京</dt>
<dd>污染严重,PM2.0天天爆表</dd>
<dd>没什么好吃的。</dd>
<dt>广州</dt>
<dd>中国的南大门,有珠江,小蛮腰</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行/团购</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</dd>
</dl>
dt、dd都是容器级标签,想放什么都可以。
div 和 span
div 和 span 是非常重要的标签,
- div 的语义是 division ”分割“
- span 的语义是 span ”范围,跨度“
<div>
<h3>中国主要城市</h3>
<ul>
<li>武汉</li>
<li>南京</li>
<li>成都</li>
</ul>
</div>
div 在浏览器中,默认是不会增加任何的效果的,
div 中的所有元素是一个小区域
div 标签是一个容器级标签,里面什么都能放,甚至可以放 div自己
span 也是表达 ”小区域,小跨度“的标签,但是是一个”文本级“的标签。
span 里面只能放文字、图片、表单元素。
span 里面不能放 p , h , ul , dl , ol , div.
span 里面是放置小元素的,div 里面放置大的东西。
<p>
您好你好您好你好您好你好
<span>
<a href="">购物车</a>
<a href="">订单详情</a>
</span>
</p>
div 标签是最最重要的布局标签,
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="dongxi"></div>
</div>
<div class="footer"></div>
这种模式叫做”div+CSS”。div 标签负责布局,负责结构,负责分块,css 负责样式
表单
表单就是收集用户的信息,让用户填写、选择。
<div>
<h3>欢迎注册本网站</h3>
<form action="">
所有的表单内容,都要写在form标签里面
</form>
</div>
form 标签里面有 action 属性和 method 属性,
- action 属性表示表单将提交到哪里。
- method 属性表示用什么HTTP 方法提交,有get ,post 两种
文本框
<input type="text" />
- input 表示 “输入”,指的是这是一个“输入小部件”
- type 表示“类型”
- text 表示“文本‘,指是的类型是一个文本框的输入小部件。
- value 表示”值“,value 属性就是默认有的值,文本框中已经被填写 好了
<input type="text" name="" value="默认有的值">
这是一个自封闭标签。
密码框
<input type="password" name="">
- type=”text” 文本框
- type=”password” 密码框
单选按钮
<input type="radio" name="xingbie"> 男
<input type="radio" name="xingbie"> 女
radio是”收音机“的意思,input的type值,如果是radio就是单选按钮
单选按钮,天生不能互斥。如果想互斥,必须要有相同的name属性
默认被选择,就应该书写成 ”checked=”checked”
<input type="radio" name="sex" checked="checked"> 非男非女
复选框
input 标签,type是checkbox
<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>
复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)
下拉列表
select 就是“选择”,option “选项”
select 标签和 ul, ol, dl 一样,都是组标签
<select>
<option>北京</option>
<option>武汉</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>成都</option>
<option>杭州</option>
</select>
多行文本框(文本域)
text 就是文本,area就是区域
<textarea cols="30" rows="10"></textarea>
这个标签是标签对,里面不用写东西。如果写的话,就是这个框的默认文字
cols 属性表示 columns 列
rows 属性表示 rows 行
值都是数字,表示多少行,多少列。
三种按钮
按钮也是 input标签,一共有三种按钮
普通按钮
<input type="button" value="我是一个普通按钮">
button 就是按钮,value的值是按钮上面显示的文字
提交按钮
<input type="submit" value="确认">
submit 是提交。这个按钮不需要写value自动就有提交文字
这个按钮点击,表单真的能提交,这个表单会被提交到form标签的action属性中的那个页面中去。
重置按钮
<input type="reset" name="">
reset 就是复位
label标签
本质上讲,“男”、“女”这两个汉字,和input元素没有关系
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
label 就是解决这个问题的。
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"> <label for="nv" >女</label>
input 元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。
复选框也有label
<input type="checkbox" id="kk">
<label for="kk">10天免费会员</label>
HTML杂项
字符实体
< less than 小于
> greater than 大于
© 版权符号 ©
  non-breaking spacing 空格
hr 水平线
br 换行