用html语言定义盒子类,html基础知识笔记

HTML基础

1.1HTML文件的基本结构和W3C标准

1.1.1HTML简介

HTML是一种描述网页的语言，一种超文本标记的语言！

1.1.2HTML文件的基本结构

头部(head)

头部是网页的标题等基本信息

主体(body)

主题包括网页的内容信息

注意标签必须成对出现

1.2网页的基本标签

每个标签都有一对尖括号，此处省略

标题标签

h1 h2 h3 h4 h5 h6 (字体样式依次变小)

段落和换行标签

p  br

水平线标签

hr: 表示能产生一条水平线

字体样式标签

strong：能对字体进行加粗

em：能对字体进行倾斜处理

注释和特殊符号

注释：!--内容--

特殊符号：

空格：

大于号：>

小于号：&Lt

引号："

版权符号：?

1.3图像标签

语法：

1.4链接标签

超链接的基本用法

链接的文本或图像

超链接的应用场合页面间链接

锚链接

功能性链接

列表 表格 框架

2.1列表

无序列表

无序列表是一个项目列表使用项目符号标记无序列表。没有等级之分

无序列表由： ul 和 li 组成

有序列表

有序列表时由一个个列表组成，列表项由数字或字母组成

有序列表由：ol 和 li 组成

定义列表

定义列表是项目和注释的组合

定义列表由：dl dt dd组成

2.2表格

为什么使用表格

简单通用

结构稳定

表格的基本结构

单元格：表格的最小单元

行：一个或多个单元格横向堆叠而成

列：单元格的纵向排列

表格的基本语法表格标签：table

行标签(可以有多行)：tr

列标签(可以有多个单元格)：td

表格的对齐方式

水平方向

左对齐：align=“left”

右对齐：align=“right”

居中对齐：align=“center”

垂直方向

顶端对齐：valign="top"

下端对齐：valign="bottom"

居中端对齐：valign="middle"

基线端对齐：valign="baseline"

2.3框架

表单

3.1表单

表单的标签和属性

form标签来实现表单 input标签是辅助form的一个标签设定各种输入

form的属性值：

action:表示提交的地址，如果为空，表示本页

method

服务器发送数据的方法：post/get

post:表单上的数据作为数据块发送，不适用请求字符型 get:浏览器会创建一个请求，会返回指定的脚本

表单元素和格式

文本框(text)

例：

密码框(password)

例：

单选按钮(redio)

例：

复选框(checkbox)

例：

列表框(selected option)

例：

按钮

submit提交按钮

点击.内容会提交

reset重置

点击此按钮，实现重置

bottom普通

多行文本域

语法：

文件域

实现文件的选择

语法：

3.2表单的高级应用

设置表单的隐藏域

将type的值设置成hidden时，这时就可以隐藏文件的隐藏

表单的只读和禁用设置

只读场景：网站服务器不希望用户修改数据，这些数据在表单元素中显示。(属性设置readonly=“readonly“)

只有满足这个条件时，才能使用此功能。(disabled=“disabled”)

3.3语义化的表单

关于语义化

语义化：达到结构简单，代码简单。

语义化表单

域

fieldest:这标签实现域的定义。把元素放到这个标签内时，浏览器就会以特殊的方式显示出来，这些表单就可能有一个边界。

域标题

legend：标签就是给域设置的一个标题，

通常是这两个标签结合着使用。实现语意话表单

表单元素的注释

定义：使用一个标签对内容注释了，当用户点击此内容时，浏览器会自动聚焦到相应的表单元素上。

语法：标注的文本

注意：需要在输入的input标签中定义属性：id并赋值

初识CSS

4.1使用css的意义

什么是CSS

全称：层叠样式表，又称风格样式表，它是用来网页设计的，使网页漂亮，清晰！！

CSS在网站中的应用

可以设置字体的样式，大小，颜色，可以使图像，文本居中，超链接不同的效果，美化网页

CSS的优势内容与表现分离。可以用css样式独占一个文件(便于维护)

表现统一

具有丰富的样式

减少网页的代码量

运用独立的css，便于搜索引擎收录

4.2css的基本语法

css的基本语法结构

css由两部分组成，即选择器和声明，声明必须放在大括号中，可以是多条，每条声明由属性和值组成，属性和值用冒号隔开，语句以英文分好结束。

语法：选择器{属性：值;}

认识

STYLE标签是引入css样式的标签。此标签位于head标签中还要给此标签的头部属性赋值：type=”text/css“

css的选择器标签选择器

所有的标签都可以使用标签选择器

语法：标签{属性：值;}

类选择器当希望某个段落是另一种情况时，就最好引入类选择器

语法：.类名{属性：值;}

ID选择器当页面只需要使用一次时，选择id选择器！

语法：#id的名称{属性：值;}

4.3在HTML中引入css样式

行内样式

就是在html中的标签直接使用

没有实现内容与表现分离，没有体现css得到优势(不推荐使用)

内部样式

把css的代码直接写在head的style标签中，与html的文件位于通一个文件中

外部样式

单独创建一个css后缀的文件名，然后使用的时候直接通过链接式或导入式

链接外部样式表

必须在html的文件中使用link标签才能链接

语法：

导入外部样式

[email protected] url("style.css");--

样式的优先级

行内样式>类部样式>外部样式

ID选择器>类选择器>标签选择器

4.4css的高级应用

css复合选择器后代选择器

后代选择器就是把外层的标签写在前面，内层的写在里面，之间用空格分离。当标签发生嵌套时，内层就是外层的后代。

按标签进行嵌套

按选择器进行嵌套

3种互相嵌套

交集选择器

交集选择器是由两个选择器直接构成的，其结果是选中二则各自元素范围的交集。其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。两个之间不能有空格，必须连续书写

这种方式构成的选择器，将选中同时满足的两则定义的元素。也就是前者所定义的标签选择器，并且制定了后者的类型或者ID元素。

并集选择器

同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。

并集选择器是由多个选择器通过逗号链接而成的。

css的继承特性

继承的关系

所有的css都是由各个标签之间继承关系的。可以称之为父子关系

继承的应用

css继承子标签都会继承父标签的样式，风格，可以在父标签样式风格的基础上修改，产生新的样式，而子标签不会影响父标签

CSS美化网页元素

5.1使用css编辑网页文本

文本在网页中的意义

有效的传递页面信息

使用css美化过的页面文本，是页面漂亮美观

可以很好的突出页面主题

具有良好的用户体验

为了突出文字或语句，就得使用span标签 

字体的样式

font-family

font-size

font-style

font-weight

font

设置字体的类型

设置字体的大小

设置字体的风格

设置字体的粗细

在一个声明中同时进行

使用css网页排版文本

color

text-align

text-indent

line-height

text-decoration

设置文本的颜色

设置元素水平对齐方式

设置首行文本缩进

设置文本的行高

设置文本的装饰

5.2使用css设置超链接

超链接伪类

a{属性：值;}

a:hover{属性：值;}

使用css设置鼠标形状

default

pointer

wait

help

text

crosshair

默认光标

超链接指针

指示程序正在忙

指示可用的帮忙

指示文本

鼠标呈现十字状

5.3背景的样式

认识

标签

div可以把html文档分割成独立的，不同的部分，是用来进行网页布局

网页内容

背景属性背景颜色

背景图像背景图像 background-image：url(图像地址);

背景重复方式

repeat:沿水平和垂直方向平铺

no-repeat:不平铺

repeat-x：沿水平方向平铺

repeat-y:沿垂直方向平铺

背景

直接使用background:来给属性赋值；

设置超链接背景

5.4列表的样式

list-style-type列表标记类型none:无标记符号

disc:实心圆，默认类型

circle:空心圆

square:实心正方形

decimal:数字

list-style-image使用图像代替列表项标记 list-style-image:url(图片地址)；

list-style-position设置在何处放标记；

这个属性有两个值：inside和outside

list-style:统一设置列表的样式，直接加属性值就行！！

第六章：盒子模型

6.1盒子模型

6.1.1什么是盒子模型

div与盒子有一定的距离，这些距离与div构成了盒子模型的结构！盒子模型具有属性：内边距，外边距，边框

边框：相当于盒子的纸盒，一般具有一定的厚度！

内边距：位于边框内部，是内容与边框的距离！

外边距：位于边框外部,是边框与周围的间隙

6.1.2边距

具有三个属性：color width style

设置方法：border-color: border-width: border-style:

一般统一设置：border:color(颜色) width(宽度 ) style(类型/solid/dashed)：代表设置四边的颜色-类型-宽度一样

如果要分别设置：就是border-top-color: border-top-width: border-top-style: 依次类推

6.1.3外边距

定义：与其他盒子之间的距离。也就是指网页元素与元素的距离

常见的方法有:margin-top:z设置上外边距

常见的方法有:margin-right设置下外边距

常见的方法有:margin-left：设置左外边距

常见的方法有:margin-right：设置右外边距

合并：margin：？px;

margin:？px ？px;

6.1.4内边距

定义：内容与边框之间的距离，以便精确的控制内容的位置

padding-top:上内边距

padding-bottom：下内边距

padding-left：左内边距

padding-right：右内边距

6.1.5盒子模型的尺寸

盒子模型的尺寸:内边距+外边距+边框的宽度+内容的宽度

6.2标准文档流

标准文档流

组成：标准文档流：块级元素和内联元素组成！

块级元素：每一个元素都独占一个矩形区域，左右撑满，并且相邻的元素会想竖子方向排列。

内联元素：内容会横向排列，不会独占一个矩形区域。到最有端自动换行！！

display属性

block:

默认为块级元素,会带有换行符

inline:

内联元素：默认没有换行符

none:

设置元素不显示

第七章：浮动

7.1网页布局

网页布局分为多种：最常见的有3种

7.2浮动

浮动在网页中的应用

可以实现全局布局：可以对导航条，内容，标题进行布局。使用float属性！

float属性

left

元素向左浮动

right

元素向右浮动

none:

元素不浮动

例：float : left

7.3清楚浮动

清楚浮动影响

left

清楚左浮动

right

清楚右浮动

both

清楚左,右浮动

扩展盒子模型

在所有div盒子的后面加一个div

css那边设置{clear:both margin:0px padding:0px}

7.4溢出问题

overflow属性

解决内容溢出后的处理

visible:

默认值，内容不会被修剪，会呈现在盒子外面

hidden:

内容超出会被修剪，其余部分不看见

scroll

内容会被加上滚东条，会被修剪

auto

如果被修剪会出现滚动条(自动)

overflow属性的妙用

扩展盒子的高度：这样盒子就会被撑开

例：overflow:hidden:

原文：http://www.cnblogs.com/bdqnwangchao/p/7598372.html