复习HTML和CSS

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 />

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容