HTML标签类型及特点

一、 概述

HTML(Hyper Text Markup Language )作为一种标记语言,网页所有的内容均书写在标签内部,标签是组成Html页面的基本元素,因此对标签特性的理解在HTML的学习过程中比较重要。

二、基本分类

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签,常见的空标签有<input />、 <img />、 <area />、 <base />、 <link />等。

HTML中对标签另一种分类方式,是根据标签在文档中的位置特性进行分类的,它将元素分为三类:块级元素,行内元素,行级块元素(也称块级行元素)。

1.块级元素(block)
  特点:
(1)可以设置宽高、内、外边距;
(2)独占一行(即前后均有换行);
(3)块级元素如果不设置宽度和高度,则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
常见的块级元素: div、p、h1、h2…hn,ol、ul、dl、li、form、table

2.行级元素(inline)
特点:
(1)不可设置宽高、上下内、外边距。(左右内、外边距设置有效)
(2)其宽度和高度由其内容自动填充。
(2)其他行级元素共处一行 ;
常见的行级元素:a、span、i、lable等

3.行内块元素(inline-block)
特点:
(1)可以设置宽高、内外边距;
(2)可以与其他行内元素、内联元素共处一行;
常见的内联元素:input、img

4.元素之间的转化
可以在行内样式或css样式中改变元素的display将三种元素进行转换。
display:block;(将元素变为块级元素)
display:inline; (将元素变为行级元素)
display:inline-block;(将元素变为行级块元素)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

打开页面

*<a href"javascript:void(0)" title"google" οnclick"window.parent.addTab(, 测试, Admin/UserRole, 100000)">测试444</a>*转载于:https://www.cnblogs.com/niyl/p/10196528.html

python 大量使用json 存储数据时,格式化输出的方式

import json, pprintdic {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键: 檐下听雨}print(dic)pprint.pprint(dic)print(json.dumps(dic))print(json.dumps(dic, indent2))# {name: 234, user_name: yan xia ting yu , list: [ds, a, 2], 你好这是键…

vue computed 源码分析

我们来看看computed的实现。最简单的一个demo如下&#xff1a; <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> </head> <body> <div id"app"><div name"test&…

软件开发文档整理(之)一张示意图 | 清晰明了

在整个软件开发周期&#xff0c;开发文档是必不可少的资料&#xff0c;它们贯穿于整个开发周期&#xff0c;用来评估计划、规划进度、项目管理、软件测试、软件发布&#xff0c;可以说至关重要。   开发文档必须归档&#xff0c;没有归档的文档作用大打折扣&#xff0c;时效性…

java大数BinInteger

当我们遇到long不行的时候就要考虑这个BinInteger了&#xff0c;因为这是只要你内存够大&#xff0c;就能输入很大的数&#xff0c;用这个处理高精度问题&#xff0c;是很容易的一件事&#xff0c;对于我这刚学java的萌新来说&#xff0c;长见识了&#xff0c;确实比C方便 BigI…

HTML页面提交TABLE

在HTML页面里&#xff0c;提交一个TABLE需要把TABLE的值传入变量或json格式&#xff0c;然后submit到服务端的。 思路描述&#xff1a;将table里的值取出&#xff0c;放在json中&#xff0c;赋给一个input&#xff0c;通过一个input来实现table表数据提交到服务器&#xff0c;就…

生成条形码

https://packagist.org/packages/picqer/php-barcode-generator转载于:https://www.cnblogs.com/pansidong/p/9334224.html

3.GDScript(1)概览

GDScript 是上面提到的用于Godot的主要语言。和其他语言相比&#xff0c;它与Godot高度整合&#xff0c;有许多优点&#xff1a; 简单&#xff0c;优雅&#xff0c;设计上为Lua、Python、Squirrel等语言用户所熟悉。加载和编译速度飞快。编辑器集成非常令人愉快&#xff0c;有节…

Web 前端框架分类解读

Web前端框架可以分为两类&#xff1a; JS的类库框架 JQuery.JS Angular.JS&#xff08;模型&#xff0c; scope作用域&#xff0c;controller&#xff0c;依赖注入&#xff0c;MVVM&#xff09;&#xff1a;前端MVC Vue.JS&#xff08;MVVM&#xff09;***** Reat.JS &…

async / await对异步的处理

虽然co是社区里面的优秀异步解决方案&#xff0c;但是并不是语言标准&#xff0c;只是一个过渡方案。ES7语言层面提供async / await去解决语言层面的难题。目前async / await 在 IE edge中已经可以直接使用了&#xff0c;但是chrome和Node.js还没有支持。幸运的是&#xff0c;b…

《SQL Server 2008从入门到精通》--20180717

目录 1.触发器1.1.DDL触发器1.2.DML触发器1.3.创建触发器1.3.1.创建DML触发器1.3.2.创建DDL触发器1.3.3.嵌套触发器1.3.4.递归触发器1.4.管理触发器1.触发器 触发器是一种特殊的存储过程&#xff0c;与表紧密关联。 1.1.DDL触发器 当服务器或数据库中发生数据定义语言&#xff…

主成分分析原理解释(能力工场小马哥)

主成分分析&#xff08;Principal components analysis&#xff09;-最大方差解释 在这一篇之前的内容是《Factor Analysis》&#xff0c;由于非常理论&#xff0c;打算学完整个课程后再写。在写这篇之前&#xff0c;我阅读了PCA、SVD和LDA。这几个模型相近&#xff0c;却都有自…

div/div作用

<div></div>主要是用来设置涵盖一个区块为主&#xff0c;所谓的区块是包含一行以上的数据&#xff0c;所以在<div></div>的开始之前与结束后&#xff0c;浏览都会自动换行&#xff0c;所以夹在<div></div>间的数据&#xff0c;自然会与其前…

路由懒加载优化

首先得需要插件支持&#xff1a;syntax-dynamic-import import Vue from vue import VueRouter from vue-router /*import First from /components/First import Second from /components/Second*/Vue.use(VueRouter) //方案1 const first ()>import(/* webpackChunkName: &…

vue全面介绍--全家桶、项目实例

简介 “简单却不失优雅&#xff0c;小巧而不乏大匠”。 2016年最火的前端框架当属Vue.js了&#xff0c;很多使用过vue的程序员这样评价它&#xff0c;“vue.js兼具angular.js和react.js的优点&#xff0c;并剔除了它们的缺点”。授予了这么高的评价的vue.js&#xff0c;也是开…

关于Keychain

1、Keychain 浅析 2、iOS的密码管理系统 Keychain的介绍和使用 3.iOS开发中&#xff0c;唯一标识的解决方案之keyChainUUID 转载于:https://www.cnblogs.com/KiVen2015/p/9341224.html

算法群模拟面试记录

第一场&#xff1a;2018年12月30日&#xff08;周日&#xff09;&#xff0c;北京时间早上五点。 写在最前面&#xff1a;好不容易五点爬了起来围观mock&#xff0c;结果早上周赛睡过去了&#xff0c;唉。orz。 面试官&#xff1a;wisdompeak&#xff0c;同学&#xff1a;littl…

js对象排序

Object.keys(objs).sort()可以获取到排好序的keysvar objs {f: {id: 2,name: 2}, a: {id: 3,name: 3}, c: {id: 1,name: 1} }; // 自定义排序规则&#xff0c;按对象的id排序 var sortedObjKeys Object.keys(objs).sort(function(a, b) {return objs[b].id - objs[a].id; });…

吴恩达机器学习笔记 —— 9 神经网络学习

本章讲述了神经网络的起源与神经元模型&#xff0c;并且描述了前馈型神经网络的构造。 更多内容参考 机器学习&深度学习 在传统的线性回归或者逻辑回归中&#xff0c;如果特征很多&#xff0c;想要手动组合很多有效的特征是不现实的&#xff1b;而且处理这么大的特征数据量…

js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解

1 escape()函数 定义和用法escape() 函数可对字符串进行编码&#xff0c;这样就可以在所有的计算机上读取该字符串。 语法escape(string) 参数 描述string 必需。要被转义或编码的字符串。 返回值已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。 说明该方…