HTML+CSS基础到精通系统学习

1：HTML纯干货学习后的达到的效果

（1）：会使用HTML的基本结构，创建网页

（2）：会使用文本字体相关标签，实现文字修饰和布局

（3）：会使用图像、超链接相关标签，实现图文并茂的页面

（4）：会使用表格相关标签，实现简单表格，跨行、跨列的复杂表格，并对表格进行美化修饰

（5）：会使用表单及表单元素标签，实现表单页面的制作

（6）：理解post和get两种提交方式的区别

2：HTML的基本结构

2.1：标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内，<head>标签定义的内容在网页中不可见

2.2：<TITLE>：定义网页标题

2.3：<meta>标签

<HEAD>

</HEAD>

2.4：文本、图像和链接。它包括在 <BODY>…</BODY> 标签内

hello world!!!

</BODY>

2.5：<HTML>…</HTML>标签标记 HTML 文档的开始和结束

2.6：标题标签(H1 到 H6 标签用于指定不同级别的标题)

<h1><h2><h3><h4><h5><h6>字体大小依次递减

2.7：字体字号<font>标签

</font>

2.8：特殊符号

空格： 

引号("")："

小于(<)：<

大于(>)：>

版权符：©

2.9：段落和换行

段落标签：<p aligin="right/center/left"></p>

换行标签：<br/>

2.10：水平线和列表和预格式文本

水平线：<hr size="5" color="red" width="300">标签

设置水平线的厚度值，颜色和宽度

列表标签：

有序列表：

...

</ol>

无序列表：

...

</ul>

预格式段落：<pre>标签

2.11：图像标签

2.12：超链接<a>标签：

设置超链接的显示位置：

target：目标窗口属性四个特殊的窗口

<a href=url target=“_blank”> 显示在新窗口

<a href=url target=“_self”> 显示在本窗口

<a href=url target=“_parent”> 显示在父窗口

<a href=url target=“_top”> 显示在整个浏览器窗口

注意重点：

超链接-锚记属性：

链接到本页面

锚记标签用于使用户“跳”到文档的某个部分

步骤1：创建锚记

步骤2：在超链接的 href中使用该锚记

2.13：表格的基本结构

在 HTML 文档中，广泛使用表格来存放网页上的文本和图像

语法如下：

<tr>

</tr>

</table>

跨多行的表格：

rowspan =“n” 属性表示跨多少行？

<td rowspan="3">学生成绩表</td>

跨多列的表格：

colspan=“n” 属性表示跨多少列？

<td colspan="3">学生成绩表</td>

2.14：表格的美化修饰（表格的宽度，高度，背景色，背景图片，文字的对齐方式）

设置表格的尺寸和边框：

width用来设置表格的宽度

height用来设置表格的高度

border用来设置表格边框尺寸大小

bordercolor用来设置表格边框颜色

设置背景：

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色

值，RGB指的是红绿蓝，下图就是RGB颜色对照表。

设置对其方式：

align属性用来设置表格、行、列的对齐方式

填充属性、间距属性：

border(边框的厚度)

cellpadding(单元格填充)用来设置表格内填充距离

cellspacing(单元格间距)用来设置表格内框宽度

2.15：表单

表单的典型应用：

注册用户

收集信息

反馈信息

为网站提供搜索工具

表单中包含的表单元素：

单行文本输入框(TEXT)

type="text";文本输入框

value="";输入元素的默认值

size="";文本框的宽度

密码框(PASSWORD)

type="password";密码框

value="";初始密码

size="";密码区的宽度

单选按钮(RADIO)

type="radio";单选按钮

value="";初始值

checked="checked";默认选中

复选框(CHECKBOX)

type="checkbox";复选框

name="":复选框名

value="";复选框值

checked="checked";设置此复选框默认被选中

重置按钮(RESET)

type="button/reset/submit";按钮类型可为button、submit,reset

name="":按钮名称

value="";按钮上面的文字

多行文本框(TEXTAREA)

文本框中的内容

</TEXTAREA>

name="textarea" ;文本框的名字

cols="40";文本框的列数

rows="6";文本框的行数

下拉列表(SELECT)

…

</option>

…

</option>

……

</select>

说明： selected默认被选中的可选项。

案例说明

<INPUT name="byear" value="yyyy" size=4 maxlength=4 >年

maxlength=4;设置此输入框最多只能输入四个符号

提交按钮(SUBMIT)

表单的基本结构：

……

</FORM>

ACTION = “URL”；指定提交后，由服务器上那个处理程序处理

METHOD =“post或get”；指定向服务器提交的方法:一般为post或get方法,

post方法比较安全

表单元素的统一格式：

<INPUT type="xxx" name="xxx" value="xxx" size="21“ maxlength="4"

checked="checked">

……

</FORM>

type="";指定元素的类型，可为TEXT、RADIO、SUBMIT等

name="";控件的名称

value="";控件的初始值

size="";控件的初始宽度

maxlength="":控件中输入的最多字符个数

checked="":控件是否被选中

2.16：框架

（1）：框架集页面(FrameSet.htm)

（2）：广告栏顶部框架(top.htm)

（3）：框架的边框

（4）：导航栏左侧框架(left.htm)

（5）：详细内容页面右侧框架(main.htm)页面中此部分是变化的

框架的基本结构：

</FRAMESET>

rows=""; 将窗口进行上下分割，各部分的高度用逗号分开

cols: 将窗口进行左右分割，各部分的宽度用逗号分开,可选。

在浏览器中创建左中右结构的窗口： <frameset cols="150,*"...>

border="5"；窗口边框的宽度

使用框架：

创建多个复杂的窗口实现步骤如下：

1、创建1个HTML页面“top.html”

2、创建1个HTML页面“left.html”

3、创建1个HTML页面“right.html”

4、创建框架集HTML页面“Frame_Sets.html”

<FRAME src="top.html" name="topframe“ scrolling="no"

noresize="noresize">

<FRAME src="left.html" noresize="noresize“ scrolling="no"

name="leftframe“ >

</FRAMESET>

frameborder="0"；设置无框架边框

scrolling="no" ；不显示滚动条

name="rightframe"；框架名称，便于超链接target属性所引用

设置超链接的显示位置：

框架指定名称

target 给超链接指定显示位置

<P>

</a>

</p>

<P>

</a>

</p>

target="rightframe"；target属性指定了要链接的文件会出现在名称

为“rightframe”的框架窗口里

3：CSS纯干货学习后的达到的效果(CSS层叠样式表)

（1）：会创建统一外观的字体

（2）：文本会创建无下划线的超连接样式

（3）：会创建个性化的表格

（4）：会创建个性化的表单

（5）：会使用DIV实现页面布局

（6）：CSS样式表

HTML标签的外观样式比较单一

颜色只有黑白

字体类型和大小无变化

CSS（Cascade Style Sheets）级联/层叠样式表

作用：

HTML页面的美化（相当于华丽的衣服）

实现内容与样式的分离，方便团队开发

4：CSS语法学习

4.1：样式表的基本语法

样式表的基本结构：

P{color:red; font-size:30px; font-family:隶书;}

……

</STYLE>

</style>声明文档样式表结束

p{....}样式规则;

样式规则：

P {color:red; font-size:30px; font-family:隶书;}

p:选择器

属性名称：color:red; font-size:30px; font-family:隶书;

注意：在最后一个属性后面加上一个分号 (;) 是一个好习惯

4.2：样式的分类

根据样式代码的位置，分为三类：

行内样式：

使用场景：如果希望某段文字和其他段落的文字显示风格不一样，

那么使用用“行内样式”。

使用语法：行内样式使用元素标签的 STYLE 属性定义。

<html标签 ... style="样式规则">xxx</html标签>

<p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-

size:24px">

...

</p>

内嵌样式：

行内样式表局限于某1个标签，如果希望本网页内的所以同类标签都采用统一样式，

这时应采用内嵌样式。

P { font-size:20px; color:blue; text-align:center }

选择器名称，样式规则，样式表；

根据选择器的不同，内嵌样式又分为：

HTML 选择器：

P { font-size:20px; color:blue; text-align:center }

CLASS 类选择器：

.myinput {border: 1px solid;border-color:#D4BFFF;

color:#2A00FF}

类选择器的定义格式为：

.类名{ …样式规则;}

应用类选择器：class＝"类名(不含 . )"；

ID 选择器：

#fire { color:red; font-size: 24px; }

ID选择器的定义格式为：

＃ID名{ …样式规则;}

应用ID选择器：id＝"ID名(不含#)"；

CLASS和ID选择器的区别：

1、在CSS中定义样式表时，ID选择器以"#"开头；CLASS选择器以"." 开

头；

2、在HTML中使用样式表时，使用ID选择器需要id属性；使用CLASS选择

器需要class属性；

3、HTML标签中的id属性，通常用于唯一的标识页面中的一个页面元素，

不允许重复；class允许重复。

4、优先使用CLASS选择器；ID选择器不推荐。

内嵌样式-特殊的选择器：

A:hover 特殊的伪类选择：

其中A代表超链接

hover：代表鼠标悬停

active：当前活动的超链接

visited：访问过的超链接

link：未访问过的超链接

外部样式：

使用场景：同一网站内的多个网页，样式风格统一。

第一步：创建样式表文件newstyle.css

第二步：把样式文件和网页关联

<HEAD>

</HEAD>

第三步：浏览查看各网页

样式文件：newstyle.css P{…..}；

4.3：样式的混合使用

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：

有关整个网站统一风格的样式代码，放置在独立的样式文件*.css

某些样式不同的页面，除了使用外部样式文件，还需定义内嵌样式

某个网页内，部分内容”与众不同“，采用行内样式

对于某个HTML标签：

1）如果有多种样式，如果规定的样式没有冲突，则叠加；

2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还

没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。

4.4：常用样式属性-文本字体：

color: red / blue / #ff7300; 颜色

font-family: ”隶书”; 字体类型

font-size:20px; 字体大小(单位，px,em,ex)

text-align: center / left / right; 文本对齐

font-weight: bold / normal; 字体粗细

text-decoration: underline/none; 文本修饰

4.5：常用样式属性-边框

border-width: 1px; 边框粗细

border-top-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-width: 1px;

border-style:solid/dashed/dotted; 边框线类型

border-top-style、

border-bottom-style、

border-left-style、

border-right-style

border-color: #ff7300; 边框颜色

border-top-color、

border-bottom-color、

border-left-color、

border-right-color

border: 1px solid #ff7300 缩写

4.6：常用样式属性-背景

背景颜色

background-image:url(“xxx.gif”); 背景图片

background-repeat: repeat/no-repeat/repeat-x/repeat-y; 背景是否重复

background-position:center/left/right/top/bottom 背景图片定位

4.7：<SPAN> 标签

<SPAN>是行级层标签，不可以包含图片、标题、段落等，只能包含文字内容，对其中

的内容可单独做样式控制。

4.8：<DIV> 层标签

<DIV>是块级层标签，可以包含图片、标题、段落、文字等

DIV的样式属性：

position:absolute; 绝对定位

left:149px; x坐标

top:110px; y坐标

z-index:1; z坐标(位于哪一层)

width:357px; 宽

height:87px; 高

display: none/block/inline; 显示方式

DIV布局：

float属性：定义元素在哪个方向浮动

left-左侧浮动，从左往右排列显示

right-右侧浮动，从右往左排列显示

none-默认，显示在文档中定义的位置

盒模型：

每个元素都被看作一个矩形框（盒子），由内容、padding（填充/内边距）、

border（边框）和margin（空白边/外边距）组成。

来源链接:

本文作者为Mr.Bai，转载请注明。