第二天

1.html概念：

1）2014年正式版本

[if !supportLists]2）[endif]工作流程

[if !supportLists]3）[endif]网站的建站流程

[if !supportLists]2. [endif]基础知识：

[if !supportLists]1）[endif]html 超文本标记语言

[if !supportLists]2）[endif]语法；①双标签<标签的名称属性=””>

②单标签<标签的名称/> 注:语法html5没有xhtml严格在html5签中“/” 可省略，但 xhtml不能

[if !supportLists]3. [endif]常用的标签的使用：

[if !supportLists]1） [endif]标题标签h1~h6 h1 唯一性的logo 只有6个

①h$*6{111} 解析结果：

111

.....

111

②ctrl+d

[if !supportLists]2) [endif]段落标签p

内容

有上下间距单行

[if !supportLists]3) [endif]列表标签：

①无序标签ul>li 多行li ul>li*n{内容} 有实心圆

②有序表签ol>li 多行li ol>li*n{内容} 有默认序号，从1开始

③自定义标签dl>dt{}+dd{} dd解释dt的内容要多行需要重新 dl

把无序列表前面的符号放进盒子里

另: 关于列表符号（序号）的改变

Type类型 a/A i/I 注：i/I 为罗马数字

例：

[if !supportLists]3）[endif]超链接a : 内容

①href 路径地址 title 提示文本

②target 打开窗口的方式：

1. _self 覆盖原窗口打开

[if !supportLists]2. [endif]_blank 在新窗口打开

另：控制当前页面所有的a标签打开窗口方式

[if !supportLists]4) [endif]图片标签img:

①src 图片的地址路径

②alt 当浏览器加载失败时的提示文本

另：width 宽 height 高 border 边框注：单位均为px（像素）

title: 所有html标签都可使用的提示文本

第三天

[if !supportLists]1）[endif]路径的使用

①绝对路径有盘符服务器无盘符工作中不可用

②相对路径

--同级找同级：目标文件的名字.后缀名

--上级找下级：目标文件的文件夹/目标文件的名字.后缀名

--下级找上级：../目标文件的名字.后缀名

[if !supportLists]2）[endif]常见标签之间的嵌套

-a和img之间的嵌套 a>img

-p和h之间的嵌套

--p不能嵌套h1

--h1能嵌套p

p和p之间不能嵌套

[if !supportLists]3）[endif]div和span

--div可以嵌套span div可以嵌套所有

[if !supportLists]4）[endif]加粗和倾斜

--加粗 b < strong

--倾斜 i

[if !supportLists]5）[endif]div : 盒子大的盒子用来包裹其他盒子作为页面布局

Span：盒子小的盒子用来包装一段文本或者一个文字作为页面布局显示

[if !supportLists]6）[endif]表格table>tr*n>td*n

--table 表格

-- tr 行

--td 列

--tr和td相交的部分是单元格

[if !supportLists]7）[endif]属性

--width/height/border 宽/高/边框设置html属性建议给父级添加

--bordercolor/bgcolor 边框颜色/底色

--cellspacing/cellpadding 单元格与单元格之间的间隔/单元格与内容之间的间距

--表格中的对齐方式

--水平方向对齐 align:left\tight\center 左\右\中心

--垂直方向对齐 valign：top\bottom\center 上\下\中

--合并单元格---跨行合行，跨列合列

--colspan 列合并

--rowspan 行合并

[if !supportLists]8）[endif]表单form 作用：收集用户信息

--表单框 form 是一个盒子

属性：

--action 后台地址

--name 表单框的名字

--method get/post 携带参数的区别

--？后面接的参数

--表单控件 input

属性

--name 表单控件的名字

--size 尺寸表单控件的宽度大小（字符数）

--maxlength 最大长度约束用户输入的字符数

--type 类型 text（文本）、password（密码）、radio（单选）、checkbox（多选）、submit（提交）、button（空按键）、等20多种

--value 提示文本会根据不同的type类型的属性值发生改变占位

--功能按钮：必须放在form标签中内

--submit 提交

--reset 重置

--button 空按钮需要绑定js事件

9）css语法组成

选择器{声明}=> 选择器{属性1：属性值1，属性2：属性值2，....... }

-选择器修饰的对象 html结果标签

-声明选中了对象需要用怎样的的属性进行修饰

-声明包含属性和属性值一定要写在大括号里冒号连接属性和性值属性值不许要用引号引起来（与html 不同）

当一个对象有多个声明的时候不区分先后顺序

10）css样式表的创建方式：行内样式表、内部样式表、外部样式表

--行内样式表

--需要在标签的内部创建的

--创建一个style属性

--属性值就是css语法中的声明

--内部样式表

--需要在head区域内创建

--创建一个style标签

--在style标签中书写css语法即可

--外部样式表

--在外面创建一个后缀名为.css的文件

--在css文件中书写css语法即可

--在head区域内使用link标签引入外部的样式即可

拓展：

--外部样式表的引入处理link还有 @import 但是@import有缺陷使用的少

--在head区域内创建一个style标签

--在标签内书写@import url（‘相对路径’）

Link与@import 的有区别

--link 引入样式表的时候结构和样式同时加载

--@import 方法先加载结构后加载样式

三种样式表的优先级：行内最大内部与外部与他们的书写顺序有关后写的优先级更高

[if !supportLists]11）[endif]css语法组成 css选择器{属性：属性值}

css选择器：标签选择器、id选择器、class选择器、包含选择器、群组选择器、通配符选择器、伪类选择器

标签选择器：-html 标签作为选择器出现 div、p、a..

id选择器：--在标签里面添加一个id属性属性值取名规范和站点一样

--在样式表中使用 #属性值名字{声明}

--作用：通常在一块区域只使用一次表示网页的外围结构

Class选择器：--在标签里面添加一个class属性

--在样式表中 . class的属性值名字

--作用：通常选择到的一类相同的对象修饰

包含选择器：--语法：父级选择器子级选择器{}

--作用：通过父级选择子级

群组选择器：语法：选择器1，选择器2，选择器3...{相同的声明}

--选择到相同的声明的选择器

通配符选择器：--固定用法 *{margin：0；padding：0}清楚浏览器的默认间距

--*表示选中页面中的全部的标签

--建议放在样式表中最上方

第四天

[if !supportLists]1）[endif]hover 鼠标移入

--改变自己格式：选择器:hover{}

--通过父级改变子级父级选择器:hover 子级选择器{}

[if !supportLists]2）[endif]css基础

--权重：优先级四位数字表示0000

--标签选择器 0001

--id选择器 0100

--class选择器 0010

--包含选择器相加

--群组选择器各自计算

--通配符选择器 0000

--伪类选择器 0010

--行内样式表 1000

注：！Important 优先级最高

--层叠性

--每个元素都可以有多个选择器

--选择器中的声明冲突的时候根据权重选择不冲突的情况就进行相加

[if !supportLists]3）[endif]浮动flaot 属性值：left right

--脱离文档流初始位置不存在

--停止条件

--包含框

--前一个含有浮动属性的元素

[if !supportLists]5) [endif]¹²吧12编程上角标

第五天

[if !supportLists]1） [endif]盒模型

--方向顺时针上右下左

--padding 内边距 top/right/bottom/left 不能为负

--marign 外边距 top/right/bottom/left 能为负 -重点:设置margin的时候要有包含框的接触!!!

第六天

[if !supportLists]1）[endif]文本大小font-size 默认16px 最小12px

em单位是相对与父元素字体大小进行取值 1em=父元素文字大小

[if !supportLists]2）[endif]文本类型font-family

--中文加双引号或者单引号

--英文只有一个单词时可以不加引号否则要加

[if !supportLists]3）[endif]文本加粗font-weigth

属性值：

--分9个等级100-900 （只可取整百）

100-500常规字体 600-900加粗字体

--bolder(更粗的) bold(加粗) normal(常规)

[if !supportLists]4）[endif]文本倾斜font-style： italic/oblique（更大）/normal;

[if !supportLists]5）[endif]文本行高line-height 设置行高与文本高度一致就好

[if !supportLists]6）[endif]文本属性的复合写法font:font-weight、font-style、font-size/line-height（不可换位）、font-family(不可不写)

[if !supportLists]7）[endif]文本颜色三种表示方法

--用英文单词

--十六进制

--rgb/rgba

[if !supportLists]8) [endif]对齐方式属性：text-align 属性值：left/right/center

[if !supportLists]9) [endif]首行缩进text-indent 针对第一行可以是负值

[if !supportLists]10) [endif]字/词间距 letter/word-spacing

--em单位是相对与父元素字体大小进行取值 1em=父元素文字大小

[if !supportLists]11) [endif]列表属性属性：list-style 属性值：disc(实心圆) circle（空心圆） square（实心方块）

none(去掉列表符号)

[if !supportLists]12) [endif]text-transform这个属性有3个值分别为；

--text-transform: uppercase把文字变成全大写

--text-transform: lowercase把文字变成全小写

--text-transform: capitalize变成首字母大写

[if !supportLists]12）[endif]背景颜色属性：background-color/background

[if !supportLists]13）[endif]背景图片属性：background-image ：url(相对路径)

[if !supportLists]14）[endif]背景平铺属性：background-repeat: 属性值：no-repeat（不平铺） repeat（默认） repeat-x(横向平铺) repeat-y(纵向平铺)

15)背景定位 backgorund-position:center

--水平方向值：left/center/right或数值

--垂直方向值：top/center/bottom或数值

16)背景固定 background-attachment:fixed(固定)/scrol（滚动）l

17)简写 background

18)下划线属性:text-decoration

--属性值：

--none：无

--underline：下划线

--overline :上划线

第七天

[if !supportLists]1）[endif]文本溢出属性:overflow 属性值：--hidden（隐藏）

--auto （自动）固定宽高、在一行内显示、超出去隐藏、隐藏便省略号

[if !supportLists]2）[endif]元素分类--块级元素可以设置宽高、独占一行、上下显示

--行内元素不可设置宽高、在一行内逐个显示

--行内块可以设置宽高、在一行内显示

3）元素转换属性：display 属性值：--block 块

--inline 行内

--inline-block 行内块

--list-item 列表项目

--隐藏

浮动=>行内快

[if !supportLists]3）[endif]white-space 空白空间

属性值：--nowrap 不换行（很重要）

--pre 保留空白

--pre-line 删除空格保留换行

--pre-wrap 保留换行和空格

[if !supportLists]4）[endif]基线对齐vertical-align:top\bottom\middle

第八天

[if !supportLists]1）[endif]定位属性：position

属性值：

--static(静态定位默认值）:静态定位

--relative(相对定位）：相对于初始位置、不脱离文档流

--absolute(绝对定位）：相对于父级的定位属性，若父级没有定位属性会一直往上查找直到浏览器会脱离文档流

--fixded(固定定位) :相对于浏览器进行位置偏移，会脱离文档流

sticky（粘性定位 css 新增属性值好用但是兼容性问题很多) ：相对+固定

[if !supportLists]2) [endif]定位的三要素

--元素对象：需要移动的元素

--参照物：元素移动参照物谁进行移动

--方向值：top/right/bottom/left

[if !supportLists]2）[endif]层叠性属性：z-index 属性值：auto/number（数字）值越大优先越高

4）锚点属性

5)跳转位置id=“id的属性值”

第九天

[if !supportLists]1）[endif]宽度自适应

--不设置或者设置为100%沾满浏览器全屏（通栏效果）

--脱离文档流=>根据内容决定宽高

[if !supportLists]2）[endif]高度自适应

--height不设置时为0 设置auto时会自适应

--元素设置为百分比的情况浏览器/图片

[if !supportLists]3）[endif]最大值高宽约束页面的比例、翻页门户网站

[if !supportLists]4）[endif]最小值高宽兼容自适应

[if !supportLists]5）[endif]高度塌陷（高度坍塌）万能清楚法

.clear-fix::after{

content:'';

width:100%;

height:0;

display:block;

overflow:hidden;

clear:both;

visibility:hidden;

}

[if !supportLists]6）[endif]伪对象/伪元素

--::before{content:’’}

--::after{contet:’’}

--first-letter/line{}

[if !supportLists]7）[endif]隐藏是几种方式

--display:none

--visibility:hidden

第十天

[if !supportLists]1）[endif]表单补充

下拉列表select>option

语法：

[if !supportLists]3) [endif]多行文本域textarea

表单域多行文本定义：

说明：

多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）

4)表单字段集

语法：

说明：

相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；

5)字段级标题

语法：

说明

legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素

6)提示信息标签

语法：

说明:

label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

7)上传文件框：

语法：

说明：type属性值新增的类型有：file文件类型，可进行文件的选择

8)单元格间距：

语法:border-spacing:value

说明：

单元格间距(该属性必须给table添加)表示单元格边框之间的距离不可取负值

9)合并相邻单元格边框：

语法：border-collapse:separate [ˈseprət]/collapse[kəˈlæps];

说明：

作用：合并相邻单元格边框(该属性必须给table添加)

separate(边框分开)默认值；

collapse(边框合并)

10)无内容时单元格的设置：

语法：empty-cells:show/hide;

说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏

11）显示单元格行和列的算法(加快运行的速度)：

语法：table-layout:auto/fixed

说明：

自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。

优点：灵活固定表格布局,加快运行的速度,允许浏览器更快的对表格进行布局

12）显示单元格行和列的算法(加快运行的速度)：

语法：table-layout:auto/fixed

说明：

自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。

优点：灵活固定表格布局,加快运行的速度,允许浏览器更快的对表格进行布局

13）

caption标记表示表格的名称，也叫表格标题。

设置表格标题的位置

caption-side:top/right/bottom/left

说明：

定义表格的caption对象放于表格的哪个位置，与caption对象一起使用； top为默认值；

left,right位置只有火狐识别更新了也不可用了top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;

14）数据行分组

表头

表体

表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。

提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用CSS 使这些元素改变表格的外观。详细描述： thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。

15)数据列分组

双标签

单标签

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。

Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性

16)

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

17)BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3、每个元素的margin box的左边，与包含块border box的左边相接触

4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

5、BFC的区域不会与float box重叠。

6、计算BFC的高度时，浮动元素也参与计算

18)

- 根元素 HTML

- float属性不为none ; left&&right

- position为absolute或fixed

- display为inline-block, flex

- overflow不为visible; auto hidden scroll

Overflow:auto

第十一天

[if !supportLists]1）[endif]语义化标签

section元素表示页面中的一个内容区块 div

header元素表示页面中一个内容区块或整个页面的标题

nav元素表示页面中导航链接部

article元素表示一块与上下文无关的独立的内容

aside元素在article之外的，与article内容相关的辅助信息

footer元素表示页面中一个内容区块或整个页面的脚注

figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

main元素表示页面中的主要的内容

hgroup:标题组

Mark高亮

兼容低版本浏览器：

无标题文章

111

111

你可能感兴趣的:(无标题文章)