初级网页设计所需掌握的单词

初级网页设计所需掌握的单词
HTML:超文本标记语言
一、html框架类标签
	html -- 定义html文档     head -- 定义文档头信息(网页头部)  	title -- 定义文档的标题title 
    body -- 定义文档体(网页主体)    	 -- [html注释]标签
二、html图像与链接类标签
	a – html超链接标签。 a:link--超链接的初始状态;        a:visited--访问过后的超链接状态;
a:hover--鼠标悬停时的超链接状态;a:active—鼠标点击时的超链接状态。
a标签的自身属性:href--链接路径;target—链接目标打开方式(_blank新窗口,_self 自身窗口)
	img -- html图像标签
img的自身属性:src--指定图片的位置;width:宽度;height高度
三、html文字相关标签
	h1, h2, h3, h4, h5, h6-- 定义标题1至标题6 
	p -- html段落标签
	span--html常用无意义标签,通常用来定义段落内部分文字样式
	div – html常用结构标签
	strong -- 定义要强调显示的内容strong
    marquee:滚动字幕
四、html列表标签
	ul -- 定义html无序列表      ol -- 定义html有序列表        li -- 定义html列表内容/列表项
	dl -- 定义html定义列表      dt -- 定义html中列表名词  	 dd -- 定义html中列表名词解释
五、html表格类标签
	table -- 定义html表格table
table自身属性:width--宽度;border--边框;
cellpadding—单元格内容到边框的距离;cellspacing--单元格之间的距离
	tr -- 定义表格行    th -- 定义标题单元格     td -- 定义普通单元格
六、html表单类标签
	form -- html表单标签
form自身属性:name--为该表单命名;action--该表单的提交位置;method--方法(post发送,get获取)
	input -- 定义一个表单的输入域
<input type(类型)="#"  name(名字)="abc"  value(属性值)="">
		#=text(文本框)      #=password(密码框)     #=radio(单选按钮)    	#=checkbox(复选框)  
  #=file(上传文件)  	#=button(普通按钮)  	  #=submit(提交按钮)     #=reset(重置按钮)
	select -- 定义可选择的html表单(下拉菜单)   	option----菜单/列表选项
	textarea -- 定义一个多行的文字输入域(多行文本区域) 
textarea自身属性:cols--列数;rows---行数
    fieldset--可将表单内的相关元素分组,打包 legend 搭配使用
七、其它标签
hr – html的水平线标签
hr自身属性:color--水平线颜色;width--水平线宽度;size--水平线尺寸;align---水平线的对齐方式
    br –html的换行标签       link--链接       meta—描述网页特性
CSS样式表
一、CSS的含义
	层叠样式表(Cascading Style Sheets)
二、CSS的样式表几种
	行内样式表: <p style(样式)=" ">文字p>		
	内部样式表:
<style type(类型)=text(文本)/css> 
.....
style>
	链接式样式表:<link href="样式表路径"  rel="stylesheet"  type="text/css" />
    相关单词:style(样式),type(类型),text(文本),rel(与href链接目标的关系),stylesheet(样式表)    
	导入式样式表:
		<style type="text/css">
		
		style>
三、CSS选择器
	标签选择器(标签名{})
类选择器(.类名{})
ID选择择器(#ID名{})
伪类选择器(标签名:伪类,如a:hover{}   .clearfix:after{})
通用选择器(*)
四、CSS属性有那些
	1、文字段落属性(font/text)
		font-family:"宋体";	----字体
		font-size:12px;----文字大小
		font-weight(加粗):bold(加粗)/normal(正常);
		text-align(文本的水平对齐方式):left(左)/right(右)/center(居中)
		text-indent:20px;---首行缩进
		text-decoration(文本下划线):none(不加)/underline(下划线)
		line-height:22px;----行高	 	                
        display:block  显示(默认状态)------转为块级元素: 
        display:inline; -----转为行内元素: 
        display:inline-block; -----转为行内块元素: 
        display:none;  -------设置元素隐藏:
        overflow:hidden;  ---------溢出属性,设置超出边界的文本内容隐藏
        color:文字颜色
	2、背景属性(background)
		background-color:#000; 背景颜色
		background-image:url();背京图像
		background-repeat:no-reapeat/reapeat-x/reapeat-y/reapeat;背景图像重复与否
		background-position:left/center/top/bottom/right;背景图像的位置
	3、边框属性(border)
		border-top: 上边框      		border-bottom: 下边框
		border-left:左边框       		border-right:右边框
		border-width:1px 边框粗细
        border-collapse:collapse ;   ----  设置边框重叠  
		border-style(边框样式):solid(实线)/dashed(虚线)/double(双线)/dotted(点线)/ridge(3D垄线);
		border-color:#eeddff;  边框颜色
	4、内外边距属性(padding/margin)
        padding:内边距,即元素内容与元素边框之间的距离。
        margin: 外边距,即两个元素之间(边框到边框之间)的距离。
		padding-left:20px;左内边距    	  padding-right:10px;右内边距
		padding-top:10px;上内边距      padding-bottom:20px;下内边距
		margin-left:20px;左外边距       margin-right:10px;右外边距
		margin-top:10px;上外边距   	  margin-bottom:20px;下外边距
	5、布局属性
		float(浮动):left(左)/right(右)
		clear(清除):left(左)/right(右)both(两者)
	6、项目列表属性
		list-style(列表样式):none(没有);
	7、尺寸属性
		width(宽):100px; //元素宽度      height(高):200px; //元素高度
    8、定位
position:absolute(绝对定位)/relative(相对定位)
top:顶部    bottom:底部

常用H5新标签
header:定义页面的头部/页眉    nav:定义导航栏      footer:定义页面底部/页脚
article:定义文章               section:定义区域     aside:定义其所处内容之外的内容/侧边
新增的input type属性值:
类型	使用示例	含义
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框(体现语义化)
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
datetime	<input type="datetime">	时间
month	<input type="month">	月年
week	<input type="week">	星期 年

你可能感兴趣的:(网页设计教学,css,前端)