CH01_初始HTML

本章目标

了解HTML的概念
了解网站与浏览器
熟练运行HTML基本标签

HTML概述

先用HTMl一些案例演示给同学门

他们是两种编程语言，一般情况下是需要配合使用的，也是做为网站开发的基础语言。（例如：百度淘宝京东等等网站）

做为网站的基础语言，首先大家对对这些网站其实一点都陌生，可以生活中我们天天看到的，比如说我们现在需要去查资料或者什么问题不懂了，我们需要干嘛？是不是需要去百度，问度娘！那如果说我们需要在网络上进行购物了我们是不是会立马想到什么？是不是马上想到了淘宝京东啊我们对这些是不是也不陌生，那么这些网站就是通过编写html和css就构成了这些网站上我们所看到的这些页面！（这里可以打开淘宝百度进行借鉴讲解）

这写编写的HTML CSS代码还需要浏览器进行渲染之后才能看到这些我们编写的美丽的效果，那么也就是说我们编写的这些HTML和CSS代码你是看不到这些效果的，没有浏览器你只能看到一堆代码 HTML和CSS代码只有通过浏览器解析之后我们才可以看到我们现在所见的这些效果

我们来看看没通过流量器解析之前HTML CSS代码是什么样子的，查看的方式Ctrl+U或者鼠标右键点击查看网页源代码

通过浏览器的渲染和解析之后它就会变成这个样子，不一样了吧这就是HTML和CSS 当然现在我们只能看到网站的一部分代码，在这里大家一定要养成一个思想看如何网页和软件时就要想想它底层代码是怎么样子写的，程序员看什么东西都是代码

我们再直观的说一点HTML它是用来干嘛的呀，它就是用来画画的它给这幅画的轮廓画出来了轮廓出来了下一步我们是不是就要给中幅画上色了就要用CSS给这幅画上色修饰加特效了你想想要是我画画所以有的话都是只有一个轮廓没有色彩，是不是不好看那么用上了HTML和CSS是不是就变的很好看了，我们学习这个就是为了规划这个网页的规划这个网站长什么样子以及它后面的一个风格和色彩是什么样子的.

网站的构成

我们了解什么是HTML CSS，他是用来开发网站的那么我们就来了解一下网站的构成，一个完整的网站它难道就是仅仅一个网页构成的吗？它是由N个网页组成的，比如淘宝界面，你每点击一个都会打开它其中的一个网站页面，有登录界面，详情界面推出界面注册界面呀太多太多了就是这些界面组成一个完整的网站

举例：我们可以给它看成一部电视剧，是不是有1集 2集 3及…….我们可以给每一集看作就是我们网站其中的一个页面，是不是这些集数构成了一部电视剧，对比过来，我们网站是不是很多网页构成了我们一个完整的网站，无非区别就是电视剧就是每集视频嘛它的后缀是.MP3 或者.MP4 .AVG等等网页文件后缀就是.HTML .CSS

(这里要教学生如何打开文件后缀)

我们前期编写HTML文件都是用记事本来编辑方便来记住代码，再讲解如何打开编写好的界面和如何编写界面

如何编写一个HTML界面呢？

右击建立txt文件，更改后缀为.HTML 用浏览器打开，这里就有同学问了老师，这个可以看到我们写的源代码吗？当然可以的还是查看网页源代码就可以看到了，又有同学问了老师你这个只有一点点没有别人的多呀？那是人家里面内容很丰富我们之里面内容很简单只是为了演示给同学们看的，想要丰富的内容就要跟着老师好好学习，丰富自己网页的内容了。

主流浏览器

我们是不是通过浏览器来浏览一些信息，说白了它就是用来展示内容的，我们搞前端无法就是给编写好的内容给展示出来给客户使用的，这就是浏览器（后期在讲解URI）。

主流的浏览器 IE Chrome谷歌 Firefox火狐 Safari苹果等几大类

下载谷歌浏览器

https://www.google.cn/chrome/

网站开发流程

前面我们了解了网站的开发需要用到基础语言 HTML+CSS,难道开发一个网站只需要这两种语言就可以了吗？答案当然是不是这样的！假设一个网站好比一个地球，那么HTML+CSS只是地球上的一个小国家而已。

大型网站开发需要一个团队的配置，各个岗位都是缺一不可的。一个网站的开发需要的岗位很多，从技术角度来说有UI设计师，web前端开发，后端开发。

UI设计师：设计网站的设计图

web前端开发需要给UI设计图给它转换成代码，就是HTML和CSS，那么问题来了我们页面中的数据呢？这个时候我们就用到了数据库，因为这些数据不是写死在页面里面的，而是存储在数据库里最终展示到这个页面上的

难道只有前端就可以支撑起一个网站吗？答案肯定是不可以的，还有我们的后端，后端开发其实就是我们的一个前端与后台的一个交互，前端负责收集用户更高的一个数据最终我们可以存到数据库里面或者说我们数据库本来就有这些数据，最终我们给这些数据展示到页面上！它们之间一直相互在做数据交互的，所以说这些岗位都是缺一不可的.

前端就是来规划我们这个网站长什么样子，它有那些色彩如何去摆放，前端就是这样子的，包括移动端！那怎么去摆放怎么去展示呢？唉就是要用到HTML和CSS 我们现在学习的前端就是网站的一个样式展示，就是在最前面展示给用户看的，是整个项目中缺一不可的一个角色.

HTML发展

HTML是Hypertext Markup(马克啊普) Language(朗贵指)的缩写，中文翻译为：超文本标记语言。使用HTML编写的文档称为网页.

W3C结构

world(为奥得)Wide(外得)web Consotium(肯锁t母) 世界万维网联盟

它规范了HTML的标准，从而奠基了web标准化开发的一个基础

也就是从W3C成立以后我们HTML标写有了规范，从HTML诞生到现在已近有了近30年的发展了，那么我们发现一个问题HTML发展中没有1.0版本，在最开始W3C没有成立之前有很多给版本，很多争议所以没有定下来，从而直接进入了2.0版本

HTML定义

超文本：文本内容+非文本内容（音频，视频，声音等）

包括了文本内容，并且它超过文本展示内容，超过了文本的内容

标记：也叫做标签，在两个尖括号之间写上单词：<html>,<head> 等

语言：编程语言

网页开发

HTML基本结构

HTML文档一般都包含了两部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：<html>,<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。

演示给大家看
<html><!--语法开始-->
    <head>
    <!--头部信息，如<title>标签定义网页标题-->
    </head>
    <body>
        <!--主体信息，包括网页显示的内容-->
    <body>
</html> <!--语法结束-->

可以看到，每一个标签都是成对组成的，第一个标签（如<html>）表示标签开始的位置，而第二个标签（如</html>）表示标识结束的位置。<html>标签包含<head>和<body>标签，而<head>和<body>标签是并列排序的（同级别）。

如果把上面字符代码放置文件中，然后可以以”test.html”文件保存，就可以在浏览器中浏览了。当然由于这个见到的HTML文档还没有包含任何信息，所以浏览器中是看不到任何显示内容。

HTML语法规则

编写HTML文档时，必须遵守HTML语法规范。HTML文档由标签和信息混合组成，当然这些标签和信息必须要遵守一定的组合规则，否则浏览器是无法进行解析的。

成对标签语法规则：

1	<元素名称>元素名称</元素名称>

HTML语法的规范条纹并不多，从逻辑上分析，这些标签包含的内容就表示一类对象，也就是成为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语法。

具体如下：

所有标签都包含在”<“和”>“气质标识符中，构成一个标签。如<html><head><body><div><span>等

在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的时元素主体。如<body></body>中间包含的就是网页内容主体。

起始标签包含元素的名称以及可选属性，也就是说，元素的名称和属性都是必须在起始标签中，结束标签以反斜杠开始，然后加上附加上元素名称。

空标签语法规则：

<元素名称 />

虽然大部分标签都是成对出现，但是也有少数标签时不成对的，这些孤立的标签被称为空标签。空标签包含其实标签，灭有结束标签

1 2	<input type="text" /> <img src="" alt="" />

标签的嵌套

标签可以互相嵌套，形成文档结构。嵌套标签必须匹配不能乱套如：<div><span></div></span>这样交错嵌套。合法的嵌套应该时包含或被包含的关系，例如：<div><span></span></div>或<span><div></div></span>

注意：标签要么是包含要么是被包含

HTML文档所有星系必须都包括在<html>标签中，所有文档元信息应用包含在<head>子子标签中，而HTML传递信息和网页显示内容应包含在<body>子标签中。

元信息：<head>中的内容，即编写网页中的一些辅助信息，如图

网页显示内容：<body>元素中的信息，如图

可以说说HTML嵌套

标签释义

<title></title>标签：

是<head>标签中唯一要求包含的东西！是<head>标签中唯一要求包含的东西！

定义文档的标题，在所有HTML文档中是必须的。

那么它有那些元素呢？

定义浏览器工具栏中的标题

提供页面被添加到收藏夹时候的标题

显示在搜索引擎中的页面标题

注意：一个HTML文档中不能有一个以上的<title>元素

<meta />标签：

mate标题提供了HTML文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。

meta标签通常位于<head></head>区域内。

那么它有那些常用的属性呢？

charset:定义文档的字符编码。

常用的值：UTF-8 Unicode 字符编码

ISO-8859-1 拉丁字母表的字符编码

1	<meta charset="character_set">

content:name 属性相关的元信息

name:把 content 属性关联到一个名称

author:规定文档的作者名字。

1	<meta name="author" content="Lin Hui">

description：规定页面的描述，搜索引擎会把这个描述显示在搜索结果中。

keywords：规定一个逗号隔开的关键词列表-相关的网页（告诉搜索引擎页面是与什么相关的）

1	<meta name="keywords" content="HTML, meta tag, tag reference">

<h1>-<h6>标签:

双标签：h1~h6，定义不同的标题的标题，在一个网页中，h1标题是很重要的，并且标准的写法一个.html文件中只能出现一次h1标签。其中h5，h6标题在网页中不经常使用。

注意：它不仅仅是变大加粗，最后重要的是提示用户，标号越大文字越小

先记住它就是一个标题怎么去用就可以了

演示：标题1到标题6
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

<p></p> 标签

元素会自动在其前后创建一些空白，它是独占一篇区域的，浏览器会自动添加这些空间，您也可以在样式中规定

<br/> 标签

插入一个简单的换行符。它是一个空标签，意味着他没有结束标签

提示：如果你希望在不产生一个新段落的情况下进行换行，在写地址信息或者写诗词时
标签非常有用。

注释：请使用 <br/> 标签来输入空行，而不是分割段落。

<p>hello 你好</p>
你好<br/>
我是张三，今年18<br/>
爱好打篮球<br/>

<hr/> 标签

定义了HTML页面中的主体变化（比如话题的转移），并显示为一条水平线。就是在网页中画一条水平线被用来分割HTML页面中的内容。

1 2	<h1>北京欢迎你</h1> <hr/>

这里可以打开一个网页搜索人物通过F12开发者模式进行介绍

<strong></strong> 标签

强调重要加粗：

1	<strong>内容</strong>

加粗标签：

1	<b加粗内容</b>

注意：strong（强调）的效果也是加粗有什么区别呢？

strong是web标准中xhmtl的标签，b是html的，b的意思是bold(粗体)，strong更加标准化可操控性多一般来说都使用strong不到没有选择的时候不要用标签

<em></em>,<i></i> 标签

斜体字体标签：em和i，推荐使用em标签

1 2	<em>内容</em> <i>内容2<i>

它是一个短语标签，用来定义计算机程序的样本重要的文本

区别：一个加粗一个斜体

strong强调性更强，em强调性较弱

注意：我们并不反对使用这些标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

注意点：可以举例一些活跃课堂的字进行显示

1 2	<p>这是在一个<strong>夜深人静的夜晚</strong>小明肚子一个人在安静的敲代码</p> <em>1993</em>年html出现了

<mark></mark> 标签

1	<mark>内容</mark>

可以使用在想要突出的文本。它是HTML5的全新标签

<small></small> 标签

1	<small>内容</small>

<sub></sub> 标签

1	<sub>内容<sub>

解释：通常用在数学公式中

<sup></sup> 标签

1	<sup>内容<sup>

解释：通常用在化学公式中

<ins></ins> 标签

1	<ins>内容</ins>

<del></del> 标签

1	<del>删除线</del>

提示：<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

<img /> 标签

在电脑中我们看到的图签是有很多种格式的，那么我们看到图像名字后面的的扩张名就是图片格式

.JPG

.GIF

.PNG

.BMP

先自己去看一下，有那些格式再带入主题我们要讲的标签就是图像标签，再演示网站举例

img:图像标签 空标签全程image ，图片在网页中非常重要的一个元素，通常一个网页除了有文字类的展示以外，还有一中非常常用的方式就是在网页中插入图片，我们单单打一个img标签就要可以在网页中显示我们想要的图片了吗？是不可以的

属性：

src:图片地址（网络图片/本地图片）

alt:图片的代替文字，当图片出问题的时候，可以显示一段友好的提示文字

title:鼠标悬停提示文字

width:图像宽度

height:图像高度

注意：值需要像素px，后面我们会经常使用css进行修改大小但是也要加上，为了用户体验

相对路径：

是指当前文件所在的路径引起的跟其它文件（或文件夹）的路径关系、

.在路径中表示当前路径

..在路径中表示上一级路径

可以不加“.”但是前提必须在同一路径下

案例：

绝对路径：

从盘符开始的路径，也就是说引入的路径不会参照某一个参照物来引入

<a></a> 标签

a标签就是一个超链接标签，他是一个双标签，也是实现跳转链接的标签。

1	语法：<a href="" target="">文本内容\|图片</a>

常用属性：

href属性：链接地址

target属性：规定在何处打开新的链接文档，默认是在当前页面打开。

值：

_blank:在新窗口中打开被链接文档

_self：默认，在相同的框架中打开被链接的文档

锚链接：

锚谅解是网页制作种超级链接的一种，又叫命名锚记。命名锚记像是一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。(这里可以用网页举例)

a标签中href属性属性值的构成：#号+锚点a标签name属性值，如下

<a href="#hot">聚划算</a>

<a name="hot"></a>

<h2>聚划算</h2>

<base> 标签

为页面上所有的相对谅解规定默认URL或默认目标。在一个文档中最多出现一个<base>元素。<base>标签必须位于<head>元素内部（统一文档中所以的超连接了）

转义符

注释和特殊符号

在PPT上讲解，提示做笔记并且解释为什么要使用特殊符号

注意： 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。一定要养成注释的习惯.

背景颜色、背景图片

bgcolor:设置图片背景颜色,不是浮动于窗口上方,是嵌入到浏览器背景中的

例如:

1
2
3

<body bgcolor="red">
    
</body>

background:设置图片的的路径.路径可以是相对也可以是绝对路径还可以是网络当中的有效路劲

例如:

1
2
3

<body background="tupian.jpg">
    
</body>

扩张内容

路径中的”\“与”/“在windows系统中的路径中”/“和”"都是可以识别，所有在windows系统中它两是通用的，建议大家使用”/“,尽量少使用”"，网络路径中的地址，只可使用”/”，因为网络地址并不属于本地电脑的一部分，所以她这个地址不受windows支配，所以网络路径的必须使用“/”

以上路径内容不仅在图片引用中管用，其它关于路径引用的相关内容中它都是通过的。