Web学习笔记HTML+CSS+JS（一）

Web学习笔记/HTML+CSS+JS/（一）

1、meta标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。以及页面编码语言、搜索引擎的优化等等。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

（1） charset指定网页的字符集

<meta charset="UTF-8">

（2） name 指定的数据的名称，对应的属性是content（content 指定的数据的内容），以便搜索引擎进行分类

​ 基本语法：

<meta name="参数" content="参数值"/>

• keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开

  例如：<meta name="keywords" content="小Try,博客，工科生，前端学习">

• description 用于指定网站的描述

  例如：<meta name="description" content="这是我的学习笔记">

• viewport 表示用于设计移动端网页。最常范例如下：

  例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">

• author 标注网页制作的作者

  例如：<meta name="author" content="小Try,xxxxxxxx@gmail.com">

• copyright 标注网页制作的版权问题

  例如：<meta name="copyright" content="小Try">

• generator 用来说明网站制作所采用的编辑器

  例如：（这个还不确定，之后在补充）

（3） http-equiv 相当于http的文件头作用（个人见解）；相当于http的作用，比如定义一些http参数啥的。

​ meta标签中http-equiv属性 具体语法格式为：

<meta http-equiv="参数" content="具体的描述">

• refresh 自动刷新并指向某一个网页（将页面重新定向到另一页面）

  例如：<meta http-equiv="refresh" content="5；URL=http://www.xxxx/"> //意思是2秒后跳转

• X-UA-Compatible 用于告知浏览器以哪一版本渲染页面（一般用最新模式）

  例如：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

2、布局标签（结构化语义标签）

• header 表示网页的头部

• main 表示网页的主体部分（一个页面中只会有一个main）

• footer 表示网页的底部

• aside 侧边栏

• article 表示一个独立的文章

• section 表示一个独立的区块，以上标签都不能进行表示时使用section

• div 没有语义，用来表示一个区块，主要用div来布局元素

• span 行内元素，也没有语义，一般用于在网页中选中文字

3、列表（list）

html 中的列表一共有三种，并且列表之间可以互相嵌套：

• 有序列表

  使用 ol 标签来创建有序列表，使用 li 表示列表项

  例如：

      <ol>
          <li>AA</li>
          <li>BB</li>
          <li>CC</li>
      </ol>
  

• 无序列表

  使用 ul 标签来创建无序列表，使用 li 表示列表项

  例如：

      <ul>
          <li>11</li>
          <li>22</li>
          <li>33</li>
      </ul>
  

• 定义列表

  使用 dl 标签来创建一个定义列表；使用 dt 来表示定义的内容；使用 dd 来对内容进行解释说明

      <dl>
          <dt>HTML</dt>
          <dd>HTML称为超文本标记语言，是一种标识性的语言</dd>
          <dd>HTML称为超文本标记语言，是一种标识性的语言</dd>
          <dd>HTML称为超文本标记语言，是一种标识性的语言</dd>
      </dl>