web前端的一些知识

Web前端的三大核心技术：
（1）：HTML -----结构
（2）：CSS-------样式
（3）：JavaScript-------行为

HTML的基础结构和属性：超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

HTML的初始代码：每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

HTML的注释： 注释的代码，只有在文件中看得到，但是浏览器显示不出来
样式：

标题与段落：h（标签），p（标签）

图片标签与图片属性：：图片
Src、alt、title、width、height
引入文件的地址路径：
（1）：.的意思是 在路径中表示当前路径
（2）：…的意思是 在路径中表示上一级路径

转跳链接： 标签
href
target
标签

无序列表：

• 、
• ：列表的最外层容器、列表项
  注：ul和li必须是组合出现的，他们之间是不能有其他标签的
  type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )

有序列表：

1. 、
2. ：列表的最外层容器、列表项
   注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
   type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )

定义列表：

：定义列表 ：定义专业术语或名词

：对名词进行解释和描述

表格标签：

：表格的最外层容器
： 定义表格行

：定义表格标题

： 定义表头	： 定义表格单元

表格属性：border ： 表格边框
cellpadding ： 单元格内的空间
cellspacing ： 单元格之间的空间
rowspan ： 合并行
colspan ： 合并列
align ： 左右对齐方式
valign ：上下对齐方式

表单标签： ： 表单的最外层容器 ： 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

type属性 含义
 text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio  单选框
file 上传文件
submit 提交按钮
reset 重置按钮

与 :

(块):div全称为division，“分割、分区”的意思，

标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在

标签中，

中还可以嵌套多层

，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。 （内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行

CSS基础语法: 格式：
选择器{ 属性1 : 值1 ; 属性2 : 值2 }
单位：
px -> 像素( pixel ) 、% -> 百分比
基本样式：
width、height、background-color
CSS注释：
/* CSS注释的内容 */

内部样式：在

外部样式：标签 rel href
@import
注：这种方式有很多问题，不建议使用。

CSS背景样式：
background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的平铺方式
background-position：背景图片的位置
background-attachment：背景图随滚动条的移动方式

CSS边框样式：
border-style：边框的样式
border-width：边框的大小
border-color：边框的颜色
注：针对某一条边进行单独设置

CSS文字样式：
font-family:字体类型
font-weight:字体粗细
font-style:字体样式
color：字体颜色
font-size:文字大小
文字大小写法：
属性取值 字体大小
 xx-small 最小
x-small 较小
small 小
medium  正常(默认值)
large 大
x-large 较大
xx-large 最大
注：字体大小一般为偶数。

CSS段落样式：
text-decoration：文本装饰
取值 添加多个
text-transform：文本大小写
取值
text-indent：文本缩进
首行缩进 em单位
text-align：文本对齐方式
取值
line-height：定义行高
定义 默认 取值

CSS选择器：
ID选择器：css：#elem{} html:id=”elem”
注：

1. 在一个页面中，ID值是唯一的。
2. 命名规范， 字母 _ - 数字（命名的第一位不能是数字）。
3. 命名方式，驼峰式、下划线式、短线式。

class选择器，也可以叫类选择器：
css:elem{}
html:class=”elem”
注：

1. class选择器是可以复用的。
2. 可以添加多个class样式。
3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4. 标签+类的写法

标签选择器：
css:div{}
html:

群组选择器：
css:div,p,span{}

通配选择器：
*{}

伪类选择器：CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:after、:before
:checked、:disabled
:focus

:nth-of-type()、 :nth-child()

:first-of-type、 :first-child

:last-of-type、 :last-child

:only-of-type、 :only-child

link、:visited、:hover、:active
注：

1. link visited 只能给a标签加，hover和active 可以给所有的标签加。
2. 如果四个伪类都生效，一定要注意顺序 : L V H A。
3. 一般网站只这样去设置：a{} a:hover{}。