认识HTML布局的根本标签

源代码 · 2024-9-7 17:00:46

1. < !DOCTYPE >

定义：定义⽂档范例。告诉浏览器渲染⻚⾯的规则。

DOC: document ⽂档。
TYPE：范例
阐明：任何⼀个⽹⻚都必须在⻚⾯第⼀⾏声明⽂档范例。

⽤法：
h3⽆⽂档范例
<html></htm>H4的⽂档范例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> </htmlH5的⽂档范例
<!DOCTYPE html>HTML5语义化

语义：标签所含有的意义。
Html 4标签的语义化比不显着
HTML4中有语义的标签
<h1>一级标题</h1><p>段落</p><ul>无序列表</ul><li>无序列表项目</li><ol>有序列表</ol><em>斜切</em>HTML4中没有语义的
<div id='header'>块</div><div id='nav'>导航navigation</div><div id='main'>告急内容地域</div><div id='sidebar'>次要内容地域</div><div id='footer'>页尾</div>HTML对<div>派生出了多个语义化标签
<header>页头</header><nav>导航</nav><section>一章一节</section><main>告急内容</main><aside>次要内容</aside><footer>页尾</footer>2. < html >

定义：定义⼀个HTML⽂档。
3. < head >

定义：定义HTML⽂档的头部地域(次要的地域）。

不是给⼈看的
- 给⽤户署理看
- 给搜刮引擎看的

4. < meta >

定义：定义⻚⾯的元信息（形貌⻚⾯信息的信息）。
⽤法：

< meta >标签位于⽂档的头部。
< meta >是⼀个单标签
< meta >采⽤"名值对"情势定义⻚⾯元信息。

语法
<meta name="属性名" content="属性值" >常⻅的meta设置：
字符集: 设置⻚⾯的字符编码为utf-8字符集
<meta charset="utf-8"> ⻚⾯形貌：为搜刮引擎设置的
<meta name="description" content="简书是⼀个优质的创作社区，在这⾥，你可以任性地创作，⼀篇短⽂、⼀张照⽚、⼀⾸诗、⼀幅画……我们信赖，每个⼈都是⽣活中的艺术家，有着⽆穷的创造⼒。">⻚⾯关键词：为搜刮引擎设置的
<meta name="keywords" content="简书,简书官⽹,图⽂编辑软件,简书下载,图⽂创作,创作软件,原创社区,⼩说,散⽂,写作,阅读">视⼝：为移动装备设置的
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">5. < title >

定义：定义HTML⽂档标题。
6. < link >

定义：关联外部资源与当前⽹⻚⽂档。

外部资源：可以css⽂件也可以是图⽚
收藏夹图标：favourite icon的缩写，体现收藏夹图标的意思。
在线转换ico图标：百度搜刮

⽤法:

使⽤< link >关联外部的css⽂件

使⽤ < link >管理收藏夹图标

主体：给⽤户看的内容全部放在body⾥⾯。
⽂档次要部分：< head >
⽤法：
⼀个HTML⽂档只能有⼀个body

9. < header > h5

定义: 标签订义⽂档的⻚眉。

⻚眉包罗什么
- LOGO
- 搜刮框
- 主导航
- 登录区
- 快捷⼊⼝（毗连）

10. < section > h5

定义: 定义⽂档中的节。具有通⽤性。
11.main：告急

定义：定义文档的告急地域
12.aside：次要的

定义：
13section

14.nva

定义：导航
15.box-sizing属性

定义：用于定义盒模子的盘算规则
语法
div{box-sizing:content-box |border-box}

Content-box:内容盒模子，默认值
Border-box：边框盒模子

16.container{

width:1140px;
margin;
分析

盒模子规定了元素的布局。任何一个元素都是由四部分构成：内容、内边距、边框、外边距
内容盒模子：Winth属性控制到内容区
边框盒模子：winth属性控制到

奇数偶数

odd 奇数
even 偶数
14. < footer > h5

定义：定义文档的页尾
H5标签可以在项⽬中使⽤吗？

开会商量⽅案
确定你的观点：有⼀个⽹站可以资助你决议：
- Can I Use ：http://www.caniuse.com

常⻅⻚⾯布局的种

分屏式布局
⼯字形布局
圣杯布局
⼝字型布局
两栏布局
三栏布局

认识HTML布局的根本标签

所属分类: 问答交流

新帖推荐: 30日

推荐作品