HTML 学习笔记 （第一单元）

第一单元 走进网页设计

第一课

网站制作流程

URL统一资源定位符

网页地址：英文全称Uniform Resource Locator 简称URL
URL组成：http://www.baidu.com
http为传输协议 www.为 World Wide Web —— 万维网 （万维网是互联网的功能之一/万维网是一个由许多互相链接的超文本组成的系统，通过互联网访问）

网站组成

多个网页组成网站
网页的组成（结构HTML 样式css）

第二课

什么是HTML

ＨＴＭＬ英文释义: HyperText Markup Language （超文本 标记 语言）
超文本就是用超链接的方法，将不同信息组织在一起的网状文本
标记用来区分网页的不同部分,比如文字、图片等
HTML是描述网页的超文本标记语言。

专业软件

Sublime_text
Sublime_text

官 网：https://www.sublimetext.com

VS Code
VS Code

官 网：https://code.visualstudio.com
本课程使用的是Sublime_text，VS Code也很强不过不推荐新手使用

Sublime_text 食用方法

  1. Ctrl + N新建文件
  2. Ctrl + S保存
  3. 修改为网页格式：html或htm
  4. 右键
  5. 浏览器打开
  6. 英文状态下输入 ！然后TAB

第三课

HTML标签应用

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>  //声明文档类型，必须放在文档的第一行
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
html基本结构
<html></html>   //声明文档类型，必须放在文档的第一行
<html></html>   //整个网页
<head></head>   //网页头部
<body></body>   //网页主体
<meta>          //声明语言编码方式
"UTF-8"         //国际编码方式
<title></title> //网页标题
head 和 body的父元素是 html
标签特点
  1. 由<>包围
  2. 用/闭合
  3. 用双标签可以存放内容
  4. 标签不区分大小写（一般人都用小写没人用大写）
标签分类

双标签：成对出现 （有对象）
单标签：单个出现 （没对象）
注：在语法当中但标签是必须要有 / 的但是在HTML5中br省略了 / 可以不写但是不规范 在语法判定当中也是不正确的

第四节

为什么建立web站点

一个网站会有多 张图片、视频、音频
多个 HTML 和 css
如何管理各种类型的文件呢？
web站点就可以实现入行它们各司其职进行统一管理

如何建立web站点

站点本质是一个文件夹，一个站点由若干文件组成，文件根据格式分类存放，便于统筹管理。
站点中会存放三个文件夹和一个文件

文件夹：

html（存放html文档）
css（存放css文件）
images（存放图像）（当然老程序员都用img了 ）

文件：

index.html （首页）

思维导图

web站点结构命名

首页命名

1 网站首页命名一般是 index 或 default （共同开发必须用这个不然同事不停找你对接 特别是离职后…）
2 index 是索引的意思 default 是默认的意思
3 这是一种网页制作人员的 默认规范 （当然你自己搞也可以不规范自己认识就行）

命名规范

其他文件或文件夹的命名：
1 只能是字母，数字，下划线
2 不能是中文。
3 不能以数字开头。
4 见名知义.

第五课

为什么使用PhotoShop软件 （PS）

什么是PhotoShop

PhotoShop是Adobe公司开发的图像处理软件。
PS三大功能： 选区工具 吸管工具 切片工具
选区
1.找到工具区的第二个工具（选区工具）去测量网页的距离
2.得到宽度width和高度height的值
3.在跟原网页一一对应
切片
1.找到工具区的第五个工具去切图
2.切出所有想要的图片
3.点击文件中储存为web所用格式，点击存储
4.修改名字，选择切片格式
注意事项：
修改设置的步骤：
1.点击设置
2.图像放进文件夹前面的小勾去掉
ps 的使用不过多赘述会用就行

站点内图片格式

图片格式的特点

JPG（jpeg）格式 颜色丰富、文件小、有损压缩
PNG格式 支持 透明 透明、文件大、无损压缩
GIF格式 支持动画、支持透明、最多存储 256 种颜色

表示颜色的三种方法

1 RGB 每一项 0-255 变化
2 十六进制 由0-9和a-f中任意六位组成一种颜色
3 英文单词 red红色、yellow黄色、green绿色、cyan青色、blue蓝色、gray 灰色

概念图总结

图片5.png

第一单元完！