一、列表
1.1 无序列表
无序列表,ul(unordered list),即列表中的每一项没有排名次序的。ul是一个组标签,内部只能有li标签。ul的作用是增加“无序列表”语义的。
列表项,li(list item), 不能单独存在,没有意义,必须包裹在组标签(ul/ol)里,li是一个容器级标签。
实际应用场景:导航栏、产品列表等。
1.2 有序列表
有序列表,ol(ordered list), 即列表中的内容有先后排名,使用方式同ul,但是实际使用场景不多,如果想要表达顺序 大家一般会用ul:
<ul>
<li>1.王芳 100分</li>
<li>2.李雷 98分</li>
<li>3.小明 30分</li>
</ul>
1.3 定义列表
定义列表,dl(definition list) 每一个内容标题都有自己的专属描述。dl是一个组标签,内部存在两个子标签:
定义标题,dt(definition title)
定义描述,dd(definition description) 用于描述dt标题的,一个dt可以搭配很多的dd
主要应用场景:
1.平台垂直菜单
![](https://i-blog.csdnimg.cn/blog_migrate/792fa6ee669e84f23ee1f060c79c663a.png)
2.部分平台底部平台信息列表
二、div 和 span
分割区域,div(division) ,容器级标签。 大家常说的“div+css”模式中的div即是此。div标签负责布局结构,css负责样式。
分割区域,span,文本级标签, 也就是说,span里面只能放置图片、文字、表单元素
三、表单
表单,form,用于收集用户信息,即一些输入框、选择框、下拉菜单的集合。
内部有两个属性: action:动作,这个表单将会提交到哪里。 method:提交方式(get/post)
input表示“输入”,代表此控件为一个输入相关控件。
3.1 input的type属性决定input的类型,如:
text-文本框
password-密码框
radio-单选按钮(一组单选按钮需要一个相同的name值,否则互斥无效)
checkbox-复选框(最好也要有相同的name)
3.2 下拉列表
select标签,也是组标签,内部需要option选项标签支撑。
3.3 文本域
文本域,textarea,内部文字即为该文本域默认文字,其中有两个属性,cols(columns):列 rows:行
3.4 按钮
按钮有三种类型:普通按钮,提交按钮,重置按钮。
按钮也是input标签 的type属性决定,分别是:button\submit\reset
3.5 label
标签,用于关联内容,例如点击标题可以获取对应输入框的焦点等
<input type="checkbox" id="kk" /> <label for="kk">10天内免登陆</label>
四、其他内容
4.1 注释
<!-- xxxx --> 为一个完整的注释。 sublime中快捷键:ctrl+/
4.2 字符实体
用于打印可能会被转义成标签的内容。例如打印<h1>,只需要打印 <h1> 系统便不会识别错误
常用替代字符:
< less than,小于。
> greater than 大于。
© 版权符号。
non-breaking spacing 空格
4.3 废弃标签
font:字体
b:加粗
u:下划线
i:倾斜
del:删除线
em:强调
strong:强调
hr:水平线
br:换行