html源码笔记【爱创课堂专业前端培训】

时间:2019-08-06
本文章向大家介绍html源码笔记【爱创课堂专业前端培训】,主要包括html源码笔记【爱创课堂专业前端培训】使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、 互联网原理

1.1 概述

html:就是用来制作网页。

互联网原理:上网即请求数据。

用户通过在浏览器上输入一个网址,通过HTTP协议向服务器发送请求,服务器做出响应,将相关的网页数据传输到本地计算机,在浏览器上渲染出来。

数据:文字、图片、视频、音频等。

1.2 服务器

服务器:sever

作用:存放我们的数据。

 

 

 

服务器必须24小时在线,掉线了数据访问不到,就不能正常访问网页。

可以通过个人的计算机里面的一些软件(ftp)来远程控制服务器。

1.3 浏览器

浏览器:browser。

作用:HTTP请求的发起、接收,都是由浏览器来完成的。

浏览器有很多厂商提供,全球五大浏览器:

IE、谷歌(Chrome)、火狐(Firefox)、苹果(Safari)、欧朋(Opera)。

从服务器接收的数据会存放在一个临时的文件夹。接收我们缓存的数据。

临时文件夹作用:第二次访问同一个网站速度会变快,因为第一次浏览的时候,大部分文件已经缓存的本地。

 

1.4 http

HTTP:Hypertext Transfer Protocol,超文本传输协议。

HTTP协议包含了请求和响应两个部分。都是要依赖浏览器。

HTTP请求发送的方法:直接输入网址,点击超级链接。

请求:request,浏览器根据网址向对应的服务器发送请求。

响应:response,服务器根据请求响应文件,将页面传输给客户端,在浏览器中进行网页的渲染。

访问页面时,会同时发出多个http请求,包含网页的图片、视频、音频等文件。

 

 

打开控制台:

Ctrl + Shift + i

鼠标右击 -> 检查

(Fn+)F12

二、 页面组成

结构HTML   表现CSS  行为JavaScript

三、 浏览器及其内核

IE浏览器: trident

Chrome(谷歌)、Safari(苹果):webkit内核

Firefox(火狐):Gecko内核

Opera(欧朋):谷歌的Blink内核

IEEdge:斯巴达内核

四、 纯文本和HTML

显示文件后缀:

 

2.1 纯文本文件和word文件对比:

纯文本文件中:我们只能书写文字、标点符号;占用空间小;格式可以修改,但是只在本机显示

Word文件:除了可以书写文字、标点符号外,还可以插入图片、图表、超链接等等;占用空间大;格式可以被修改且保存。

 

2.2 相关文件的后缀(拓展名):

文本文档   .txt

Word文档  .doc/.docx

Excel文档  .xls/.xlsx

演示文档   .ppt/.pptx

图片后缀   .png/.jpg/.gif/.bmp(位图)/.psd/.ico

注意:后面学了html标签,位图和psd图是不能往页面中添加的

视频   .mp4/.wmv/.flv/.mkv/.ogg

音频   .mp3

压缩文件  .rar/.zip

页面文件  .html/.htm

样式文件  .css

Javascript文件  .js

 

2.3 HTML:Hyper  Text  Markup  Language  超文本标记型语言

超文本:超出了文本的范畴

标记:也叫标签,由w3c组织规定的合法的关键字

语言:

2.4 体会超文本

1 <a href="http://www.baidu.com">Hello 小伙伴!!!</a>

2 <img src='https://imgsa.baidu.com/news/q%3D100/sign=506ea58d99dda144dc0968b282b6d009/5d6034a85edf8db197aa7dfa0723dd54574e74a3.jpg'/>

<pre>

<!-- html中注释:一般在html中会添加一些关键性注释:提高代码的可读性,便于后期维护 -->

<!-- 注释的快捷键:Ctrl + / -->

<!-- pre标签:预格式化,原样输出 -->

html可以看做是纯文本文件,但是它通过符合标准的标签,可以引入一些超链接、表格、表单、图片等等;

</pre>

五、 HTML基础

Sumlime快捷键:

Ctrl + /    添加注释

Ctrl + N   新建一个文件

Ctrl + S   保存(注意路径的选择,后缀的修改)

Ctrl + Shift + S  另存为

html:xt   打开xhtml 过渡版本框架

html:xs   打开xhtml严格版本框架

html:5    打开html5版本框架

标签 + Tab  快速生成标签

Ctrl + Shift + D  快速复制当前行内容

 

5.1 HTML骨架

文档的Doctype声明

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD:DocType Definition。文档类型定义。

作用:规定了文档使用的是哪个版本的html或xhtml书写规范。

html、css、js规范维护更新的组织W3C组织。

中文网址:http://www.w3school.com.cn/

html1.0-html5版本。

html4.01版本,结构和样式做了分离。和Xhtml1.0版本,拓展升级。代码必须用小写字母,属性必须用双引号包裹,结束标签必须写关闭符号/。

 

html4.01和Xhtml1.0这两个规范分别包含了3个小规范:

Strict    严格版:不能使用font/b/u/i等废弃标签,不能使用框架集。

Transitional 过渡版(通用版):可以使用font等废弃标签,不能使用框架集

Frameset 框架集版:可以使用框架集

严格程度:XHTML1.0 Strict  >  HTML4.01 Strict  >  XHTML1.0 transitionl  > HTML4.01  transitionl

html5版本,不再区分3个小规范。

DTD:<!DOCTYPE html>

 

面试题:每一个页面头部都会有一个DOCTYPE声明,这个声明是用来干什么的?

告知我们文档使用的是哪种html或xhtml规范进行开发

 

5.2 html标签

html标签是双标签,表示我们的整个网页。

html标签有一个属性。xmlns表示的是命名空间。

命名空间:namespace

因为我们制作的网页给不同的用户来浏览,命名空间规定我们的标签代表的含义,必须将命名空间进行统一。

Language:语言规范,所有标签用的都是英文。

 

1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 

 

5.3 head标签:

作用:对html文件进行了一些配置。

字符集:定义了当前文件使用的字库。

中文字库:

UTF-8:国际标准字库。包含了人类所有语言的文字。一个汉字3个字节。

GBK/gb2312:中国字库,国家标准。包含所有的简体中文,大部分繁体,一些特殊符号,片假名。一个汉字2个字节。

分情况使用:网页是外文网站,用UTF-8字库。有大量的中文,要求网页加载速度快,用gbk字库。

注意:必须保证设置的字符集和软件保存的字符集类型一致。

title标签内部放的是网页的名字。

里面的内容可以帮我们提高搜索引擎优化(SEO)。

1 <head>

2  <!-- head用来进行一些配置信息设置 -->

3  <!-- meta标签,单标签,b标签内使用“/”结束 -->

4  <!-- meta 元信息标签 可以设置很多东西,只不过由于浏览器算法的提升,慢慢被弃用了-->

5  <!-- 下面使用meta元信息标签设置了字符编码 -->

6  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

7  <!-- title标签用来设置网页的标题,可以提高搜索引擎SEO优化 -->

8  <title>html基础</title>

9  <!-- 使用link标签引入外部的样式文件 -->

10  <link rel="stylesheet" type="text/css" href="./css/test.css" />

11 </head>

字符编码:

UTF-8    万国码

ANSI     美国标准协会编码

ISO8859-1  西欧编码

GBK GB2312 big5  中文编码

5.4 body标签

作用:body部分是我们的网页主体,给客户浏览的区域。

内容:里面放置的是我们的html标签书写的网页结构。

1 <body>

2  <!-- 超链接标签,属性#代表连接到当前页面 -->

3  <a href="#">点我啊!!</a>

4  <!-- 图片标签 -->

5  <img src="./images/1.jpg">

6 </body>

 

六、 HTML基本语法

6.1标签之间对空格、制表符、换行不敏感;它们存在的目的是为了提高代码的可读性

6.2内容之间会出现空白折叠现象

6.3标签有两种:

单标签  <tag />      如:meta    link

双标签  <tag></tag>  如:p  html   head  body  title

注意:不管是单标签还是双标签都是以“/”结束,只不过单标签在标签内结束,双标签在结束标签内结束。

6.4 HTML中属性介绍:

语法格式:  属性 = “属性值”

多个属性之间以空格隔开

Html中属性有这么几种分类:

必需属性,如img标签中的src属性

可选属性,如p标签中的align属性,在有些标签中并不存在

标准属性,每个标签都可以添加的属性,如:lang  style class id等等

事件属性,用户或者浏览器一些行为,如:onclick  onmouseover等等

1 <!-- htmls属性: 属性 = 属性值  多个属性之间用空格隔开 属性位置书写在开始标签的后面 -->

2 <p>这是关于空格、换行、还有  制表符的描述</p>

 

七、 HTML标签介绍

标签分类:

容器级标签:可以存放标签、文本内容  如:h1  div

文本级标签:一般用来存放文本、图片、表单等  如:p  img

7.1  h系列标签  h1-h6

作用:用来给文本添加标题的语义

特点:h1-h6文字逐渐变小,默认加粗效果

注意:h1标签一般用来修饰logo,提高SEO;一个页面中,只允许出现一对h1标签

1 <h1>一级标题</h1>

2 <h2>一级标题</h2>

3 <h3>一级标题</h3>

4 <h4>一级标题</h4>

5 <h5>一级标题</h5>

6 <h6>一级标题</h6>

 

7.2 p标签

作用:给文本添加标题语义

特点:具有换行符

7.3 图片img标签

单标签,有以下几个属性:

src – 用来设置图片的路径

title – 设置文本提示信息

alt – 图片加载失败时文本提示信息

height – 设置图片的高度

width – 设置图片的宽度

border – 设置图片的边框,默认为黑色,且不可修改颜色

1 <head>

2  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

3  <title>Document</title>

4  <style type="text/css">

5   /*通过样式来修改图片的边框的线类型、边框的颜色、边框的厚度*/

6   img:first-child{

7    /*边框的样式为点线*/

8    border-style: dotted;

9    /*设置边框的厚度*/

10    border-width: 10px;

11    /*设置边框的颜色*/

12    border-color: orange;

13    /*通过样式来设置的效果更加丰富,这也是为什么我们后期要引入css的目的之一*/

14   }

15  </style>

16 </head>

17 <body>

18  <!-- 设置图片展示 -->

19  <!-- 添加网络图片路径 -->

20  <img src="https://imgsa.baidu.com/news/q%3D100/sign=b2bfca9a990a304e5422a4fae1c9a7c3/9f510fb30f2442a79693433bdf43ad4bd013028a.jpg" height="100px" />

21  <!-- px是一个绝对单位,代表像素  html中这个单位可以不加 -->

22 

23  <!-- 添加本地的图片路径 -->

24  <img src="./images/aaa.jpg" title="这是一张小美女图片" alt="图片加载失败,请检查网络!!"  width="100" border="10">

25 </body>

注:几个html属性之间是没有先后顺序的

 

相对路径和绝对路径:

引用文件和目标文件之间的相互关系。

绝对路径:带有盘符的完整路径

1 <img src="D:\素材\其他\9.jpg">

2 <p>-----------------------------------------</p>

3 <img src="file:\\D:\素材\其他\9.jpg">

4 <!-- 注意浏览器的差异性,写绝对路径时会有所不同 -->

不建议使用绝对路径,因为换一台电脑,就没有办法找到目标文件。

 

相对路径:目标文件相对于引用文件的位置

1) 目标文件和引用文件在同一个目录下

1 <!-- 相对路径第一种情况:目标文件和引用文件在同一个目录下,直接引用即可 -->

2 <!-- <img src="ddd.jpg"> -->

3 <img src="./ddd.jpg">

2)引用文件和目标文件所在的目录在同一个目录下

1 <!-- 相对路径第而种情况:引用文件和目标文件的目录在同一个目录下,需要进入到目标文件目录下进行引用 -->

2  <!-- <img src="images/ccc.jpg"> -->

3  <img src="./images/ccc.jpg">

3) 目标文件所在的目录和引用文件所在的目录在同一个目录下

需要跳出当前目录,进入到目标文件目录进行引用

1 div{

2  /*设置高度*/

3  height: 200px;

4  /*设置宽度*/

5  width: 200px;

6  /*设置边框效果*/

7  border: solid 1px red;

8  /*给容器添加背景*/

9  background-image: url(../images/284785.jpg);/* ../ 跳出当前目录*/

10  /*设置图片大小*/

11  background-size: 200px;

12 }

4) ....

 

7.4 超链接a标签

网页是数据的集合,有文本、图片、表格、超链接;

网站:包含多个网页

网页之间通过超链接进行跳转,所以说超链接a标签是网页的灵魂。

a标签属性:

href – 设置超链接地址

title – 设置超链接提示信息

target – 设置页面的打开方式

属性值:_blank  在新的页面中打开超链接

_self 默认,在当前页面中打开超链接

name – 可以用来设置锚点,后面高版本不建议使用了

download – h5属性,下载

1 <!-- 链接到外部的网页 -->

2 <a href="http://www.taobao.com">链接到外部网站</a>

3 <!-- 链接到本站中某一个页面 -->

4 <a href="./06_绝对路径和相对路径.html" title="点我,有惊喜啊!!!">链接到本站中指定页面</a>

5 <!-- 设置页面打开方式 target -->

6 <a href="./06_绝对路径和相对路径.html" target="_blank">链接到本站中指定页面target</a>

7 <!-- download属性 下载 h5中属性 部分浏览器可能不兼容 -->

8 <a href="images/aaa.jpg" download="小美女"><img src="images/aaa.jpg" height="200px" border="4"></a>

$flag 上一页 下一页