• 郑州北大青鸟首页
  • 网站导航
  • 河南软件与网络工程师培养基地 河南拥有IT体验馆课程专业全、规模大校区河南多年连获全国教学质量奖2011-2019年获北大青鸟总部荣誉奖
首页 中心介绍 新闻动态 课程详解 师资力量 专家讲座 招生问答 学员活动 精彩专题 报名
当前位置: > 学员活动 > 学术交流 >

如何学好html,记住背好标签是关键

2016-05-22 15:03 来源:郑州北大青鸟
如何学好html,记住背好标签是关键!
背会html标签属性是学好网页的关键!
趁着周末接着上一期继续与大家分享一下标签完美版的标签!
祝大家周末愉快哦!
 
图像<img> 语法格式:
<img src="url"alt="?" width="?" height="?" border="?"align="?">
border属性定义图片边框的宽度,默认值为0
align属性设置图片旁边文字的位置
语法格式:<imgsrc="" align"">
可选值有:
top图片和文字顶部对齐
middle图片和文字居中对齐
bottom图片和文字底边对齐(默认)
left图片居左对齐,文字沿图片绕排
right图片居右对齐,文字沿图片绕排
absmiddle图片对齐到目前文字行绝对中央
absbottom图片对齐到目前文字行绝对底部
文字的排版
不换行空白标记
font元素
语法格式:
<font face="字体名称" size="字体大小" color="字体颜色">
字体大小可选值为1——7,默认为3
例:〈fontface="黑体"size="4" color="#ff00ff">....</font>
水平线<hr> 
语法格式:<hrwidth="宽度"align="对齐方式默认居中center"size="水平线厚度默认为2"color="颜色"noshade>
noshade无阴影,既实线
层〈div><span>两种元素
<div>是块级元素,和段落元素<p>相似,不同的是两个<div>元素之间不会产生两个<p>元素之间的空行,
<span>是行内元素,可以定义段落中部分文字的属性
语法格式:
<div align=""style="">...</div>
align设置层中元素的水平对齐方式
stule设置元素应用css规范的属性
<div>兼容性比<span>要好一点,最好使用<div>
表格语法格式: 
<table width=""bgcolor="" background="" border=""cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border边框宽度默认值为0,既没有边框
cellspacing表格中单元格的边距大小,默认值为两个像素
cellpadding表格中单元格之间的间距大小,默认值为两个像素
tr元素
语法格式:
<tr align=""bgcolor="">....</tr>
align属性对齐方式可选值如下:left,center,tight,默认为left
bgcolor指定该行的背景颜色
td元素
语法格式:
<td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor=""background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td>
align属性的可选值有:left,center,right
valign属性的可选值有:top,middle,bottom
rowspan和colapan跨行和跨列的数量,默认为1
input元素 语法格式:
<input type="">
type属性的可选值有:
text 单行文本框
属性:name 文本框名称
value 文本框的初始值
size 文本框的长度
maxlength 可输入字符串最大的长度
radio 单选框
属性:name 单选框名称
value 内部值
checked 默认选定
checkbox 复选框
属性:name 复选框名称
value 内部值
checked 默认选定
reset 重置按钮
submit 确定按钮
属性:name 按钮名称
value 显示在按钮上的文字
password 密码框
属性与文本框的属性完全相同
file 文件域
属性:name文件域名称
size 文件域的长度
maxlength 文件域可接受的字符数量的上限
hidden 隐藏域
属性:name 隐藏域名称
value 内定值
image 图片域
属性:name 所要代表的按钮,可以是submit,reset,或其他.
src 按钮图片的url 地址
列表框<select>
语法格式:
<select>
.....
<option>....</option>
.....
</select>
select元素
语法格式:<selectname="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框
multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项
option属性
语法格式:<optionvalue="" selected></option>
value 该列表项的值
selected 如果设定了这个参数,默认为选定这一项
多行文本框<textarea> 
<textarea name=""cols="" rows="" wrap="off/physical/virtual"></textarea>
属性:
name文本框的名称
cols文本框的宽度
rows文本框的高度
wrap文本框的折行方式可选值有:
off不保存换行信息
physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出,
virtual送出连续成串的字除非使用者按回车。
css 层叠样式表
引入层叠样式表的方法包括:
外联式样式表
例:<head>
<link rel="stylesheet"href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性:rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址
内嵌式样式表:
例:<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式:<pstyle="font-size:10.5pt">
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的优先级
越接近目标的样式定义优先级越高,高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义
如果4种样式表对同一元素定义了不同的样式,那么他们的优先级顺序从高到低是,元素内定,内嵌样式表,导入样式表,外联样式表。
css结构
例:td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分,
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成:
属性font-size,color和值10.5pt,#666666
选择符分为6种
1元素选择符
当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开例:td,p,li,input,select{font-size:12px;}
2class(类)选择符
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井冈山地方官</p>
<p>九连环离开计划</p>
</body>
还有一种方法就是限定可以应用它的页面元素
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p>士大夫井冈山地方官</p>
<h1>九连环离开计划</h1>
</body>
3 id选择符
与class选择附类似,只是把'.'换成'#'
例:<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<tdid="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用
关联选择符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250"border="1" height="50">
<tr>
<td><p>关联选择符</p></td>
</tr>
</table>
<p>关联选择符</p>
</body>
</html>
我们设定了在元素中<td>的元素<p>所包含文字的样式,只有在两个条件都满足是,样式在会起作用,
伪类选择符
是只能用在css选择符里,而不能用在html代码中的选择符
例:
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
〈/body>
</html>
正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱
伪元素选择符
与伪类选择符定义类似,目前被大多数浏览器支持的有两个:首行伪元素(first-line)和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的
例:首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
长度随浏览器窗口大小而改变
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上两种都只能应用于块状元素上
css规则
1.继承
例:<html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<td>
<p>css规则</p>
</td>
</table>
</body>
</html>
<p>为最高级<td>次一级两种css用在一个属性元素上,相同的覆盖,不同的继承,
2.组合
例:td{font-size:12pt}
p1{font-size:12pt}
组合后
td,.p1{font-size:12pt}
3.层叠
在样式里定义过后,在表格属性中又定义一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300"border="1" height="150">
<tr>
<tdstyle="color:#0000ff">决撒地方官</td>
</tr>
</table>
</body>
</html>
css单位
分四大类:
1 长度单位
数值可以是整数,小数,正数,负数,0,后加单位(负值不要轻易使用)
换算关系:
1in(英寸)=6pc(派)
1in(英寸)=72pt(磅)
1in(英寸)=2.54(厘米)
1cm(厘米)=10mm(毫米)
1cm(厘米)=0.3937(英寸)
1pt(磅)=1/72in(英寸)=0.2478mm(毫米)
1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸
2 百分比单位
3 颜色单位
4 url单位
div属性
color : #999999   文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜体育
font-variant:small-caps 小字体
letter-spacing : 1pt 文字间距
line-height : 200% 设定行高
font-weight:bold 文字粗体
vertical-align:sub 下标字
vertical-align:super 上标字
text-decoration:line-through 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除连接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字*右对齐
text-align:left 文字*左对齐
text-align:center 文字置中对齐
这些是一些简单的文字效果,可以应用到css的页面中。 
背景
background-color:black 背景颜色
background-image : none 背景图片
background-attachment : fixed 固定背景
background-repeat : repeat 重复排列-网页预设
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position : 90% 90% 背景图片x与y轴的位置 
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
<TEXTAREA STYLE="border:1px dashedpink">
实线
<TEXTAREA STYLE="border:1px solidpink">
------分隔线----------------------------
栏目列表
联系我们
  • 学校地址:郑州市金水区文化路90号河南财经政法大
  • 学文南校区1号楼(文化路与东风路路交叉口文化路
  • 向南1000米)
  • 咨询热线:0371-63383521 63383522
  • 6路,28路,966路到文化路与俭学街站下车
企业预订人才热线:0371-63383521
就业服电话:0371-55902629
教学监督:0371-55690491
郑州北大青鸟软件学院地址:郑州市文化路90号河南财经政法
大学文南校区1号楼
传真:0371-63383562 邮政编码:450000
备案号:豫ICP备10022989
版权归 郑州翔天信鸽科技有限公司
咨询电话:0371-63383521 15225191462
北大青鸟APTECH(郑州翔天信鸽)授权培训软件学院
教育改变生活