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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

biehl 2016-09-03 11:28:00 浏览934
展开阅读全文
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/500
评论
biehl
+ 关注