HTML5学习笔记 - 标签归类

2017-12-12 本文已影响121人大大盆子

HTML的基本结构

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<!-- 网页内容    -->
</body>
</html>

<!DOCTYPE html>：告诉浏览器需要一个doctype来触发标准模式。
<html lang="zh-cn">：指定语言种类为中文，html是根元素。
<head></head>：头部元素的容器，其中的内容绝大部分都不会直接显示给读者。
<body></body>：内容载体，里面的标签元素直接显示给读者。

Head包含的内容

在Head中可以引用脚本，样式，标题，元信息等等，下面这些标签可以用在head部分：

<meta>：元信息，一个辅助性标签，提供搜索关键字、网页内容描述、文档字符集、使用语言、自动刷新和页面重定向、页面缓冲等等，它共有两个属性：name、http-equiv，不同的属性又有不同的参数，而content为参数对应的值。

name：主要用于网页描述，而它主要有以下几种参数：

Keywords：该网页的搜索关键字。

<meta name="keywords" content="关键字,关键字..">

description：网站内容描述，告诉搜索引擎你的网站主要内容。
```
<meta name="description" content="网页描述....150words">
```

robots：搜索引擎索引方式。

<!-- all:文件被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
   index：文件将被检索；
  follow：页面上的链接可以被查询；
 noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。 -->
<meta name="robots" content="index,follow">

viewport：优化移动浏览器的显示。

<!--    width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
       height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

author：标注网页作者。
COPYRIGHT：标注网也版权信息。
generator：标注网页制作软件。
revisit-after：代表网站重访，7days表示7天，抓取过一次之后就要等7天再来。

http-equiv：头文件作用，帮助显示网页内容，它主要有以下几种参数:

content-Type：设定页面使用的字符集。

<!-- UTF-8：世界通用的语言编码，bg2312：简体中文编码 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

Content-Script-Type：设定页面中脚本类型。

<Meta http-equiv="Content-Script-Type" content="text/javascript">

Expires：设置网页过期时间，一旦过期就会重载，必须使用GMT格式，或者直接设置为0。

<meta http-equiv="expires" content="Fri, 12 Jan 2018 18:18:18 GMT"> 
<!-- 0：加载之后就过期 -->
<meta http-equiv="Expires" content="0">

Refresh：自动刷新和页面重定向。

<!-- 3秒之后自动刷新，如果填写了URL则重定向到这个URL，反之则不会重定向 -->
<meta http-equiv="Refresh" content="3;URL=http://www.jianshu.com/u/03e9c9f9a30f">

Pragma：浏览器一般会缓存页面内容，当我们设置为no-cache就不会进行缓存。
```
<meta http-equiv="Pragma" content="no-cache"> 
```

Cache-Control：指定请求和响应遵循缓存机制。

<meta http-equiv="Cache-Control" content="no-cache"> 
<!-- 用百度打开网页可能会对其进行转码（比如贴广告）,添加这两种content可以避免转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" /> 
<meta http-equiv="Cache-Control" content="no-transform" />

X-UA-Compatible：设定浏览器采取何种版本渲染当前页面。

<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

Set-Cookie：设置cookie，如果网页过期，那么网页存在本地的cookies也会被自动删除。
```
<meta http-equiv="Set-Cookie" content="User=Ddpz; path=/; expires=Fri, 12 Jan 2018 18:18:18 GMT">
```

<base>：作为所有链接规定默认地址与默认目标，必须位于head元素内部

<!-- _blank：新建目标，_self：自身目标 -->
<base href="http://www.jianshu.com/u/03e9c9f9a30f" target="_blank, _self">

<link>：定义文档与外部资源的关系，最常见的用途是链接样式表以及图标，它有以下几种属性：
```

<link rel="stylesheet" media="all" href="//cdn2.jianshu.io/assets/web- 05add656961cebea70aa.css" />

<link rel="icon" href="//cdn2.jianshu.io/assets/apple-touch-icons/57- 47624b2e2161e8eb144462c85db0a5ff.png" sizes="57x57" />
```
- href：指定需要加载的资源的地址URL。
- media：媒体类型，设定被链接文档将显示在什么设备上。
- rel：定义当前文档与被链接文档之间的关系，stylesheet代表css样式表，icon表示图标
- sizes：设定被链接资源的尺寸，仅适用于rel="icon"。
- type：执行所链接文档的MIME类型，css的type一般使用"text/css"。
<title></title>：页面标题。
```
<title>大大盆子 - 简书</title>
```

<style></style>：定义HTML文档样式信息，可以统一定制body中所用到的标签样式，type属性是必须的，且唯一可能的值就是"text/css"。

<style type="text/css">
    /*设置nav背景色，宽高，文字排版*/
    nav{background: #E0FFFF;width: 100%;height: 40px;text-align: center}
    /*设置li标签横向排布*/
    li{display: inline;}
    /*去除a标签下滑线*/
    a{text-decoration: none;font-size: 20px}
</style>

<script></script>：定义客户端脚本，script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件，常见于对图像的操作、表单的验证以及动态内容更新。
- type：规定脚本的MIME类型，对于JavaScript，MIME类型就是"text/javascript"，它是必须属性。
```
<script type="text/javascript">
alert("hello world!")
</script>
```
- src：链接外部脚本，其中的URL可以是绝对URL（指向其他站点），也可以是相对URL（指向站点内的文件）。
```
<script type="text/javascript" src="myscripts.js"></script>
```
- async：规定异步执行脚本，仅适用于外部脚本（src链接）。
```
<script type="text/javascript" src="demo_async.js" async="async"></script>
```
- defer：规定是否对脚本执行进行延迟，直到页面加载为止，比如优先加载文字，完成之后再去加载图片。
```
<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
```

Body包含的内容

body标签中的内容直接展示给读者，标签相对较多，我对它进行了以下归类：

布局标签&语义化：
- <div>：定义块级元素，是一个通用的容器元素，可以把文档分割为独立、不同的的部分，会另起一行，通常使用class或id给同一类的div统一添加额外的样式与适当的语义，同时也可以设置title:当鼠标放上去的时候显示这个title、dir:设定元素标签内容文字方向。
- <span>：定义行内元素，在行内定义一个区域，也就是一行可以被span划分成好几个区域，不会另起一行，也可以使用class或id添加样式和语义，当应用样式时，它才会产生视觉上的变化。
- <header>：定义页面的头部区域，一个语义化标签，让文档结构层次更清晰，相当于<div class="header"></div>。
- <footer>：定义页面的尾部区域，也是一个语义化标签，相当于<div class="footer"></div>。
- < section >：定义文章中的大纲或章节，通常带有标题与段落内容，不是通用容器元素，相比于div更具语义化，它强调内容上的独立性，div强调形式上的独立性，如果仅仅是用于设置样式或脚本处理则使用div。
- < article >：定义文章，语义化更强，表示是一篇文章，里面可以嵌套其他元素，它可以有自己的头、尾、主体、等内容。
- < aside >：定义页面内容之外的内容，通常用来设置侧边栏，同时也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如参考资料，名词解析等。
- < nav >：定义导航栏、超链接。
- < hgroup >：标题分组，通常放在header里面。
表格标签
- <table>:定义表格，主要有一下几个属性:
- border
- <caption>:定义表格标题。
- <thead>:定义表格头部。
- <tbody>:定义表格主体。
- <tfoot>:定义表格尾部。
- <caption>:定义表格标题。
列表标签

未完待续......

HTML5学习笔记 - 标签归类

HTML的基本结构

Head包含的内容

Body包含的内容

猜你喜欢

热点阅读