HTML5

2022-10-30 本文已影响0人败于化纤

单词

四种读音：[ i : ] [ e ] [ ae ] (ai)
Exercise:练习
meta : 元
Viewport:视点，视口
scale:n.天平，秤，磅秤; 天平盘
main :主要的。
container:容器

1.<!DOCTYPE > 定义文档类型

DOC ：英文document的意思，翻译为文档
TYPE ：翻译为类型
任何一个网页都必须再第一行声明文档类型。且必须是 HTML 文档的第一行，位于 <html> 标签之前。

用法：

<html>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
</html>

<!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>