HTML前端学习1029（HTML结构）-CSDN博客

本文链接：https://blog.csdn.net/qq_32262049/article/details/52968691

一、windows操作系统相关(了解)

1.1 window界面

1.2显示文件的扩展名和详细信息

win8,win10下

在任意文件夹下

点选详细信息和勾选文件扩展名

win7下

任意文件夹下

1.3 快捷操作

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：打开任务管理器

二课程目标及课程介绍

1 课程的目标

如何制作网页，达到升级就业班的水准

2 认识网页

网页上有什么：

文本、图片、输入框、按钮、视频、音频。。。。

3 基础班主要内容

HTML 骨架负责页面的结构

CSS 衣服负责美化页面

JavaScript 动作负责让网页更加的生动

三 HTML

1 什么是html

超文本标记语言

hyper text markup language

超文本：可以比文本做更多的事情

标记：使用符号来声明一些意义(HTML标记)

语言：交流沟通用的工具

是我们和浏览器沟通交流的工具，使用特殊标记来声明一些意义的

是使用特殊标记来和浏览器交流沟通的语言

2 html的页面结构

<!DOCTYPE html> 用来声明文档类型 (document)

<html> 用来声明网页结构的开始和结束

<head> 网页的头部

</head>

<body></body> 网页的主体部分，网页上看见的所有内容都是在body里

</html>

3 开发者工具查看页面结构

1 在页面上右键

2 选择检查

4 第一个简单的页面

1 右键新建文件(文本文件)

2 修改文件名和后缀名(.html)

3 书写页面结构

4 保存

四 HTML标签的学习

标签 = 标记 = 元素

1 标题标签(header)

代码：

1 <h1></h1>

特点：

h1 - h6，没有h7

可以将文字加粗，改变字体的大小，字体大小从h1到h6，依次变小

独自占据一整行

语义：

让文字成为标题

2 字体标签(font)

2 <font color="red" size="2" face="microsoft yahei"></font>

作用：

改变文本的大小、颜色、字体

通过color 属性改变文本的颜色，通过size属性改变文本的大小、face属性改变文本的字体

size要求从1-7

3 标签中属性语法

属性 = 标签的特征

1 一定要写在开始标签里面

2 使用方式：属性名="属性值"

3 多个属性同时存在的时候，要使用空格隔开

4 水平线(horizontal rule)

标签：

3 <hr />

作用：

在浏览器上画一条横线，默认是和浏览器一样宽

标签的分类：

单标签：

不是由一对开始和结束标记形成

比如：水平线标签

双标签：

由一对开始和结束标记形成

比如：h1,font

5 段落标签(paragraph)

标签：

4 <p></p>

作用：

让一段文本成为段落，这个标签会独自占据一行，还会跟其他内容有上下间距

语义：

段落

6 换行标签(break)

标签：

5 <br />

作用：

让内容换行

7 strong、ins、em、del和b、u、i、s标签

标签	作用	用法
strong	给文本加粗	<strong></strong>
em	把文本变成斜体	<em></em>
ins	下划线	<ins></ins>
del	删除线	<del></del>

8 开发工具的介绍及使用

8.1 主流开发工具

sublime 轻量级的插件非常丰富

webstrom 重量级插件相对少

Dreamweaver 美工用的比较多，偏向于设计方向

8.2 sublime的使用

1 新建文件 Ctrl+N（文件-》新建文件）

2 打开文件文件-》打开文件

3 打开文件夹文件-》打开文件夹

9 图片标签(image)

标签：

6 <img src="图片的位置" />

作用：

在浏览器中放置一张图片

10 路径问题

路径：某一个文件存储在计算机当中的位置

10.1 绝对路径

从盘符开始，到达目标文件所经过的所有文件夹

盘符+文件夹+文件名+后缀名

缺点：

可移植性很差

7 <img src="F:\1028 广州前端5期\1029 HTML基础第一天\04 - 源代码\5.png" />

10.2 相对路径

从一个文件到另一文件所经过的所有的文件夹

三种情况

a) 图片和文件在同一级目录

8 <img src="5.png" />

b) 图片在页面的下一级目录

9 <img src="图片/5.png" />

c) 图片在页面的上一级目录

10 <img src="../1.gif" />

11 超链接标签(anchor)

代码：

11 <a href="要跳转的页面的路径"></a>

作用：

a ) 可以跳转到别的页面

通过href属性指定要跳转的页面的路径，如果要跳转的别人的网站，要加上：http://

12 base标签

base标签用于统一设置页面上所有a标签的跳转方式，取决于target属性

17 <base target="_blank">

要求：

base标签必须写在head里面

a标签没有设置自己的跳转方式

13 有序列表(ordered list)

用法：

18 <ol>

19 <li>北京</li>

20 <li>上海</li>

21 <li>广州</li>

22 <li>深圳</li>

23 </ol>

语义：

有序的列表

14 无序列表(unordered list)

代码：

24 <ul>

25 <li>内容</li>

26 <li>内容</li>

27 <li>内容</li>

28 <li>内容</li>

29 </ul>

语义：没有顺序的列表

15 自定义列表(definition list)

30 <dl>

31 <dt>小标题</dt>

32 <dd>列表项</dd>

33 <dd>列表项</dd>

34 <dd>列表项</dd>

35 <dt>小标题</dt>

36 <dd>列表项</dd>

37 <dd>列表项</dd>

38 <dd>列表项</dd>

39 </dl>

自定义列表：

1 有小标题和列表项之分，列表项跟小标题是从属关系

2 小标题和列表项之间存在缩进

五、浏览器与服务器(了解)

5.1 什么是浏览器

浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。

分解：

1 浏览器是软件

2 可以显示HTML文件的内容

3 可以让用户与之交互

5.2 主流浏览器

5.3 浏览器内核

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

内核的分类：

Trident[ˈtraɪdn:t]：ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...

Gecko[ˈgekoʊ]：Firefox

Webkit[webkit]：Safari

Blink：Chrome，Opera

不同的内核在渲染同一内容的时候会有差别。

浏览器内核渲染页面是从上到下依次渲染。

5.4 什么是服务器

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

分解：

其实就是配置比较高的电脑

可以被别的电脑访问