前端学习之HTML【一】

简介: 一、块级元素块级元素默认占一行,一行内添加一个块元素后一般无法添加其他的元素,其宽度自动填满其父元素宽度常见的块元素:address - 地址blockquote - 块引用dir - 目录列表div- 常用块级元素dl - 定义列表fields...

一、块级元素

块级元素默认占一行,一行内添加一个块元素后一般无法添加其他的元素,其宽度自动填满其父元素宽度

常见的块元素:

address - 地址blockquote - 块引用dir - 目录列表div- 常用块级元素dl - 定义列表fieldset - form控制组form - 交互表单h1-h6 - 标题hr - 水平分隔线ol - 排序列表p - 段落pre - 格式化文本table - 表格ul - 非排序列表


img_f4a3be9995192cb7298819821449e8ac.png

二、行内元素

行内元素也叫内联元素,和其他元素都在一行上,高度、行高、内边距和外边距都不可改变,宽度是它文字或者图片的宽度,也是不可改变的,行内元素只能容纳文本或者其他行内元素,padding-top和padding-bottom都不会产生边距效果

常见的内联元素:

a - 锚点abbr - 缩写b - 粗体(不推荐)bdo - 覆盖默认的文本方向big - 大字体br - 换行cite - 引用code - 计算机代码(在引用源码的时候需要)dfn - 定义字段em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框kbd - 定义键盘文本label- 表格标签q - 短引用s - 中划线(不推荐)samp - 定义范例计算机代码select- 项目选择small - 小字体文本span - 常用内联容器,定义文本内区块strong- 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框u - 下划线var - 定义变量


img_7bb34af18f1d54cffc5b5ae973df3281.png

块级元素和内联元素之间的转换:

1.display 

块元素默认display:block;行内非替换元素(a,span)默认为display:inline;行内替换元素(input)默认为display:inline-block;

display:none;不显示该元素,也不会保留该元素原先占有的文档流位置。

display:block;转换为块级元素.

display:inline;转换为行内元素。

display:inline-block;转换为行内块级元素。

2.float 

当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。 

3.position 

当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

三、HTML 速查列表

菜鸟教程:http://www.runoob.com/html/html-quicklist.html

:行内元素与块级元素参考自:https://www.jianshu.com/p/d69878549d92

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!】

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
1月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
39 4
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
44 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图,但未成功,可能与版本有关。
39 4
Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
41 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
35 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
3月前
Twaver-HTML5基础学习(36)是否显示滚动条
本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法,包括横向和纵向滚动条的控制,但遇到了设置不生效的问题,可能与软件版本有关。
37 2
Twaver-HTML5基础学习(36)是否显示滚动条
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
46 1
前端基础(十七)_HTML5新特性