网页平面设计HTML基础

1、网页的基本元素：文字、图像、超链接

2、HTML的基本机构head、title、body三部分

　　<html>

　　　　<head>

　　　　　　<title>标题</title>

　　　　</head>

　　　　<body>

　　　　正文

　　　　</body>

　　</html>

3、常用标记/属性

　　<body background背景图片  bgcolor背景颜色  text非连接文字颜色>正文</body>

　　<p align对齐="left/right/center">文字段落</p>

　　<img src="URL" alt定义一串可替换文本，当图片不能加载时显示 width height border边框 hspace左右边沿空白 vspace上下边沿空白/>

　　<br/>换行标记　　<hr size width align color/>横线标记

　　<h1>标题</h1>........<h6></h6>标题大小，1最大，6最小

　　<pre>预定格式标记，打成什么样，浏览器里显示就什么样</pre>

　　<!--注释标记，给程序猿看的-->

　　<center>居中</center>

　　<blockquote>缩排文字</blockquote>

　　<font size face字体 color>字体</font>

　　<u>下划线</u>

　　<s>删除线</s>

　　<b>加粗</b><strong>加粗</strong>

　　<i>斜体</i><em>斜体</em>

　　&lt 表示 <　　　　&gt 表示 >　　　　&amp 表示 &　　　　&quot 表示 "

　　&nbsp; 表示空格　　　　&copy 表示 ©　　　　&reg 表示 ® 　　

　　&times 表示 ×　　　　&divide 表示 ÷　　

　　无序列表<ul>

　　　　　　 　<li type="disc实心圆/circle空心圆/square方块">...</li>

　　　　　　</ul>

　　有序列表<ol>

　　　　　　 　　<li type="a字母/i罗马数字/1阿拉伯数字">...</li>

　　　　　　</ol>

　自定义列表<dl>

　　　　　　　　<dt>...</dt>

　　　　　　　　　　<dd>...</dd>

　　　　　　　　<dt>...</dt>

　　　　　　　　　　<dd>...</dd>

　　　　　　</dl>　　

　　列表可以嵌套使用，但是不能嵌套在<p>标签里

　　<a href="url" target="_blank新打开一个窗口，_self在本窗口打开">...</a>

　　去除下划线：a{text-decoration:none;}　　

　　超级链接 1绝对位置：一定要用上协议 http：//

　　　　　　 2相对位置同 <img src="url"/>

　　<table>表格属性：border表格边框   width表格宽度   height表格高度   cellspacing表格各单元格之间距离（外边距）可以用表格背景色与单元格背景色差集做边框   cellpadding单元格内部与文本之间的间距（内边距）   align表格在网页中的对齐方式   caption标题    bordercolor表格边框颜色   bordercolorlight表格亮面颜色

　　　　　　<table> 　　　　　　

　　　　　　　　<thead><!--表格头-->

　　　　　　　　　　<tr>　　　　　　

　　　　　　　　　　　　<th></th>

　　　　　　　　　　</tr>

　　　　　　　　</thead>

　　　　　　　　<tbody><!--表格体-->

　　　　　　　　　　<tr>　　

　　　　　　　　　　　　<td align水平对齐 valign垂直对齐 rowspan行 colspan列></td>

　　　　　　　　　　</tr>

　　　　　　　　</tbody>

　　　　　　　　<tfoot><!--表格脚-->

　　　　　　　　　　 <tr>

　　　　　　　　　　　　<td></td>

　　　　　　　　　　</tr>

　　　　　　　　</tfoot>

　　　　　　</table>

　　form表单标签属性   Name：表单名称    Method：提交方法 get（可以看到数据）post（不能看数据）   Action="*.asp"表单处理程序　　

　　<input type=“#”  name=“”  value=“”>   name用来标识<input>标签名称  value是<input>提交到服务器上的值

　  #有以下类型 1）text 文本框　  2）password密码框     3）radio单选，要用name属性编组　    4）checkbox复选框，用name编组     5）submit提交按钮　    6）reset 重置按钮    7）hidden隐藏数据   8）file上传文件    9）image图片　10）button按钮

　　去除谷歌浏览器默认边框  outline：none

　　表单里的下拉列表  　 <select name="">

　　　　　　　　　　　　　　<option selected="selected"预设>选项一</option>

　　　　　　　　　　　　　　<option>选项二</option>

　　　　　　　　　　　　　　...

　　　　　　　　　　　　</select>

4、笔记

　　1做项目把图片统一放在一个文件夹里images

　　2引入图片的2种方式

　　　　绝对路径  D:/demo/images/123.gif　（最好不要用）

　　　　相对路径  ./images/1.gif　　一个点表示同级目录

　　　　　　　　../demo/images/2.jpg　　两个点表示上一级目录，三个点表示上上级目录，以此类推

　　3网络常用图片格式　　

　　　　gif  以256种像素组成，支持透明，支持动画，体积小　　

　　　　jpg 以百万像素组成，品质较高，不支持动画、透明

　　　　png fireworks的源格式　　png8支持透明，png34、png32不支持透明

　　4<body>背景图片在背景颜色上层，图片透明则能看到bgcolor

网页平面设计 HTML的更多相关文章

  1. 网页平面设计 CSS

    1.在html中引入css的方法 1.行内式 行内式即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用. 例如:<h1 style="属性名 ...

  2. java视频教程 Java自学视频整理(持续更新中...)

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  3. 数据返回[数据库基础]——图解JOIN

    废话就不多说了,开始... 一.提要 JOIN对于接触过数据库的人,这个词都不生疏,而且很多人很清楚各种JOIN,还有很多人对这个懂得也不是很透辟,此次就说说JOIN操纵. 图片是很容易被接受和懂得, ...

  4. .Net训练营优惠有条件 做到立减800元大钞

    .NET 是 Microsoft XML Web services 平台.XML Web services 允许应用程序通过 Internet 进行通讯和共享数据,而不管所采用的是哪种操作系统.设备或 ...

  5. css(二)

    重新排传智的首页!头部和左边的部分完成了! <!doctype html> <html lang="en"> <head> <meta c ...

  6. 【Android 应用开发】GitHub 优秀的 Android 开源项目

    原文地址为http://www.trinea.cn/android/android-open-source-projects-view/,作者Trinea 主要介绍那些不错个性化的View,包括Lis ...

  7. DIV+CSS综合实例【传智PHP首页】

    1.首页结构 2.准备工作 所有素材放到与当前网页同级的目录下: 网页背景色.背景图: 主页宽度:1000px: 创建CSS文件,将CSS文件引入到当前的HTML文件中. 3.实现 效果图: HTML ...

  8. Acvitivi网关(十一)

    1排他网关 1.1 什么是排他网关 排他网关(也叫异或(XOR)网关,或叫基于数据的排他网关),用来在流程中实现决策. 当流程执行到这个网关,所有分支都会判断条件是否为 true,如果为 true 则 ...

  9. 超好用的网页栅格化工具： GridGuide

    平面设计中使用栅格化设计是相当重要的,特别是网页和VI设计方面,在设计前都需要来好栅格,但是选择合适栅格和计算无疑是浪费了设计师不少的时间,然而当遇上今天的神器「GridGuide」在线工具,以后再也 ...

随机推荐

  1. x/nfu－用gdb查看内存

    用gdb查看内存 2007-12-08 12:43 用gdb查看内存 格式: x /nfu <addr> 说明x 是 examine 的缩写 n表示要显示的内存单元的个数 f表示显示方式, ...

  2. malloc用法

    malloc用法三部曲:(#include<stdlib.h>下的库函数) 1.malloc eg.ps=(char*)malloc(sizeof(char)*20)的意思是,动态分配空间 ...

  3. OC基础3：一些基本概念

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于NSLog函数中的“%2i”: ( ...

  4. 分享一个用安卓手机就能引导pc安装linux系统办法

    1.首先安卓手机下载软件DriveDroid.apk http://pan.baidu.com/s/1qW4pbT6 2.下载linux镜像文件放手机存储卡存储,放到Download/images/以 ...

  5. R基础

    R的对象类型包括数值型(numeric),复数型(complex),逻辑型(logical),字符型(character)和原味型(raw),列表(list)递归结构:函数(function)和表达式 ...

  6. LeetCode之ReverseWorldString

    题目:将一个英文句子翻转,比如:the sky is blue 翻转后变为:blue is sky the 分析:我的实现方法是,利用栈将单词存储起来,然后再顺序拿出来,单词进栈还需注意添加空格. 主 ...

  7. Windows中进程的内存结构

    基础知识: 栈是一种简单的数据结构,是一种只允许在其一端进行插入或删除的线性表.允许插入或删除操作的一端称为栈顶,另一端称为栈底,对栈的插入和删除操作被称为入栈和出栈. 有一组CPU指令可以实现对进程 ...

  8. discuz二次开发笔记（一）------$_G全解析

    $_G 保存了 Discuz! 中所有的预处理数据缓存能够很好的提高程序的性能,一些配置数据没必要每次都查询数据库,只要在修改了的时候更新下缓存即可.Discuz! 中所有的缓存保存在 $_G[cac ...

  9. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  10. mysql server advanced 5.6基于oracle linux 6.6的安装

    mysql 安装有两种,rpm安装和源码包安装,两种包都可以从www.mysql.com官网下载,这次我测试下rpm安装方式. 1.安装环境以及mysql版本: 1.1vcenter 虚拟机环境 1. ...