HTML常用标签

一、列表标签

1.1. 无序列表 <ul>

作用:
给一堆内容添加语义,表示这堆内容是一个无序列表(一个没有先后顺序整体),列表中的条目是部分先后顺序的

<h4>选择一个中国的城市</h4>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

应用场景:

  • 导航条
  • 新闻列表
  • 商品列表等

浏览器会给无序列表自动添加先导符号,但是一定要记得,ul标签的作用并不是给文字来添加小圆点,而是增加无序列表的语义。

ul是一个标签组,所以一定是一组一组出现的,也就是说li标签不能单独存在而必须要包裹在ul标签里面。ul标签和li标签是一个整体,所以ul标签里面不推荐包裹其他标签,最好只写li标签。

岁日安ul标签中只能写li标签,但是li标签是一个容器标签,li标签中却可以添加任意的标签,甚至可以添加ul标签。

type属性:

可以修改先导符号的样式,取值有:disc、square、circle几种。

1.2. 有序列表 <ol>

给一组内容添加语义,表示这组内容是一个有序列表(一个有顺序的整体),列表中的条目是有先后之分的。

<h4>中国房价排行榜</h4>
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ol>

应用场景:

用来做排行榜(其实ol应用场景并不多,因为能用ol做的ul都能做)

start、type属性:可以修改先导符号的样式和序号,注意事项与ul标签的注意事项相同。

1.3. 定义列表 <dl>

给一组内容添加语义,表示这组内容是一个有顺序的整体,通过dt标签罗列出相应的条目,然后再通过dd标签给每个条目进行相应的描述。

<dl>
    <dt>北京</dt>
    <dd>国家的首都,天安门广场</dd>
    <dt>上海</dt>
    <dd>中国的经济中心,俗称魔都</dd>
</dl>

应用场景:图文混排、网站底部的相关信息,单反看到一堆内容都是用于描述某一个内容的时候就要想到dl标签。

注意事项:

  1. 由于dl标签和dt标签一样是容器标签,所以里面可以添加任意的标签。
  2. 定义列表非常领过,可以给一个dt标签配置多个dd标签,但是最好不要出现多个dt标签对应了一个dd标签,dd标签的语义是描述离他最近的一个dt标签,所以其他dt标签相当于没有描述,而定义列表存在的意义就是既可以列出每一个条目,又可以对每一个条目进行描述。
  3. 定义列表非常的灵活,可以将多个dt+dd标签组合拆分为多个dl标签。

二、表格标签

作用:以表格形式将数据显示出来

table定义表格、tr定义行、td定义单元格

<table>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>

2.1. 表格中的属性

属性名 作用
border 指定边框宽度,默认情况下表格的边框宽度为0看不到
cellspacing 指定表格之间的间隙,默认值是2个像素
cellpadding 指定单元格边缘和内容之间的编剧,默认是1个像素
width 指定表格的宽度,默认情况下表格的宽度是由内容自动计算出来的
height 指定表格的高度,默认情况下表格的高度是由内容自动计算出来的
align 指定水平方向的对其方式,它的取值有:center、left、right
valign 规定垂直方向对其方式,它的取值有:top、center、bottom
bgcolor 规定表格的背景颜色

因为HTML仅仅用于说明语义,其实这些属性也仅仅作为了解,在企业开发中用css代替。

2.2. 表格中的其他标签

caption标签:给整个表格设置标题

一定要嵌套在table标签内部才有效,一定要紧跟在table标签的后面

th标签:给每一列设置标题

th标签中的内容文字加粗,居中。表格中有两种乐行的单元格,一种是标准的单元格td,一种是表头单元格th。

2.3. 表格的结构

  • thead标签:用来存放每一列的表头
  • tbody标签:用来存放页面中的主题数据,如果不写会自动加上
  • tfoot标签:用来存放表格的页脚

表格的结构意义主要是用于SEO,便于搜索引擎指定哪部分的内容是需要抓取的重要内容,一般情况下,搜索引擎会优先抓取tbody中的内容。由于一部分浏览器对table这种结构支持不是很好,所以在企业开发中一般都不用严格的按照这种结构来编写。

2.4. 表格的结构

  1. 纵向合并 colspan:合并当前列的哪几个单元格,向下合并
  2. 横向合并rowspan:合并当前行的哪几个单元格,向右合并

三、表单标签

专门用于收集用户信息,让用户填写、选择

<form> 所有的表单内容都要写在form标签里面 </form>

form标签中有2个边角重要的属性:

  1. action:表单提交的地址
  2. method:提交表单的方式

3.1. 多行文本框 textarea标签

用于在表单中定义多行的文本输入控件

<textarea cols="30" rows="10"> 默认
</textarea>
  • cols属性规定文本区域内的可见宽度
  • row是规定文本区域内的尅安行数

默认情况下文本区域可以拖拽缩放,可以利用CSS禁止缩放

textarea {
    resize: none;
}

3.2. 下拉列表 select标签

select标签和ul、ol、dl一样,都是组标签,用于创建表单中的待选列表,可以从中选择某一个待选项。

<select>
    <option>北京</option>
    <option>湖北</option>
    <option>贵州</option>
</select>

和radio标签、checkbox标签一样,select标签页可以设置默认值,通过selected属性来设置

<select>
    <option>北京</option>
    <option>湖北</option>
    <option selected="selected">贵州</option>
</select>

给下拉列表添加分组:

<select>
    <optgroup label="北京市">
        <option>海淀区</option>
        <option>朝阳区</option>
        <option>昌平区</option>
    </optgroup>
    <optgroup label="北京市">
        <option>天河区</option>
        <option>白云区</option>
    </optgroup>
</select>

四、input标签

4.1. 明文输入框

用户可以在输入框内输入内容,并且可以给输入框设置默认的值

<input type="text" value="请输入用户名">

4.2 暗文输入框

用户可以在输入框内输入暗文内容

<input type="password" value="请输入用户密码">

4.3 单选框(radio)

用户只能从众多选项中选择其中一个

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

单选按钮,天生就是不互斥的,如果想互斥,就必须要有相同的name属性

给单选设置默认值

```html

top Created with Sketch.