幕客前端基础入门-搭建网页结构
时间:2020-05-14
本文章向大家介绍幕客前端基础入门-搭建网页结构,主要包括幕客前端基础入门-搭建网页结构使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.块级标签与行内标签
由于表格代码不便于维护,且不够灵活。所以网页布局一般是div+css
div标签:是一个区块容器标签。<div></div>之间是一个容器,可以包含段落、表格、图片等各种html元素。
span标签:没有任何意义,为了应用样式。
<p>使用div标签</p>
<div><img src="coner.jpeg" width="50">曹魏</div>
<div><img src="coner.jpeg" width="50">孙吴</div>
<div><img src="coner.jpeg" width="50px">蜀汉</div>
<p>使用span标签</p>
<span><img src="icon.jpeg" width="50">曹丕</span>
<span><img src="icon.jpeg" width="50">孙权</span>
<span><img src="icon.jpeg" width="50">刘备</span>
标签 | 说明 | 示例 |
块级标签 | 占据一行,换行。如<div>用来搭建网页的结构布局和承载一些内容 | <div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>... |
行内标签 | 在一行,不换行。如<span>用于某些细节的处理 | <b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>... |
2. 标签嵌套规则
规则 | 示例 |
块级元素可包含行内元素和某些块级元素 | 如<div><h1></h1>< a href=""></a></div> |
行内元素不能包含块元素,只能其他行内元素 | 如<a href="" ><h1></h1><div></div></a><--错误--> <span><em></em></span><--正确--> |
块级元素不能放在&lit;p>标签内 | <p><div>1111</div><h1>2222</h1></p><!--错误写法,浏览器会将div和h1之外生成2个p段落--> |
特殊块级元素只能包含行内元素,不能再包含块级元素,如<h1>~<h6>、<p>、<dt> | |
块级元素与块级元素并列,行内元素与行内元素并列 | <div><h1></h1><p></p></div><!--正确--> <div><h1>666</h1><span></span></div><!--错误写法--> |
原文地址:https://www.cnblogs.com/csj2018/p/12887072.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- c# winform 窗体最大化后挡住了任务栏
- Oracle参数解析(timed_statistics)
- C#将引用的dll嵌入到exe文件中
- C# 软件版本号
- C# 实现登录并跳转界面
- QT 常用控件操作实例集锦
- C# Socket TCP发送图片与接收图片
- ingress通过daemonSet,nodeSelector,hostNetwork方式部署
- Oracle参数解析(event)
- Qt读写文件(2种方式)实现详解
- 字符串匹配 - KMP算法
- c# 判断文件是否发生了变化
- C# 用IrisSkin4.dll美化你的WinForm
- Oracle参数解析(shared_pool_size)
- C# GTS四轴运动控制器实例(固高科技步进电机不带编码器)