！Web云笔记--HTML基础

Web自学笔记第一阶段笔记综合汇总

参考资料：《Head First HTML&CSS》（中文第二版）(美国)弗里昂ISBN：9787508356464
中国电力出版社

全部阶段：HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透

Web学习笔记第一发：认识html：web语言

强调，emphasize
大多数浏览器会把文本斜体，不重要不用记了

Html文件里若干的空格和回车都被算作一个空格！！！想人为输入空格还得写实体，回车的话用

浏览器会忽略html文档中

的制表符
回车和大量空格

Html注释方法之一：

块元素和内联元素

第一发完------

Web学习第二发：认识超文本

注意，html语句一定要是英文标点符号！！！！！拒绝国产变态符号，具体参见《中英文常用符号对照表》

安全第一：你可能看到web上有一些不严谨的html属性没有加双引号，不过你可不能偷懒，如果不严谨可能会导致很多问题

文件系统可以看成是一个树根：和树相反，树根是朝下生长的，而且也无环（当然现实中的树根经常相互嫁接产生环路）所以我们今后将拿树根而不是树来比喻文件体统和一些子孙嵌套的系统。

Href：引用的地址
reference

相对地址与绝对地址

左斜杠（右斜杠也叫反斜杠）最常用：http、文件系统、右标签等等，但是Windows特么的用反斜杠来表示文件体统

两个点..代表上层文件夹，一个点.代表所在的文件夹

题外话：linux中打开本目录下的文件可以写：./filename，即访问此文件夹下的某个文件

../../../..。。。上层上层上层。。。。

Web页面与操作系统无关（相互独立）因为中间夹着浏览器，所以写web页面不必考虑OS的兼容性！！！！！！

注意：：网站文件名和文件夹名中不要使用空格！！！！！！！！！

行业建议：最好在构建网站初期组织网站文件，这样就不用再网站升级时修改一大堆路径
了。

相对路径就是：web文档所在文件夹(目录）为起点，去往寻找连接指向的文件。

Web学习第三发：扩展词汇，一些标签

Html语言线性扫描的时候只有三个特殊字符：小于号<</span>大于号>和与符号&。因为是从左到右线性扫描的，小于号大于号成对出现，与符号和分号；也成对出现，所以除了尖括号内的内容以及实体字符，其余的字符都视为文本字符串！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

引用元素（quote）可能是搜索引擎的目标之一

两种元素（标签）：正常元素和void（空）元素，前者指成对出现的元素，后者是单着的，如

有序列表元素的好处：自动编号，否则想改变顺序或者增删新列表项就要人为重写序号，太麻烦

列表元素只能包含

实体：<</span>；是<(less
than) 
>是>(greater
than) 
&是&自己（ampersand=and）

http://www.unicode.org/charts/获得详细的特殊字符实体表示法、

就像程序语言中的转义字符\，也需要一个转义字符来表示自己

Html中的实体字符的目的：用有限的ascii字符来表示海量的unicode字符！！

既可以是内联元素也可以是块元素！！！！

是inline元素

既不是内联元素也不是块元素。。。

第四发：进军http

找一家托管公司（租一台服务器）/购买一台服务器（购买域名）/搭建localhost（仅供测试）

ICANN域名管理机构

www其实是域中服务器的名字

Starbucks.com才是域名

二者合起来叫网站名：域名可以用于多个网站

ftp图形化软件：比如百度网盘客户端。。。

ftp命令行：cd、put、mkdir、dir、pwd、get。。。。同DOS、linux等操作系统

SFTP：secure
FTP

强烈推荐Dreamweaver！！！！！！！！！

url的组成：

第一部分：协议名，比如http、ftp

第二部分：服务器名：比如www

第三部分：域名

第四部分：绝对路径

第五部分：（其他内容）

科普：什么是协议，只有在多台智能设备之间才叫协议，如交换机路由器、pc与服务器

绝对路径就是出发点为根目录的路径，以/开头，/代表根

单机一个相对路径链接时，浏览器会生成一个绝对路径发出去（url）

默认html文件是index.html或defaut.html

使用相对路径的好处：一来节省墨水，二来当网站位置移动或者改名不用一一修改路径

从本机读取文件file:///有三条杠。。。因为中间网站名的位置为空！！！

Web默认端口：80

中的title属性：覆盖所链接网页的

中的中的内容！！！！！

行业建议：不要把链接放在一起，不然用户很难发现！！！！

元素创建id属性：跳转到页面特定位置（也可以是本页面）！！！！！！！！！！！！！！！

Id的唯一性：同一页面值唯一；统一元素种类唯一！！

元素属性的顺序随便：排名不分先后

可以为任何元素增加title属性！！！！（用于提示）

Id一定要字母开头？！后面可以是字母、数字、减号、下划线、冒号、点号，不能有空格！！！

的target属性：

“_blank”在新窗口（标签页）打开

“_parent”:????

“新名字”：所有目标为它的网页都会在同一新窗口打开（覆盖）

第五发：

浏览器获取图片滞后于html

浏览器也可以设置为不获取图片！

Web上常用格式：jpeg
png gif

Jpeg：

连续色调如照片

256^3=1600多种颜色

有损压缩

文件较小

Png：

单色图像线条图像如logo和小文本

上百万种颜色png-8 png-16 png-32

无损压缩优于gif

支持透明比gif更高级

比相应jpeg文件较大

Gif：

单色线条图像

256中颜色

无损

支持透明

比相应jpeg大

支持动画

Alt属性：图片显示不出来时显示的文本

一英尺=30.48cm

一英寸=2.54cm

浏览器的auto image resize功能

强烈推荐Photoshop
，有专门为web图片服务的存储选项

Href可以直接链接到图片文件！！！

边缘柔化：！！！！！！！！！！！！

针对小文本或者矢量logo

栅格化成位图后放大会产生锯齿

抗锯齿就是在周边覆上一层相对于背景的渐变色

所以如果背景透明的话，就要将柔滑边缘设置成对应理想的背景色

行业经验：图片宽度少于800px

第六发：html标准

！！！

标准html(5)不用再考虑版本号，html变成一个活的标准，版本的概念被淡化，继续根据需要发展和变化，向下兼容：向html添加新内容，支持原来的内容

W3c验证工具

http://validator.w3.org

题外话：什么是编码：编码是程序语言和底层二进制之间的桥梁

放到

中第一个位置

只有

和能直接放在中！！！！

----------------------------------完-------------------------------------------