前端DAY01-HTML
DAY01
计算机的介绍
特点：
1.可以进行数值计算，可以进行逻辑计算
2.具有存储记忆功能
硬件：看得见，摸得着的 显示器，主机，存储器
软件：看得见，摸不着的
系统软件：操作系统：windows、Linux、UNIX等
应用软件：各类app
C/S架构和B/S架构
1.C/S架构：需要安装 app
C:client 客户机 由服务器S提供的信息
S:server 服务器 (数据来源)
优点：安全性更高
缺点：对用户来说需要安装更新维护
2.B/S架构：不需要安装 网页
B:browser 浏览器由服务器S提供的信息
S:server 服务器 (数据来源)
优点：对用户友好，对设备要求低，不必安装维护
缺点：安全性低
网站的建设流程
一、注册域名(网址)：www.baidu.com
二、租用服务器：一台电脑用来存储数据
三、网站制作:
以前的流程：
1.产品经理提需求
2.UI根据需求设计网页
3.前端把UI设计的网页以代码的形式运行到浏览器
4.后台：数据处理，功能的实现
5.测试：测试问题
6.上线
现在的流程：(前后端分离)
1.产品经理提需求
2.UI和前端及后台同时工作
3.联调
4.测试：测试问题
5.上线
四、推广：1.免费推广：从代码上进行一些处理
2.付费推广：广告，视频(抖音，b站...) 百度推广...
五、维护
前端和后台：
前端：客户端，离用户比较近，所做的工作是用户看得到的
后台：服务端，所做的工作是用户并不能直接看到的
前端和后台的关系：
前端发出请求给服务器，后台根据前端发出的请求进行响应，把结果反馈给前端，显示在前端界面上
Web网站和网页
web：全称 world wide web；万维网、广域网、互联网
网站：是无数个网页的集合
网页的组成：
网页的结构html：超链接、音频、视频、图片、文本...搭建的网页结构；
网页的表现css：修饰结构，让结构更好看；
网页的行为javascript：实现和网页的交互效果；
浏览器的介绍
网页需要在浏览器中运行
浏览器的兼容：浏览器解析代码的结果不一样的情况，兼容主流浏览器；
主流浏览器：IE、firefox、Safari、Chrome、opera、edge
内核：（四大浏览器内核）
Trident 不能跨平台 IE
Gecko 开源 firefox
webkit 轻量级 (Safari 、苹果浏览器、谷歌浏览器(旧版))
webkit–>blink (由webkit衍生而来的) (谷歌、opera)
Presto(Opera前内核) (已废弃) (opera)
Web标准
代码需要标准化
Web标准：
结构：html5
表现：css
行为：js
结构和表现的语言标准是由W3C制定的
行为标准是由ECMA制定的
html+css
xhtml(html4.01)+css2.0
h5+c3
编辑器的使用
1.安装插件
2.打开文件夹，创建文件夹和文件
3.项目里存在的基本的文件和文件夹
css文件夹：存放css文件；
html文件夹：存放除index.html文件的html文件；
js文件夹：存放index.html文件；
images文件夹：存放图片；
index.html 表示首页；
编辑器中常用的快捷键
1.显示html5基本结构的快捷键：! 回车
2.alt+shift+下 复制
文件的命名规则
1.小写英文字母，或者英文字母、数字、连接符、下划线的组合；
2.其中不得包含汉字、空格和特殊字符；必须以英文字母开头；
3.不可以数字开头；
注：只要是语法上的标点符号，都要使用英文输入法的符号；
HTML的发展史
XML：可扩展标记语言
HTML：超文本标记语言
XHTML：可扩展超文本标记语言
HTML的基本结构
：文档声明，浏览器以html5版本来解析当前的代码，必须放在第一行，不区分大小写
：根标签，根元素
：定义语言；“ch”中文
：头部区域，描述区
：主体区
：定义编码格式，字符集
HTML5的语法
<标签 属性 = "属性值" 属性 = “属性值1 属性值2”></标签>
说明：
1.<>里面的第一个单词，称之为标签、标记、元素；
2.标签可以没有属性，也可以有多个属性；
3.标签和属性之间要用空格隔开；
4.标签有多个属性时，属性和属性之间也要用空格隔开；
5.属性与属性值用等号连接；
6.属性值必须卸载引号里面（可以是“ ”，也可以是’ ‘）；
7.属性有多个属性值时，属性值之间用空格隔开；
标签的两种类型：
常规标记(双标记)：又开始标签，也有结束标签
空标记(单标记)：只有开始标签，没有结束标签，自结束的
可以不写
HTML中标签之间的关系
嵌套关系
并列关系
HTML4.01标签-文本标签,段落标签，加粗标签,倾斜标签,下划线标签
1.文本标题标签：
<h1~h6> 一到六级标题
h1一般放logo
文本标题标签和网页标题标签的区别：
显示位置不一样
代表的含义也不一样
2.段落标签：
3.加粗标签：普通加粗 语义化标签，更具有强调的作用
4.倾斜标签：普通倾斜 语义化标签，更具有强调的作用
5.下划线标签：普通下划线 语义化标签，更具有强调的作用
6.删除线标签：
7.上标： 下标
8.文本节点：没有默认的样式
9.水平线标签：
是单标签
10.强制换行标签：
单标签
11.转义字符：
 ；空格
< <
> >
© 版权所有
® 注册商标
浏览器更喜欢语义化标签
浙公网安备 33010602011771号