2020-01-10 常用标签和选择器

标题类标签

<h1>这是h1标签</h1>

h1标签通常用于当前网站的名称 或 logo（在搜索的时候，这个标签的优先 级非常高，所以不要在页面滥用）

<h2>这是h2标签</h2>

h2 文章内的大标题 或 板块名称

<h3>这是h3标签</h3>

h3 文章内的小标题 或 板块下的栏目名称

<h4>这是h4标签</h4>

<h5>这是h5标签</h5>

<h6>这是h6标签</h6>

h1~ h6，依次递减，并不太具备什么特殊的含义，就是标题。

结构类标签

<div>结构的划分</div>

块：一般没有别的适合的标签的时候，就可以轮到它啦

<header>这里包含头部的内容</header>

头部，这里可以是一个网站的头部，也可以是一个大版块的头部

<section>划分版块</section>

划分板块

<article> 文章   </article>

文章（可以包含：标题：作者、发布时间、发布内容等的）

<nav>导航栏</nav>

<aside>附属信息（侧边内容）</aside>

网站侧边的悬浮都可以用这个

<footer>这里包含底部的内容</footer>

底部，可以是一个网站的底部，也可以是一个大板块的底部

列表类标签

<ol>
<li>这是li1</li>
<li>这是li2</li>
<li>这是li3</li>
</ol>

有序列表，用在对顺序有要求的结构类似的情况
例如：新闻排名

<ul>
<li>这是li1</li>
<li>这是li2</li>
<li>这是li3</li>
</ul>

无序列表，对顺序没有要求的 但是结构类似的情况

例如：很多，以后慢慢来了解，只要知道结构一致就可以

<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>梨</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>番茄</dd>
<dd>娃娃菜</dd>
<dd>土豆</dd>
</dl>

自定义列表，dt一般是标题，dd是对标题展开的描述
dl：定义列表
dt：列表标题
dd：对标题展开的描述

文本类标签

<p>用于文本段落</p>

用于文本段落

```bash 文本 ``` 并不具备任何含义，中间可以放置文本，对文本单独进行操作

<strong>文本加粗，强调</strong> <b>文本加粗，强调</b>

文本加粗，强调 文本加粗，强调

<em>斜体</em> <i>斜体</i>

斜体 斜体

<mark>高亮</mark>

高亮

<time>时间</time>

时间

<cite>引用</cite>

引用

<sup>上标文本</sup>

2^上标文本

<sub>下标文本</sub>

2_下标文本

<del>删除文本</del>

删除文本

更多标签

– img标签
向页面中，添加一张图片，是个单标签哦。
书写方式：

<img src="图片地址" title="鼠标停留的提示信息" alt="图片不显示时候的备用文字"/>

特性：

1. 一行显示多个，父级宽度不够，元素换行
2. 支持宽高
3. 宽高等比缩放（宽高同时设定，不会等比缩放）
4. img标签底部存在间隙（vertical-align:top;解决这个问题）
5. 换行会被解析出一个空格

换行产生间隙的解决方案：
1.不换行
2.父级font-size设置为0;
3.利用margin-left:负值

图文标签

<figure>用于文档中插入的图片</figure>
<figcaption>为文档中插入图片设置标题</figcaption>

更多标签：http://www.w3school.com.cn/tags/index.asp

a标签

• a标签 超链接
  三个用途：

1. 跳转页面
2. 下载文件
3. 锚点跳转
4. 打电话
5. 发邮件

书写方式：

<a target="打开方式"  href="跳转地址 或 下载地址 或 锚点"></a>

如果没有需要跳转的地方可以写个#，但是超链接必须要有href属性， 否则只是一个占位标签
特性：

1. 一行可以显示多个，父级宽度不够会换行显示
2. 不支持宽高
3. 换行会产生空格
4. 父级字体颜色的设置对其无效
5. 有下划线

● 跳转页面
target

• _blank 新窗口打开
• _self 在当前窗口打开

● 下载文件
download ：可以用来下载文件

● 锚点

<a href="#div1">网页首页</a>
<div id="div1" class="box1">网页首页</div>

跳转到href里对应的标签位置
● 打电话
Tel:400-996-0826

● 发邮件
Mailto:wuyou@kaikeba.com

---

伪类

---

基于元素的某些特征来进行分类
例如我们班可以根据某些特征来分类：

• 正在上班的
• 离职的
• 正在找工作的

a标签的特征：

:link - 没有被访问过的
:visited - 被访问过的
:hover - 鼠标经过时的样式
:active - 鼠标单击下，没松开的时候

标签语义化

其实这些新增的标签对我们页面的构建，并没有带来实质性的变化，如下：

<div id="header"></div>  没有header以前

<header id="header"></header> 有了header

我们会发现两个呈现出来的效果是一样的，那为什么要有这样的标签？难道就为了让我们多背两个标签么?

优点1：语义化：
为了让结构看上去更加清晰、易读，程序员看到这个标签，就知道是一个 头部，至于是谁的头就靠你 id命名的语义化了
优点2：
浏览器更清晰的知道，当前这块是什么内容
优点3：
SEO优化
搜索引擎优化，搜索关键词的时候，让你的网站显示更靠前的位置。

爬虫会根据你输入的关键词，爬取大量的网站，爬取的时候，会根据你不同的标签，着重找内容，而不是读你的整个网页。

SEO优化，我们可以做什么？
1.title标签
2.在页面中添加关键词及描述

<meta name="keywords" content="开课吧，Web前端开发，javaEE架构师，python爬虫/大数据，机器学习/人工智能，产品经理，c4d，ui设计/uxd">
<!-- 上面是关键词，下面是描述 -->

<meta name="description" content="开课吧是为互联网从业者提供技能提升，集一线大型互联网公司的用人需求和核心技能，与企业级认证师资合作，提供Web前端架构师、JavaEE高级架构师、人工智能、python爬虫、产品经理、UXD全栈设计、C4D设计的直播课程。">

3.权重标签的使用
(1)h1
(2)h2
(3)h3
(4)h4
(5)h5
(6)h6

4.代码精简
5.图片优化（jpg 和 png 都可以的时候，选择jpg）
6.网页结构合理