HTML+CSS要点3：常用标签和选择器

文本类标签

	<p>用于文本段落</p>
	<span>文本</span>
	并不具备任何含义，中间可以放置文本，对文本单独进行操作
	<strong>文本加粗，强调</strong> <b>文本加粗，强调</b>
	<em>斜体</em> <i>斜体</i>
	<mark>高亮</mark>
	<time>时间</time>
	<cite>引用</cite>
	<sup>上标文本</sup>
	<sub>下标文本</sub>

默认基线对齐

文字位置由四条线构成：顶线 中线 基线 底线
而图片img标签的基线就是图片底部，添加文字时由于默认行高下面会有留白解决办法是设置font-size: 0;

img标签

向页面中，添加一张图片，是个单标签哦。
书写方式：<img src="图片地址" title="鼠标停留的提示信息" alt="图片不显示时候的备用文字"/>
- 特性：
1. 一行显示多个，父级宽度不够，元素换行
2. 支持宽高
3. 宽高等比缩放（宽高同时设定，不会等比缩放）
4. img标签由于文字默认行高底部存在间隙（vertical-align:top;解决这个问题）
5. 换行会被解析出一个空格

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

a标签 超链接

特性：

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

用途

1. 跳转页面
   target

   • _blank 新窗口打开<a href="http://www.kaikeba.com" target="_blank"></a>

   • _self 在当前窗口打开

   <a href="http://www.kaikeba.com" target="_self">官网</a>
   <base href="页面所有相对路径 打开前置路径"  target="页面所有标签	打开方式"/>
   

2. 下载文件<a href="第五节课作业.zip">下载</a>

3. 锚点跳转<a href="#div1">网页首页</a>

4. 打电话<a href="tel:135xxxxxxxx">135xxxxxxxx</a>

5. 发邮件<a href="mailto:[email protected]">[email protected]</a>

伪类

注意顺序：lvha

标签语义化

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

优先级

行间样式 > id > class > 标签选择器 > *通配符

包含选择器优先级

通配符优先级         0,0,0,0
标签选择器的优先级   0,0,0,1
class选择器优先级     0,0,1,0
id选择器优先级       0,1,0,0

把用到的选择器的值加到一起，大的就是优先级高的，如果优先级程度一样，则按照书写顺序，以后面的为准