HTML常用标签

 

一、列表

 

1.无序列表

作用：定义一个没有顺序的结构

由两个标签组成，ul（容器级标签）, li（容器级标签）

ul 全拼:ulordered list（无序列表）

li 全拼:list item（列表项）

需要注意：ul内部嵌套li，他们是父子关系

规定：ul标签的内部只能嵌套li，li标签的内部可以嵌套任何标签，甚至是ul

无序列表项之间没有前后之分的，列表项的前缀样式是有CSS去控制的，目前只负责结构的搭建

 

 

2.有序列表

作用：定义一个有序列表的结构

由两个标签组成，ol, li

ol 全拼:ordered list（有序列表）

需要注意：ol内部嵌套li，他们是父子关系

 

3.定义列表

作用：定义一个标题和内容自定义的列表结构

由三个标签组成，dl,dt（容器级）,dd（容器级）

dl 全拼:definition list（创建一个自定义列表结构）

dt 全拼:definition term（定义主题或者定义术语，表示一个列表的主题）

dd 全拼:definition descript（定义解释项，表示解释寿命前面的主题内容）

注意：dl内部只能存放dt和dd，dt和dd是兄弟（同级）关系

规则：每一个dt主题的后面可以0-多个dd,每一个dd解释的是上一个最近的dt

 

 

 

 

 

 

二、表格

 

1.表格基础

表格主要有三个标签组成

table 作用是定义一个表格结构

tr 全拼:table rows（表格行）

td 全拼:table dock 定义表格的单元格

关系：table>tr>td

th 设置表头 tr>th

table标签有两个属性，一个是border="1",这个属性是用于设置表格的边框，如果没有这个属性，边框不显示；第二个属性style="border-collapse:collapse"是CSS样式，作用是合并表格

 

2.单元格合并

一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性

rowspan：上下跨行合并

colspan：左右跨行合并

属性值是数字

 

3.表格分区

一个完整的表格主要包含三个部分：表格标题、表格表头、表格的主题

一个table内部实际还有三个分区标签组成

caption :定义表格的主题

thead :定义表格的头部，内部嵌套tr>th

tbody :定义表格的主体，内部嵌套tr>td

 

 

 

 

3.表单元素

表单元素是网页中提供给用户进行点击后者输入的控件

1）form标签

form是表单的意思

form是容器级标签，内部存放可输入的控件，如果输入的表单需要提交到数据库，所有的控件需要被form表单包裹

method：方法的意思，指的是数据提交的方法，属性值是post和get

action：是数据提交的位置

 

2）input标签

input标签是输入框的一种，但不仅仅是输入框，可通过type属性拓展多功能（input的type属性非常丰富）

 

输入框

 

 

 

 

 

输入框有两个重要属性value,和placeholder

*value：设置默认显示的内容，属性值为自定义内容

 

 

 

 

 

*placeholder：属性作用是如果没有value的时候提示用户的文字占位符

 

 

 

 

 

 

 

密码框通过type值为password设置的，显示效果是输入后通过掩码形式显示的

 

 

 

单选框通过设置type值为radio同时设置name属性值相同

 

 

 

 

 

 

复选框也叫多选框，通过type值为checkbox设置，建议同一组设置相同的name值

单选框和复选框都有一个默认被选择的功能，需要input标签添加一个checked="checked"

 

label标签能够扩大文字的触发范围（点击文字也能选中，不是一定要点击框框）

 

 

 

 

3）文本域

标签为textarea，是一个双标签且为一个文本级标签

属性值rows和col

如果不想缩放文本域则可设置style属性中的resize属性为none

 

 

4）下拉菜单

需要一组标签进行制作

select：英文是选择的意思，表示搭建下拉项

option：英文是选项的意思，表示搭建下拉项

select>option

默认第一个显示

若希望默认被选中则使用selected属性，值为selected