******************Web前端编程**********************************
B/S 架构
前端知识1. HTML
画一个最简单的网页
2. CSS 美化页面的技术 3. JavaScript 控制行为的比如鼠标放到菜单栏上的某一点 出现对应的种类
鼠标放到搜索框内 清空搜索框的内容 都是用JavaScript控制的 ******************HTML********************************** 学习目标:制作界面美观、符合W3C规范的静态网站一. 什么是HTML
超文本标记语言(HyperText Markup Language),用来制作 静态网页的 一种标记语言.
最新版本是HTML5,先学习HTML4.01 为学习HTML5打下基础.. 二.HTML的基本组成 由标签组成的. 没有分支和循环,比较简单,所以属于标记语言.. 标签分两类:1. 单标记
<br/> 表示回车
<hr/> 水平分隔符 为了符合W3C规范(万维网联盟,一个专门制定Web规范的组织),单标记后面一定要加/,例如<br/>虽然不写/也能够表示回车,但是不规范..
<标签名/> 2. 双标记<标签名>
</标签名>
例如:<html>
</html>
******************永远的HelloWorld**********************************HTML文档的后缀为 .html或.htm 推荐使用.html
一.编写一个html程序 <html> <head> <title>第一个HTML程序</title> </head><body>
Hello,World!!!! </body></html>
二.运行使用任何一个浏览器 打开就可以了
解释执行 读进来一行翻译一行 浏览器把对应的代码 渲染成不同的效果 **************************如何处理乱码*********************************在title下面加一个meta标记
text/html 表示响应给客户端的是 文本/html文档
charset 告诉浏览器该文档使用的是utf-8编码,请你(浏览器)给我使用utf-8解码
<html> <head> <title>第一个HTML程序</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head><body>
Hello,World!!!! </body></html>
**************************常用的编辑工具*********************************1. EditPlus 和Sublime UltraEdit
2. dreamweaver
维护方便 有拆分功能
3.IDEMyEclipse、Aptana、WebStorm JS开发神器
HBuilder H5开发神器 国人编写
**************************常用的标签*********************************
一.文章的标题<h1>标题名</h1>
h1--h6 h1最大 h6最小 注意: h1-h6只能做文章的标题用, 千万不要使用h1-h6来控制文字的大小,文字的大小使用CSS样式来控制 语义化: 标签是有含义的,例如h1 代表文章的标题 ,浏览器一看到h1就知道它是文章标题 二.换行<br/>
在源代码中直接敲入回车,浏览器并不会出现换行的效果,如果想换行,必须要使用br标签 你好<br/>世界<br/>123
break
三.设置段落 <p>内容1</p><p>内容2</p><p>内容3</p>
每一段开头并没有另起两个字符的效果, 每段中间用一行分割开
paragraph 四.设置水平分割线 <hr/> horizontal 水平的 五.添加图片 <img src="图片的位置"/>
<img src="11111111.jpg" alt="图片2" title="图片2"/>
alt和tile的两个作用:1. 显示鼠标悬停文字
2. 如果图片不存在 以alt和title中的文字 代替
六.HTML注释 <!-- 注释内容 -->不会出现任何效果,但是查看源代码的时候会看到注释内容
七.超链接 <a href="http://www.baidu.com">百度</a> 超链接的分类1. 绝对链接
(1) http://www.baidu.com 绝对指向了某个网址
(2)/ 开头 代表指向应用程序的根路径2. 相对链接
(1) 访问同级目录直接写文件名
(2) 访问子级目录
/ 表示进入到该目录
(3) 访问上一级目录 ../ 表示后退一步 小技巧: 可以画出目录结构图方便理清思路,如果实在不想换 点一下后退 就敲一个../ 肯定不会出错***********************************转译字符**********************************
空格