HTML 常用标签、CSS 基础（CSS 发展历史、作用、引用方式、三大特性、常用属性）

一、HTML常用标签

1.文本标签

• 标题标签：h1~h6

一个页面建议只有一个h1

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

• 强调加粗：strong

• 加粗：b

• 强调倾斜：em

• 倾斜：i

• 强调删除线：del

• 删除线：s

• 强调下划线：ins

• 下划线：u

我是<strong>加粗</strong>的文字,语气强烈。
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字，语气强烈。
我是<i>倾斜</i>的文字
我是<del>删除线</del>的文字，语气强烈。
我是<s>删除线</s>的文字
我是<ins>下划线</ins>的文字，语气强烈。
我是<u>下划线</u>的文字

---

2.格式化标签

• 段内换行：br

单独出现的标签，直接结束

行间距比段落标签间距小

    <p>换行<br/>标签</p>

•  局内分组：span

组合行内元素，以便通过CSS样式来格式化

• 段落：p

    <p>段落标签，每个段落自动换行</p>
    <p>段落标签，每个段落自动换行</p>
    <p>段落内部文字忽略连续      空格</p>

• 预留格式：pre

定义预格式化的文本，文本中的空格和换行符会被保留

    <pre>
        这是预留格式文本。他保留了    空格
    
        和空行
    </pre>

• 水平线：hr

<p>正文段落</p>
    <hr />
<p>正文段落</p>

• 注释：<!--注释内容--!>

---

3.超链接标签

<a>：a为单词“anchor”(锚)的缩写。

<a href ="网址"(必须属性) target="目标窗口的弹出方式"> 文字或图片</a>

target打开窗口默认"_self",当前窗口打开。"_blank"为在新窗口的打开方式。

• 外部链接

必须http://开头

<a href="http://www.baidu.com" target="_blank">百度链接</a>

• 内部链接

网站内部页面之间的相互链接，直接链接内部页面名称即可

<a href="同一级路径.html">内部页面链接</a>

• 空链接（虚拟超链接）#

如果当时没有确定链接目标时

<a href="#">板块1</a>

• 下载链接

如果href里面的地址是文件或者压缩包，会下载这个文件(地址链接的是文件 .exe或者是.zip等压缩包形式)

<a href="img.zip">下载文件</a>

• 网页元素链接

在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加链接

<a href="http://www.baidu.com"><img src="baidu.jpg" />/a>

• 锚点链接

当我们点击链接，可以快速定位到页面中的某个位置

    (1)在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>

    (2)找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

<h1 id="123">标题标签</h1>
<a href="#123">返回顶部标题标签</a>

4.超链接标签

网页中常见的图像格式：JPG、GIF、PNG

GIF：简单动画、背景透明

PNG：无损压缩、透明、交错、动画

图像标签<img>的使用： src="图片路径"，是必须属性

<img src="img.jpg"/>

    alt 替换文本 图像显示不出来的时候用文字替换

<img src="img1.jpg" alt="替换文字"/>

    title 提示文本 鼠标放到图片上，提示的文字

<img src="img.jpg" title="666666"/>

    width 给图像设定宽度

<img src="img.jpg" width="500"/>

    height 给图像设定高度

<img src="img.jpg" height="200"/>

    border 给图像设定边框

<img src="img.jpg" border="15"/>

图像路径：

图像位于HTML文件下一级“/”

<img src="images/img.jpg" />

绝对路径，注意反斜杠"\"

<img src="C:\Users\040713\Desktop\新建文件夹 (2)\img.jpg" />

网络上的绝对路径

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />

图像位于HTML文件上一级“../”，上两级“../../”

<img src="../img.jpg" />

5.列表标签

• 无序列表ul、li

    <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        ...

    </ul>

• 有序列表ol、li

    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        ...
    </ol>

• 自定义列表dl、dt、dd

特点：dd前会默认显示缩进效果

    <dl>
        <dt>列表1</dt>
        <dd>列表2</dd>
        <dd>列表3</dd>
        ...
    </dl>

6.区域标签

div标签独占一行

span一行上跨距显示,一行可以多个span标签

<div>这是盒子div标签占一行</div>
<span>这也是盒子</span>
<span>一行上跨距显示,一行可以多个span</span>

7.表格标签

<th>标签，表示表格的表头部分(table head的缩写)

表头单元格一般位于表格的第一行或第一列，表头单元格里面的文本内容加粗并居中显示。

<table>

            <tr>

                <th>姓名</th>

                <th>性别</th>

                ...

            </tr>

            <tr>

                <td>张三</td>

                <td>男</td>

                ...

            </tr>

</table>

    <table>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>3</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>5</td>
      </tr>
    </table>

• 表格属性标签(要写到表格标签table里面去)：

1.align：规定表格相对周围元素的对齐方式

2.border：规定表格单元是否有边框，默认为""，表示没有边框

3.cellpadding：规定单元边沿与其内容之间的空白，默认1像素

4.cellspacing：规定单元格之间的空白，默认2像素

4.width/height规：定表格的宽度/高度。

• 表格结构标签（更好的表示表格的语义）

1.thead：表格的头部区域，内部必须有<tr>标签

2.tbody：表格的主体区域

• 单元格的合并

1.rowspan：跨行合并"合并个数"

最上测单元格为目标单元格，写合并代码

1.colspan：跨列合并"合并个数"

最左侧单元格为目标单元格，写合并代码

    <table align="center" border="1">
      <tr>
        <th></th>
        <th colspan="3">属性</th>
      </tr>
      <tr>
        <th rowspan="3">成员</th>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>3</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>5</td>
      </tr>
    </table>

8.特殊字符标签

特殊字符		字符的代码（小写）
	空格符	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
￥	人民币	&yen
©	版权	&copy
®	注册商标	&reg
°	摄氏度	&deg
±	正负号	&plusmn
×	乘号	&times
÷	除号	&divide
2	平方2（上标2）	&sup2
3	平方3（上标3）	&sup3

---

二、CSS基础

1.CSS 发展历史

• 1994年开始设计CSS
• 1996年12月发布CSS1
• 1998年5月W3C发布CSS2
• 2011年6月7日发布CSS3
• 2011年9月29日开始设计CSS4

2.作用

• 在几乎所有的浏览器上都可以使用。
• 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
• 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
• 可以轻松地控制页面的布局 。
• 可以将许多网页的风格格式同时更新。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
• 可以节省大量时间。
• CSS提供了一种简单的方法来更新文档的格式，并保持多个文档之间的一致性，使得维护变得简单容易。

3.引用方式

（1）内行样式表

    <p style = color:red;”>
        内行样式表
    </p>

（2）内嵌样式表

<html>
<head>
    <style type="text/css">
      p{
           color:red; /*设置字体颜色*/
        }
    </style>
</head>
<body>
    <p >
      内嵌样式表
     </p>
</body>
</html>

注意：

即使有公共CSS代码，也是每个页面都要定义的

适合文件很少，CSS代码也不多的情况

如果一个网站有很多页面，每个文件都会变大，后期维护难度也大

（3）外部样式表

外部样式表文件： style.css

p { 
   color:blue; /*设置字体颜色*/

}

<!doctype html>
<html>
<head>
</head><link rel="stylesheet" href="css/style.css" />

<body>
<p>外部样式表</p>
</body>
</html>

注意：

页面结构HTML代码与样式CSS代码的完全分离

维护方便

如果需要改变网站风格，只需要修改公共CSS文件

可以在同一个 HTML 文档内部引用多个外部样式表

CSS优先级

多重样式可以层叠，可以覆盖

样式的优先级按照“就近原则”：

行内样式> 内嵌样式> 链接样式>浏览器默认样式

选择器

（1）元素选择器：

语法：标签名{}

用法：选中对应元素/标签里面的内容

p {
	background:#CF0
}

（2）id选择器

语法：#id属性值{}

用法：选中对应id属性值的元素

css：
#banner{
    background:#3FF
}

html：
<body>
<p id="banner">abc</p>
</body>

（3）类选择器

如果想要差异化选择不同的标签，单独选择一个或几个标签，可以使用类标签。

 语法：.class属性值{}

 用法：选中对应class属性值的元素。需要用class属性来调用class的意思

类选择器在html中以class属性展示，在css中，类选择器以一个点“.”号显示。

语法：

.类名{
    属性1：属性值1；
    ...
}

.red{
    color: red;
 
}

<body>
<p class = "red">abc变红色</p>
</body>

（4）通配选择器

语法：*{}

用法：选中页面中所有元素。使用该选择器定义样式，清除所有HTML标记的默认边距。

单独使用时，这个选择器可以与文档中的任何元素匹配，就像一个通配符。

*{
margin：0;        /* 定义外边距 */
padding：0;       /* 定义内边距 */
border: thick solid #066;
}

<body>
<p class = "red">abc变红色</p>
<div>
<div>hello</div>
</div>
</body>

4.三大特性

（1）层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

（2）继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当地使用继承可以简化码，降低CSS样式的复杂性
• 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及color属性）

（3）优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

通配符选择器	0
标签选择器、伪元素	1
类名选择器、属性选择器、伪类选择性器	10
id选择器	100
内联样式	1000
！important	无穷大

5.常用属性

大小：font-size

样式：font-style

行高 ：line-height

粗细 ：font-weight

变体 ：font-variant

大小写 ：text-transform

修饰 ：text-decoration

色彩 ：background-color

图片 ：background-image

重复 ：background-repeat

滚动 ：background-attachment

位置 ：background-position