HTML(一)

一.网页显示过程-用户角度

1.用户在浏览器输入一个网站

2.浏览器会找到对应的服务器地址,请求静态资源(可以存放在世界上任何一个地方)

3.服务器返回静态资源给浏览器

4.浏览器对静态资源进行解析和展示

二.网页显示过程-前端工程师

1.开发项目

2.打包,部署项目到服务器里面

三.服务器是什么?

我们日常生活接触到都是客户端,前端的东西.比如qq音乐

我们知道自己的手机并不可能存放那些多的数据和资源:

比如你用<网易云听音乐>,音乐数据大部分都是存在"服务器"中的.

那么服务器到底是什么呢?

服务器本质上也是一台类似于你电脑一样的主机;

但是这个主机有几个特点:

1.二十四小时不关机的(稳定运行);

2.没有显示器的

3.一般装的是Linux操作系统(比如centos)

四.网页的三大组成部分

1.HTML:网页的内容结构(比如人最基本的骨架)

2.CSS网页的视觉体验,为了好看(比如穿了好看的衣服)

3.网页的交互处理,可以点击等等(比如滑雪)

五.浏览器的作用

浏览器的渲染引擎

浏览器最核心的部分是渲染引擎,一般也称为浏览器内核

复杂解析网页语法,并渲染(显示)网页

常见的浏览器内核:Webkit,Blink

六.HTML语言和基本结构

超文本标记语言

HTML超文本标记语言,是一种用于常见网页的标记语言

七.什么是标记语言?

由无数个标记(标签,tag)组成

是对某些内容进行特殊的标记,以供其他解释器识别处理

比如使用

标记的文本会被识别为"标题"进行加粗文字放大显示

由标签和内容组成的部分称为元素

八.什么是超文本呢?

不仅仅可以插入普通的文本(Text),还可以插入图片,音频,视频

还可以表示超链接,从一个网页跳转到另一个网页

九.什么是元素?

例如div,span等等

十.文档声明

HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型

HTML文档声明,告诉浏览器当前页面是HTML5页面

让浏览器用HTML5的标准去解析识别内容

必须放在HTML文档的最前面,不能忽略.省略了会出现兼容性问题

html元素

元素表示一个HTML文档的根(顶级元素),所以它也被称为根元素

所有其他元素必须是此元素的后代

W3C标准建议为html元素增加一个lang属性,作用是

帮助语音合成工具确定要使用的发音

帮助翻译工具确定要使用的翻译规则

比如常用的规则:

lang="en"表示这个HTML文档的语言是英文

lang="zh-CN"表示这个HTML文档的语言是中文

十一.head元素

HTML head元素规定文档相关的配置信息(也称之为元数据),包括文档的标题,引用的文档样式和脚本等.

什么是元数据,是描述数据的数据;

这里我们可以理解成对整个页面的配置

 

 
  //IE适配
  //viewport视口

常见的设置有哪些呢?一般会至少包含如下2个设置

网页的标题:title元素

网页的编码:meta元素

可以用于设置网页的字符编码,让浏览器更精准地显示每一个文字,不设置或者设置错误会导致乱码

一般都使用utf-8编码,涵盖了世界上几乎所有的文字

常用的元素:

p元素,h元素

img元素,a元素,iframe元素

div元素,span元素

下阶段学习的元素

ul,ol,li元素

button元素,input元素

table,thead,tbody,th,tr,td

十二.常见元素-h元素

在一个页面中通常会有一些比较重要的文字作为标题,这个时候我们可以使用h元素

h元素自带很多css样式,比如字体,加粗,上下边距

-

标题(Heading)元素呈现了六个不同的级别的标题

Heading是头部的意思,通常会用来做标题

级别最高,而

级别最低

注意:h标签通常和SEO优化有关系 (什么是SEO,后续)

十三.常见元素P元素

如果我们想表示一个段落,这个时候就可以使用p元素

HTML

元素(或者说HTML段落元素)表示文本的一个段落

p元素是pargraph单词的缩写,是段落,分段的意思

p元素多个段落之间会有一定的间距

十四.常见元素-img元素

img是一个可替换元素

alt 属性,不是强制性的,有两个作用

1.当图片加载不成功(错误的地址或者图片资源不存在)那么会显示这段文本;

2.屏幕阅读器会将这些描述读给需要使用阅读器的使用者者,让他们知道图形的含义

相对路径是后面会用户使用时,路径会自动指向服务器打包的路径