网页简史
世界上第一个网站的创建者 —— 蒂姆.博纳斯-李。1991 年 8 月 6日,世界上第一个服务器和第一个网站在欧洲核子研究中心上线。
世界上第一个网站的网址 http://info.cern.ch/hypertext/WWW/TheProject.html
浏览器是访问网站的工具,前端工程师负责编写网页的源代码,浏览器负责将网页渲染成想要的样子。(很大程度上取决于浏览器)
浏览器:
在万维网初期,网页的编写并没有标准,于是就出现了这种情况不同的浏览器会有不同的渲染效果。于是 博纳斯-李在 1994年建立 万维网联盟(W3C)
W3C:万维网联盟(World Wide Web Concortium)的出现是为了制定网页开发标准,以使同一个网页在不同的浏览器中都可以有相同的效果。所以我们需要制订我们编写的网页都需要遵循 W3C的规范。
根据 W3C标准,一个网页主要由三个部分组成:结构、表现、行为
- 结构:HTML 用于描述页面的结构
- 表现:CSS 用于控制页面中元素的样式
- 行为:JavaScript 用于响应用户的操作
HTML 简介
HTML 文件后缀使用 .html 标记,也可以使用 .htm 表示 HTML文档,这两个本质上是一样的。
HTML (HyperText Markup Language)超文本标记语言,负责网页的结构
所谓超文本指的是超链接,使用超链接可以让我们从一个页面跳转到另外一个页面
HTML 使用标签的形式来标识网页中的不同组成部分
HTML 标签
标签一般为 成对出现的双标签,但是也会存在一些自结束标签。
双标签:例如 <body> </body> 或 <div> </div>
自结束标签:例如<img>、<img> 也可以写成 <img />、<input />
<img> 和 <img />两种写法都是正确的,<img />这是 XML的写法,XML语法要求更加严格,必须使用 / 结束标签。而HTML的文档要求没有那么严格。
HTML标签大小写不敏感,但要全部小写
HTML 注释
注释中的内容会被浏览器所忽略,不会在网页中直接显示,可以在源代码中查看
注释是用用来对代码进行解释说明的。注释要求简单明了,注释也可以将一些不希望显示的内容隐藏。
注意:注释不可以嵌套
<!-- 注释内容 -->
HTML 属性
属性:在标签中还可以设置属性(开始标签 或是 自结束标签)
属性是一个名值对结构,属性和标签之间要有一个空格隔开。
文档声明(doctype)
文档声明用来告诉浏览器当前网页的版本。
迭代,网页的版本 HTML4 到 XHTML2.0 到 HTML5
HTML5 的文档声明(大写小写均可,但是不可以大小写混用 )
<! doctype html> 或是 <! DOCTYPE HTML>
进制
十进制:
- 特点:满10进1
- 计数:0\1\2\3\4\5\6\7\8\9\10\11\12 …… 20
- 单位数字(单个数字):10个(0~9)
二进制(计算机底层的进制)
- 特点:满2进1
- 计数:0\1\10\11\100\101\110\111
- 单位数字:2个(0~1)
扩展:
所有数据在计算机底层都会以二进制的形式进行保存
可以将内存想象为一个由多个小格子组成的容器,每个小格子中可以储存一个1或是 0
一个小格子在内存中占用的大小是 1位(bit)
- 8bit = 1byte(字节)
- 1024byte = 1kb(千字节)
- 1024kb = 1Mb(兆字节)
- 1024Mb = 1Gb(吉字节)
- 1024Gb = 1Tb(特字节)
- 1024Tb = 1Pb(拍字节)
八进制(用的很少)
- 特点:满 8进1
- 计数:0\1\2\3\4\5\6\7\10\11…… 20
- 单位数字:8个(0~7)
十六进制(一般在显示二进制数字的时候,都会转换为16进制)
- 特点:满 16进1
- 计数:0\1\2\3\4\5\6\7\8\9 a b c d e f 1a 1b 1c 1d 1e
- 单位数字:16个(0~f)
字符编码:
所有的数据在计算机中存储的时候都是按照二进制的形式进行存储的,文字也不例外。
所以一段文字在存储到内存中时,都需要转换为二进制编码
当我们读取这段文字的时候,计算机又会重新转换为字符,供我们阅读。
编码: 将字符转换为二进制码的过程称之为编码
解码: 将二进制码转换为字符的过程称之为解码
字符集(charset):编码和解码所采用的规则称之为字符集
乱码问题: 如果编码和解码所采用的字符集不同就会出现乱码问题
常见的字符集:
- ASCII(128)美国
- ISO88591(256)
- GB2312 中国
- GBK 中国(扩展)
- UTF-8(万国码)
在开发时使用的一般都是 UTF-8
可以使用 <mate>标签来设置网页的字符集,避免乱码问题
<meta charset="UTF-8">
HTML 字符实体
当我们在页面中编写的多个空格默认情况会自动被浏览器解析为一个空格,这时候需要使用一些特殊符号来表示。
在HTML中有些时候,不可以直接书写一些特殊符号,比如,连续多个空格,或是字母两侧的大于号小于号。
如果我们需要在网页中书写特殊符号,则需要使用html实体(转义字符)
常用的字符实体:
注意:字符实体对大小写敏感
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | € | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |