!Web云笔记--HTML基础

本文涉及的产品
.cn 域名,1个 12个月
简介: 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

 

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

 

放到

中第一个位置

 

只有

能直接放在 中!!!!

 

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

目录
相关文章
|
2月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
36 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
2月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
2月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
20天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
25 5
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
50 1
前端基础(十七)_HTML5新特性
|
2月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
21 2
|
2月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。