1.什么是 HTML？

HTML--超文本标记语言。

超文本--超越文本格式，可以显示图片,视频，音频数据。

标记--html的语法格式，通过这些提前定义好的标记描述内容。

2.HTML的作用？

描述网页【制作网页】---软件界面

总结：HTML就是描述网页【制作网页】的一种超文本标记语言。

3.怎么是使用html制作网页？

3.1 使用记事本制作网页

3.1.1 新建记事本文件

3.1.2 写入html代码

<html><head><title>网页</title></head><body><h1>这是使用记事本创建的网页</h1></body>
</html>

3.1.3 保存记事本文件，关键记事本，修改记事本文件的名【后缀名是“.html”】

3.1.4 在浏览器中运行

4.使用专业的IDE[集成开发环境]制作网页

Notepad++：http://www.html.cn/tool/edit/2.html

Sublime Text：http://www.html.cn/tool/edit/6.html

WebStorm:https://www.html.cn/tool/edit/8.html

HBuilderX: https://www.dcloud.io/hbuilderx.html

VS Code：https://code.visualstudio.com/

我们现在使用的是HBuilderX

4.1下载HBuilderX

4.2安装HBuilderX--在指定目录下解压缩就是可以了。

4.3 双击HBuilderX.exe运行这个工具

4.4 创建html网页

文件----新建----7.html文件

编辑文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页</title></head><body><h1>这是使用HBuilderX创建的html文件</h1></body>
</html>

保存文件

4.5 运行html网页

运行---运行到浏览器---Chrome

4.6 HBuilderX字体大小的调整

Ctrl+Shift+[+]---放大字体 Ctrl+Shift+[-]---缩小字体

4.7 HBuilderX 主体的调整

工具---主题---选择自己想要的

5.网页的运行环境浏览器

无论我们使用的是记事本还是专业的网页制作工具，最终做好的网页都要放在浏览器上运行，因为浏览器是网页的运行环境。

浏览器是用来检索、展示以及传递 Web 信息资源的应用程序。

浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础

上，添加不同的功能构成。

5.1、Trident 内核

代表产品为 Internet Explorer【IE】，又称其为 IE 内核。Trident（又称为 MSHTML），是微软开发的一种排版引擎。使用 Trident 渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等。

Internet Explorer【IE】----Trident 内核

5.2、Gecko 内核

代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。

Firefox---Gecko 内核

5.3、WebKit 内核

代表作品有 Safari、Chrome。WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。

Chrome----WebKit 内核

5.4、Presto 内核

代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。

Opera----Presto 内核

不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。

6.一个html网页的基本结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

一个网页是由2部分组成

第一部分--head标记--表示网页的头部

第二部分--body标记--表示网页的身体

7.html标记

html是超文本标记语言

在html中是通过html语法规定好的标记来描述具体数据的。

html标记也叫html标签还可以叫html元素。

HTML标记是由尖括号包围的关键词组成。比如 <html>/<body>

HTML标记通常是成对出现的【比如 <html> 和 </html>】,也有一些是只有开始标记没有结束标记【单标记】

8.<!DOCTYPE html>

!DOCTYPE html--html声明,出现在网页的第一行

用来告知浏览器页面使用了哪种 HTML 版本,规定使用当前html版本规定的标记显示网页

!DOCTYPE html---声明使用html5的版本，决定当前网页中能使用html5规定的具体标记

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

上面的声明表示使用html4.01版本

目前主流的html版本是html5，html4.01版本已经不使用了，所以常见的声明都是!DOCTYPE html

html5版本声明在编写的时候是不区分大小写的。

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

9.html标记

html标记--成对出现--表示html的根标记，以后所使用的html标记都要被html标记包围。

10.head标记--成对出现--表示html的头部，为浏览器运行当前网页提供附加的说明信息。

这些附加的说明信息除过title标记描述的内容，其他都是对用户不可见

11.title标记--成对出现--设置当前网页的标题

12.body标记--成对出现--表示html的身体，包含网页中需要显示的具体内容，对用户可见。

13.meta标记--单标记---出现在head标记中，浏览器运行当前网页提供附加的说明信息。

meta标记中包函属性---为当前标记提供附加的说明信息。

meta标记中包函属性==【属性名称=”属性值”/ charset="utf-8"】

meta charset="utf-8"---设置当前网页的字符编码是utf-8

meta name="keywords" content="HTML,CSS"---为搜索引擎定义关键词

meta name="description" content="网页描述内容"---为网页定义描述内容

meta name="author" content="wangxingruangjian"---设置网页的作者

meta http-equiv="refresh" content="3"---设置当前网页间隔指定秒数后自动刷新

meta http-equiv="refresh" content="3,url=http://www.baidu.com/"--设置当前网页间隔指定秒数后自动刷至指定页面。

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><meta name="keywords" content="HTML,CSS"/><meta name="description" content="这是我的第一个网页"/><meta name="author" content="wangxingruangjian"/><!--<meta  http-equiv="refresh" content="3"/>--><meta  http-equiv="refresh" content="3,url=http://www.baidu.com/"/><title></title></head><body><h3>meta标记--单标记---出现在head标记中，浏览器运行当前网页提供附加的说明信息</h3><h3>meta标记中包函属性---为当前标记提供附加的说明信息。</h3><h3>meta标记中包函属性==【属性名称=”属性值”/ charset="utf-8"】</h3><h4>meta charset="utf-8"---设置当前网页的字符编码是utf-8</h4><h4>meta name="keywords" content="HTML,CSS"---为搜索引擎定义关键词</h4><h4>meta name="description" content="网页描述内容"---为网页定义描述内容</h4><h4>meta name="author" content="wangxingruangjian"---设置网页的作者</h4><h4>meta  http-equiv="refresh" content="3"---设置当前网页间隔指定秒数后自动刷新</h4><h4>meta  http-equiv="refresh" content="3,url=http://www.baidu.com/"--设置当前网页间隔指定秒数后自动刷至指定页面</h4><h4>一般除过设置网页的字符编码以外，其他的不需要设置</h4></body>
</html>

14.HTML中网页内容的标题标记

网页内容的标题标记（Heading）是通过 <h1> - <h6> 标签进行定义的。

标题标记可以让文本文字加粗放大

h1定义最大的标题。h6定义最小的标题。

用标题来呈现文档结构

浏览器会自动地在标题的前后添加空行。[自动换行]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML 中网页内容的标题标记</title></head><body><h1>HTML 中网页内容的标题标记</h1><h2>网页内容的标题标记（Heading）是通过 h1 - h6 标签进行定义的</h2><h3>标题标记可以让文本文字加粗放大</h3><h4>h1定义最大的标题。h6定义最小的标题。</h4><h5>用标题来呈现文档结构</h5><h6>浏览器会自动地在标题的前后添加空行。[自动换行]</h6></body>
</html>

15.html的水平线标记

hr--单标记--表示一条水平方向的分割线

width属性--设置水平线的长短[具体数字/百分比]

size属性--设置水平线的粗细[具体数字]

color属性--设置水平线的颜色[颜色单词/颜色码]

align属性--设置水平线的水平对齐方式 [left center right]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html的水平线标记</title></head><body><h1>html的水平线标记</h1><h2>hr--单标记--表示一条水平方向的分割线</h2><h3>width属性--设置水平线的长短[具体数字/百分比]</h3><h3>size属性--设置水平线的粗细[具体数字]</h3><h3>color属性--设置水平线的颜色[颜色单词/颜色码]</h3><h3>align属性--设置水平线的水平对齐方式 [left center right]</h3><hr width="50%" size="17" color="#f47920" align="left"></body>
</html>

16.HTML 注释

注释--标注解释说名代码的含义

方便别人,以后的自己还能够看懂代码

注释的内容不会被执行

因为注释的内容不会被浏览器执行，所以我们可以用注释来调试代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html中的注释</title></head><body><h1>HTML注释</h1><h2>注释--标注解释说名代码的含义</h2><h2>方便别人,以后的自己还能够看懂代码</h2><h2>&lt;!-- 注释的描述内容 --&gt;</h2><h2>注释的内容不会被执行</h2><h3>因为注释的内容不会被浏览器执行，所以我们可以用注释来调试代码</h3></body>
</html>

17.HTML 段落

p--成对出现--表示一个html段落，就是一段文字的描述标记

浏览器会自动地在段落的前后添加空行。[自动换行]

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML 段落</title></head><body><h1>HTML 段落</h1><h2>p--成对出现--表示一个html段落，就是一段文字的描述标记</h2><h3>浏览器会自动地在段落的前后添加空行。[自动换行]</h3><p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来.</p><p>在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了生气，变得没有一点可爱之处了。</p></body>
</html>

18.HTML 折行/换行

br--单标记--表示回车换行

在html中的使用键盘的回车键进行的换行，在浏览器中运行时是不会识别的，是无效的

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>html折行/换行</title></head><body><h1>html折行/换行</h1><h2>br--单标记--表示回车换行</h2><h2>在html中的使用键盘的回车键进行的换行，在浏览器中运行时是不会识别的，是无效的</h2><p>春眠不觉晓，<br>处处闻啼鸟。<br>夜来风雨声，<br>花落知多少。</p></body>
</html>

HTML基础总结第一节相关推荐

第一章计算机基础知识第一节,第一章计算机基础知识第一节
第一章计算机基础知识第一节.了解计算机尊敬的各位评委老师: 大家好!我今天说课的题目是<了解计算机>.我将从以下五方面来谈谈对这节课的设计:即说教材.学情分析.说教法和学法.说教学过程 ...
计算机基础知识第一节课最新,计算机基础知识(第一节)课件
计算机基础知识(第一节)课件一般搬家时转盘与大梁间是固定的,开钻前应根据转盘对井架进行校正,如果中途换转盘,则要在空负荷下根据井架对转盘进行校正一般搬家时转盘与大梁间是固定的,开钻前应根据转盘对井 ...
Python编程基础：第一节变量Variables
第一节变量Variables 前言字符串类型的变量(str) 整数类型的变量(int) 浮点类型的变量(float) 布尔类型的变量(bool) 前言变量,简而言之就是一个装有数据的容器,它可以 ...
1.第一章 Java基础语法第一节（一）初识java
初识java 1.java的发展史 1.1.起源 1.2.演变 2.Java体系与特点 2.1java的体系 2.2java的应用 2.3java的特性 3.JVM,JDK,JRE与GC 3.1jav ...
centos 基础命令第一节
感谢老师整理并传授:修改部分内容. 仅用做日后学习之用. 关闭NetworkManager服务: CentOS7:systemctl stop NetworkManager 永久关闭:systemct ...
【C++基础】第一节课 C++基础知识
目录 0 关于c++ Topics 1 一个简单的C++程序 2 函数重载 2.1 重载的概念 2.2 函数重载与重复声明的区别 3 引用的概念 4 引用和指针的区别 5 引用作为函数参数 5.1 引 ...
html5 基础代码,{HTML5}基础核心-第一节-上
一．代码风格 jQuery语法: 基础语法: $(selector ).action(); //$:美元符号用来定义jQuery //选择符(selector) "查询"和&qu ...
计算机科学基础知识第一节讲义 The Missing Semester of Your CS
这节课的链接课程链接运行环境老师的演示电脑采用Linux系统的终端Terminal,可以在Windows电脑上安装WSL实现. echo命令在powershell中也能运行,但是运行echo he ...
Python语言基础（第一节）
1. 计算机是什么基本组成: 主板+cpu+内存购买电脑时应注意: cpu: 主频, 核数(16) 内存: ...

HTML基础总结第一节