在HTML中,一共有三种列表
- 无序列表
无序列表,是用来表示一个列表的语义。通常使用<ul></ul>标签来定义一个无序列表,<ul></ul>是一个组标签,并且可以在其中添加<li></li>标签。<li>标签不能够单独存在,必须包裹在<ul></ul>标签内。
<li>是一个容器级标签,<li>里面可以放<ul>、<p>、<h1>等各种标签。 - 有序列表
有序列表可以用<ol></ol>标签来定义。使用有序列表,浏览器会自动在列表的前面加上数字。
例如:
![实例](https://img-blog.csdn.net/20170105031727246?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
- 定义列表
定义列表中有三个标签,<dl>标签表示定义列表。<dt>标签表示定义标题,<dd>标签表示定义表述词。
<dd>、<dt>只能存在于<dl>中。<dt>、<dd>都为容器级标签。
它们的具体的用法为:
![实例](https://img-blog.csdn.net/20170105033029384?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
div和span
div和span相当于HTML中的两个“盒子”。
div在浏览器中不会增加任何效果,但是语义改变了,<div></div>中的所有元素是一个独立的区域。<div>标签是一个容器级标签。
span标签中的所有元素也是相当于一个独立的区域。但是<span>标签是一个文本级标签。通常来说div中放置大的元素,span中放置小的元素。
div标签是最重要的标签之一,它负责布局、结构、分块。它和负责样式的CSS搭配,可以称呼为“div+CSS”模式。
表单
HTML中的表单是用来收集用户信息的,可以让用户填写和选择。用<form action=""></form>来表示表单区域。表单中可以包含文本框、密码框等多种内容。
文本框
用<input type="text" value=""/>来表示文本框。其中type表示类型,value表示文本框中默认已有的值。
例如:
![代码](https://img-blog.csdn.net/20170105170347192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105170410770?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
密码框
用<input type="password" />来表示密码框。
单选按钮
用<input type="radio" name="" />来表示单选按钮。为了实现单选按钮的“互斥”效果,需要为同一类的单选按钮设定相同的name值。如果需要默认选哪一项,在这一项的代码使用<input type="radio" name="" checked="checked" />。
例如:
![代码](https://img-blog.csdn.net/20170105170937350?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105171000194?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
复选框
用<input type="checkbox" name="" />来表示复选框。
例如:
![代码](https://img-blog.csdn.net/20170105171430290?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105171446803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下拉列表
用<select></select>来表示下拉列表,用<option></option>来表示其中的选项。
![代码](https://img-blog.csdn.net/20170105171951074?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105172007342?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
多行文本框
用1<textarea cols="30" rows="10"></textarea>来表示多行文本框。
例如:
![代码](https://img-blog.csdn.net/20170105172350263?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105172403972?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
三种按钮
普通按钮
用 <input type="button" value="" />来表示一个普通按钮。value中的值就是显示在按钮上的文字。
提交按钮
用 <input type="submit" />来表示一个提交按钮。点击这个按钮,这个表单就会被提交到,form标签的action属性中的那个页面中去。
重置按钮
用<input type="reset" />来表示一个重置按钮。
label标签
当label标签中的for属性的值和input标签中的id属性的值相同时,表示input和label有了绑定关系。具体可以用作比如在浏览器中给单选按钮的文字加一个label标签,点击单选按钮的文字就可以选定这个单选按钮了。在任何表单元素中都可以使用label标签。
具体的代码为:
![代码](https://img-blog.csdn.net/20170105173720128?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
HTML注释
在HTML中注释的语法为<!--注释的内容-->。适当的注释,能够让我们的程序更加可读。同时注释的内容不会显示在浏览器的页面上。
字符实体
当我们想要在浏览器的页面上显示<p>时,为了放置浏览器将其误认为一个<p>标签,必须使用字符实体来代替<或者>。
常见的字符实体有:
![字符实体](https://img-blog.csdn.net/20170105174651867?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
某些已经不常用的标签
<br />标签表示换行,目前一般用<p></p>标签来代替。
而<b></b>标签表示加粗。<u></u>表示下划线这些现在一般用CSS代替。