html分类页面,CSS网页设计 把HTML标记分类

p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong,span等元素称为行内元素,它们的内容显示在行中,即“行内框”。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间)

《CSS权威指南》中文中:任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。这些知识在WEBJX.com上有较多的文章。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

A:行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

B:说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

  C:一般的 块级元素诸如段落

、标 题

…、列表,

  1. 、表格
    和BODY等元素。而内联元素则如: 表单元素、超级链接、图像、 ……..

    D:块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

    E:在CSS定义中属于一个行内元素,而

    是块级元素。

    用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而

    相当于一个大容器,大容器当然可以放一个小容器 了。就是小容器。

    块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较特殊,它只能用来容纳其他块元素。

    如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。

    你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。

    内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。

    块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。

    可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。

    ps:关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界(float时margin)问题。

    块元素(block element)

    复制代码代码如下:

    * address - 地址

    * blockquote - 块引用

    * center - 举中对齐块

    * dir - 目录列表

    * div - 常用块级容易,也是css layout的主要标签

    * dl - 定义列表

    * fieldset - form控制组

    * form - 交互表单

    * h1 - 大标题

    * h2 - 副标题

    * h3 - 3级标题

    * h4 - 4级标题

    * h5 - 5级标题

    * h6 - 6级标题

    * hr - 水平分隔线

    * isindex - input prompt

    * menu - 菜单列表

    * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

    * noscript - )可选脚本内容(对于不支持script的浏览器显示此内容)

    * ol - 排序表单

    * p - 段落

    * pre - 格式化文本

    * table - 表格

    * ul - 非排序列表

    内联元素(inline element)

    复制代码代码如下:

    * a - 锚点

    * abbr - 缩写

    * acronym - 首字

    * b - 粗体(不推荐)

    * bdo - bidi override

    * big - 大字体

    * br - 换行

    * cite - 引用

    * code - 计算机代码(在引用源码的时候需要)

    * dfn - 定义字段

    * em - 强调

    * font - 字体设定(不推荐)

    * i - 斜体

    * img - 图片

    * input - 输入框

    * kbd - 定义键盘文本

    * label - 表格标签

    * q - 短引用

    * s - 中划线(不推荐)

    * samp - 定义范例计算机代码

    * select - 项目选择

    * small - 小字体文本

    * span - 常用内联容器,定义文本内区块

    * strike - 中划线

    * strong - 粗体强调

    * sub - 下标

    * sup - 上标

    * textarea - 多行文本输入框

    * tt - 电传文本

    * u - 下划线

    * var - 定义变量

    可变元素——可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    复制代码代码如下:

    * applet - java applet

    * button - 按钮

    * del - 删除文本

    * iframe - inline frame

    * ins - 插入的文本

    * map - 图片区块(map)

    * object - object对象

    * script - 客户端脚本

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

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

相关文章

html点击图片产生事件,jquery – 图像单击HTML5 Canvas中的事件

我有一个HTML5画布,我在其中添加了一个图像,我想调用图像的点击事件,但事件不会触发.我正在写一个HTML代码和jqmobile的一些代码This text is displayed if your browser does not shown.$(function () {var ctx document.getElementById("canvas1").getContext(&qu…

html代码里面换图片不显示不出来了,微擎 Ueditor 百度编辑器 替换图片不显示问题...

问题:最近在使用微擎添加公众号平台文章时,上传图片可以显示,但是点击 html(编辑器的按钮,可以显示html代码) 时出现图片不显示问题。我是用的135编辑器挑选的图文模板,我替换完模板中的图片后,图片的链接失效&#xf…

找通项公式在线计算机,在线硬盘分区计算器工具

一、什么是分区?分区从实质上说就是对硬盘的一种格式化。当我们创建分区时,就已经设置好了硬盘的各项物理参数,指定了硬盘主引导记录(即Master Boot Record,一般简称为MBR)和引导记录备份的存放位置。而对于文件系统以及其他操作系…

湖南大学计算机网络实验,湖南大学《计算机网络》实验报告

实验一应用协议与数据包分析实验(使用Wireshark)一、实验目的通过本实验,熟练掌握Wireshark的操作和使用,学习对HTTP协议进行分析。二、实验内容1.HTTP 协议简介HTTP 是超文本传输协议(Hyper Text Transfer Protocol)的缩写,用于W…

html中dl标签和ul标签,html中dl,dt,dd,ul,li,ol标签区别和使用

html中dl,dt,dd,ul,li,ol标签区别和使用时间:2013-04-12 21:48 来源:未知 | 作者:易享学习网| 本文已影响 人ul: unordered listsol: ordered listsli: Listsol 有序列表:………………表现为:1……2……3……ul 无序列表,表现为li前面是大圆点…

国家开放计算机应用基础模块1答案,完整word版,《国家开放大学学习指南》计算机应用基础网上作业答案(完整版)...

作业1(本次作业覆盖“模块1 Windows 7 操作系统”的内容,请在学完模块1后完成本次作业,要求第8周内完成。满分为40分,其中基础知识部分10分,Windows 7部分20分,网络部分10分。单选题50道、填空题50道)基础知识选择题(共…

webview 本地 html空白,WKWebView加载本地html遇到的坑与解决办法

1、字体变小解决办法Swiftlet headerString ""self.wkwebview.loadHTMLString(headerString.appending(html), baseURL: nil)Objective-CNSString *headerString "";[strongSelf.contentWebView loadHTMLString:[headerString stringByAppendingString:m…

偷用计算机作文,偷玩电脑作文5篇

偷玩电脑作文5篇篇一:偷玩电脑的滋味星期天,我在家里看电视,妈妈很晚才回来,我只好在家等,看了一会,电视节目没了,我把电视关掉,看了会书消磨时间,我又写了会作业&#x…

中科院计算机学院王宏,王宏-中国科学院大学-UCAS

发表论文(1) SIL verification for SRS with diverse redundancy based on system degradation using reliability block diagram, Reliability Engineering and System Safety, 2017, 第 2 作者(2) New considerations for SIL verification of functional safety fieldbus co…

钢铁厂计算机相关岗位需要倒班吗,钢铁厂工人倒班的三个阶段,请对号入座!...

原标题:钢铁厂工人倒班的三个阶段,请对号入座!刚开始钢铁厂倒班工作,感觉倒班好,夜班有啥,通宵可以感受夜的宁静,深夜闲暇之余还可以仰望星空,思考人生,白天自由时间多&a…

计算机文化基础B卷期末,《计算机文化基础》上机试卷B

课程代码: 座位号:新疆大学2008- 2009 学年度第一学期期末考试《计算机文化基础》上机试卷姓名: 学号: 专业:学院: 班级:2008年 12月注意事项:在试卷上必须注明学号、姓名否则成绩以“零”分计算完成以下各题后,将应用程序窗口最小…

win7查看 本地计算机策略,win7系统本地组策略编辑器打不开怎么办

本地组策略编辑器是win7系统的管理控制台,通过本地组策略编辑器可以禁止通过本地组策略、禁止对某些任务使用脚本等设置。有些win7 64位系统的用户发现,本地组组策略编辑器打不开了,这是怎么回事呢?会出现这种情况很有可能是控制台…

苹果x计算机按键有声音吗,iPhoneX拍照总有声音怎么办?拨动静音键即可关闭拍照声!...

我们知道,国行iPhoneX拍照默认是有声音的,完成拍照一瞬间会发出发发出咔的拍照音。不过,我们有时候在夜间或者安静环境下,想要静音拍照,那么该怎么做呢。下面小编详细介绍下iPhoneX相机声音关闭方法,希望对…

计算机打字测速,电脑的打字测速软件分享

对于电脑工作人员来说,打字是我们每天都会接触的,作为网站编辑来说,每天就是打字,打字,打字,因此,打字速度一定不能慢,不然就会大大的影响工作效率。下面是学习啦小编为大家整理的关…

2012服务器系统安装iis,Windows Server 2012服务器管理系统安装配置IIS8.5教程

IIS8.0是windows Server2012自带的服务器管理系统,和以往不同,IIS8.0安装和操作都比较简单,界面很简洁,安装也很迅速。今天我们重点完整的演示下windows server 2012上面配置IIS8.5的详细安装。windows server 2012上面配置IIS8.5…

nextcloud显示服务器处于维护模式,急急急!!!Nextcloud内部服务器错误

本帖最后由 husthyx 于 2019-8-17 11:33 编辑老毛子固件,通过ONMP安装,nextcloud是最新版本16.0.4,配置完成后输入帐号密码登陆,出现“内部服务器错误”,服务器日志如下:{"reqId":"1NwssUrQYmV1d9ELSrZ…

正在等待语音服务器回应,Python如何突破正在等待服务器响应的阻塞生成器?

我想添加一个错误处理程序,它可以在出现internet连接问题时停止转录过程。我创建了一个连接监视器线程,每隔几秒钟检查一次internet连接,并将设置一个标志isConnectionError True。在我设法停止音频录制生成器进程,但无法停止另一…

Java9个异常处理的最佳实践

在本文中,作者介绍了9个处理异常的最佳方法与实践,以举例与代码展示结合的方式,让开发者更好的理解这9种方式,并指导读者在不同情况下选择不同的异常处理方式。 以下为译文: Java中的异常处理不是一个简单的话题。初学…

formidable ajax上传,nodejs+express+ajax实现图片上传及显示

图片上传:页面aja中比需抖接朋功要朋插x写法var data new FormData();var files $("#idFile")[0].files;if(files){data.append("file", files[0]);data.append("CompanyPicAddress","");data.append("CompanyNameC…

小白零基础怎么学习Java?不要慌

近年来,Java视频逐渐取代了“书籍”的作用,许多初学者已经将视频视为最重要的学习方式。然而,通过对java自学的长期观察和研究,我们发现书籍和视频都有自己的作用。阅读和观看视频对于Java学习者来说是不可或缺的。但是&#xff0…