******************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.IDE
MyEclipse、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) 访问上一级目录
../ ?表示后退一步
小技巧: 可以画出目录结构图方便理清思路,如果实在不想换 ?点一下后退 就敲一个../ 肯定不会出错
***********************************转译字符**********************************
空格 ?
初识HTML
原文地址：https://www.cnblogs.com/MrTanJunCai/p/9907525.html