常用的HTML标签详解与总结

DobbyKim 发布于2019-08-02 16:06 / 3262人阅读

摘要：今天，我们就来详细介绍常用的标签。标签对文字字符进行换行处理。标签加入水平分割线。标签语义强调，表示重视。标签有序列表标签。即定义描述，用于添加该名词的具体解释。标签用来显示图片。默认内容标签下拉列表，以和两个标签配合完成。

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

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

stlye标签

用于定义元素的CSS样式

script标签

用于定义页面的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标签

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

表示一个列表项。


  first
  second
  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三个标签，把表格划分为三部分：表头、表身、表脚。

xxx
xxx	xxx
xxx	xxx
xxx	xxx
xxx	xxx

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实现效果类似，不过此标签在不赋予属性时会自动升级为提交按钮。

textarea标签

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

默认内容

select/option标签

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

select属性有：

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

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

option属性有：

selected 设置该选项默认。

disabled 设置该选项不可选。

iframe标签

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

或者


<a href="xxx" target="_blank"></a>

Written by：EdenSheng
Email：singlesaulwork@gmail.com

GPU云服务器云服务器 html常用的空标签 html常用标签 html常用单标签 html基本常用标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54680.html

HTML中的meta标签常用属性及其作用总结

摘要：元素父元素属性中的变化为中新增的，用来声明字符编码属性在中有很多值，在中只有可用具体用途元素出去属性外，都是属性或属性结合来使用指定名值对定义元数据属性与属性结合使用用来表示元数据的类型，表示当前标签的具体作用属性用来提供值。文章同步到github 以前没怎么太注意过meta标签的作用，只是简单了解一些常用属性，现在结合个人了解的进行记录与总结: 元数据首先需要了解一下元数据(me...

Keven 2019-08-01 17:15 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
JS总结篇--[总结]JS操作DOM常用API详解

摘要：文本整理了操作的一些常用的，根据其作用整理成为创建，修改，查询等多种类型的，主要用于复习基础知识，加深对原生的认识。方法主要是用于添加大量节点到文档中时会使用到。文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。基本概念在讲解操作DOM的api之前，首先我们来复习一下一些基...

malakashi 2019-08-20 16:52 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0