HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

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>

<META name="author" content="zpark">

<!--定义网页的作者-->

<META name="keywords"content="云计算,分布式处理,大数据,...">

<!--定义网页的关键字-->

<META http-equiv="Content-Type" content="text/html; charset=gb2312">

<!--避免出现乱码-->

<META http-equiv="refresh" content="1">

<!--定义网页每隔1秒自动刷新-->

<META http-equiv="refresh" content="2;url=http://www.taobao.com">

<!--定义网页2秒后自动刷新到"淘宝"-->

</HEAD>

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

<BODY bgcolor="#FFCCFF“ background="back_image.GIF" text="#FF0000">

hello world!!!

</BODY>

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

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

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

2.7:字体字号<font>标签

<font size="1-7" color="" face="">

<!--字体大小可取1-7,字体颜色,字体类型-->

</font>

2.8:特殊符号

空格:&nbsp;

引号(""):&quot;

小于(<):&lt;

大于(>):&gt;

版权符:&copy;

2.9:段落和换行

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

<!--align可以调正文字的位置,左中右-->

换行标签:<br/>

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

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

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

列表标签:

有序列表:

<ol type="1">

<li></li>

...

</ol>

无序列表:

<ul type="circle">

<li></li>

...

</ul>

预格式段落:<pre>标签

2.11:图像标签

<img src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >

<!--图像的位置,宽度,高度,为图形添加的提示性文字(鼠标移动到图形上)-->

<img ... align="middle">

<!--图像与文本的对齐方式,图像与文本居中对齐,还可以取top, bottom 值-->

2.12:超链接<a>标签:

<a href="register/register.html">[免费注册]</a>

<!--链接的地址,和链接的内容(可单击)-->

设置超链接的显示位置:

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

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

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

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

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

注意重点:

超链接-锚记属性:

链接到本页面

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

步骤1:创建锚记

<a name=“marker”>主题名称</a>

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

<a href="#marker">xxx</a>

2.13:表格的基本结构

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

语法如下:

<table border="1'>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<!--border用来设置表格边框尺寸大小,tr定义行,td定义列,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)

<INPUT type=“text ” value="张三" size="20">

type="text";文本输入框

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

size="";文本框的宽度

密码框(PASSWORD)

<INPUT type=“password ” value=“ 123456 ” size=“22”>

type="password";密码框

value="";初始密码

size="";密码区的宽度

单选按钮(RADIO)

<INPUT type="radio" value="男" checked="checked">

type="radio";单选按钮

value="";初始值

checked="checked";默认选中

复选框(CHECKBOX)

<INPUT type=“checkbox” name="cb2" value="talk">

type="checkbox";复选框

name="":复选框名

value="";复选框值

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

重置按钮(RESET)

<INPUT type="reset" name="Reset" value="重填">

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

name="":按钮名称

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

多行文本框(TEXTAREA)

<TEXTAREA name="textarea" cols="40" rows="6">

文本框中的内容

</TEXTAREA>

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

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

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

下拉列表(SELECT)

<select name=“名称” >

<option value=“选项的值” selected>

</option>

<option value=“选项的值”>

</option>

……

</select>

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

案例说明

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

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

提交按钮(SUBMIT)

表单的基本结构:

<FORM action=“http://www.sohu.com” method=“post”>

……

</FORM>

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

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

post方法比较安全

表单元素的统一格式:

<FORM name="form3" method="post" action="">

<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="25%,50%,*" border="5">

<FRAME name=“top" src="the_first.html">

<FRAME name="middle" src="the_second.html">

<FRAME name=“bottom" src="the_third.html">

</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”

<FRAMESET rows="20%,*" frameborder="0">

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

noresize="noresize">

<FRAMESET cols="20%,*">

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

name="leftframe“ >

<FRAME src="right.html" name="rightframe">

</FRAMESET>

</FRAMESET>

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

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

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

设置超链接的显示位置:

框架指定名称

<frame src=“url” name=“框架名”>

target 给超链接指定显示位置

<a href="url" target=“框架名”>

<P>

<a href="right.html" target="rightframe">

<IMG src="images/reg.jpg" width="158" height="31" border="0" />

</a>

</p>

<P>

<a href="buy.html" target="rightframe">

<IMG src="images/buy.jpg" width="160" height="32" border="0" />

</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:样式表的基本语法

样式表的基本结构:

<STYLE type="text/css">

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

……

</STYLE>

<style type="text/css">文档样式表开始,类型为CSS样式

</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>

<LINK rel="stylesheet" type="text/css" href="样式表文件.css">

</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(空白边/外边距)组成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deed博客

十天学会php详细文字教程_入门至精通

1202
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

803
来自专栏Java技术分享

Ajax请求中给全局变量赋值的解决方案

昨天PP遇到一个问题,ajax修改全局变量后,外面获取不到ajax里赋的值,结果为空 问题代码如下图: ? 输出结果如下图: ? 原因: 先在控制台看看是a...

1877
来自专栏更流畅、简洁的软件开发方式

《你必须知道的.net》读书笔记 004 —— 1.4 多态的艺术

作者用了很大的篇幅讲解了一个程序,就是一个伪代码形式的,根据文件的扩展名打开文件的程序。比如要打开.doc的文件,那么就执行 OpenDocFile()函数。其...

1969
来自专栏PHP技术

开发常用知识点

php允许传递任意个参数: function getArg($a="",$b=""){ echo "one:".$a."<br/>"; echo "two"...

39414
来自专栏云端架构

【云端架构】前端必备常用HTML标签

注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。

3906
来自专栏用户2442861的专栏

Makefile经典教程(掌握这些足够)

makefile很重要       什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个...

691
来自专栏Java技术分享

Ajax请求中给全局变量赋值的解决方案

ajax修改全局变量后,外面获取不到ajax里赋的值,结果为空???

1705
来自专栏闵开慧

struts2 标签全面解释

A: <s:a xhref=""></s:a>-----超链接,类似于html里的<a></a> <s:action name=""></s:action>--...

3249
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在...

3606

扫码关注云+社区