您的位置:首页 > Web前端 > HTML

网页设计基础知识

2016-09-21 10:31 225 查看
第一单元 html基础
1. ps 快捷键

放大  ctrl++ 

抓手  空格

信息面板
F8   单位

标尺 ctrl
+R

自由变换  ctrl +T  

2. 切片工具

存储web格式

文件名:字母

类型:仅限图像

切片:所有用户切片

3. 网页三种格式

Gif  最多256色  透明  动画

  Jpg  颜色好 1670万   文件小  颜色多大图  不能透明

Png   无损压缩  文件大  透明 半透明

Bmp 位图  百万       psd不能用于网页

4. html---hypertext  markup  language  超文本标记语言
描述网页  直接执行

5. 标记  标签  元素   <>

6. 标签分类:双标签  单标签

7. 双标签

<body> </body>  

<head></head>  

<p></p>  段落

<table></table> 表格

<h1></h1>…标题

8. 单标签  空标签

<img/>图片  

<br/>换行  

<input/>输入

<meta/>

9. html基本标签结构

<html>

<head>

<title></title> 标题

<meta  charset=”utf-8”/>  语言声明

   <style></style>
内部样式

<link/>  链接样式

</head>

 

<body>

  <p></p>

    <img/>

</body>

</html>

<html><head><title></title> </head><body></body></html>

10. 命名规范:字母 数字
下划线组成  且不以数字开头    class=”2”

11. 站点

Baidu

Html 网页   css样式表   images
图片   index.html
首页  文件

12. 静态网页:.html  .htm

动态网页:.php   .asp   jsp

13.  <!DOCTYPE>[定义文档类型]

位于文档中的最前面的位置,处于<html>标签之前。可告知浏览器文档使用哪种HTML或XHTML规范

14. <meta  charset=”utf-8”/> 单标签  语言声明

第二单元  文字图片
<img/> <br/>
1. 标题字h1-h6 默认加粗  <h1  align=”center”></h1>  hn  h

align=”left/center/right”

对齐  左  中    右

2. 段落<p></p>  换行<br/>

3. 半角空格 ;    版权符©    ©
  < <  left    > >  right

4. 粗体<b></b>  bold

5. 倾斜<i></i>  italic

6. 下划线<u></u>  underline

7. 强调<em></em>

8. 加强调<strong></strong>

9. 水平线标记<hr />,单标签

a) color  颜色,

b) size    粗细,单位像素

c) Width 宽度

d) align 对齐     

<hr  color=”red”  size=”5”  width=”800”  align=”left”/>

10. 图片

网页三种格式

Gif  最多256色  透明  动画

  Jpg  颜色好(千万色)    文件小  大图

Png   无损压缩  文件大  透明 半透明

Bmp(百万色)   psd不能用于网页

<img   src="1.jpg"    alt="logo"     width="200"  height=”200”  border=”5”/>

Text 没有

       源文件       提示文本       宽           高           边框

路径分为绝对路径和相对路径

绝对路径:完整描述文件位置

C:/image/1.jpg

相对路径:站点内部

        Images/1.jpg

1. jpg

../images/1.jpg  上一级   ../../
上上级

第三单元  列表
超链接

1. 无序列表ul  导航  新闻

<ul   type=”disc   circle   square”>

  <li>列表项</li>

  <li>列表项</li>

。。。

</ul>

2. 有序列表ol

<ol  type=”1/a/A/i/I”>

  <li>列表项</li>

  <li>列表项</li>



</ol>

3. 自定义列表dl

<dl>

  <dt>定义项</dt>

  <dd>描述项</dd>

  <dd>描述项</dd>

</dl>

<dl><dt><dd></dd></dt></dl>
错误的

<dl><dd></dd><dt></dt>  </dl>
错误

 

<dl><dt></dt>  <dd></dd></dl>

超链接     a   一对一  行内元素
1. 给文字加  <a
href=“1.html“>秦鹏</a>

2. <a herf=“1.html“>秦鹏</a>

3. 给图片加  <a href=“1.html“><img
src=”a.jpg” /></a>   img{border:none;/border:0;}

4. 空链接  <a href=“#“>首页</a>

5. 新空白窗口打开  <a
href=“1.html“
target=”_blank“>秦鹏</a>

6. target  窗口打开方式

_self  当前窗口打开  默认

_blank 新窗口打开

_top    顶层框架

_parent  父框架

 

第四单元  表格
表格 <table></table>

行  <tr></tr>

单元格<td></td>  列  内容

表头
th    加粗
居中

 

 

 

 

 

 

<table>

<tr>

<td></td><td></td>

</tr>

<tr>

<td></td><td></td>

</tr>

</table>

Table的属性

<table  width=”800/40%”  height=”500”  默认内容一样宽  不是100%

Border=”10” 外边框>

      Align

Bgcolor 背景色

Background=背景图

表格特有属性:

Cellspacing=20
单元格间距  外

Cellpadding 单元格边距(内)

tr的属性

1. align    水平对齐  left  center  right

2. valign   垂直对齐

top 顶部

Middle 中部

Bottom 底部

td的属性                      

1. colspan           水平合并

2. rowspan          垂直跨度

Colspan=”2”

Rowspan=”4”

 

 

 

 

 

 

 

1px细线表格:

表格Table中

n border=0  

n cellspacing=1

n Bgcolor=边框色

行Tr

n Bgcolor=白色

Css

Table{border-collapse: collapse }相邻边框合并

Td{ border:1px  #f00   solid;}

第五单元表单
 
1. 表单

 <form  

name=”form1”  

action=”url”  提交地址 php  asp

method=“get/post” 提交方法=“获取/传送”

target=”_blank” >

</form>

表单三元素:input   select  textarea

2. 输入标签

<input  type=”10个值”  name=”sex”  value=”值”  checked=”默认选中”/>

        类型

文本框 <input  type=”text”   value=”请输入姓名”/>  值

密码框 <input  type=”password”/>  *…

 

单选框<input  type=”radio”  name=”sex”  checked=” checked”/>
男    默认选中

<input  type=”radio”  name=”sex”  />


复选框<input  type=”checkbox”    checked=” checked”/>

 

文件域 <input  type=”file”/>

四种按钮

提交  <input  type=”submit”  value=”提交”/>  action=”url”

重置  <input  type=”reset”  value=”重置”/>  reset
 replay  rename

普通按钮<input  type=”button”  value=”找回密码”/>

图像域  <input   type=”image”  src=”1.jpg/>

3. 下拉菜单

<select  name=”diqu”>

<option  value=“bj”>北京</option>

<option  value=“sh”selected=” selected”>上海</option>
默认选中

</select>

4. 文本域(多行文本框)

<textarea   cols=”40”   rows=”5”  name=”beizhu”>提示文字标签之间</textarea>

          列数        行数

没有value属性

 

第六单元Css样式
Css—cascading  style  sheet

    层叠     样式   表     用于控制网页外观

Css样式由三部分组成:选择器、属性、属性值

  选择器{

属性: 属性值;

属性: 属性值;

}

五大选择器

全局选择器
*{margin:0;  padding:0;}  所有标签

标签选择器 h1{}   p{}  a{}  ul{}  元素选择器

类别选择器
.red{}   <h1 class=”red”></h1> 多次

Id选择器  #red{}   <h1  id=”red”></h1>  同一id只能用一次

伪类选择器  作用在标签状态

  A:link{}   点击前

  A:visited{} 点击后

 A:hover{}  放上去  鼠标滑过

A:active{}  按下去  点击瞬间

四种样式表

行内样式<p  style=”color:red; …”></p>  行内优先级最高style=””属性

内部样式(内嵌) <style></style>
标签

链接样式 <link  href=””  type=”text/css”  rel=”stylesheet”/>
外部

导入样式 @import  url( )

第七单元
文字 背景属性

 

文字属性

Color:#f00;   font-color
错误的

十六进制颜色  #FF 00 00  RGB
红绿蓝  00---FF

#FF0000 红色  #F00

#00FF00 绿色  #0F0

#0000FF 蓝色  #00F

#000000  黑色 #000

#FFFFFF  白色 #FFF

灰色 红绿蓝值相同  #C0C0C0  #666   #ccc   #333

 字号   Font-size:12px/14px;

 字体    Font-family:宋体, 楷体;多个字体逗号分隔

  加粗  Font-weight:bold  normal;  100-900

 倾斜   Font-style:italic  normal

段落属性

文本装饰Text-decoration:overline上划线

                Line-through 删除线

              Underline 下划线

    None 去掉超链接下划线

文本对齐Text-align: left  center  right  水平居中

首行缩进Text-indent:100px  2em  -100px;
负值 百分比

行高     Line-height:25px  180%百分比  垂直居中

背景属性

Background-color:red;

Background-image: url(1.jpg);
设置图地址参数

Background-repeat: repeat;(默认)

    No-repeat

Repeat-x

Repeat-y

Background-position:right  bottom;

  left  100px 

水平 垂直

背景复合属性:

Background: #f00  url(1.jpg)  No-repeat   right  bottom; 

 

列表样式

群组选择器

Ul , ol

列表样式       {list-style:none }
去点

列表样式类型   list-style-type :none   (去点)

  disc   (实心圆)

           square(小正方形)

           circle (空心圆)

列表图片:    list-style-image: url()

列表符号位置:list-style-position: inside/ outside

 

     

第八单元  盒模型
盒子实际大小=内容+
填充+  边框+  边距

          Width、height+padding+border+margin  

填充:padding  边框与内容距离

padding:100px
四边相同

padding:100px  200px
上下  左右

padding:100px  200px  300px  上 左右  下

padding:100px  200px  300px  400px
上右下左

padding-left:100px

边框:

    边框宽度 Border-width:1px;

    边框颜色Border-color:#f00;

边框样式 Border-style:solid实线

dashed虚线

dotted点线

  border-css  不是

边框复合属性

Border: #f00  1px   solid;
不可三缺一

Border-bottom:1px  #0f0  dashed;

Border-left:none;  左边框无

外边距
内容与内容之间距离

margin-left:100px 元素向右移动

margin-right:100px 后面元素向右移动

 

第九单元
布局
浮动:   Float: none(默认)  left  right  3

清除浮动Clear: none           left  right   both 全部  4个值

 

块级元素   div  p  h  ul  li
。。。      独占一行   自动换行

行内元素(内联)a  span  img  input  不独占一行   不自动换行
 没有宽


可变元素

<div><a></a></div>

<a><div></div></a> 错误的

显示属性:Display:block  块

       Inline  行内

      None  不显示

定位
Position: static;  默认  静态

 Relative 相对定位

       Absolute 绝对定位

       Fixed   固定定位

 Inherit  继承

1. 相对定位  相对自己原来位置

2. 绝对定位  相对父元素

 <div  class=”father”>

<div  class=”son”></div>

</div>

.father{position:relative;}

.son{position:absolute;

Left:100px;

Top:50px;}

偏移量 left  right   top  bottom  可以是负值

z-index 设置绝对定位元素 层叠顺序

 默认为0,可以为负值,值越大越靠前

 

周考关键点
1. 以下是图像域的属性的是

A name      B src   C   href    D type

<input  type=”image”   src=”1.jpg”   name=”tuxiangyu”/>

1. 下面元素(标签)选择器书写正确的是:A
div{}     B
html div{}     C div  p{}     D
a{}

2. 关于css样式,下列描述不正确的是::

A 链接外部样式表使用link标签     B
行内样式的优先级没有链接样式的优先级高

 C 行内样式使用link属性  style         D
行内样式的优先级最高

3. 下列属于外部链接样式的是

A<p style="color:red;">段落</p>       行内  

 B<link href="index.css" rel="stylesheet" type="text/css" />
链接

C <style>  p {color:red;}  </style>       内部
内嵌

 D<style type="text/css"> @import url(index.css) </style>  导入

2. (    )单选框在同一组中的选项可以使用不同名称

  Name=”sex”  男

Name=”sex”  女

3. (    )文本域标签是<textarea>,可以通过标签中的height属性来设置文本域有多少行::cols
 列数 rows行数

4. (    )option标记的checked属性用来设置默认选中::selected

5. 以下属于input属性的是:

A type   B value      C
name     D method

6. 下列属于标签input类型的属性是

A  type        B method       C top       D bottom

7. 不属于标签input类型的属性是

A  type       B method      C top      D bottom

8. (      )利用html标签属性为td设置背景色为红色的代码是:<td  bgcolor="#f00"></td>

9. (      )利用html标签属性为td设置背色为红色的代码是:<td  style="bgcolor:red"></td> background-color

10. 关于网站头部信息说法 正确的是 ABC

A网页中的头部相当重要,通常一个网站页面左上角放置的都是网站的标志(Logo)

B为了提高网站的搜索引擎,一般的LOGO图片需写Alt属性

C头部还会展示出网站的帮助信息、登录信息和收藏网站的链接等

D网站的logo必须使用背景图片来实现
错误  <img/>

1. 关于网站头部信息说法 正确的是
ABCD

A 网页中的头部相当重要,通常一个网站页面左上角放置的都是网站的标志(Logo)

B 为了提高网站的搜索引擎,一般的LOGO图片需写Alt属性

C 头部还会展示出网站的帮助信息、登录信息和收藏网站的链接等

D 网站的logo不必使用背景图片来实现  对

1. 以下标签可以写在<head></head>中的是

A、img     B、p     C、title  
 D、meta 

2. 以下标签可以写在<head></head>中的是: 

  A style     B img     C Link     D title

<img src=””

<a href=”” target = _self _blank _top _

         Align= left

               center

               right

        valign=top

              middle

              bottom

        colspan 横向       cellspan
间距

        rowspan 竖向       th  表头

原<ul><li></li></ul>

新<d>…………<d/>

<

 

 

 

 

 

 

 

 

 

 

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html 网页 基础