前端初学阶段总结与笔记

1.开发工具

ie浏览器

火狐浏览器

谷歌浏览器

Edge浏览器

Safari浏览器

Opera浏览器

主要目的是显示网页用的

代码的书写软件（主流）

Dwcs6

Hbuilder Viscode

协助软件ps

3.浏览器内核分类

Trident（内核）

Gecko(firefox)

Presto(opera)

Webkit(safari)

Blink(chorem)

4.Web 标准

1.Web 标准也称网页标准，它由一系列标准组成，这些标准大部分由 W3C 负责制订，也有一些标准由其他标准组织制定的

2.主要由三部分组成

结构、表现和行为

结构：使结构清晰，逻辑结构完整html

表现;修饰样式css

行为:内容交互操作效果js

5.HTML骨架

<！DOCTYPE html>：声明一个html文档

<html>： html的根元素

<head>: 头部，包含了元数据（meta）

<titlt>: 文档标题

<body>: 文档的主体内容

<head>: html文档的头部包含

<title>:html标题

<base> :描述基本的链接地址

6.标签分类

双标签：<head></head>

单标签：</br>

关系

嵌套

<head>

</head>

2、并列

<body>

标签语义化的好处：

1. HTML结构清晰

2. 代码可读性较好

3. 无障碍阅读

4. 搜索引擎可以根据标签的语言确定上下文和权重问题

5. 移动设备能够更完美的展现网页（对css支持较弱的设备）

6. 便于团队维护和开发

7.排版标签

段落标签 <p>

3.水平线标签 </hr>

4.换行标签 </br>

8.链接标签

外部链接需要添加http://百度
内部链接直接连接内部网页<a href =”index。”>百度</a.>
没有确定值<a href =”i#”>百度</a.>
可以创建超文本

9.路径

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

绝对文件路径

绝对文件路径是指向一个因特网文件的完整

10.表格

table表格

border边框

cellspacing 合并外边框

cellpadding合并内容到边框的距离

<tr>行

<!DOCTYPE html> html的版本号
<html> html标签
   <head>
       <meta charset="utf-8" /> meta里面的编码格式
       <title></title> 标题
       <style type="text/css">

       </style>
   </head>
   <body> 所需要书写和编译的内容

表格

表格由 <table> 标签来定义。

例子：

<tr>

</tr>

<tr>

</tr>

</table>

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

1.border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。

表格标题

表格标题：caption

合并单元格

rowspan合并行

colspan合并列

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>

input 元素

</form>

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

1.密码字段

密码字段通过标签<input type="password"> 来定义:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

2.复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

3.提交按钮(Submit Button)

<input type="submit"> <input type="file"> 文件

留言板：<textarea>请输入留言</textarea>

3.表单域

常用属性：

1. Action

在表单收集到信息后，需要将信息传递给服务器进行处理

2. method

用于设置表单数据的提交方式，其取值为get或post。

3. name

用于指定表单的名称，以区分同一个页面中的多个表单。

正在上传…重新上传取消

查文档的网页推荐

正在上传…重新上传取消

三种表的样式总结

正在上传…重新上传取消

设置背景颜色

背景色属性（background-color）定义一个元素的背景颜色

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表

内联样式

当特殊的样式需外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择要应用到个别元素时，就可以使用内联样式

Css选择器

1.后代选择器

后代选择器用于选取某元素的后代元素

2.子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

3.相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

4.后续兄弟选择器（普通兄弟选择器）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

类选择器：

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用

ID 选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

伪类选择器：link ：visited ：hover ：active

：link 位访问的链接

：visited 已经访问过的链接会发生改变

：hover 鼠标移动到链接上会发生改变

：active 选定的链接

字体样式

1.字体系列

font-family 属性设置文本的字体系列。

字体样式

主要是用于指定斜体文字的字体样式属性。

用em来设置字体大小

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

并集选择器

与交集选择器不同，并集选择器是对两个标签同时进行修改样式。

并集选择器同样可以与id和class同时使用。

CSS外观属性

text-align属性用于设置文本内容的对平对齐，相当于HTML中的align对齐属性。
left 左对齐
right 右对齐
center 居中对齐
text-indent 首行缩进
text-decoration 文本的装饰