网站部分:UI:AI、PS
前端:html、css、js
网站:是一个存放在网络服务器上的完整信息的集合体。由域名、空间服务器、网站程序、数据库等组成。由多个网页以一定的方式连接在一起,成为一个整体。
首页(index.html):制作首页要突出重点、分类准确、操作简单
网页的三层结构:
结构层:html 结构框架
表现层:css 美化
行为层:js javascript 实现动态交互
万维网:WWW (World Wide web)一种基于超文本方式的信息检索服务工具
用超链接的方式将各种不同空间的文字信息组织在一起的网状文本
HTML:超文本标记语言,是构成web页面的基础 是WWW的母语
HTML标记可以说明文字、图形、动画、声音、 表格、链接等
超链接:特殊的文字标识,跳转到指向www中的资源
统一资源定位符:URL 资源指向的地址
用于描述Internet上资源的位置和访问方式
协议名://网址或IP端口号/URL
http://www.baidu.com:80/路径
主机 域名 端口号(http默认值)
通信协议:http---超文本传输协议
ftp传输文件
HTML文档结构:
<html> 开始代码
<head> 头部标记(不被显示在正文,)
<title>…</title>
</head>
<body>
页面内容
</body>
</html> 结束代码
HTML标记:
头部:
<link> ; <meta> ; <title>…</title>
<style>…</style> ; <script>…</script>(插入js)
属性间用空格隔开,属性值用“ ”括起来
<meta>标记的属性:
1.name 设定本网页的制作工具
2.keywords 设定网页的关键字,便于搜索引擎搜索
<meta name=“keywords” content=“关键字描述”>
3.discription 设定网页的描述
4.Content-Type 声明本网页所采用的字符集
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
文本格式
编写网页的开头:DOCTYPE标记来声明是用什么语言版本来解释当前文本
<!DOCTYPE html>
单标记:eg:<br>换行 <img src=“##.jpg ”>添加图片 <input>
双标记:eg:<b>…</b>粗体
块级标记:eg:<h1>…</h1>(标题)
行内标记:
标记属性:附加信息
样式设置:单标记直接在标记内设置eg:<hr width=”” align=””>
注释:<!—注释内容—> 注释会被浏览器忽略
注:
标记可以嵌套,不可以交叉
文件名只能是英文字母、数字或下划线组成
文件名区分大小写
首页一般为index.html
文字与段落
标题字:共六级 字体依次递减 默认加粗显示 本身具有自动换行
<h# align=“left/right/center”>标题文字</h#>
水平对齐
特殊符号:(注意最后的分号)
空格: 不管文字间有几个空格,都被视作一个空格
<(小于号) >(大于号) ©(版权符©)
®(注册符®) & &符 ×(x符号)
注释:<!—注释内容—>
文字样式:16px 字体默认宋体 字号默认3 属性中的属性值都没有单位
<font face=”” size=”1-7(字号表示)” color=””> </font>
字号依次递增 red/#00ffff
嵌套:块级可以嵌套行级,行级不可以嵌套块级,同级可相互嵌套
eg: <h#><font>…</font></h#>
<b>…</b> <strong>…</strong> 加粗
<i>…</i> <em></em> 斜体
<del>…</del> 删除线
<u>…</u> 下划线
<sup>…</sup> 上标 <sub>…</sub> 下标
<address>…</address> 通常显示为斜体 地址文字(E-mail、地址)(块级元素)
段落:<p align=””>…</p> 一个p空一行
换行:<br>
<nobr>…</nobr>
<wbr>…</wbr>
居中标记:<center>…</center> 图片、表格、表单(H5不可用) 块级
水平分隔线:<hr width=””size=”” color=”” align=”” noshade>
宽度 粗细
预格式化:<pre>…</pre> 保持文档输出样式,原样输出 块级
段落缩进:<blockquote>…</blockquote>
段前段后缩进5个字符,产生层次关系,可多个嵌套连用
列表
无序ul、有序ol、定义dl 目录dir 菜单menu
无序列表:没有特定顺序的相关条目,呈并列关系。默认距离页面40px,
<ul type=””> 设置项目符号样式:disc(默认)/circle/square
<li>…</li>
<li>…</li>
…
</ul>
有序列表: 编号的样式:1/a/A/i/I
<ol type=”” start=““> 改变编号的起始值,取阿拉伯数字
<li>…</li>
<li type=”1“>…</li>
<li value=”5“>…</li> 改变本身及之后的值
…
</ol>
原则:就近原则:在列表<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下,在指定的单个列表项遵循<li></li>的type属性进行显示。
嵌套:整组嵌套,互相嵌套,
一级默认实心圆,二级默认空心圆,三级默认实心方块
√定义列表:
<dl>
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
<dt>…</dt>
<dd>…</dd>
<dd>…</dd>
…
</dl>
(菜单列表,一般不嵌套)
超链接
指由一个网页指向一个目标的连接关系,可以是另一个网页、图片、邮件地址、文件、应用程序… (属于网页的一部分)
各个网页链接在一起后才能真正构成一个网站
<a href=“路径”>…</a>
分类:
外部链接:跳转到当前网站的外部 一般要用绝对路径,要有完整的URL地址
内部连接:在同一个网站内部 相对路径,明确指向哪个文件
路径:
绝对路径:完整的URL地址
<a href="http://www.baidu.com">跳转到百度</a>
√相对路径:以当前文件所在的路径为起点,进行文件查找。通常只包括文件夹名和文件名 (在本地不可以跨盘符)
1.链接到同一目录下的文件:<a href=“index.html”>
2.链接到下一级子目录a中的文件:<a href=“a/index.html”>
3.链接到上一级目录中的文件:<a href=“../index.html”>
4.链接到上两级目录中的文件:<a href=“../../index.html”>
根路径:
根目录:
创建超链接:
<a href=“url” title=“指向链接的文字” target=“目标窗口”>…</a>
_self(在当前窗口打开) _blank(新窗口打开)
书签链接:跳转到指定的位置
<a name=“书签名称”>连接内容</a>
<a href=“#书签名称”>链接标题</a> (同一页面内)
<a href=“URL地址#书签名称”>链接标题</a> (不同页面)
下载文件:
<a href“url”>链接内容</a> (相对路径或绝对路径—word、pdf、文件)
图片
插入图片标记: 设置宽/高,等比例缩放
<img src=“URL”border=“ ” width=“ ” height=“ ” >
title=“” 鼠标划入时显示信息
alt=“图片加载失败时显示的内容”
align=“ ” 定义图片的对齐方式 (影响跟在图片后边的内容)
hspace=“ ” 水平间距
vspace=“ ” 垂直间距
图片连接:
<a href=””><img src=””></a>
滚动文字
<marquee>文字或图片</marquee> 块级
设置属性的值单位:px
behavior:scroll(循环滚动/默认) slide(滚动一次) alternate(来回交替)
direction:left right up down
bgcolor:red/十六进制
width/height:数字/百分比
hspace/vspace:数字
loop:正整数n/infinite (循环次数)
scrollamount:**px 文字每次移动的距离
scrolldelay:**ms 间歇时间 1000ms=1s
插入背景音乐:
<bgsound src=”” loop=””>
插入多媒体文件:
<embed src=”” loop=””autostart=”true/false” width=”” height =”” type=”media-type” pluginspage=”pluge” >可插入各种多媒体文件
表格(table tr td)罗列数据、布局
<table>
<caption>表格标题<caption>
<tr>
<th>…</th> <!—表头、默认居中加粗显示-->
…
</tr>
<tr>
<td>…</td> <!—单元格-->
…
</tr>
…
</table>
属性:
border、bordercolor、width、height、bgcolor(背景颜色)background(背景图)
边框样式:<table frame=”” rules=””>
单元格间距:<table cellspacing=””> 间距为0,边框粗细值合并
单元格边距:<table cellpadding=””>
表格的水平对齐方式:<table align=””>
tr(行)属性:
<tr align=””>…</tr> 水平对齐
<tr valign=”top/middle/bottom”>…</tr> 垂直对齐
bgcolor、bordercolor、
td(单元格)属性:
align、valign、bgcolor、background、bordercolor、width、height、
(rowspan、colspan跨行、列合并)
<td rowspan/colspan=”行数/列数”></td>
框架:
<frame> 定义框架
<framesel> 定义框架集
结构:
<html>
<head>
<title>…</title>
</head> 框架的边框
<feameset border=”” rows=”10%,20%,*”>
<frame src=“ ”>
</frameset>
</html>
水平分割:rows 垂直分割:cols
嵌套分割:用n个<frameset>连接
target=”name=”””连接两个板块
<frameset frameborder=”1/0”yes/no> 框架边框 默认为1 0为不显示
<frame noresize> 不可移动
<frame scrolling=”yes/no auto”> 滚动条
浮动框架:<iframe src=””>…</iframe> 可以包含在body中
表单:
form:name action—传输到某个地址 method ---(get/post)
get:浏览器将表单中的各个值添加到action属性后
缺点:1.地址栏允许输入的URL长度有限,最多为2048个字符,不适合数据较多的表单,安全性较低。 2.get方法提交数据是明文的。
post:传输较大数据
(file:///F:/HTML/a.html?username=123&pwd=1234)
单行文本输入框:<input>单标记
<input name=””
type=”text”
size=”” 文本框大小
mexlength=”n” 可输入的最大字符数
value=“ ” 首次被载入时显示的值
checked=””
input type=”类型” 与内容一样可省略
text 文本框
password 密码框 name mexlength size value
checkbox 复选框 name value(必填) checked(默认被选中)
<input name="" type="checkbox" value="3" checked>排
radio 单选框 name type value checked
(实现多选一,所有属性的name值应相同)
file 文件选择输入框
对于允许上传的文件,不能使用get方法
<form name=”” action=”” method=”post” enctype=”上传格式”>
<input type=”file”>
hidden 隐藏域 name type value()
提交按钮:type=”submit” value=”“
重置按钮:type=”reset” value=”“
value的属性值显示在按钮上的字 默认为提交
图片按钮(提交) <input name=”” type=”image” src=””>
<input type=”button” value=””>
多行文本输入框
<form> 显示文本字符多少 victual 自动换行默认
<textarea name=””cols=”” rows=”” wrap= ”physical”显示换行符
</textarea> 宽/列 高/行 off 不自动换行
</form>
标签中间内容是显示文本框的初始信息
下拉列表 显示框大小
<select name=”” size=”1” multiple>实现多选:按ctrl多选
<option value=””> 列表项
…
</select>
默认值为第一项
href和src的区别:
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接
src是source的缩写,指向外部资源的位置,指向的内容将会嵌套到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内