初级网页设计所需掌握的单词
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">
<!--
@import(导入) url( );
-->
</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"> 星期 年
初级网页设计所需掌握的单词
最新推荐文章于 2024-09-14 17:04:32 发布