HTML+CSS基础

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

---

目录

HTML常用标签

CSS基础

三大特性

常用属性

---

HTML常用标签

• 网页的基本标签:

  1. 标题标签：<h1~h6>

  2. 段落标签：<p>

  3. 换行标签：

  4. 水平线标签：<hr>

  5. 注释<!--  -->

  6. 特殊符号

• 图像标签：img

• 超链接标签：<a href   >

1. 锚链接

2. 功能性标签：QQ

• 行内元素和块元素

• 列表：

  1. 有序列表      <ol>    <li></li>       </ol>

  2. 无序列表      <ul>     <li></li>                    </ul>

  3. 自定义列表  <dl>          <dt>            <dd></dd>         </dt>         </dl>

• 表格

  1. 列:td

  2. 行:tr

  3. 跨行:rowspan

  4. 跨列:colspan

• 媒体元素

  1. 音频:audio

  2. 视频:video

• 网页的简单布局

  1. 头部:header

  2. 脚部:footer

  3. 主体:section

• 内联框架：iframe

• 表单：

  1. post/get

  2. 文本框

  3. 密码框

  4. 单选框

  5. 多选框

  6. 按钮

  7. ……

 

• 表单应用

  1. 隐藏域

  2. 只读

  3. 禁用

• 表单的初级验证

  1. 用户提示placehoder

  2. 非空判断required

  3. 正则表达式parrent

---

CSS基础

CSS发展历史

CSS1.0

CSS2.0 DIV(块）+CSS，HTML和CSS结构分离的思想，网页变得更简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，边框，阴影，动画，浏览器的兼容性~

作用：表现

CSS:Cascading Style Sheet 层叠样式表（美化网页）

HTML：Hyper Test Markup language 超文本标记语言

引用方式

1. 行内样式：在标签元素中，编写一个style属性，编写样式即可

2. 内部样式

3. 外部样式

优先级：就近原则！！！

拓展：CSS2.0@

外部样式两种写法

• 链接式

  <!--外部样式-->
  ​
  <link rel="stylesheet"href="css/style.css">

• 导入式

<!--导入式-->
<style>
@import url("css/style.css");
</style>

---

三大特性

层叠性,继承性,优先级

1. 层叠性

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

   层叠性原则：

   样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。

   样式不冲突，不会层叠。

   简而言之，相同覆盖，不同保留，这就是层叠性；

2. 继承性

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

   恰当地使用继承可以简化代码，降低 CSS 样式的复杂性

   子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3. 优先级

   • 权重是有4组数字组成,但是不会有进位。

   • 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

   • 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

   • 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为10, id选择器100, 行内样式表为1000, !important 无穷大.

   • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

   权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

常用属性

• 字体：

1. font-style（字体风格）

   normal正常

   italic 斜体<i>或者<em>

2. font-weight(字体粗细)

   normal 400

   bold 700(粗体)

   100~900

3. font-size(字体大小)

   最常用px（em，in,cm,mm,pt不常用）

4. font-family(字体)

   常用字体：宋体，微软雅黑，黑体

5. font(设置综合字体)

   p { font: font-style  font-weight  font-size/line-height  font-family; }

   按顺序

   不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

6. color：文本颜色

   表示	属性值
   预定义的颜色值	red，green，blue
   十六进制**	#FF0000，#FF6600，#29D794
   RGB代码	rgb(255,0,0) 或 rgb(100%,0%,0%)

1. text-align(文本内容水平对齐方式)

   left：左对齐

   right：右对齐

   center:居中

2. line-height（行高）

3. text-indent（首行缩进）

4. letter-spacing（字母间距）

5. word-spacing（单词间距）

6. 文字透明度

   color：rgba（r，g，b，a）a是不透明度0~1之间

7. text-shadow（文字阴影）

   h-shadow（水平阴影）

   v-shadow（垂直阴影）

   blur（模糊的距离）

   color（阴影的颜色）

• 标签显示模式

  1. 块级元素

     块级元素有<h1>、<p>、<div>，以及列表标签<ul>、<ol>、<li>、<dl>、<dt>、<dd>等

  2. 行内元素

     行内元素有<a>、<span>、以及文本格式化标签<b>、<strong>、<i>、<em>等
         
      

1. 行内块元素

• 背景

  1. 背景图片（image）

  2. 背景平铺（repeat）

  3. 背景附着（attachment）

     scoll/fixed

  4. 背景位置（position）

  5. 背景颜色（color）

     background-color

  6. 背景缩放（background-size）

     其参数设置：长度 | 百分比 | cover | contain（不会变形）

  7. 背景渐变（linear-gradient）

     background: linear-gradient(起始方向, 颜色1, 颜色2, ...)

     背景渐变必须添加浏览器私有前缀

     起始方向可以是方位名词或者度数，如果省略默认就是 top，方位名词有 top left bottom right，如果起始方向有两个值，代表从对角，比如：left top 代表从左上角