A、数据、服务器
1、上网就是请求数据,数据缓存。
2、服务器
服务器上面存放着网页相关的文件:包括HTML、CSS、JS文件、图片等。
当我们打开浏览器,输入网址,我们的计算机就会对这些文件发送HTTP请求
服务器收到这个请求之后,会把这些文件通过HTTP协议,传输到我们的计算机通道中,
然后,我们的浏览器再对这些文件进行渲染,呈递到页面上。
3、HTTP(超文本传输协议 :Hypertext Transfer Protocol.)
比普通文本厉害的文本,就是超文本
4、HTML
业界的一个标准,网页技术的严格的三层分离:
HTML负责描述页面的语义;CSS负责面熟页面的样式;JS负责描述页面的动态效果;
所以:HTML不能让文字居中,也不能更改样式,比如颜色、字体,这都是CSS干的,也不能让盒子动起来,这是JS干的
也就是说:HTML只能干一件事情,通过标签对,给文本添加语义。
B、HTML
1、文档声明头
任何一个标准的HTML页面,第一行一定是
<!DOCTYPE ……>
作用:它可以告知文档用哪个类型的规范
我们之前所学的HTML,他是HTML4.01版本,也是从IE6开始兼容的,HTML5是从IE9开始兼容的。
有很多类型:
在HMTL4.01版本里面,有两种大规范,每个大规范里面有三个小规范,所以总共有6个规范。
HTML4.01它分为两种:普通的、以及XHTML。
HTML它觉得自己的规范不严谨
<h1><H1>
于是,诞生了一个严谨的规范:XHTML ,X代表的严格;
HTML 4.01 Strict 严格的
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional 普通的
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset 带有框架的
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
在HTML5里面,简化成了<!DOCTYPE html>,并且,向下兼容
2、字符集
<meta charset="utf-8" />
字符集用meta标签定义,meta代表“元”,“元”配置,便是基本的项目配置
Charset就是字符集合的意思,
在中文项目开发中,主要分为两种字符集:
1、 UTF-8:国际通用字库,涵盖了全球所有人类的文字语言。
2、 Gb2312:是国标,中国的字库,里面只包含所有汉子和常用的外文,比如日文片假名,还有一些常见的符号$¥。
字库的规模:UTF-8>gb2312
字库的选择,因为UTF-8涵盖的文字很多,所以臃肿,加载速度很慢,gb2312小巧,加载速度快很多
列子:
QQ网,网易,搜狐都是用的gb2312,他们追求显示速度、
新华网,用的UTF-8,保证字符集的数量。
2.1 关键字和页面描述
meta标签除了可以设置字符集,还可以设置关键字和页面描述
<meta name="description" content="网易是中国领先的互联网技术公司
为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、
体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" /
给页面设置这个描述,那么当你百度搜索的内容和这个相关,就会显示出你的页面,这个技术叫做“SEO搜索引擎优化”
定义关键字:
3. title标签
也能有助于SEO,
4. HTML,对换行不敏感,对空格,tab不敏感。当出现空格、换行的时候,会出现空白折叠现象。
5. HMTL标签
5.1 P标签
段落标签,他是一个文本级标签,里面只能放文字、图片、表单元素,其余一律不能放。
5.2 img
页面中可以插入图片的类型有:jpg,gif,png,bmp。
Html是不能直接放入图片,因为他是纯文本,所以只能插入图片路径,所以长传项目的时候,图片也要一起打包上传。
他是一个自封闭镖标签
自封闭标签和标签对的区别,标签对除了给页面添加语义,还要添加内容,自封闭标签只要添加语义就行了。
5.2.1 img标签属性
alt:替代
src:路径
当你需要返回上一层的时候,那么,就:../
相对路径绝对不会出现下列情况:
aaa/../bb/1.jpg
6. 超级链接
一个网站,他是由很多html页面组成的,html之间,是可以通过超链接相互跳转,形成一个“网”。
语法:<a href="index.html">主页</a>
a, 就是锚的意思
6.1 a标签的另外两个属性
title:悬停文本
target:是否在新窗口中打开。目标的意思
<a href="index.html" title="这是前往主页的" target="_blank">主页</a>
target="_blank" _blank他是一个固定的写法
6.2 锚点
页面中是可以有锚点的,所谓的锚点,就是一个小标记,这个标记用户不可察觉,可以通过name属性来设置,或者ID,如果a标签有name属性,那么就是页面的一个锚点
<a href="#md" target="_blank">前往锚点</a>
<a id="md">我是一个锚点</a>
最后,a标签是一个文本级标签,a的语义要小于p,a就可以当做文本来处理,所以p里面就相当于放的纯文字
正确:p包裹a
<p><a>段落</a></p>
错误:
<a><p>duanluo</p></a>
7. 列表(三种)
7.1无序列表
无序列表,用来定义一个列表的语义,并且每个项目和每个项目之间是不分先后的
Ul,无序列表
Li,列表项
7.2有序列表
Ol,有序列表
Li,列表项
有序列表用的不多,平时可以直接在ul里面加入数字代表序列
7.3定义列表
定义列表也是一个组标签,不过比较复杂,出现了三个标签:
dl:表示定义列表
dt:表示定义标题
dd:表示定义表述词
dt,dd只能在dl里面,dl里面只能有dt,dd,一个dt可以配多个dd
dt,dd 都是容器级标签,想放什么都可以,所以,现在我们应该注意并且了解:
【用什么标签,不是根据样式来决定,而是语义。】
8. div和span
div和span是非常重要的标签,div的语义的’分割’,span的语义是’范围、跨度’,在CSS里面,他们都是最重要的盒子。
Div是一个容器级标签,里面什么都可以放,包括他自己。
Span也表达一个小区域,小跨度,但是是一个文本级标签。
也就是说,span里面只能放文字、图片、表单元素,里面不能放p、h1-h6、ul、dl、ol、div。
Span里面是放小元素的,div里面是放大东西的。
我们日常的开发模式都称为:div+css布局,div负责布局,负责结构,负责分块,CSS负责样式。
9. 表单
表单就是收集用户信息的,让用户填写、选择的。
Form就是英语表单的意思,里面有action和method属性。Action就是表示,将要把表单提交到哪个地儿。Method属性表示用什么HTTP方法提交,有get和post两种方法。(在JS的AJXA里面详细介绍)。
9.1 文本框 <input type="text" />
Input表示输入,指的是这是一个“输入小部件”,
Type代表类型
Text,表示是一个文本。
这也是自封闭标签
还有默认值:value,就是框中已经填写好的内容。
9.2 密码框 <input type="password" />
9.3 单选按钮
<input type="radio" name="xingbie" />男
<input type="radio" name="xingbie" />女
只能选一个,术语叫做互斥,通过name来设置,name相同则互斥。
如果想要默认被选中,那么则加上checked
9.3 复选框
<input type="checkbox" name="aihao"/>睡觉
<input type="checkbox" name="aihao"/>吃饭
<input type="checkbox" name="aihao"/>打球
复选框最好也要给相同的name。
在html5里面,input类型会增加很多,在这里,我们先用这几个基本的
9.4 下拉列表
Select就是选择,option就是选项
Select标签和ul,ol,dl一样,都是组标签。我们可以用select做页面的分块布局
9.5 多行文本框(文本域)
Text就是文本,area就是区域
<textarea cols="30" rows="10"></textarea>
这个标签,是一个标签对,里面不用写东西,如果写了,就是默认文字。
Cols代表列,rows代表行。值就是一个数,表示多少行多少列。
9.6 三种按钮
按钮也是input标签,一共有三种:
普通标签:
<input type="button" value="我是一个普通标签" />
提交按钮:
<input type="submit" />
Submit就是英语提交的意思,这个按钮不需要填写内容就有提交的文字,这个按钮点击后,表单就会被提交到后台。
传统前端开发工程师,只需要关系页面的样式,板式,交互,数据的保存,读取,处理,都是后台做的,但是,我们后面会学(node.js,他是处理后台数据的框架),然后,我们怎么把数据给后台,通过两种方式,一种表单提交,另一种,ajxa.
9.7 label标签
在前面的单选按钮里面,有两个汉字,男、女,这两个汉字和input标签没有关系,那么,label就是解决这个问题的,
Input元素要有一个ID,然后label标签就有一个for属性,和ID相同,就表示绑定起来了。
什么表单元素都可以有label
9.8 重置按钮:
<input type="reset" " />
Reset复位的意思
Input类型:
Text,password,radio,checkbox,button,submit,reset。
10. HTML的废弃标签。
现在HTML只负责语义,而不负责样式,但是HTML一开始,连样式也包办了。这些样式标签,都已经被废弃了。
2004年前面的东西:
<font size="12" color="red">哈哈</font>
这些标签都是CSS钩子,而不是愿意:
<b>加粗</b><u>下划线</u><i>倾斜</i><del>删除线</del><em>强调</em><strong>强调</strong>
这些标签,有浓厚的样式作用,干涉了CSS的作用,所以HTML抛弃了他们。
<br /><hr />