html标签及属性 详解,常用的HTML标签详解与总结

对于很多HTML初学者来说，记忆和掌握标签是一门很难搞的功课。今天，我们就来详细介绍常用的HTML标签。

对于标签的掌握，更多的是要通过练习，熟能生巧。

stlye标签

用于定义元素的CSS样式

/*这里写css样式*/

script标签

用于定义页面的JavaScript代码，也可以引入外部的JavaScript文件。

/*这里写JavaScript代码*/

link标签

引入外部样式css文件。

HTML注释

又叫注释标签。

对关键代码注释是一个良好的习惯。在实际开发中，对功能模块代码进行注释尤为重要。

h(标题)标签

共有六个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是header的缩写。

这里要注意，一个页面一般只有一个h1标签，表示页面的大标题。

hearder 1

hearder 2

...

p(段落)标签

我们可以用来显示一个段落的文字。

Paragraph

br标签

对文字字符进行换行处理。

hr标签

加入水平分割线。

---

strong标签

语义强调，表示重视。同时字符加粗。

xxx

div标签

全称“division(分区)”，用来划分一个区域。div标签内部可以放入所有其他标签，例如p标签、strong标签等。

I love study.

span标签

段落式标签，和div非常像。但是div是块级元素，而span是内联元素。

xxx

空格

表示一个空格。

ol标签

有序列表标签。默认以数字顺序。

表示一个列表项。

1. first
2. second
3. third

ul标签

无序排列标签，即unordered list。

• first
• second
• third

dl标签

定义列表，即definition list。引入两个概念，dt和dd。

dt即definition term(定义名词)，用于添加要解释的名词。

dd即definition description(定义描述)，用于添加该名词的具体解释。

term

description

table标签

一个表格一般由几个部分组成。

表格：table标签

行：tr(table row)标签

单元格：td(table data cell)标签

标题：caption标签

表头单元格：th(table header cell)标签

一般为了使表格语义化结构更清晰也更有可读性和维护性，引入thead、tbody、tfoot三个标签，把表格划分为三部分：表头、表身、表脚。

xxxxxx

xxxxxxxxxxxxxxxxxx

img标签

用来显示图片。有三个属性值：src、alt、tittle。

a标签

超链接标签。主要有两个属性值：href和target。

target属性取值：

_self 默认值，在当前窗口打开链接

_blank 在新窗口打开链接

_parent 在父窗口打开链接

_top 在顶级窗口打开链接

form标签

表单标签。

/*各种表单标签*/

一般常用的属性有name和target两个。

在一个页面中一般不止一个表单。为了区分这些表单，我们使用name来对表单进行命名。每个form标签对应一个表单。

method属性用于指示表单数据使用哪一种http提交方法。取值有两个：get和post。一般使用post，向服务器提交时加密，安全性高。

input标签

多数表单都用input标签来实现，是自闭合标签。

下面介绍标签的几种type属性。

text

单行文本框。

name:

password

密码文本框。一种特殊的单行文本框，输入时不可见。

password:

radio

单选框。name属性表示单选按钮所在组名，value表示按钮取值。

Gender：

Male

Female

checkbox

复选框。

checked属性表示默认选取。

Fruit:

Apple

Banana

Lemon

button

普通按钮，一般配合JavaScript进行操作。

submit

提交按钮。

reset

重置按钮，只可以重置同一表单中的输入内容。

button标签

和input标签中的button实现效果类似，不过此标签在不赋予属性时会自动升级为提交按钮。

xxx

textarea标签

多行文本框。默认文本是在标签内部设置的，而不是在value中。rows和cols属性可以调整文本框的行数列数，但一般使用css来设置宽高。

默认内容

select/option标签

下拉列表，以select和option两个标签配合完成。

select属性有：

multiple 设置下拉列表可以选择多项。

size 设置下拉列表显示几个项，取值整数。

option属性有：

selected 设置该选项默认。

disabled 设置该选项不可选。

xx

xx

xx

xx

xx

xx

iframe标签

可以用来实现内嵌框架，以及配合超链接来使用。

或者

Written by：EdenSheng

Email：singlesaulwork@gmail.com