html — 块元素、内联元素、内联块元素

幸运
185
文章
0
评论
March 18, 202012:14:54 评论 88 1001字阅读3分20秒

html标签(也叫元素)大概可以统分为三大类,块元素、内联元素、内联块元素。

块元素

1,常用的块元素:ul、li、div、p、dl、dt、dd、h1~h6。

2,块元素支持所有的样式。

3,盒子独占据一行,即使设置了宽度。

4,如果没有设置宽度,默认宽度为父元素的100%。

内联元素

1,常用的内联元素:span、a、em、i、b、strong。

2,只支持部分样式,比如说,不支持宽、高、margin上下、padding上下。

3,盒子并在一行。

4,宽高由内容挣开。

5,如果代码换行,盒子之间会产生间距。

6,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。

解决第 4 点问题

1,取消代码间的换行,太麻烦了,不可取。

2,将这个内联元素的父元素的font-size值设为0,内联元素自身再设置font-size。

内敛块元素

1,支持所有的样式。

2,盒子并在一行。

3,代码换行,盒子会产生间距。

4,子元素是内联元素的话,可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。

从某种程度上可以说内联块元素结合了块元素和内联元素的优点,虽然现有元素没有归于此类别的,但是可以通过display属性来实现块元素、内联元素、内敛块元素的相互转化。

display属性

1,none 隐藏元素,且不占位置。

2,block 作为块元素显示。

3,inline 作为行内元素显示。

4,inline-block 作为行内块元素显示。

在实际开发中,块元素使用的较多,所以经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。还是要视情况而定。

实际练习中遇到的问题:

1,内联元素设置宽、高、margin、padding无效。

2,通过设置内联元素或者内联块元素的父元素的font-size为0,内联元素或内联块元素的font-size为字体大小,来解决代码换行带来的间距问题。

3,通过设置盒子的行高line-height和盒子高度height为一样的值,使得盒子内文字垂直居中。

4,ul、li、a等标签都有自己的属性,要根据需要调整。

本文来源于:html -- 块元素、内联元素、内联块元素-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
前端基础-HTML列表表格 html

前端基础-HTML列表表格

一、 列表 ul, ol, dl 1. 无序列表 ul HTML <ul> 元素 ( 或 HTML 无序列表元素) 代表多项的无序列表,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的 HTML 描述定义, 但在其相关的 CSS 可以用 list-style-type属性。ul标签需要和li标签结合使用。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ul type="disc"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ul> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ul> </li> <li>第4元素</li> <li>第5元素</li> </ul> </body> </html> type 用于设置列表的着重号样式 属性说明: 属性 描述 circle 空心圆 disc 实心圆 square 方块 2. 有序列表 ol HTML <ol> 元素 表示多个有序列表项,通常渲染为有带编号的列表。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <ol type="1"> <li>第1元素</li> <li>第2元素</li> <li> 第3元素 <ol> <li>二级1</li> <li>二级2</li> <li>二级3</li> </ol> </li> <li>第4元素</li> <li>第5元素</li> </ol> </body> </html> type 指示编号类型 属性说明: 属性 描述 'a'...
HTML基础入门 html

HTML基础入门

什么是网页? 网页由:文字,图片,音频,输入框,视频,按钮等一系列的元素来组成的 我们在学习网页开发之前我们首先需要了解一下什么是Web开发标准? WEB标准不是某一个标准,而是一系列标准的集合。网页主要是由三部分组成:结构,表现 和 行为。 Web表现是由W3C这个组织来定义的一套标准。 W3C:万维网联盟创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构 结构标准(HTML):指的就是我们编写网页的结构 表现标准(CSS):层叠样式表 行为标准(JavaScript):简单的理解指的是网页的交互效果 我们在学习网页开发之前我们要了解一下浏览器的概念,认识一下主流的浏览器有哪些。 什么是浏览器:浏览器指的就是一种用于帮助我们检索并解析展示万维网信息的一个应用程序。 通过以上图片的展示想必大家对这些主流的浏览器都使用过吧! 那么接下来我们来说说浏览器的内核。 什么是浏览器的内核? 浏览器最重要或者说核心的部分是“Rendering  Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。 它的作用是负责对网页语法的解析并进行渲染(显示),渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,不同的浏览器会有不同的内核,所以渲染出来的效果也是有所不同的。 了解一下主流浏览器的内核: Internet Explorer:Trident 内核 Chrome:Blink 引擎 Opera:在13年的时候用的还是Presto,之后用也是Blink引擎 FireFox:Gecko 内核 Safari:WebKit引擎 通过以上的知识点学习我们对Web前端开发也有了一定的了解了,那么接下来我们正式的进入到HTML的学习中了,请小伙伴我和一起加油学习吧 《HTML基础入门》 什么是HTML? HTML(Hyper Text Markup Language):超文本标记语言 那么我们在学习网页开发的时候我们需要知道什么是网页的结构 网页的结构: 通过以上的图片所展示的信息来看,想必大家对网页的结构都了解了 那么接下来我们来说一说网页结构中的标签分类: 双标签:标签有开头有结尾 例如: <head></head> <body></body>........ 单标签 :标签有开头没有结尾 例如: <link />  <hr />...... 这里有个细节,不知道小伙伴有没有发现呀,是什么呢? 标签的嵌套,标签里面嵌套着标签这里我们一般称之为是:"父子关系",标签并列显示我们称之为是:"兄弟关系"。 注意:网页的后缀都是 .html 结尾的,大家可以按照以上图片所给的格式编写出属于自己的一个网页吧 本文来源于:HTML基础入门-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
「JS」HTML 简介 html

「JS」HTML 简介

  通常一个网页由什么部分构成? 一般由前端三巨头构成:HTML、CSS、JavaScript HTML 决定了这个网页的结构是什么样子的:什么东西在哪里,有什么内容等 CSS 决定了这个网页的部件是长什么样子的:颜色、大小、粗细、形状等 JavaScript 决定了这个网页怎么样动,有什么样的反应:动画怎么做,与用户怎么互动等 一个网页的绝大多数功能,通常由这三个部分完成,它们极大地丰富了我们的互联网生活。 什么是 HTML? HTML:超文本标记语言(Hyper Text Markup Language),它不是一门编程语言,而是一种标记语言,这种标记语言常常用于描述网页,我们在网上看到的诸多网页,其本尊都是它。 以 Chrome 浏览器打开 bing 主页为例,打开网址 https://cn.bing.com/ : 在主页按鼠标右键,点击 View Page Source ,显示网页的源代码,即 HTML 文本,看到它本来的样子,: 未经浏览器修饰的 bing 主页的 HTML 源码: 这些 HTML 代码,只有经过浏览器正确显示之后,才最终变成了你使用的样子: 想要做网页设计,甚至入门前端,就要从学习 HTML 开始。 Be a Architect Powered By Programming 本文来源于:「JS」HTML 简介-幸运草博客 特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。
Typora 自动导出 HTML html

Typora 自动导出 HTML

看之前我要提醒你,本文并没有解决“Typora 自动导出 HTML”问题! 使用 Typora 写文章真的太方便了,之前《如何优雅地使用 Typora 写文章》讲到发布微信公众号和图片自动上传云端,但是,当我有很多草稿需要导出 HTML 的时候,手动一个一个点击显得有那么一些麻烦,那么,懒癌患者开始思考,有没有自动导出的方法? 本篇文章不仅会提供相关脚本,也会提供整个开发思路,这对于学习、开发和优化程序是非常重要的。 分析 分析 Typora 导出的 HTML: 分析了多个 HTML 后发现了,只有 body 标签中的内容才是我们自己的文章,其他的都是样式代码,一摸一样的样式代码; 分析 Typora 安装的目录结构: 我找到了 style 文件夹,再进去: 发现了 base.css 和主题文件夹,凭借我敏锐的洞察力,这一定是导出 HTML 用到的样式文件; 样式解决了,我们还需要将文章转为 HTML,文章是 markdown(md)格式的; 通过 Typora 打开开发者工具: 可以发现,Typora 本身就是一个浏览器,已经将转换好的 HTML 代码显示出来了,那么我们只需要通过 js 读取,再拼接上样式即可; 该有的我们都有了,我们可以参照《如何优雅地使用 Typora 写文章》中的 typora-plugins-win-img,通过 js 调用 pandoc 转化 markdown 至 html,再附加主题样式; 最后一个问题是,控制这个 js 调用时间; 解析 typora-plugins-win-img 的 js: 字面意思是当鼠标离开或者点击 div #write 中的 img 时出发,好主意! 验证了这个方法; 那么,我也可以通过同样的方式调用转换程序; OK,判断可行; 动手 在 Typora 文件夹下建立如下目录结构: 编写 md2html.js 文件: (function($){ var baseHtml1 = "略"; var baseHtmlThemeCss = "略"; // 主题样式代码 var baseHtml2 = "略"; // write 文章主体代码 var baseHtml3 = "略";...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: