emmm,最近想整理复习一下前端的基础,最开始的HTML想了好久也没想好怎么写,最后也是决定以行块这样整理,再在后面补充吧。
说到HTML,什么是HTML呢?

        什么是 HTML?HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页

也就是说HTML不是像java一样的一门编程语言,而是一门标记性语言。

那我们常说的HTML标签是什么意思呢?

            HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词,比如 <html>HTML 标签通常是成对出现的,比如 <b> 和 </b>标签对中的第一个标签是开始标签,第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签

也就是说,一对标签中包含着元素。而我们学习HTML也就是在学习HTML的标签。

现在开始,就把HTML中常用的块级元素整理出来。

一、HTML 标题

标题(Heading)是通过 《h1》 到 《h6》等标签进行定义的。

《h1》 定义最大的标题。《h6》 定义最小的标题。

<h1>这是一个h1标签</h1><h2>这是一个h2标签</h2><h3>这是一个h3标签</h3><h4>这是一个h4标签</h4><h5>这是一个h5标签</h5><h6>这是一个h6标签</h6>

像这样的在网页显示的就是:

这里可以再说一下另一个标签–>hr 元素可用于分隔内容。
例如上面的例子我们在每个h标签中间加上一个hr标签。

        <h1>这是一个h1标签</h1><hr><h2>这是一个h2标签</h2><hr><h3>这是一个h3标签</h3><hr><h4>这是一个h4标签</h4><hr><h5>这是一个h5标签</h5><hr><h6>这是一个h6标签</h6>

这样显示出来的话就是这样:

哎?说到了hr标签,那就得说一下br标签。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 br 标签:

<h1>这是一 <br> 个h1标签</h1>

在h1标签中加上一个br标签(标签是可以嵌套的)

二、HTML 段落

段落是通过 p标签定义的

        <p>这是第一个p标签</p><p>这是第二个p标签</p>

我们打印一下看看,也是块级元素。

这里可以说一下,

        <p>这是第一个p标签</p><p></p><p>这是第二个p标签</p>

像这样在标签中间插入一个空的p标签可以起到换行的作用,但是最好不要这么做,用上面说的那个br标签。

三、表格

表格由 table标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

举个例子看看。

        <table><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table>

然后看一下在网页上显示的是什么样子的。

嘶,这和我想象的表格不太一样啊,emm,其实主要是少了边框,这里涉及了css的样式,就先把它看成一个表格吧,边框先自己想象。

表格的表头
表格的表头使用 th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:
例如我在这个表格上加上一个表头:

        <table><tr><th>这是第一列</th><th>这是第二列</th></tr><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table>

看一下效果哈:

关于表格还有一些其他的点我可能没有说到,如果需要用到的话可能就得在找别的资料了。

四、HTML 列表

无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 ul 标签。每个列表项始于 li。
这个也是比较常用的列表
我们来写一下:

        <ul><li>这是第一个li</li><li>这是第二个li</li><li>这是第三个li</li><li>这是第三个li</li></ul>

然后我们看一下这个是啥样的。

Ok,那我们再看另一个。
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 ol标签。每个列表项始于 li 标签。

        <ol><li>这是第一个li</li><li>这是第二个li</li><li>这是第三个li</li><li>这是第三个li</li></ol>

就是把ul换成了ol,这回再看一下这个怎么有序。

五、HTML div 元素

HTML div元素是块级元素,它是可用于组合其他 HTML 元素的容器。

div元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,div元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

简单来说的话,div是一个块级元素,主要用来进行页面布局,进行组合其他的HTML元素,也可以把它当成一个容器。

这里,就说这五个常用的块级元素。OK,结束。

HTML的块级元素(常用整理)相关推荐

  1. css变成块级元素_css块级元素垂直居中常用布局方式

    在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...

  2. HTML基础(三):常用的块级元素

    在了解网页基础结构框架后便正式开始常用块级元素的学习: 块级元素引入 什么是块级元素?块级元素是HTML规范中的一个概念,大多数HTML 元素被定义为块级元素或内联元素.通常,块级元素被称为块元素.与 ...

  3. 常用块级元素与行内元素

    常用块级元素: div.p.h1~h6.ul.ol.dl.li.dd.table.hr.blockquote.address.table.menu.pre,HTML5新增的header.section ...

  4. html中内联元素和块级元素的区别(整理版)

    块级元素和内联元素的主要区别 块级元素 内联元素(即行内元素) 总是在新行上开始,独占一行默认情况下,宽度自动填满其父元素 相邻的行内元素会排列再同一行里,直到一行排不下,才会换行,宽度随元素的内容而 ...

  5. 前端基础——双单标签、行内块级元素、路径、常用标签

    一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...

  6. 第二章 网站开发基础之HTML教程 - 二、常用HTML标签:frameset,框架集(块级元素)

    2.frameset,框架集(块级元素) frameset标签可以在网页中嵌入框架集(框架的集合),即多个框架.     iframe虽然可以在网页中嵌入单个的框架,但要在一个页面中嵌入多个框架(比如 ...

  7. html5语义元素表,HTML5的结构和语义(3):语义性的块级元素

    HTML5的结构和语义(3):语义性的块级元素 互联网   发布时间:2008-10-17 18:55:35   作者:佚名   我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...

  8. HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?

    前端面试题(8) 打卡: 2021-5-2 HTML HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些? (1)行内元素 inline element a - 锚点 b - 粗体 ( 不推荐 ...

  9. css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose

    行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...

最新文章

  1. tensorflow中的placeholder()
  2. Netty源码分析第7章(编码器和写数据)----第2节: MessageToByteEncoder
  3. 30多年程序员生涯经验总结(成功源自于失败中的学习;失败则是因为容忍错误的横行)...
  4. python显示乱码_python2显示乱码问题实战详解
  5. android ios mp4格式转换,ios格式转换器
  6. css background 一半_CSS---阴阳图
  7. 关于Error.captureStackTrace
  8. Zookeeper与Kafka集群搭建
  9. 获取ACCESS_TOKEN接口
  10. AMOS分析技术:软件安装及菜单功能介绍;这次是视频教程
  11. 可控硅工作原理及参数详解
  12. 数据库迁移的几种方式
  13. java讲师助理面试题_面试Java开发师常问到的5个问题(附答案)
  14. Qt中系统屏幕键盘打开与关闭
  15. 24种游戏化设计工具
  16. 第一篇文献:谈大数据时代的云控制摄影测量 ——张祖勋院士
  17. Office WORD如何为每一页设置不同的页眉页脚
  18. 科学计数法计算机怎么输,如何打印在Lua一个庞大的数字,而无需使用科学记数法?...
  19. 月亮搭配忧郁蓝色系海报设计模板
  20. bayes什么意思_Bayes是什么意思

热门文章

  1. 前端的小玩意(14)——一步一步教你写一个3D房间(从零到移动到360度视角)
  2. Python 开发这些牛逼的 App
  3. 中国大学MOOC程序设计与算法(三):C++ 面向对象程序设计 第六周 多态 笔记 之 多态实例:魔法门之英雄无敌
  4. 点餐系统java_java实现KFC点餐系统
  5. Java8之动态代理
  6. 不用化妆让你成漂亮女人
  7. Sqlplus查看Oracle版本
  8. 在微信的视频通话中将语音转成文字并显示在通过的界面中
  9. fidder(介绍)
  10. 使用Mockito mock一个静态方法