行内标签与块级标签、form标签、wrapper网页布局 |
您所在的位置：网站首页 › 网页设计中的display是什么意思 › 行内标签与块级标签、form标签、wrapper网页布局 |
行内标签与块级标签、form标签、wrapper网页布局
|
最近，又回顾学习了html的一些基本知识，在此mark一下： 一、块级标签、行内标签与自闭合标签 ①块级标签：占据一整行，高度、行高、内边距和外边距都可以改变，宽度和游览器的宽度一样，和内容无关，可以容纳块级标签和其他行内标签； ②行内标签：只占内容宽度大小、高度、行高，内边距和外边距是可以部分可以改变的。 行内元素一般是内容的容器，而块级元素一般是其他容器的容器。因此，行内元素适合显示具体的内容，而块级元素适合做布局。常用的行内元素和块级元素如下： 级别元素行内元素a,b,strong,span,img,label,button,input,select,textarea块级元素header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer 一般情况下，行内元素只包含内容和其他行内元素，宽度和长度依据内容而定，不可以设置，可以和其他元素和平共处一行；而块级元素可以包含行内元素和其他块级元素，且占据父元素的整个空间，可以设置width和height属性，游览器通常会在块级元素前后另起一个新行。 之所以，说“一般情况”，是因为元素的级别不是一成不变的，游览器是按照规范规定的元素的默认级别来显示，但是，也可以通过"display"的属性来改变其级别。 常用的display值 常用的display可能的值如下： 值说明inline以行内元素行为展示block以块级元素行为展示inline-block行内元素和块级元素特性兼而有之，既不会占满父元素，又可以设置width和height属性table以表格的形式展示table-cell以表格单元格的形式展示table-row以表格行的形式展示table-column以表格列的形式展示flexCSS3 新增，虽然处于CR阶段，但是很多现代浏览器已经支持无前缀的该特性，IE从11开始部分支持。类似块级元素，但是可以用于制作自适应布局inline-flex类似行内元素，但是可以用于制作自适应布局gridCSS3 新增，目前处于“实验阶段（Experimental）”,只是得到了IE11和edge的部分支持 注：flex属性因其在WEB端的兼容性不是很好，但是，在移动端支持良好，利用flex布局可以更好的制作出自适应布局，解决移动端各种手机屏幕的适应问题。 块级元素与overflow 块级元素当没有明确指定width和height值时，块级元素尺寸由内容确定，当指定了width和height的值时，内容超出规定的尺寸就会溢出，元素的尺寸并不会随着内容改变。这时候，使用overflow可以指定内容超出时的行为，当然，overflow只对块级元素起作用，指定当内容超出块级容器的时候，块级元素该如何处理内容的显示。overflow可能的值如下表示： 值说明visible默认值，如果内容超出容器尺寸，不做任何处理hidden超出的内容被截断并隐藏scroll无论内容是否超出，总是显示滚动条。可以控制只显示一个方向的滚动条，这时应该设置 overflow-x 和 overflow-yauto内容没有超出时，不显示滚动条；内容超出时，显示滚动条，且如果只有一个方向超出，那么只显示该方向上的滚动条 相关实例： hello world this is a this is a article 1 this is a article 2在游览器显示如下：
二、form标签 标签，用于创建供用户输入的HTML表单。form元素包含一个或多个表单元素，比如：button,input,keygen,object,output,select,textarea. HTML4.01与HTML5之间的差异 HTML5拥有一些新的属性，同时不再支持HTML4.01中的某些属性。 属性 属性值描述acceptMIME_typeHTML 5 中不支持。accept-charsetcharset_list规定服务器可处理的表单数据字符集。actionURL规定当提交表单时向何处发送表单数据。autocomplete onoff规定是否启用表单的自动完成功能。enctype见说明规定在发送表单数据之前如何对其进行编码。method getpost规定用于发送 form-data 的 HTTP 方法。nameform_name规定表单的名称。novalidatenovalidate如果使用该属性，则提交表单时不进行验证。target _blank_self_parent_topframename规定在何处打开 action URL。 说明 enctype属性可能的值：application/x-www-form-urlencoded,multipart/form-data,text/plain. 相关实例： form 标签 demo1 demo2 demo3 二分之一 html5 hello world在游览器显示如下：
三、基本网页布局 随着H5的使用，WEB标签的语义化，可以利用标签更明了的显示网页的基本布局了。 HTML5中的一些新标签列举： 标签描述定义注释。 定义文档类型。定义超链接。定义缩写。HTML 5 中不支持。定义首字母缩写。定义地址元素。HTML 5 中不支持。定义 applet。定义图像映射中的区域。定义 article。定义页面内容之外的内容。定义声音内容。定义粗体文本。定义页面中所有链接的基准 URL。HTML 5 中不支持。请使用 CSS 代替。定义文本的文本方向，使其脱离其周围文本的方向设置。定义文本显示的方向。HTML 5 中不支持。定义大号文本。定义长的引用。定义 body 元素。插入换行符。定义按钮。定义图形。定义表格标题。HTML 5 中不支持。定义居中的文本。定义引用。定义计算机代码文本。定义表格列的属性。定义表格列的分组。定义命令按钮。定义下拉列表。定义定义的描述。定义删除文本。定义元素的细节。定义定义项目。HTML 5 中不支持。定义目录列表。定义文档中的一个部分。定义定义列表。定义定义的项目。定义强调文本。定义外部交互内容或插件。定义 fieldset。定义 figure 元素的标题。定义媒介内容的分组，以及它们的标题。HTML 5 中不支持。定义 section 或 page 的页脚。定义表单。HTML 5 中不支持。定义子窗口（框架）。HTML 5 中不支持。定义框架的集。 to 定义标题 1 到标题 6。定义关于文档的信息。定义 section 或 page 的页眉。定义有关文档中的 section 的信息。定义水平线。定义 html 文档。定义斜体文本。定义行内的子窗口（框架）。 定义段落。为对象定义参数。定义预格式化文本。定义任何类型的任务的进度。定义短的引用。定义若浏览器不支持 ruby 元素显示的内容。定义 ruby 注释的解释。定义 ruby 注释。HTML 5 中不支持。定义加删除线的文本。定义样本计算机代码。定义脚本。定义 section。定义可选列表。将旁注 (side comments) 呈现为小型文本。定义媒介源。定义文档中的 section。HTML 5 中不支持。定义加删除线的文本。定义强调文本。定义样式定义。定义下标文本。定义 details 元素的标题。定义上标文本。定义表格。定义表格的主体。定义表格单元。定义 textarea。定义表格的脚注。定义表头。定义表头。定义日期/时间。定义文档的标题。定义表格行。定义用在媒体播放器中的文本轨道。HTML 5 中不支持。定义打字机文本。HTML 5 中不支持。定义下划线文本。定义无序列表。定义变量。定义视频。HTML 5 中不支持。定义预格式文本。 随便插入一下，WEB的语义化的理解，WEB语义化分为三个阶段，而H5的出现正好处于第三阶段： ①最初，游览器和W3C组织推出了h1~h6、thead、ul、ol等HTML标签，用于在WEB页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到方便协作及传播互联网内容。这样，机器可以读懂内容，同时利于SEO。搜索引擎利用这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，WEB前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用； ②起初的HTML语义化标签，不能满足WEB的发展，不足以实现对WEB页面各个部分的功能或位置描述，WEB人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加"id=footer"或者"class=footer"的属性，来弥补不足，同时在不同的前端人员与后端人员间实现交流； ③W3C组织意识到之前HTML版本的不足，推出的HTML5进一步推进了WEB语义化的发展，采用了如footer、section等语义化标签，来弥补采用"id=footer"或者"class=footer"的不足，以推动了WEB的发展。 相关实例的基本布局： sematic 页面的头，一号字体 左边栏2号字体 header标签的使用 aside变迁的使用 nav标签的使用 section标签的使用 article标签的使用 footer标签的使用 关于我们这是一个简短的描述。这是一个简短的描述。 简短的描述。这是一个简短的描述。这是一个简短的描述。 Home Previous Details Next 欢迎来到前端大讲堂 副标题： 支持所有的 EcmaScript 6 的浏览器“Usability” is a construct conceived by the human–computer interaction (HCI) community to denote a desired quality of interactive systems and products. Despite its prominence and intensive use in HCI research, the us… 远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字。 远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字远程分支和本地分支需要区分好，所以，在从服务器上拉取特定分支的时候，需要指定远程分支的名字。 版权所有，未经允许不得转载 关于我们 练习我们 帮助 在游览器显示如下：
四、总结与思考 利用这次回顾总结html基本知识的机会，随便又复习了一遍H5的新标签，同时，了解了一下WEB语义化的发展，对网页新标签的使用有了新的了解。 如文章哪里有问题，欢迎大家留言，进行指正，谢谢！ 参考博客：HTML行内元素与块级元素点击打开链接 参考博客：如何理解WEB语义化？点击打开链接
版权声明：本文为博主原创文章，未经博主允许不得转载。 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |