!Web云笔记--HTML基础

简介: Web自学笔记第一阶段笔记综合汇总参考资料:《Head First HTML&CSS》(中文第二版)(美国)弗里昂ISBN:9787508356464中国电力出版社全部阶段:HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透...

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

参考资料:《Head First HTML&CSS》(中文第二版)(美国)弗里昂ISBN9787508356464 中国电力出版社

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

 

 

Web学习笔记第一发:认识htmlweb语言

 

强调,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命令行:cdputmkdirdirpwdget。。。。同DOSlinux等操作系统

 

SFTPsecure FTP

 

强烈推荐Dreamweaver!!!!!!!!!

 

url的组成:

第一部分:协议名,比如httpftp

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

第三部分:域名

第四部分:绝对路径

第五部分:(其他内容)

 

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

 

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

 

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

 

默认html文件是index.htmldefaut.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

 

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

 

放到

中第一个位置

 

只有

能直接放在 中!!!!

 

-----------------------------------------------------------------------------

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
3天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
20天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
26天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
32 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发
web前端-HTML-div语法
web前端-HTML-div语法
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式