HTML第一天入门

最新推荐文章于 2023-05-03 22:19:26 发布

豆双

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量225

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/shuang666666/article/details/51713962

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础入门

第1天课堂笔记

第一天内容

一. 课前介绍：

１课时安排：

HTML 2天
CSS 6天
JavaScript 3天

目的：
1. 让所有同学的HTML、CSS、JS基础，达到就业班水平
2. 让同学慢慢进入学习状态，逐渐养成良好的习惯，适应学习强度

特点：
1. 慢、细、易。所有的同学，都不要抱怨课程慢，我们要照顾零基础学生。
2. 注重基础，以最简单的案例说明问题，企业项目实践在就业班讲授
3. 千万不要掉以轻心，知识点都非常重要。

２打字速度：

打字速度是必备的素养！

1）严禁二指神功，必须养成正确的指法；比如打{时，要按住shift+[。

正确的按键方法，是左手小拇指按住左边的shift键，右手中指按[键。

2）金山打字通。我们最近4天课，基本跟玩儿似的，贼简单，没啥事儿回家就用金山打字通练习打字。

不要练习中文打字，只练习英文打字就行了。英文文章一定要练习到每分钟100字以上。

３一个具有良好习惯的前端开发人员必须的几个设置：

² 将所有文件的后缀名显示出来。（图解）

Win10,win8:

Win7:

² 将文件的排列方式改为详细信息，并且名称一定要能够全部显示出来。

² 使用小的任务栏。

² 将常用的工具乐锁定到任务栏

４ window中的一些快捷键：

习惯性的使用快捷键可以提高我们的开发效率，下面是window系统下面的一些快捷键。

常用：

Ctrl+C:复制

Ctrl+V:粘贴

Ctrl+X:剪切

Ctrl+S:保存

Ctrl+A:全选

Ctrl+Z:撤销

CTRL＋Y：还原一个操作

win+E:打开资源管理器

Alt+tab:切换程序(注意整个操作过程alt常按)

Win+D(鼠标点击屏幕的右下角)：切换到桌面

Win+R：快速运行，打开软件，cmd命令行等

calc:运行计算器

mspaint:运行画图工具

notepad:运行记事本

。。。。。

Win+L:锁屏。

F5:刷新

Alt +f4:退出程序

其它：

Win+数字键：打开/显示超级任务栏第N个图标代表的程序

Win+方向键：最大化、还原/最小化窗口

Ctrl＋Alt＋Del：显示以下选项：锁定该计算机、切换用户、注销、更改密码和启动任务管理器

CTRL＋SHIFT＋ESC：打开任务管理器

二. 认识浏览器和服务器：

１什么是浏览器什么是服务器：

我们的认知：就是一个图标，可以双击打开，在地址栏中输入完内容之后会显示对应的页面。

我们看不到的内容：

当我们在浏览器的地址栏上面输入内容之后，浏览器会发送请求，到服务器，服务器接收并处理以后，将讲求的页面读取出来返回到浏览器，浏览器接收到响应回来的内容以后，浏览器的内核将内容渲染成一个完整的页面，前且显示出来。

什么是浏览器：

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

什么是服务器：

服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

２浏览器的分类：

主流浏览器：chrome，firefox，Safari，ie，opera····

注意：虽然市面上的浏览器有很多，我们在学习过程中主要使用到的浏览器是chrome.

３使用开发人员工具来查看请求和响应：

３.1 右键，选择审查元素。

３.2 打开开发人员工具。

３.3 打开notwork:

３.4 浏览器发出的请求：

３.5 浏览器请求的详细信息

３.6 浏览器请求数据的原理：

就是浏览器让请求的页面直接去服务器上找，找到了以后将这个文件中的内容通过repsonse响应回浏览器。

４请求协议：http协议：

４.1 请求报文。

４.2 响应报文。

４.3 Url:(地址)地址栏上我们输入的内容。

Url的组成：协议://服务器的ip地址:端口号/请求的页面

５页面的本质：

虽然页面上只有一句，但是在源代码中有很多的内容：

原来浏览器所做的事情是将服务器响应回来的response进行从上到下的解析（渲染），将最后的页面效果显示出来。

６浏览器内核：

内核（Rendering Engine）：可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。

内核的分类：

Trident：ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...

Gecko：Firefox

Webkit：Safari

Blink：Chrome，Opera

问题：为什么浏览器上只显示了一行代码，但是源代码中有6行代码？

三. Html

Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。

１结构（固定的结构）：

<html>

<head>

</head>

</html>

结构记忆法：二师兄

１.1 开始人生中的第一个html页面。

１.2 新建一个记事本，修改后缀为.html.

１.3 以记事本打开：（编写html代码）

１.4 输入html的结构以及内容：

１.5 保存，找到原始文件，找开方式---浏览器（查看页面效果）

２文件的后缀名和打开方式：

２.1 文件的后缀名：

a.修改文件的后缀名是不会改变内容的
b.后缀名是用来决定这个文件的打开方式的.

C.（针对我们编写的html页面）如果我们要查看这个文件的内容，直接以浏览器方式打开，但是如果我们要修改这个文件中的内容，应该以记事本的方式打开。

２.2 打开方式：

电脑中安装了很多的应用程序，可以为某一些的文件选择一种默认的打开方式，如果要修改，可以选中其中一个文件，右键，打开方式（所有的该类程序都以这种方式打开。）

３ Html中的标签：

标签：用“<>”包起来的内容。

Html标签：<html></html>

由于现在学习的html页面还是很简单的，为了能够让页面更加的“充实”我们要学习更多的标签。

３.1 H系列的标签(head)：

作用：有页面上以标题的形式显示出文字。

代码：

h1,h2,h3,h4,h5,h6:将文字放大，加粗.并且逐渐变小。（h1标签是最大的。）

３.2 P标签(Paragraph)：段落标签

作用：用来标记当前页面上某一行文字单独为一个段落

代码：

这是段落

特点：页面上的一个段落，单独占一行，并且与上下内容之间存在距离。

３.3 Hr标签(Horizontal Rule)

作用：在页面显示一条横线。

代码：

<hr />

特点：在页面显示一条横线，默认占整行。

３.4 br标签(break)

作用：换行。

代码：

特点：换行。

３.5 b(Bold),u(Underlined),i(Italic),s(Strikethrough),strong,em,del,ins

作用：

b：加粗

u: 下划线

i: 倾斜

s: 删除线

建议不要使用

作用：

strong:加粗

ins:下划线

em:倾斜

del:删除线

可以使用

３.6 Img标签：

作用：在页面显示一张图片。

代码：

特点：就是显示图片.

属性：

src	图片显示的路径
alt	如果图片加载不出来会显示这个属性中的文字
title	介绍这张图片

路径问题：

两种路径：

a.绝对路径:从电脑的具体盘符开始寻找我们需要的

C:\other\第三期课程\01-html基础-第1天-{html标题}\1.jpg文件。

b.相对路径：两个文件一个文件相对于另外一个文件的位置。

图片与页面在同一级目录下面：

如果要在第一个页面中输出baidu.png

图片在页面的上一级目录下面：

从当前路径跳转到上一级目录：../

图片在页面的下一级目录：

所谓的相对路径将来在页面浏览器之后其实会将相对路径的地址填充到img的src属性中

问题：那么将来我们在实际开发中到底是用绝对路径，还是用相对路径？？

只要不出意外情况都是用相对路径：因为相对路径的可移植性要强。

３.7 A标签：

作用：可以在一个页面跳转到另一个页面。

代码：

注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。

A标签的其它名称：

超级链接，超链接。

A标签的其它用法：

1.0可以不跳转（跳转到当前页面）href=”#”

2.0可以跳转到另外的页面。

3.0可以在自己的页面进行定位。

A.设置a标签的href属性为“#id名”，

B.在页面的指定位置加入一个目标标签（可以是任意标签）

C.必须给这个标签设置一个id名：这是目标

4.0在跳转的页面进行定位。

5.0可以进行下载：（强烈不推荐使用）

A标签的属性：

href

A标签跳转的目标地址

target

_blank:保留原始页面，再进行跳转

_self:在当前页面进行跳转

base

为页面上所有的a标签设置跳转的方式（base标签一般放在titile标签下面）

４ DOCTYPE(文档类型)：

Html:

三种规范
HTML Strict DTD	请求比较严格的html类型（在这种规范中不提倡使用已经被淘汰的标签）
HTML Transitional DTD	相对而言比较规范不太严禁
Frameset DTD	在使用框架时用到

xHtml(html2.0版本（是一种相对html语法更加严谨的hmtl）):

具体分类同html:

注意：将来在使用DOCTYPE的时候建议使用html5的类型。每个页面都要设置一个doctype，如果不设置，浏览器会默认开启quirks mode解析（quirks mode 是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。

５ Html标签：

作用所有html中标签的一个根节点。

６ Head标签：

作用：用于存在：

title,meta,base,style,script,link

７ Body标签：

作用：用于存放所有的html的结构标签：

p,h,a,b,u,i,s,em,del,ins,strong.

８ Title标签：

作用：让页面拥有一个属于自己的标题。

９ meta 标签：

常用用法：

1. Description：可以描述页面，可以用来使用百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。

2. Keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）

3. 字符集（编码格式）：

Charset（字符集的格式）：UTF-8.

注意：字符集（文字在电脑是存储的字典）：

电脑是不能直接存储文字的，一般情况下电脑存储的是这个文字在“字典”里对应的位置。

gb2313---->gbk;

国标2313---->国标扩

所有一般看到乱码的原因是因为查找的字典不对：

我们做了一个小的例子：文档的内容用的是utf-8格式，而我们的存放文档的这个文件的格式是gbk,

１０ Gbk,utf-8之间的区别：

相同点：都是字符的编码格式。

区别：

Utf-8:收录是全世界所有的语言中的文字。

Gbk:收录了汉字，片假名。

大小：

Utf-8>gbk

性能：

Uft-8<gbk

约定：将来我们在整个学习过程中都用utf-8;

Utf-8存储一个汉字占3个字节，

Gbk存储一个汉字上2个字节

四. 通过浏览器查看页面上的元素具体的标签：

查看页面元素的组成。

五. 开发工具的选择sublime

Dreamwaver:偏向设计

Sublime:(轻量级)自带功能不太全，但是插件十分丰富。

Webstrom:（重量级）自带功能比较全面。

侧边栏	查看-->侧边栏
新建文件	文件--->新建文件(ctrl+n)
生成结构代码	html:xt+(ctrl+E)
快速复制一整行	Ctrl + shift + d
快速删除一整行	Ctrl + shift + k
向上移动一整行	Ctrl + shift + ↑
向下移动一整行	Ctrl + shift + ↓

小功能：

a.在浏览器中查看

b.打开所在文件夹

c.复制文件路径

豆双

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML第一天入门

HTML基础入门第1天课堂笔记第一天内容一. 课前介绍：１课时安排： HTML 2天CSS 6天JavaScript 3天目的：1. 让所有同学的HTML、CSS、JS基础，达到就业班水平2. 让同学慢慢进入学习状态，逐渐养成良好的习惯，适应学习强度特点： 1. 慢、细、易。所有的同学，都不要抱怨课
复制链接

扫一扫