单词
- 四种读音：[ i : ] [ e ] [ ae ] (ai)
- Exercise:练习
- meta : 元
- Viewport:视点，视口
- scale:n.天平，秤，磅秤; 天平盘
- main :主要的。
- container:容器
1.<!DOCTYPE > 定义文档类型
- DOC ：英文document的意思，翻译为文档
- TYPE ： 翻译为类型
任何一个网页都必须再第一行声明文档类型。且必须是 HTML 文档的第一行，位于 <html> 标签之前。
用法：
h3
<html>
</html>
h4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
</html>
h5
<!DOCTYPE html>
<html>
</html>
2.<html></html>
定义：定义一个HTML文档
3.<head></head>
定义：定义一个HTML文档的头部区域（次要的区域）
- 不是给人看的，给用户代理看
- 给搜索引擎看。
4.<meta/>标签
meta : 定义页面的原信息。（描述有关页面信息的元信息）
用法：
- <meta/>标签位于文档的头部
- <meta/>是一个单标签
- <meta/>采用“名值对”形式定义元信息。
语法：
<meta name="" content=""/>
常见的meta设置：
字符集:字符集（Character Set）是多个字符的集合，字符集种类较多，每个字符集包含的字符个数不同，常见字符集有：
- ASCII字符集
- GBK字符集
- Unicode（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">
元信息：计算机名词
元信息是描述信息的信息，元信息允许服务器提供所发送数据的信息，如HTTP可以提高所发的对象语言和对象，也可以用元信息来实现有条件请求以及报告事务完成。收到数据的浏览器可以根据元信息确定服务器发来的是什么内容，预料有什么数据，确知是否接收完整的数据，以及过程中是否出错，这样客户就可以知道传输对象的类型。
5.<tilte></tilte>
定义：定义HTML文档标题
6.<link/>
定义：定义当前网页文档与外部资源的关系。
- 外部资源：可以是css文件，也可以是图片。
-收藏夹图标：favourite icon的缩写，表示图标的意思
用法：
1.使用<link>关联外部的css文件
<link rel="stylesheet" hret="css外部文件"/>
2.使用<link>管理icon图标
<link rel="stylesheet" href="icon-" sizes="72x72" />
sizes:设置图片大小
7. <script> </script>
定义：定义客户端脚本。如：JavaScript
- 客户端：指访问网站的用户的浏览器
- 脚本：目前使用率最高的是js （其他：ActionScript ， VBScript）
用法1：引入外部脚本文件
<script src = "脚本文件路径"></script>
用法2：创建脚本区域
<head>
<script></script>
</head>
8.<body></body>
定义：定义文档的主体
- 主体：给用户看的全部放在body里面。
- 文档次要的部分：<head>
用法： - 一个HTML文档只能有一个。
9.<header></header> h5
定义：定义文档的页眉
-
页面包括什么
搜索框
登录区
快捷入口（链接）
LOGO
主导航
10.<section></section> h5
定义：定义了文档中的节。具有通用性。
10.<main></main>
main:主要的
定义：定义文档的主要内容区域。
11.<aside></aside>
aside：次要的
定义：定义文档次要内容区域。
12. <section></section>
定义：定义章节。
13.<footer></footer> h5
定义：定义页尾。
14.<nav></nav>
navigation ：导航
定义：定义导航
用法1：包裹a标签。
<nav>
<a href="#">⾸⻚</a>
<a href="#">关于我</a>
<a href="#">个人技能</a>
<a href="#">学习经历</a>
<a href="#">作品集</a>
<a href="#">联系方式</a>
</nav>
用法2：包裹ul标签。
<nav>
<ul>
<li><a href="#">联系方式</a></li>
</ul>
</nav>
HTML5的语义化
语义：标签所蕴含的意义。
HTML4标签的语义化并不明显
有语义的：
<h1>标题</h1>
<p>段落</p>
<ul>无序列表头</ul>
<li>无序列表项目</li>
<ol>有序列表</ol>
<img/>
<strong>加粗</strong>
没有语义的：
<div id="header">块</div>
<div id="nav">导航</div>
<div id="main">次要内容区域</div>
<div id="footer">页尾</div>
HTML对<div>派生了多个语义化标签
<header>页头</header>
<nav>导航</nav>
<main>主要内容</main>
<aside>次要内容</aside>
<footer>页尾<footer>
H5标签可以在项目中使用吗？
- 商量方案
- 确定你的观点：有一个网站可以帮助你决策
Can I Use ：http//www.caniuse.com
常见页面布局的种类
- 分屏式布局
- 工字形布局
- 圣杯布局
- 口字形布局
- 两栏布局
- 三栏布局
作业：
1.添加元信息 - 页面描述文字
- 页面关键词
- 视口
- 字符编码
构建元信息的标签：
- <head></head>
- <title></title>
- <meta></meta>
- <link>
格式化内容的标签：直接格式化内容，让内容具有格式化，多数都是块元素。
- <ul></ul>
- <ol></ol>
- <dl></dl>
- <li></li>
- <dd></dd>
- <dt></dt>
- <div></div>
- ······
描述内容标签：不具有格式，所有行内元素都属于描述内容标签。
- <a></a>
- <strong></strong>
- <i></i>
- <span></span>
- <em></em>
分节标签：只能用来组织标签的标签，用于划分章节。
- <h1></h1>
- <header></header>
- <nav></nav>
- <section></section>
- <fooer></fooer>
- <address></address>
- <main></main>
网友评论