Html的基本元素(Element)

时间:2022-09-25 13:54:48

本人写这篇文章是我在IT修真园里学习了一段时间,反过来复习时整理的。虽然只是些基础知识内容,希望能帮到大家。

首先我们要了解所谓的html它的定义是什么?

【html:超文本标记语言,文本:txt格式的文件,标记:用标签对给文本附加语义

如果你已经通过上文对html有个了解后,我们就着手研究它的三个元素。

块级(block-level)元素和内联(inline)元素以及行内快元素(inline-block)

科普一些背景:html布局:文档流,float浮动,position定位以及display:flex弹性布局。

基于最先出现的文档流,一些元素也被赋予了它原先的语义。

Html的基本元素(Element)

Block:块级元素单独霸占一行,可设定宽高;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

Inline:行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高

Inline-block:行内块元素:结合的行内和块级的要点,不仅可以设定宽高,还可以多个标签存在一行显示

(div,p,ul,li)容器:块级元素
<div>默认属性是前后各加<br>换行。

(Span,img,input,a)文本:行内元素
<span>标签没语义,作用:可单独设置属性

给出了一些主要要掌握的元素。同时我相信看众也比较容易理解和记忆这些内容。如果还是没在脑海中形成它们的样子。你可以参考word文档中,一段文字默认状态下是不是铺满一行一行的从左到右,从上到下的排列。表格是不是新增一行两列或者一行多列默认是铺满整张A4纸。说到这里大家应该可以记住他们了。

概念和代表已经说了,但是我们不但要理解他们的语义,还要踏踏实实的使用它们。

先说inline吧,文字与img它要实现位置偏右,居中等位移,是跟word编辑器里的6个位置是 一模一样的。而网页设置中,频繁使用的是Text-align:center。

就不一一解释了,奉上内经,如下

Text-align:是设定在父盒子标签里,规定盒子内的行内元素(文本或img标签)居中显示。

Line-height:是指文本的行框(行高)高。由(上,下间距和文本高度组成)

实现垂直的原理:容器高度=行框高度。文本高度默认为16px,当设定容器高度=line-height=200px时,上,下间距会自动平分184px。

Margin0 auto:是设定在要居中的盒子标签里。一般还要设定盒子宽度。

vertical-align:middle:是设定在两个行内元素标签里,使两个行内元素两者间和最后行内元素前的行内元素互相垂直对齐。

Tex-align和line-height常常搭配使用在一行文字的垂直居中。

Vertical-align:middle常常用于文本和img的垂直对齐。

vertical-align这个属性,如果要细究,那真的要搭入好多新内容。其实我们也不要了解他的基线,中线,顶线这些内容,知道怎么使用就好。

还有一点必须要说的:vertical-align是inline-block依赖型元素。如果不是inline-block元素,就会不理不睬。有些元素是默认支持它的:图片,按钮,单复选框,单行/多行文本框等HTML控件

Html的基本元素(Element)的更多相关文章

  1. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  2. CSS中的margin、border、padding区别

    CSS padding margin border属性详解 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来 ...

  3. 【转】图解CSS的padding&comma;margin&comma;border属性&lpar;详细介绍及举例说明&rpar;

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  4. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  5. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  6. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  7. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  8. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  9. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

随机推荐

  1. openSUSE 11 上的配置可以Xmanager远程桌面

    openSUSE 11 上的配置(适用于默认图形环境为KDE的Linux): 1.配置KDM. openSUSE 11的默认图形环境为KDE,虽然可以同时安装GDM和KDM,但默认只启动了KDM.所以 ...

  2. Teach Yourself Programming in Ten Years

    Teach Yourself Programming in Ten Years——用十年教会自己编程 作者:Peter Norvig 译者:刘海粟 本文原文为:http://norvig.com/21 ...

  3. iOS-代理反向传值&lt&semi;转&gt&semi;

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  4. svn - 常用命令

    基本流程: 获取新的代码,svn up(date),获取最新代码 锁住文件,防止你提交的时候,别人修改,造成冲突,svn lock filename 修改之后,svn add filename,将文件 ...

  5. 【具体数学 读书笔记】1&period;2 Lines in the Plane

    本节介绍平面划分问题,即n条直线最多把一个平面划分为几个区域(region). 问题描述: "What is the maximum number Ln of regions defined ...

  6. php使用NuSoap调用java&sol;C&num; webservice乱码问题

    今天调用了一个 NuSoap 的接口程序,一切流程操作都很正常,就是最后接收返回值的时候出现了乱码问题(我这边是做一个越南项目固然返回越南语,不过认为中文应该同样实用,需要的人可以尝试下)   许多使 ...

  7. AspNetPager 分页的详细用法(ASP&period;NET)

    1.[添加AspNetPager.dll文件] 2.[使用方法] public static DataTable GetRecord(SystemModel.Pager mt, ref int Tot ...

  8. Java中对List&lt&semi;E&gt&semi;按E的属性排序的简单方法

    这是LeetCode上的题目56. Merge Intervals中需要用到的, 简单来说,定义了E为 /** * Definition for an interval. * public class ...

  9. hdu 2048 递推&&错排

    直接贴出递推公式: cnt[n]=(i-1)*(cnt[n-1]+cnt[n-2]); 数组保存的是失败的种数 AC代码: #include<cstdio> const int maxn= ...

  10. ARC085E MUL

    https://atcoder.jp/contests/arc085/tasks/arc085_c 题目大意 略 解法 最小割即可. 直接建图有负边,但是因为我们知道最后在割上的边数一定为 \(N\) ...