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 rel="stylesheet" href='css⽂件地址' ><link rel='shortcut icon' href='icon图⽚地址'7. < script >
定义： <script> 标签⽤于定义客户端脚本，⽐如 JavaScript。
客户端: 指访问⽹站的⽤户的浏览器。
脚本：⽬前使⽤率最⾼的是js （其他：ActionScript、VBScript)
⽤法
⽤法1： 通过< script >引⼊外部脚本⽂件
<script src='脚本⽂件路径'></script>⽤法2： 通过< script >创建脚本地域。
<head> <script> window.onload = function(){ } </script></head>8. < body >
定义：body元素定义⽂档的主体。
- 主体：给⽤户看的内容全部放在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
常⻅⻚⾯布局的种
- 分屏式布局
- ⼯字形布局
- 圣杯布局
- ⼝字型布局
- 两栏布局
- 三栏布局
|
