html&css基础知识

html

常用基础标签

带有语义的标签

• em，强调
• strong ，比em强调级别更高
• abbr，定义缩写，与title属性相互搭配使用
• address，定义地址元素
• blockquote，定义块引用，通常情况下会产生缩进
• cite，通常情况下，某段话引子某本书，可以使用cite进行说明
• ins，定义被插入文本
• del，定义被删除文本

带有一定样式的标签

• b，定义粗体文本
• i，定义斜体文本
• big，定义大号文本
• small ，定义小号字体文本
• sup，上标文本
• sub，下标文本
• bdo，定义文本显示方向，属性：dir，值，ltr，rtl

输出类标签

• pre，代码中样式原样输出
• code，定义计算机代码文本
• kbd，定义键盘文本
• var，定义变量

功能类标签

a标签

• 定义超链接实现页面跳转
• 定义锚点实现书签功能

列表

• 无序列表 ul，li
• 有序列表 ol，li

页面嵌套

• iframe

图片

• 常用属性：
  alt，图像替代文本
  width，height
  ismap，定义图像映射的一张图像
• 通过img实现图像映射：
  map 标签； area 定义图像映射内部的区域
• 链接跳转的图像：
  将图片嵌套在a标签中

表格

• 表格标题 caption 标签
• 表格页眉 th 标签
• 表格的行 tr 标签
• 表格的单元格 td 标签
• 表格的头部 thead 标签
• 表格的主干 tbody 标签
• 表格的尾部 tfoot 标签

*页面所有链接的基础链接

• 标签（位于head标签内部）

表单

输入域<input>：

• type属性：button,file,hidden,text,password,radio,checkbox,image,reset,submit.
• alt属性，定义当按钮为图片时，图片的替代文本
• src属性，定义当按钮为图片时，图片的链接地址
• checked属性，定义默认选项
• disabled属性，禁用当前输入域
• readonly属性，对当前输入域只读
• maxlength属性，定义输入域字符的最大长度
• name属性，定义当前的输入域的名字
• value属性，定义当前输入域的默认值

文本输入区<textarea>：

• cols属性，规定可见列数
• rows属性，规定可见行数
• disabled属性，禁用当前文本输入区
• name属性，当前文本区的名字
• readonly属性，当前文本区域只读

按钮：

• disabled属性，禁用此按钮
• name属性，按钮名字
• type属性，按钮类型
• value属性，按钮上显示文本内容的默认值

下拉菜单

表单中的标记<label>

表单中相关元素分组<fieldset>

css

什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的使用方式

1. 内联样式，也称行内样式，写在标签内的样式，只影响该标签内的元素。适合范围，除<script>外的所有子标签。
2. 内部样式，定义在style标签中，放在head标签中，设置的样式可以影响整个HTML页面。
3. 外部样式，将CSS样式编写并安放在一个独立的.css文件内。

CSS基础选择器

• html选择器：
  通过html标签名来选择元素:
    1. 所有的html标签都可以当做选择器
    2. 无论标签藏多深都会被选中
    3. 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。

• class选择器：
    1.任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。大小写敏感 ，id的名字中可以有数字字母下划线，但是要以字母开头。
    2.但是id名不能够重复

• id选择器：
     1.任何的标签都可以使用class属性(class属性也是一个全局属性)
     2.class属性名可以重复使用
     3.一个class属性中，可以有多个class属性值。

块级元素和行内元素

概念

• 块级元素：是指块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。例如<div>标签。
• 行内标签：可以在同一行内分布。如<span>标签。

两种元素的区别

1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
2. 块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
3. 如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。

块级元素和行内元素的转换

使用display属性进行转换。如下：

display：block ,inlin-block

综合选择器

• 后代选择器:div p
• 交集选择器:h3.test
• 并集选择器:div,p
• 子（直系儿子）元素选择器:div>p
• 序列选择器:ul li:first-child ul li:last-child
• 相邻兄弟选择器:div+p
• 普通兄弟选择器:div~p

CSS的继承性和层叠性

• CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定 html 标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于 p 标签，这个颜色设置不仅应用 p 标签，还应用于 p 标签中的所有子元素文本，这里子元素为 span 标签。
• 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
• 权重问题： 通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

注释：!important 能够把"单独属性"的权重变为无限大。 尽量少用。